Home思洋影视事业部网站建设知识库
0 Comments

jQuery选择器

发布于：2013-05-28  |   作者：广州网站建设  |   已聚集：人围观
jQuery选择器

jQuery之所以令人爱不释手，原因就在于其强大的选择器表达式令DOM操作优雅而艺术。jQuery选择器支持ID、tagName、CSS1~3表达式和XPath表达式，详细说明请参阅http://docs.jquery.com/Selectors网站上的内容。jQuery不仅模仿CSS和XPath选择器的用法和功能，还自定义了很多过滤方法，综合利用这些选择器，可以随心所欲地选择HTML结构中的任意元素。

所谓选择器(Selector)通俗地说就是一个表示特殊语义的字符串。只要把选择器字符串传递给jQuery()构造函数，就能够选择不同的DOM对象，并且可以返回jQuery对象。jQuery选择器支持CSS3选择器标准，读者可以在W3C官方网站(http://www.w3.org/TR/ css3-selectors)上了解CSS3选择器的标准，本书将在第3章对其进行详细讲解。

jQuery选择器按照功能主要分为选择和过滤，并允许配合使用，可以同时使用组合成一个选择器字符串。两者主要的区别如下。

(1) 过滤作用的选择器是利用指定条件从前面匹配的内容中筛选。过滤选择器也可以单独使用，此时表示从全部"*"元素中筛选。如：

广州网站建设,网站建设,广州网页设计,广州网站设计
  1. $(":[title]") 

等同于：



    
	
  1. 
		$("*:[title]") 
    2. 




	(2) 选择功能的选择器则不会有默认的范围，因为它的作用是选择而不是过滤。



	例如，在下面的示例中，$("input[type='button']")选择器可以匹配文档中type属性值为button的input元素，这个表达式是CSS表达式，然后为button添加click事件处理函数。示例演示效果如下。


广州网站建设,网站建设,广州网页设计,广州网站设计


    
	
  1. 
		<script src="images/jquery-1.3.2.js" type="text/javascript"></script> 
    2. 
	
  2. 
		<script type="text/javascript" > 
    3. 
	
  3. 
		$(function(){  
    4. 
	
  4. 
		    $("input[type='button']").click(function(){  
    5. 
	
  5. 
		        var i = 0;  
    6. 
	
  6. 
		        $("input[type='text']").each(function(){  
    7. 
	
  7. 
		            i += parseInt($(this).val());  
    8. 
	
  8. 
		        });  
    9. 
	
  9. 
		        $('label').text(i);  
    10. 
	
  10. 
		    });  
    11. 
	
  11. 
		    $('input:lt(2)')  
    12. 
	
  12. 
		        .add('label')  
    13. 
	
  13. 
		        .css('border','none')  
    14. 
	
  14. 
		        .css('borderBottom','solid 1px navy')  
    15. 
	
  15. 
		        .css({'width':'30px'});  
    16. 
	
  16. 
		});  
    17. 
	
  17. 
		</script> 
    18. 
	
  18. 
		 
    19. 
	
  19. 
		<input value="1" /> +  
    20. 
	
  20. 
		<input value="2" /> 
    21. 
	
  21. 
		<input type="button" value="=" /> 
    22. 
	
  22. 
		<label>&nbsp;</label> 
    23. 




	在click事件处理函数中，$("input[type='text']")选择器能够匹配文档中所有输入框，然后调用each()方法遍历所有匹配的文本框，利用$(this)选择器获取当前文本框，使用val()读取当前文本框的值，再使用JavaScript的函数parseInt()把获取的字符串类型的值转换为数值类型，相加之后作为文本信息添加到label元素中显示出来。



	$('input:lt(2)')选择器能够匹配文档中的所有input元素，然后筛选出排在前面的两个input元素，其中的伪类:lt表示序号小于某个值的意思。匹配到input元素之后，再添加label对象，合并成一个jQuery对象。然后通过链式语法连续调用三个css()方法为文本框设置样式。如果一次需要设置多个CSS样式，也可以使用下面的方法来进行设计。


广州网站建设,网站建设,广州网页设计,广州网站设计


    
	
  1. 
		.css({  
    2. 
	
  2. 
		    'border':'none',  
    3. 
	
  3. 
		    'borderBottom':'solid 1px navy',  
    4. 
	
  4. 
		    'width':'30px'  
    5. 
	
  5. 
		}); 
    6. 




	如果只给css()方法传递一个字符串参数，则表示读取样式值，如css('color')就表示取得当前jQuery对象的样式属性color的值。而如果给它传递两个参数，则表示设置样式值。jQuery对象定义了很多类似的方法，如val()、text()、html()、click()、change()等。


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机