juery学习总结——juery选择器

Posted 2020-06-18

      学习之前，首先要了解什么是网页元素，网页的本质就是html。HTML元素是一个统称，可以认为从一个标签开始到这个标签结束的这部分就是一个网页元素。  

1   <div id="div">          //开始标签  属性
2       <p>hello world</p>  //元素内容
3   </div>                  //结束标签
4   <script type="text/javascript">
5           $("#div").prop("tagName")                        //获取标签名tagName  用attr()方法没获取到
6           $("#div")[0].tagName;                            //获取标签名 $("#div")[0] 就是一个DOM对象  juery-->DOM
7           $("#div").html()                                 //获取元素内容  
8           $(document.getElementById("div")).html()         //将DOM对象转换成juery对象   DOM-->juery
9   </script>

     从上面可以看出 juery可以取到页面元素的各部分，自然也就能修改这个元素来达到想要的效果，但是前提要从页面中找到这个元素，否则后面的操作无从谈起。 网上关于juery选择器的文章很多，也介绍的比较清晰，虽然大部分都没用到过。

下面就按照我自己的理解一一介绍。

一、基本选择器

---

1、选取同类型元素

• 通过标签名选择 ： $("div")
• 通过id选择：$("#id")
• 通过class选择：$(".class")

2、选取不同类型元素

   1 <div id="demo" class="example" ></div>

2   <p>hello world</p>
3   <script type="text/javascript">
4       $("p,div").html("hello")
5       $("p,.example").html("world")
6       $("p,#demo").html("hello world")         //通过 ，隔开来选择两个不同元素也可以选择多个
7   </script>   

3、选取特殊元素(主要针对form表单)

 1 <script type="text/javascript">     
 2   $(":text").parent().html()
 3   $(":password").val("2345")
 4   $(":button").html("已经提交")           //会选择其中的<button>标签 另外 如果<button> 没有指明 type时 type默认为“sumbit”;浏览器之间有差别。
 5   $(":reset").val("已经重置")
 6   $(":input").val("全部改变")
 7   //$(":submit").val("已经提交")
 8   //$(":img")
 9   //$(":checkbox")
10   //$(":redio")                         //根据type的值来选择  就是针对form表单的
11</script>

二、过滤选择器

---

 可以看做 （基本选择器）+"连接符号"+过滤条件，根据过滤条件可以分成四部分。

1、根据集合的特点来过滤

1  $(":text:first")
2  $(":text:last")
3  $(":text:odd")
4  $(":text:even")
5  $(":text:eq(num)")       //num为索引
6  $(":text:gt(num)")       //大于num
7  $(":text:lt(num)")       //小于num
8  $(":text:not(:text)")    //不在其中的元素

2、根据页面元素的要素来过滤

• 根据标签

1  $("ul p").html("ul元素下的所有p元素")
2  $("ul>p").html("ul元素下一级p元素")
3  $("ul>p+li").html("p元素同级的下个元素")
4  $("ul>p~li").html("p元素下面所有同级的元素")

• 根据属性

1  $("div[id]")                   //div元素中存在id属性的
2  $("div[id=new]")               //id 值等于
3  $("div[id*=new]")              //id值中包含
4  $("div[id!=new]")              //id值不等于
5  $("div[id^=new]")              //id值以..开始
6  $("div[id$=new]")              //id值以..结束
7  $("div[id$=new][id]")          //复合属性来查找

• 根据内容

1  $("div:contains(‘div1‘)")  //文本  包含此文本的元素和它所有的上级元素
2  $("div:has(div)")          //标签  同上
3  $("div:empty")             //没有内容的div标签
4  $("div:parent")            //有内容的div标签

3、表单元素

1  $("input:selected")
2  $("input:chicked")
3  $("input:enable")
4  $("input:disable")

4、特殊属性(非表单元素也可以使用)

1  $("div:hidden")
2  $("div:visible")
3  $("#div:animated")

 

 

 

 

网上关于juery选择器的文章：

http://www.360doc.com/content/13/1206/15/10504424_334970071.shtml

http://www.jb51.net/article/57753.htm