1. Toy模板网首页
  2. > Toy博客

JQuery（一）：快速入门、JQ与JS相互转换、JQuery中的选择器

9月前 作者：清 木 分类：Toy博客 阅读(42) 违法举报

这篇具有很好参考价值的文章主要介绍了JQuery（一）：快速入门、JQ与JS相互转换、JQuery中的选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

1.前言

2.JQuery快速入门

2.1使用步骤

3.JQuery对象和JS对象的区别与相互转换

4.JQuery中的选择器 

4.1基本操作学习

4.2分类

①基本选择器

②属性选择器

③表单过滤器选择

1.前言

        jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨    是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优    化HTML文档操作、事件处理、动画设计和Ajax交互。

        JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已。

2.JQuery快速入门

2.1使用步骤

①下载JQuery

目前jQuery有三个大版本：
        1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
                 功能不再新增。因此一般项目来说，使用1.x版本就可以了，
                最终版本：1.12.4 (2016年5月20日)
        2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
                功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
                最终版本：2.2.4 (2016年5月20日)
        3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
                 一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
                 目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）

注意：jquery-xxx.js 与 jquery-xxx.min.js区别：
                1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
                2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快 

②导入JQuery的js文件：导入min.js文件
③使用 

<head>
    <meta charset="UTF-8">
    <title>jq快速入门</title>
    <!--引入外部js‘资源-->
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>

<div id="div1">
    div1...
</div>

<div id="div2">
    div2....
</div>

<script>

    let div1 = $("#div1");
    alert(div1.html());

    let div2 = $("#div2");
    alert(div2.html());


</script>

</body>

3.JQuery对象和JS对象的区别与相互转换

①JQuery对象在操作时，更加方便。
②JQuery对象和js对象方法不通用的.
③ 两者相互转换
        jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
        js -- > jq : $(js对象)

<script>
    //1.通过js方式来获取名称叫div的所有html元素
    let divs = document.getElementsByTagName("div");
    // alert(divs);
    // alert(divs.length);
    //对divs中所有的div更改其标签内容为"aaa"
    for (let i = 0; i < divs.length; i++) {
        // divs[i].innerHTML = "aaa";
        $(divs[i]).html("aaaa")
    }

    //2.通过jq方式获取div的所有html元素
    let $divs = $("div");

    // alert($divs);
    // alert($divs.length);
    //对divs中所有的div更改其标签内容为"bbb"
    // $divs.html("bbb")
    $divs[0].innerHTML = "dddd";
    $divs.get(1).innerHTML = "eee";

</script>

4.JQuery中的选择器 

筛选具有相似特征的元素(标签)

4.1基本操作学习

①事件绑定

//1.获取b1按钮
$("#b1").click(function(){
        alert("abc");
});

 ②入口函数

$(function () {
               
});
window.onload  和 $(function) 区别

  1. window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
  2. $(function)可以定义多次的。

③控制样式：css方法

$("#div1").css("backgroundColor","pink");文章来源地址https://www.toymoban.com/news/detail-573272.html

4.2分类

①基本选择器

<head>
    <title>基本选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
	 </style>
	<script type="text/javascript">
		$(function () {
            //标签选择器（元素选择器）语法： $("html标签名") 获得所有匹配标签名称的元素
			$("#b1").click(function () {
				$("#one").css("backgroundColor","pink");
            });
            //id选择器：语法： $("#id的属性值") 获得与指定id属性值匹配的元素
            $("#b2").click(function () {
                $("div").css("backgroundColor","pink");
            });
            //类选择器：语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
            $("#b3").click(function () {
                $(".mini").css("backgroundColor","pink");
            });
            //并集选择器：语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
            $("#b4").click(function () {
                $("span,#two").css("backgroundColor","pink");
            });
        });

	</script>
   
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
		 <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
		 <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
		 <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
		 
	   <div id="one">
	    	 id为one       
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		 </div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		

		<span class="spanone">class为spanone的span元素</span>
		<span class="mini">class为mini的span元素</span>
		

		<input type="text" value="zhang" id="username" name="username">
	
	</body>

②属性选择器

<head>
    <title>属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			
			div.visible{
				display:none;
			}
	 </style>
	 <script type="text/javascript">
		$(function () {
			// 属性名称选择器 语法： $("A[属性名]") 包含指定属性的选择器
			$("#b1").click(function () {
				$("div[title]").css("backgroundColor","pink");
            });
			// 属性选择器 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
            $("#b2").click(function () {
                $("div[title='test']").css("backgroundColor","pink");
            });
			
            $("#b3").click(function () {
                $("div[title!='test']").css("backgroundColor","pink");
            });
			
            $("#b4").click(function () {
                $("div[title^='te']").css("backgroundColor","pink");
            });
			
            $("#b5").click(function () {
                $("div[title$='est']").css("backgroundColor","pink");
            });
			// <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
            $("#b6").click(function () {
                $("div[title*='es']").css("backgroundColor","pink");
            });
			// 复合属性选择器 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
            $("#b7").click(function () {
                $("div[id][title*='es']").css("backgroundColor","pink");
            });

        });
		
		
	</script>
   
	 
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
		 <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
		 <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
		 <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
		 <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
		 <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
		 <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
		 
		 
	   <div id="one">
	    	 id为one   div  
		 </div>
		
		 <div id="two" class="mini"  title="test">
	    	   id为two   class是 mini  div  title="test"
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="visible" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" title="test02">
		 	  class是 one    title="test02"
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" style="margin-top:0px;">class是 mini</div>
		</div>
		
		
		<div class="visible" >
		 	  这是隐藏的
		</div>
		
		<div class="one">
			
		</div>
		
		<div id="mover" >
		 	  动画
		</div>
		
		<input type="text" value="zhang" id="username" name="username">
	</body>

③表单过滤器选择

<head>
    <title>表单属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			#job{
				margin: 20px;
			}
			#edu{
				margin-top:-70px;
			}
			
	 </style>
    <script type="text/javascript">
	
		$(function () {
			// 可用元素选择器 语法： :enabled 获得可用元素
			$("#b1").click(function () {
				$("input[type='text']:enabled").val("aaa");
            });
			// 不可用元素选择器 语法： :disabled 获得不可用元素
            $("#b2").click(function () {
                $("input[type='text']:disabled").val("aaa");
            });
			// 选中选择器 语法： :checked 获得单选/复选框选中的元素
            $("#b3").click(function () {
                alert($("input[type='checkbox']:checked").length);
            });
			// 选中选择器 语法： :selected 获得下拉框选中的元素
            $("#b4").click(function () {
                alert($("#job > option:selected").length);
            });

        });
		
	</script>
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
		 <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
		 <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
		 <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
 
 		<br><br>
 		
         <input type="text" value="不可用值1" disabled="disabled"> 
		 <input type="text" value="可用值1" >
		 <input type="text" value="不可用值2" disabled="disabled">
		 <input type="text" value="可用值2" >
		 
		 <br><br>
		 <input type="checkbox" name="items" value="美容" >美容
		 <input type="checkbox" name="items" value="IT" >IT
		 <input type="checkbox" name="items" value="金融" >金融
		 <input type="checkbox" name="items" value="管理" >管理
		 
		 <br><br>
		 
		  <input type="radio" name="sex" value="男" >男
		  <input type="radio" name="sex" value="女" >女
		  
         <br><br>
		 
		  <select name="job" id="job" multiple="multiple" size=4>
          	<option>程序员</option>
			<option>中级程序员</option>
			<option>高级程序员</option>
			<option>系统分析师</option>
          </select>
		    
          <select name="edu" id="edu">
          	<option>本科</option>
			<option>博士</option>
			<option>硕士</option>
			<option>大专</option>
          </select> 
	  		
	  	<br/>
	  		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
	</body>

到了这里，关于JQuery（一）：快速入门、JQ与JS相互转换、JQuery中的选择器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • JQuery快速入门

    JQuery是一个快速、简洁且功能丰富的JavaScript库，它封装了JavaScript常用的操作，提供了一种简单的方式来操作HTML文档、处理事件、创建动画、处理AJAX请求等。JQuery不仅可以减少编写代码的工作量，也可以提高代码的可读性和可维护性。 load和get是JQuery中常用的两种AJAX请求方式

    2024年02月01日
    浏览(29)
  • jQuery.js - 前端必备的Javascript库

    jQuery.js - 前端必备的Javascript库

    作者: WangMin 格言: 努力做好自己喜欢的每一件事 jQuery.js 是什么？ jQuery是一个快速简洁、免费开源易用的JavaScript框架， 倡导写更少的代码，做更多的事情 。它封装JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，以及我们开发中常用到的操作DOM的API，优化HTML文

    2024年02月05日
    浏览(77)

  • JS时间对象（Date）与字符串（String）相互转换

    运行结果： D:DevEnvironmentNodeJsnode.exe D:MyProjectscoding-studysrcmainresourcesstaticutils.js format1 = 2022年09月23日 23:24:39.836 星期五 第3季度 format2 = 2022年9月23日 11:24:39.836 am 周五 第3季度 format3 = 2022-09-23 23:24:39.836 am 五 Process finished with exit code 0 运行结果： D:DevEnvironmentNodeJsnode.exe

    2024年02月16日
    浏览(49)
  • js实现base64,url,blob之间的相互转换

    js实现base64,url,blob之间的相互转换

    一般来说前端展示图片会通过三种方式： url、base64、blob 1.url: 一般来说，图片的显示还是建议使用url的方式比较好。 2.base64： 如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为其Base64编码后的字符串非常大，会明显增大HTML页面，影响加载速度。如果图

    2023年04月27日
    浏览(53)
  • uniapp图片转base64及JS各文件类型相互转换

    uniapp图片转base64及JS各文件类型相互转换

    App H5 微信小程序 快手小程序 京东小程序 √ √ √ √ √ 功能限制主要在arrayBufferToBase64 微信小程序 字节跳动小程序 QQ小程序 √ √ √ 功能限制主要在getFileSystemManager H5 √ 功能限制主要在FileReader实例上 在 JavaScript 中的经常用到的二进制的格式有三种： ArrayBuffer：用来表示通

    2024年02月08日
    浏览(52)

  • 前端 jQuery 如何将时间转换为yyyy-MM-dd格式的

    可以使用 JavaScript 内置的 Date 对象和其提供的方法来实现将时间转换为指定格式的字符串。具体可以使用以下代码： 上述代码中，我们首先创建了一个 Date 对象，然后使用其提供的 getFullYear() 、 getMonth() 和 getDate() 方法获取了年份、月份和日期。注意， getMonth() 方法返回的月

    2024年02月06日
    浏览(42)
  • Data与Java8中的LocalDate相互转换

    Data与Java8中的LocalDate相互转换

    一、前言 Date这个类在 java.util包 中，始于jdk1.0。后来在jdk1.8时，针对日期类进行了一个大的更新，专门新建了 java.time包 ，新的日期类LocalDateTime就在这个包中。 日常工作中，很容易碰到旧日期类Date，与新日期类LocalDateTime的相互转换。下面就介绍一下如何进行转换 二、思路

    2024年02月16日
    浏览(50)
  • 浅谈 JSON 对象和 FormData 相互转换，打通前端与后端的通信血脉

    浅谈 JSON 对象和 FormData 相互转换，打通前端与后端的通信血脉

    大家都知道，前端在和后台进行交互联调时，肯定避免不了要传递参数，一般情况下， params 在 get 请求中使用，而 post 请求下，我们有两种常见的传参方式： JSON 对象格式和 formData 格式，但是一些场景是需要我们对这两种数据格式进行转换的，例如表单提交，有些是 JSON 对

    2023年04月16日
    浏览(52)
  • js实现base64、url和blob之间相互转换的三种方式

    js实现base64、url和blob之间相互转换的三种方式

    Blob对象表示一个不可变、原始数据的类文件对象,Blob表示的不一定是JavaScript原生格式的数据,下面这篇文章主要给大家介绍了关于js实现base64、url和blob之间相互转换的三种方式 url 转 base64 Blob 转 url Blob 转 base64 base64 转Blob base64 转 url 一般来说前端展示图片会通过三种方式：

    2024年02月03日
    浏览(51)

  • jq如何获取选中option的值_使用jquery操作select（获取选中option的值等）

    总结下使用jQuery操作select的方法。 1.获取第一个候选项的值。 $(\\\'#test option:first\\\').val(); 2.获取最后一个候选项的值。 $(\\\'#test option:last\\\').val(); 3.获取第二个候选项的值。 $(\\\'#test option:eq(1)\\\').val(); 4.获取选中的候选项的值。 $(\\\'#test\\\').val(); $(\\\'#test option:selected\\\').val(); 5.设置值为2的候选项

    2023年04月08日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包