jQuery基本语法和选择器

最新推荐文章于 2023-06-11 13:49:24 发布

我可能是个假开发

最新推荐文章于 2023-06-11 13:49:24 发布

阅读量1.9k

点赞数

分类专栏：前端 jQuery

本文链接：https://blog.csdn.net/CSDN_GIA/article/details/54810512

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

jQuery

16 篇文章 0 订阅

订阅专栏

jQuery

一、jQuery介绍

1、JS类库

l JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。

2、当前流行的JavaScript库

l jQuery ，最流行

l EXT_JS，2.0开始收费

l Dojo ，很多js单独文件，优化：打包。（常见：开发小图标，一张图片）

l Prototype，对js扩展，框架开发。

l YUI(Yahoo! User Interface) ，taobao之前使用。

l 淘宝UI：http://docs.kissyui.com/

l Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。基于jQuery一个UI工具

3、jQuery介绍

l JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），

jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，

并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，

同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，

也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

l 轻量级：依赖程序少，占用的资源的少

l 特点：js代码和html代码分离

l jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

l 由美国人John Resig在2006年1月发布

l jQuery是免费、开源的

l jQuery分类：

WEB版本：我们主要学习研究

UI版本：集成了UI组件

mobile版本：针对移动端开发

qunit版本：用于js测试的

4、版本介绍

5、优点

l 核心理念是write less,do more(写得更少,做得更多)

l 轻量级：源码1.11.js大小是286kb，压缩班1.11.min.js大小是94.1k。如果使用GZIP压缩更小。

l 兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari2.0+, Opera 9.0+）

l jQuery的语法设计可以使开发者更加便捷

l 例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

l jQuery能够使用户的html页面保持代码和html内容分离

l 不用再在html里面插入一堆js来调用命令了，只需要定义id即可

l jQuery提供API让开发者编写插件，有许多成熟的插件可供选择

l 文档说明很全

二、基本语法

1、jQuery语法

<script type="text/javascript">
		//js 执行时，有加载顺序
		
		/* jQuery获得数据
		 * * 语法：$("选择器")   == jQuery("选择器")
		 * 
		 */
		
		var username = $("#username");
		// * val()函数 用于获得 value属性的值
		alert(username.val());
		
	</script>

2、jQuery对象和dom对象转换

<script type="text/javascript">
		//1 使用javascript获得value值
		var username = document.getElementById("username");
		//alert(username.value);
		
		//2 将 dom对象 转换 jQuery对象
		// * 语法：$(dom对象)
		// * 建议：jQuery对象变量名，建议为$开头
		var $username = $(username);
//		alert($username.val());
		
		//3 将 jQuery对象 转换 dom对象
		//3.1 jQuery对象内部使用【数组】存放所有的数据，可以数组的下标获取（索引）
		var username2 = $username[0];
		alert(username2.value);
		//3.2 jQuery提供函数 get() 转换成dom对象
		var username3 = $username.get(0);
		alert(username3.value);
	</script>

三、选择器

1、基本

#id ， id选择器，<xxxid=""> 通过id值获得元素

element，标签选择器，<xxx> 通过标签名获得元素

.class ，类选择器，<xxx class="">通过class值获得元素。注意：使用点开头

s1,s2,... 多选择器，将多个选择器的结果添加一个数组中。

--------------------------------------------

* 所有

<title>01-基本选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 
 <script type="text/javascript">
 	// javascript 通过页面加载成功 window.onload = function(){....}
	// jQuery 页面加载
	$(document).ready(function(){
		//alert("中码？");
	});
	
	$(document).ready(function(){
//  <input type="button" value="选择 id为 one 的元素." id="btn1"/> 
		 $("#btn1").click(function(){
		 	$("#one").css("background-color","#ff0"); //网络三原色：红绿蓝RGB ，取值：0-255，格式：#FFFFFF ,简化版FFF
		 });
//  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
		$("#btn2").click(function(){
			$(".mini").css("background-color","#ff0");
		});
//  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
		$("#btn3").click(function(){
			$("div").css("background-color","#ff0");
		});
//  <input type="button" value="选择 所有的元素." id="btn4"/>
		$("#btn4").click(function(){
			$("*").css("background-color","#ff0");
		});
//  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
		$("#btn5").click(function(){
			$("span,#two").css("background-color","#ff0");
		});
	});
 
  </script>

<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
 <h3>基本选择器.</h3>
 
 <!-- 控制按钮 -->
  <input type="button" value="选择 id为 one 的元素." id="btn1"/>  
  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
  <input type="button" value="选择 所有的元素." id="btn4"/>
  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>

  <br /><br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在执行动画的span元素.</span>

</body>

2、层级

A B ，获得A元素内部所有的B后代元素。（爷孙）

A > B ，获得A元素内部所有的B子元素。（父子）

A + B ，获得A元素后面的第一个兄弟B。（兄弟）

A ~ B ，获得A元素后面的所有的兄弟B。（兄弟）

<title>02-层次选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
  <script type="text/javascript">
  	$(document).ready(function(){
//  <input type="button" value="选择 body内的所有div元素." id="btn1"/>
		$("#btn1").click(function(){
			$("body div").css("background-color","#ff0");//某一个区域所有div（此时body中）
			//$("div").css("background-color","#ff0");  //整个页面所有div
		});
//  <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
		$("#btn2").click(function(){
			$("body>div").css("background-color","#ff0");
		});
//  <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
		$("#btn3").click(function(){
			$("#one+div").css("background-color","#ff0");
		});
//  <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
		$("#btn4").click(function(){
			$("#two~div").css("background-color","#ff0");
		});
//  <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>
		$("#btn5").click(function(){
			$("#two").siblings("div").css("background-color","#ff0");
		});
	});
  
  </script>

3、基本过滤

l 过滤选择器格式 “：关键字”

:first ,第一个

:last ,最后一个

:eq(index) ，获得指定索引

:gt(index) 大于

:lt(index) 小于

:even 偶数，从 0 开始计数。例如：查找表格的1、3、5...行（即索引值0、2、4...）

:odd 奇数

:not(selector) 去除所有与给定选择器匹配的元素

------------------------------

:header 获得所有标题元素。例如：<h1>...<h6>

:animated 获得所有动画

:focus 获得焦点

<title>03-基本过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />   
  <script type="text/javascript">
  	$(document).ready(function(){
//  <input type="button" value="选择第一个div元素." id="btn1"/>
		$("#btn1").click(function(){
			$("div:first").css("background-color","#ff0");
		});
//  <input type="button" value="选择最后一个div元素." id="btn2"/>
		$("#btn2").click(function(){
			$("div:last").css("background-color","#ff0");
		});
//  <input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
		$("#btn3").click(function(){
			$("div:not('.one')").css("background-color","#ff0");
		});
//  <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
		$("#btn4").click(function(){
			$("div:even").css("background-color","#ff0");
		});
//  <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
		$("#btn5").click(function(){
			$("div:odd").css("background-color","#ff0");
		});
//  <input type="button" value="选择索引值等于3的元素." id="btn6"/>
		$("#btn6").click(function(){
			$("div:eq(3)").css("background-color","#ff0");
		});
//  <input type="button" value="选择索引值大于3的元素." id="btn7"/>
		$("#btn7").click(function(){
			$("div:gt(3)").css("background-color","#ff0");
		});
//  <input type="button" value="选择索引值小于3的元素." id="btn8"/>
		$("#btn8").click(function(){
			$("div:lt(3)").css("background-color","#ff0");
		});
//  <input type="button" value="选择所有的标题元素." id="btn9"/>
		$("#btn9").click(function(){
			$(":header").css("background-color","#ff0");
		});
//  <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
		$("#btn10").click(function(){
			$(":animated").css("background-color","#ff0");
		});
//  <input type="text" value="请输入账号" defaultValue="请输入账号" />
//  <input type="text" value="请输入密码" defaultValue="请输入密码"/>
//		$("input[type='text']").blur( fn ).focus( fn );
		$("input[type='text']").on("blur focus",function(){
			
			//1 获得默认值
			var dv = $(this).attr("defaultValue");
			
			//2 判断是否获得焦点
			if( $(this).is(":focus") ){
				//2.1 获得焦点，如果是默认值 ，清空value值 ，this 当前执行对象，是dom对象
				if( $(this).val() == dv){
					$(this).val("");
					$(this).css("color","#000");
				}
			} else {
				//2.2 失去焦点，如果内容为空，设置默认值  , 或  $(this).val().length == 0
				if( $(this).val() == "" ){
					$(this).val(dv);
					$(this).css("color","#999");
				}
			}
			
			
		});
	});
  
  </script>

4、内容过滤

:empty 当前元素是否为空（是否有标签体--子元素、文本）

:has(...) 当前元素，是否含有指定的子元素

:parent 当前元素是否是父元素

:contains( text ) 标签体是否含有指定的文本

<title>04-内容过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
  <script type="text/javascript">
  	$(document).ready(function(){
//  <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
		$("#btn1").click(function(){
			$("div:contains('di')").css("background-color","#ff0");
		});
//  <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
		$("#btn2").click(function(){
			$("div:empty").css("background-color","#ff0");
		});
//  <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
		$("#btn3").click(function(){
			$("div:has('.mini')").css("background-color","#ff0");
		});
//  <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
		$("#btn4").click(function(){
			$("div:parent").css("background-color","#ff0");
		});
	});
  
  </script>

5、可见性过滤

:hidden 隐藏。特指 <xxxstyle="display:none;"> ，获得 <inputtype="hidden">

:visible 可见（默认）

<title>05-可见性过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />   
  <script type="text/javascript">
  	$(document).ready(function(){
//  <input type="button" value=" 选取所有可见的div元素"  id="b1"/>
		$("#b1").click(function(){
			$("div:visible").css("background-color","#ff0");
		});
//  <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
		$("#b2").click(function(){
			$("div:hidden").css("background-color","#ff0").show(1000);
		});
//  <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
		$("#b3").click(function(){
			//alert($("input:hidden").val());  //获得值时，默认第一个的值
			// each函数
			$("input:hidden").each(function(){
				alert( $(this).val() );
			});
		});
//  <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>
		$("#b4").click(function(){
			// $.each 全局函数
			// * 回调函数
			// ** 参数1：index 遍历索引
			// ** 参数2：domEle 当前遍历的对象，及==this
			//
			$.each($("input:hidden"),function(index, domEle){
				alert(index + " @ " +  $(domEle).val() );
			});
		});
	});
  
  </script>

6、属性

[属性名] 获得指定的属性名的元素

[属性名=值] 获得属性名等于指定值的的元素【1】

[属性名!=值] 获得属性名不等于指定值的的元素

[as1][as2][as3].... 复合选择器，多个条件同时成立。类似 where ...and...and【2】

---------------------------------------

[属性名^=值] 获得以属性值开头的元素

[属性名$=值] 获得以属性值结尾的元素

[属性名*=值] 获得含有属性值的元素

<title>06-属性选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
 <script type="text/javascript">
 	$(document).ready(function(){
//  <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
		$("#btn1").click(function(){
			// <xxx title="">   <xxx title="yyy">  <xxx title>
			$("div[title]").css("background-color","#ff0");
		});
//  <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
		$("#btn2").click(function(){
			$("div[title='test']").css("background-color","#ff0");
		});
//  <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
		$("#btn3").click(function(){
			$("div[title!='test']").css("background-color","#ff0");
		});
//  <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
		$("#btn4").click(function(){
			$("div[title^='te']").css("background-color","#ff0");
		});
//  <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
		$("#btn5").click(function(){
			$("div[title$='est']").css("background-color","#ff0");
		});
//  <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
		$("#btn6").click(function(){
			$("div[title*='es']").css("background-color","#ff0");
		});
//  <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
		$("#btn7").click(function(){
			$("div[id][title*='es']").css("background-color","#ff0");
		});
	});
 
  </script>

7、子元素过滤

:nth-child(index) ，获得第几个孩子，从1开始。

:first-child ，获得第一个孩子

:last-child ，获得最后孩子

:only-child ，获得独生子

<script type="text/javascript">
 	$(document).ready(function(){
//  <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
		$("#btn1").click(function(){
			// 子元素选择使用前提，表达式前面必须是元素。例如：$("div:nth-child(2)")
			// 	如果元素上添加条件，必须使用空格。例如：$("div[class='one'] :nth-child(2)")
//			$("div[class='one'] :nth-child(2)").css("background-color","#ff0");
			$("div.one :nth-child(2)").css("background-color","#ff0");
			
			/* 对比：
			 * $("div.one")	所有的div，自己的样式为one
			 * $("div .one")  所有的div中后代元素，样式为one
			 */
		});
//  <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
		$("#btn2").click(function(){
			$("div.one :first-child").css("background-color","#ff0");
		});
//  <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
		$("#btn3").click(function(){
			$("div.one :last-child").css("background-color","#ff0");
		});
//  <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
		$("#btn4").click(function(){
			$("div.one :only-child").css("background-color","#ff0");
		});
	});
 
  </script>

8、表单过滤

:input 所有的表单元素。（<input>/ <select> / <textarea> / <button>）

:text 文本框<input type="text">

:password 密码框<input type=" password ">

:radio 单选<input type="radio">

:checkbox 复选框<input type="checkbox">

:submit 提交按钮<input type="submit">

:image 图片按钮<input type="image" src="">

:reset 重置按钮<input type="reset">

:file 文件上传<input type="file">

:hidden 隐藏域<input type="hidden"> ,还可以获得<xxx style="display:none">

~~其他值：<br> <option> ,存在浏览器兼容问题~~

:button 所有普通按钮。 <button > 或 <inputtype="button">

<script type="text/javascript">
  //<![CDATA[
  $(document).ready(function(){

    var $alltext = $("#form1 :text");
    var $allpassword= $("#form1 :password");
    var $allradio= $("#form1 :radio");
    var $allcheckbox= $("#form1 :checkbox");

	var $allsubmit= $("#form1 :submit");
	var $allimage= $("#form1 :image");
	var $allreset= $("#form1 :reset");
	var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
	var $allfile= $("#form1 :file");
    var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
    var $allselect = $("#form1 select");
    var $alltextarea = $("#form1 textarea");
    
	var $AllInputs = $("#form1 :input"); //#form1 表单中，所有的表单元素，可以获得input、select等
	var $inputs = $("#form1 input");	//#form1表单中，所有的input元素

    $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
	        .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
			.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
            .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
			.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
            .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
			.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
			.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
			.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
			.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
			.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
			.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
			.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
			.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
			.css("color", "red")

	//显示所有的隐藏标签名称
	$allhidden.each(function(){
//		$("div").append("<br/>").append($(this).get(0).nodeName);
		$("div").append("<br/>").append(this.nodeName);
	});

    $("form").submit(function () { return false; }); // return false;不能提交.
	
  });
  //]]>
  </script>

9、表单对象属性过滤

:enabled 可用

:disabled 不可用。<xxx disabled="disabled">或<xxxdisabled=""> 或 <xxx disabled>

:checked 选中（单选框radio、复选框 checkbox）

:selected 选择（下拉列表 select option）

<script type="text/javascript">
  	$(document).ready(function(){
//  <button id="btn1">对表单内 可用input 赋值操作.</button>
		$("#btn1").click(function(){
			$("input:enabled").val("aaaaaaaaaaa");
		});
//  <button id="btn2">对表单内 不可用input 赋值操作.</button>
		$("#btn2").click(function(){
			$("input:disabled").val("bbbbbbbbb");
		});
//  <button id="btn3">获取多选框选中的个数.</button>
		$("#btn3").click(function(){
//			var s1 = $("[name='newsletter']:checked").length;
			var s1 = $("[name='newsletter']:checked").size();
			alert(s1);
		});
//  <button id="btn4">获取下拉框选中的内容.</button>
		$("#btn4").click(function(){
			// 获得选中标签<option value="">text</option>
			$(":selected").each(function(){
				// val() 获得option时，如果没有value值，将获得text的值
				// html() 获得标签体的内容
				$("#selectDivId").append(  $(this).html()  );
			});
		});
	});
  
  </script>

我可能是个假开发

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery基本语法和选择器

jQuery一、jQuery介绍1、JS类库l JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。2、当前流行的JavaScript库l jQuery ，最流行l EXT_JS，2.0开始收费l Dojo ，很多js单独文件，优化：打包。（常见：开发小图标，一张图片）l
复制链接

扫一扫