jQuery选择器之基本选择器和层次选择器

最新推荐文章于 2022-01-24 07:00:00 发布

龙腾四海365

最新推荐文章于 2022-01-24 07:00:00 发布

阅读量590

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u011637069/article/details/50146873

版权

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

jQuery选择器之基本选择器和层次选择器

1.什么是选择器？

jQuery模仿css选择器的语法提供的一种用来方便查找要操作的节点的语法规则。

2.基本选择器

#id

.class

element

selector,select2...selectn

代码示例：/jQuery01/WebRoot/selector/s1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本选择器的使用</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    	//id class 选择器
    	function f1(){
        	//jQuery选择器查找到了多个dom节点，仍然是封装成一个
        	//jQuery对象，调用jQuery对象的属性或者方法，默认情况 
        	//下，会作用于底层所有的dom节点之上。
			var $obj = $('p.s1');
			$obj.css('font-size','60px');
        }
        //元素选择器
        function f2(){
			$('div').css('font-size','40px');
        }
        //同时选择多个
        function f3(){
			$('#d1,p').css('font-size','60px').css('color','red');
        }
        //
        function f4(){
			$('*').css('color','red');
        }
    </script>
  </head>
  <body style="font-size:30px;">
  	<div id="d1">hello jQuery</div>
  	<div class="s1">hello java</div>
  	<p class="s1">hello perl</p>
  	<input type="button" value="基本选择器的使用"
  	οnclick="f4();"/>
  </body>
</html>

3.层次选择器

select1 select2 : 考虑所有后代

select1>select2 : 只考虑子节点

select1+select2 : 下一个兄弟

select1~select2 : 下面所有的兄弟

代码示例：/jQuery01/WebRoot/selector/s2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>层次选择器的使用</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    	//select1 select2 所有符合的节点
    	function f1(){
        	//length属性为当前jQuery对象封装的dom节点的个数
			//alert($('#d1 div').length);  //4
			$('#d1 div').css('font-size','60px');
        }
        //select1>select2 子节点
        function f2(){
        	alert($('#d1>div').length);
			$('#d1>div').css('background-color','green');
        }
       //select1+select2 下一个兄弟
       function f3(){
        	alert($('#d3+div').length);
			$('#d3+div').css('font-size','60px');
        }
     //select1~select2 下面所有的兄弟
       function f4(){
        	//alert($('#d3~div').length);
			$('#d2~div').css('background-color','yellow');
        }
    </script>
  </head>
  <body style="font-size:30px;">
  	<div id="d1">
  		<div>111</div>
		<div id="d2">hello1</div>
		<div id="d3" style="width:200px;height:200px;
			background-color:red;">
			<div id="d4" style="width:150px;height:50px;
				background-color:#ccc;">hello2</div>
		</div>
		<div id="d5">hello3</div>
		<div id="d6">hello4</div>
	</div>
  	<input type="button" value="层次选择器的使用"
  	οnclick="f4();"/>
  </body>
</html>