JQuery学习笔记——JQuery常用选择器

这里来总结下JQuery中常用的选择器，以下JQ函数均定义在$(function(){});函数（即JS 中window.onload函数中）

1.基本选择器

 基本选择器包括ID选择器、类选择器、元素名称选择器等，使用形式与CSS中添加样式的格式相似

$(function(){
         //ID选择器，选择元素id属性等于"ID"的元素  输出"根据id选择"
         alert($("#ID").val());
         //类选择器 选择元素class属性等于"classname"的元素 输出"根据元素css类名选择"
         alert($(".classname").val());
         //元素名称选择器 输出"根据元素名称选择"
         alert($("a").text());
         //选择页面所有的元素,注意此处选择是从HTML页面根元素开始选择
         alert($("*").length); 
         //组合选择，选择元素名称为input或元素名称为a的元素
         alert($("input,a").length); //输出3
});

页面主体部分:

     
     根据元素名称选择
     

2.层次选择器

$(function(){
         alert($("#divTest a").length); //后代选择器，根据ID选择父元素 要选取的后代元素名称与父元素间以空格隔开
                                        // 选取所有的后代  包括儿子、孙子 输出3
				
         alert($("#divTest>input").length);//后代选择器，根据ID选择父元素 要选取的后代元素名称与父元素间以>连接
                                           //只选取儿子这一代 输出4

         alert($("#next+input").length);//  查找下一个同辈元素（即兄弟元素）  
                                        //先根据ID查找主元素 主元素与要查找的兄弟元素间以+号连接   只找一个 输出1

          alert($("#next~input").length);//  查找所有的同辈元素 （即兄弟元素） 
                                         //先根据ID查找主元素 主元素与要查找的兄弟元素间以~号连接  查找所有的兄弟元素 输出2
          });

页面主体部分：

      

         
         
         
         
         1
         23
      

3.过滤选择器

$(function(){
	         alert($("li:first").html());//取出第一个li元素的内容  输出"Java"
	         alert($("li:last").html());//取出最后一个li元素的内容 输出"JavaWeb"
	         alert($("ul input:not(:checked)").val());
	         // ul input 取出ul下所有的input元素 排除checked的元素 输出"不学习"
	         alert($("li:even").get(0).innerHTML);
	         //even 返回li对象数组的偶数项（下标从0开始）,共两个第1个为Java 第2个为数据库 输出"Java"
	         alert($("li:odd").get(1).innerHTML);
	         //odd 返回li对象数组的奇数项（下标从0开始）第1个为C++ 第2个为JavaWeb 输出"JavaWeb"
	         alert($("li:eq(2)").html());
	         //返回li对象数组的第二项（下标从0开始） 输出"数据库"
	         alert($("li:gt(1)").length);
	         //返回li对象数组中下标大于1的对象（下标从0开始）输出2
	         alert($("li:lt(1)").length);
	         //返回li对象数组中下标小于1的对象（下标从0开始）输出1
	         alert($(":header").length);
	         //返回h标题对象  输出 2   
	  });

页面主题部分：

		

			

				
Java
				
C++
				
数据库
				
JavaWeb
				学习
				不学习
				
Header 1
				
Header 2
			
		

4.内容选择器

  $(function(){
				//过滤选择内容包含'Java'字符串的元素 输出元素内容 输出Java并发编程
				//alert($("li:contains('Java')").html());
				
				//过滤选择内容为空的元素  输出1
				alert($("li:empty").length);
				
				//过滤选择内容不为空（包含文本元素或子元素）的元素  输出5
				alert($("li:parent").length);
				
				//过滤选择子元素包含标签的元素  输出 Go语言从入门到精通
				alert($("li:has(a)").html());								
			});

页面主体部分：

       
		

			

				
Java并发编程
				
C语言
				
C++
				
oracle数据库
				
Go语言从入门到精通
				

			
			
		
	      

5.可见性选择器

            $(function(){
				//选择不可见元素
				alert($("li:hidden").html());
				//选择可见元素
				alert($("li:visible").html());
			});

页面主体部分：

		

			
可见
			
不可见
		
	

6.属性选择器（较为复杂）

$(function(){
			//选择input元素中包含name属性的input元素  输出6
			alert($("input[name]").length);

			//选择input元素中包含type元素且type元素的属性值等于button的input元素  输出浪潮优派
			alert($("input[type='button']").val());

			//选择input元素中包含type元素且type元素的属性值不等于button的input元素  输出5
			alert($("input[type !='button']").length);

			//选择input元素中包含name属性且属性值以‘b’开头 输出百度 
			alert($("input[name^='b']").val());

			//选择input元素中包含name属性且属性值包含‘s’ 输出2
			alert($("input[name*='s']").length);

			//选择input元素中包含name属性且属性值以‘o’结尾 输出浪潮优派
			alert($("input[name$='o']").val());

			//选择input元素中包含name属性且属性值包含'chao'且必须用空格隔开（前后均可） 输出浪潮优派
			alert($("input[name~='chao']").val());

			//符合条件测试 输出浪潮优派
			alert($("input[type^='b'][name~='lang']").val());
	   });

页面主体部分：

7.子元素过滤选择器

 $(function(){
	    		//选取div中第一个子元素的所有元素 
	    		//输出数据结构、红黑树、算法、HTML
	    		//注意分号前有空格
	    		alert($("div :first-child").text());
	    		
	    		//选取div中第一个元素是span的元素
	    		//输出数据结构
	    		alert($("div span:first-child").text());
	    		
	    		//选取div中最后一个元素是span的元素、
	    		//输出Web前端技术 B-树
	    		alert($("div span:last-child").text());
	    		
	    		//选取div下第一个span子元素 要求该span 前或后有同名的兄弟元素
	    		//输出数据结构 二叉树
	    		alert($("div span:first-of-type").text());
	    		
	    		//选取div 下只有一个b元素作为子元素的元素 输出  算法
	    		alert($("div b:only-child").text());
	    		
	    		//选取div下  第二个子元素是span元素的元素
	    		//输出 C语言 二叉树

	    		//注意  下标从1开始
	    		alert($("div span:nth-child(2)").text());
	    		
	    		//选取div下得b元素   且b元素前后没有同名的兄弟节点
	    		alert($("div b:only-of-type").text());
	    		
	    		//选取div下span元素  且元素是偶数项
	    		//下标从1开始
	    		//输出 C语言 Web前端技术 二叉树 B-树
	    		alert($("div span:nth-child(even)").text());
	    		
	    		//选取div下span元素  且元素是奇数项
	    		//下表从1开始
	    		//输出 数据结构 Java基础 B+树
	    		alert($("div span:nth-child(odd)").text());
	    	});

页面主体部分：

         
		

			数据结构
			C语言
			Java基础
			Web前端技术
		
		

			红黑树
			二叉树
			B+树
			B-树
		
		

			算法
		
		

			HTML
			CSS
			JS
		
	
	

8.表单选择器（一）

            $(function(){
				//选择input标签  select  textarea button 同样属于input标签 输出15
				alert($(":input").length);

				//获取所有单行文本框 输出2
				alert($(":text").length);

				//获取密码框  输出1
				alert($(":password").val());

				//获取单选按钮 输出male
				alert($(":radio").val());

				//获取复选框  输出football
				alert($(":checkbox").val());

				//选取提交按钮  输出提交
				alert($(":submit").val());

				//选取重置按钮  输出重置
				alert($(":reset").val());

				//获取图片按钮 输出2
				alert($(":image").length);

				//选取按钮   输出2 标签也在其中
				alert($(":button").length);

				//选取上传文件框  输出1
				alert($(":file").length);	
			});

页面主体部分：

    
		

			

			

			

			

			

			

			

			

			

			

			

			
				Option1
				Option2
				
			

			多行文本框
			Button

			
			
			
		
   

9.表单选择器（二）

$(function(){
		//选择 不可用的单行文本框  输出2
		alert($(":text:disabled").length);
		//选择 可用的单行文本框   输出2
		alert($(":text:enabled").length);
		//选择 被选中的复选框 输出football
		alert($(":checkbox:checked").val());
		//选择被选中的下拉菜单 输出  菏泽
		alert($("select :selected").text());
		//注意中间不加空格意义不同   不加空格表示选择选中的下拉菜单  输出0
		alert($("select:selected").length);
	   });			

页面主体部分：

		

			

			

			
			

			足球

			篮球

			网球

			
				菏泽
				烟台