zoukankan      html  css  js  c++  java
  • 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>
    


  • 相关阅读:
    Oracle Instant Client(即时客户端) 安装与配置
    Windows 下 Toad 如何使用 Oracle instantclient 32位客户端
    Oracle 内存(SGA,PGA)详细介绍
    深入解析Oracle 10g中SGA_MAX_SIZE和SGA_TARGET参数的区别和作用
    Android中的Touch事件
    Activity源码简要分析总结
    Android中的Interpolator
    Android 触摸手势基础 官方文档概览
    Android中View的绘制过程 onMeasure方法简述 附有自定义View例子
    Android TextView走马灯效果
  • 原文地址:https://www.cnblogs.com/jatpeo/p/11767573.html
Copyright © 2011-2022 走看看