Jquery选择器总结一

jquery

javaScript框架,封装了js

好处:使用方便,少代码多功能。

  实现同一个功能的代码量少。

  屏蔽浏览器差异。

  简化ajax开发。

选择器

基本选择器

1、 id选择器

$(“#id”);è返回指定id的标签,为jquery对象。

2、 元素选择器

$(“tagName”);è返回指定tagName的标签,为jquery对象。

3、 class选择器

$(“.样式表名”);è返回指定样式类名的标签,并包装成jquery对象返回。

4、 多个选择器公用

交集:$(“selector1selector2selector3……”);è返回所有选择器所能匹配到的标签的交集

并集:$(“selector1,selector2,selector3,……”);è返回所有选择器所能匹配到的标签的并集

注:多个选择器共用时,都是从左到右的解析顺序。

每一个jquery里都是一个数组,这个数组是用来存放他所能匹配到的标签(即封装而来的js对象)。

层级选择器

1、 后代选择器(祖孙选择器)

$(“祖先 子孙”);è获得祖先标签下的所有子孙标签

2、 父子选择器

$(“父亲>孩子”);è获得父亲标签下的孩子标签

3、 紧邻兄弟选择器

$(“selector1+selector2”);è选取selector1兄弟节点中的紧挨着的selector2

4、 非紧邻兄弟选择器

$(“selecotr1~selector2”);è选取selector1下面的所有兄弟节点selector2

下面是代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="div" class="dv">
		<input type="text"  value="123" id="a"  class="b"/>
		<input type="button" value="测试id" οnclick="idCheck()"/>
		<input type="button" value="测试元素选择器" οnclick="eleCheck()"/>
		<input type="button" value="测试类选择器" οnclick="ClassCheck()"/>
		<input type="button" value="全选择器" οnclick="ALlCheck()"/>
		<input type="button" value="多个选择器公用交集" οnclick="manys()"/>
		<input type="button" value="多个选择器公用并集" οnclick="manyss()"/>
		<input type="button" value="后代选择器" οnclick="houdai()"/>
		<span>brother</span>
		<input type="button" value="紧邻兄弟选择器" οnclick="jinlin()"/>
		<input type="button" value="非紧邻兄弟选择器" οnclick="feijinlin()"/>
		</div>
		<p style="display: none" id="sh">Hello</p>
		
		<button id="go"> Run</button>
		<div id="block">Wa!</div>
		
		<button id="left">«</button> <button id="right">»</button>
		<div class="block"></div>
	</body>
	<script src="js/jquery.1.9.2.min.js" type="text/javascript">
	</script>
	
	<script type="text/javascript">
		$(function(){
			
			var a = $("#a")
			console.log(a);
			
		});
		//id选择器
		function idCheck(){
			var str = $("#a");
			alert("jquery对象:"+str.val());
			alert("js对象:"+str.get(0).value);
		}
		//元素选择器
		function eleCheck(){
			var str = $("input");
			alert("jquery对象:"+str.val());
			alert("js对象:"+str.get(0).value);
		}
		//类选择器
		function ClassCheck(){
			var str = $(".b");
			alert("jquery对象:"+str.val());
			alert("js对象:"+str.get(0).value);
		}
		//全选择器
		function ALlCheck(){
			var str = $("*");
			alert(str.html());
		}
		//多个选择器公用交集
		function manys(){
			var inputs = $("input#a.b");
			alert(inputs.val());
		}
		//多个选择器公用并集
		function manyss(){
			var alls = $("body,input");
			for(var i=0;i<alls.length;i++){
			var temp = alls[i];
			alert(temp.id);//获取的是id选择器
		}
		}
		//后代选择器
		function houdai(){
		var inputs = $("div#a ");
		alert(inputs.length);
		
		} 
		//紧邻兄弟选择器
		function jinlin(){
		var brother_jinlin = $("span+input");
		alert(brother_jinlin.length);
		
		}
		//非紧邻兄弟选择器
		function feijinlin(){
		var feijinlin_brother = $("span~input");
		alert(feijinlin_brother.length);
		}
		
		$("#sh").show("slow");
		
		$("#go").click(function(){
  		$("#block").animate({ 
	    	 "90%",
	    	height: "100%", 
	    	fontSize: "10em", 
	   		borderWidth: 10
  		}, 1000 );
		});
		
		//让指定元素左右移动
		$("#right").click(function(){
		  $(".block").animate({left: '+50px'}, "slow");
		});
		
		$("#left").click(function(){
		  $(".block").animate({left: '-50px'}, "slow");
		});
	</script>
</html>


原文地址:https://www.cnblogs.com/jatpeo/p/11767573.html