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({

	    	width: "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>