读jQuery之三（构建选择器）

最新推荐文章于 2024-09-10 09:52:41 发布

longx_ok

最新推荐文章于 2024-09-10 09:52:41 发布

阅读量141

点赞数

分类专栏： Jquery 文章标签： jquery ViewUI

本文链接：https://blog.csdn.net/longx_ok/article/details/84525815

版权

Jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

读jQuery之三（构建选择器）

前面两篇已经道明了jQuery的核心框架。弄清楚了jQuery对象的组成，以及如何用extend方法来扩展库。链式操作也仅仅是方法体内返回this。

为了叙述每一篇的重点，其示例代码都是最精简的，比如选择器只能传HTMLElement和id。

这篇我们增强下选择器，依据2/8原则，这里仅实现最常用的几种。

1, 通过id获取,该元素是唯一的

2, 通过className获取

 
      
           $( 
           '.cls' 
           )  
           // 获取文档中所有className为cls的元素 
          
 
           $( 
           '.cls' 
           , el) 
          
 
           $( 
           '.cls' 
           ,  
           '#id' 
           ) 
          
 
           $( 
           'span.cls' 
           )  
           // 获取文档中所有className为cls的span元素 
          
 
           $( 
           'span.cls' 
           , el)  
           // 获取指定元素中className为cls的元素, el为HTMLElement (不推荐) 
          
 
           $( 
           'span.cls' 
           ,  
           '#id' 
           )  
           // 获取指定id的元素中className为cls的元素 
          
 
    

3, 通过tagName获取

 
      
           $( 
           'span' 
           )  
           // 获取文档中所有的span元素 
          
 
           $( 
           'span' 
           , el)  
           // 获取指定元素中的span元素, el为HTMLElement (不推荐) 
          
 
           $( 
           'span' 
           ,  
           '#id' 
           )  
           // 获取指定id的元素中的span元素 
          
 
    

4, 通过attribute获取

 
      
           $( 
           '[name]' 
           )  
           // 获取文档中具有属性name的元素 
          
 
           $( 
           '[name]' 
           , el) 
          
 
           $( 
           '[name]' 
           ,  
           '#id' 
           ) 
          
 
           $( 
           '[name=uname]' 
           )  
           // 获取文档中所有属性name=uname的元素 
          
 
           $( 
           '[name=uname]' 
           , el) 
          
 
           $( 
           '[name=uname]' 
           ,  
           '#id' 
           ) 
          
 
           $( 
           'input[name=uname]' 
           )  
           // 获取文档中所有属性name=uname的input元素 
          
 
           $( 
           'input[name=uname]' 
           , el) 
          
 
           $( 
           'input[name=uname]' 
           ,  
           '#id' 
           ) 
          
 
    

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>zchain test</title>
		<script src="http://files.cnblogs.com/snandy/zchain-0.3.js"></script>
	</head>  
<body>
	<div id='content'>aaa</div>
	<div>bbb</div>
	<p class="pra">ccc</p>
	<input type="submit" value="submit"/>
	<input type="button" value="submit"/>
	<script type="text/javascript">
		var obj1 = $("#content"); // id
		var obj2 = $('div'); // tagName
		var obj3 = $('.pra'); // className
		var obj4 = $('input[type=button]'); // attribute
		
		console.log(obj1);
		console.log(obj2);
		console.log(obj3);
		console.log(obj4);
	</script>
</body>
</html>

Firebug输出如下