4、JQuery

1. 什么是 jQuery

JQuery：Javascript+Query,使用 JavaScript 编写的 js 库,提高开发的效率

2. jQuery 特点

1. 轻量级框架：write less,do more 写的少,做的多。
2. 应用广泛。
3. 免费开源,文档丰富。
4. 可以辅助编写众多的第三方库。

3. 入门程序

步骤:
1. 引入 jquery.js
2. 使用




    
    Title

4. JQuery 语法

4.1.语法

$(“选择器”).action()

4.2.说明

$:核心函数
选择器:JQuery 查找网页元素的表达式,返回的是 jquery 对象
action:jquery 内置函数,实现特定的功能

4.3.核心函数的功能

1. 获取 dom 对象
2. 创建 dom 对象
3. 克隆 dom 对象

5. 什么是 Jquery 对象

使用 jQuery 封装的 Dom 对象叫做 jQuery 对象

6. 使用 jQuery 对象的优缺点：

  • 优点：jQuery 的扩展属性和函数在底层判断了浏览器以及版本实现了浏览器的兼容。
  • 缺点：jQuery 扩展的函数只能实现基本的 dom 操作，但是对于元素独有的 htmldom 接口。
  • 封装很少(例如 input、select())，对于 html5 新增的 DOM 方法也不支持，如果想实现类似功能，只能使用 dom 接口。
  • 结论：为保证兼容性尽量使用 jQuery 对象的 API，但特殊功能也需要使用原生 dom 接口。

7. 编码习惯

如果获取的是 jQuery 对象,那么要在变量前面加上$。

  • var $variable=jQuery 对象
  • var variable=DOM 对象

8. DOM 转 Jquery 对象

8.1.语法

var $jquery 变量=$(dom 对象);

8.2.案例



    
        
        Title

9. JQuery 转 Dom 对象

9.1.语法

1. jquery 对象[index]
2. jquery 对象.get(index)

9.2.案例




    
    Title

10. 什么是 jQuery 选择器

用于获取 jQuery 对象的表达式

11. jQuery 选择器的基本语法

$(“选择器表达式”)

12. 基本选择器

1、基本选择器

? jQuery中最常用的选择器，通过元素的id，引用的样式类名、标签名、通配符来查找DOM元素。

  • id选择器:选择一个具有指定id属性的单个元素。
    • 示例:$("#ID");
  • 元素选择器:参数为html标签名，返回当前网页的该标签对应的jQuery对象。
    • 示例: $ ("div") ;
  • 类选择器:参数为css的样式类名，返回使用当前样式类渲染的全部元素对应的jQuery对象。
    • 示例:$(".myClass");
  • 通配符选择器:匹配所有元素对应的jQuery对象。
    • 示例:$("*") ; 

2、组合(合并)选择器

  • 语法：$(选择器 1,选择器 2,选择器 3,...) 或的关系(合并)

12.1. id 选择器

$("#id")



    
        
        Title
        
        
        
    
    
        
我是div

12.2. 元素选择器

$("元素名")



    
        
        Title
        
        
        
    
    
        
我是div1

        
我是div2

        
我是div3

        
我是p

        我是span

12.3. 类选择器

$(".类名")



    
        
        Title
        
        
        
    
    
        
我是div

        
我是p

        我是span

12.4. 通配符选择器

$("*")匹配所有的元素



    
        
        Title
        
        
        
    
    
        
我是div

        
我是p

        我是span

12.5. 组合(合并)选择器

语法:
$(“选择器 1,选择器 2,选择器 3,...”) 或的关系(合并) 将每一个选择器匹配到的元素合并后一起返回。

可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。



    
        
        Title
        
        
        
    
    
        
我是div1

        
我是div2

        
我是p

        我是span

13. 属性选择器

13.1. 定义

通过元素的属性获取相应的元素

13.2. 分类

  • [attribute]：匹配包含指定属性的元素。
    • $("div[id]") 获取所有具有id值的div对象。
  • [attribute=value]：匹配给定的属性是某个特定值的元素。
    • $("input[name= 'userName']") 获取name取值为userName的输入框。
  • [attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素。
    • $("input [name!= 'userName']")  获取name取值为非userName或不具备name属性的输入框。
  • [attribute ^=value]：匹配给定的属性是以某些值开始的元素
    • $("input [name^= 'news']")  获取name取值以news开头的输入框。
  • [attribute$=value]：匹配给定的属性是以某些值结尾的元素。
    • $("input[name$= 'end']")  获取name取值以end结尾的输入框。
  • [attribute*=value]：匹配给定的属性是以包含某些值的元素。
    • $("input[name*= 'con']")  获取name取值包含con的输入框。
  • [attributeFilter1][attributeFilterN]：组合使用。复合属性选择器。
    • $("input[id][nama$= 'man']") 获取具有id属性，name取值以man结尾的输入框。
    • [selector1][selector2][selector3]... 复合属性选择器，需要同时满足多个条件时使用


    
        
        Title
        
        
        
    
    
        
我是div1

        
我是div2

        
我是di3

        爱好：

        爬山(name="newsletter")
        骑行(name="newsletter")
        看海贼王(name="accept")

        看海贼王(name="accept" class="hzw")
        看SEVENTEEN(name="carat")


        

           
        

         
        

           
        

         

注意：attr，prop

  • attr：初始状态复选框没有选，点击按钮调用d方法，实现了选择，然后点击attr不选按钮，实现了不选，然后再次点击attr选择按钮，结果却没有选择，再反复点击没有任何反应。
  • 解决方法：设置checked属性时，优先使用prop函数(较稳定)。

14. 层次选择器：

通过 DOM 元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等。

  • parent child：匹配的parent选择器选择的元素下符合child选择器的后代元素（所有子孙）。
    • $ ("form input"） 获取form表单下所有input标签。
  • parent > child：匹配的parent选择器选择的元素下所有符合child选择器的直接后代元素。
    • $ ("form>input"） 获取form表单下直接子节点input标签。
  • prev + next：匹配符合prev选择器的元素后的下一个匹配next选择器的元素（同级兄弟）。
    • $("label+input") 获取label标签的下一个input标签的dom元素。
  • prev~siblings:匹配prev元素之后的所有 siblings 元素。
    • $("label~input") 获取label标签后的所有input。

14.1. 后代选择器

使用空格,在给定的祖先元素下匹配所有的后代元素

14.2. 子元素选择器

使用>,在给定的父元素下匹配所有的子元素

14.3. 相邻元素选择器

使用+隔开, 匹配所有紧接在 prev 元素后的 next 元素(如果有,是一个元素)

14.4. 匹配 prev 元素之后的所有 siblings 元素

prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素



    
        
        Title

15. 基础过滤选择器

  • :first：匹配找到的第一个元素。示例:$("li:first")
  • :last ：匹配找到的最后一个元素。示例:$("li: last")
  • :not(selector)：在返回集合清除不匹配指定选择器的元素。示例:$("input:not(:checked)")
  • :even ：匹配返回结果集合中索引值为偶数的元素。示例:$("li:even")
  • :odd ：匹配返回结果集合中索引值为基数的元素。示例:$("li: odd")
  • :eq(index)：匹配返回结果集中第index位置的元素。示例:$("li:eq(0)")
  • :gt(index) ：匹配所有大于指定索引值的元素。示例:$("li:gt(0)")
  • :lt(index)：匹配所有小于指定索引值的元素。示例:$("li:lt(2)")
  • :header(固定写法)：匹配h1-h6的标题元素。示例:$(":header")


    
        
        Title
        
        
    
    
        

            
    
                
  • 我是li1
  • 我是li2
  • 我是li3
    • 
                
  • 我是li4
    •  
  • 我是li5
  • 我是li6
    • 
            

             

16. 子元素过滤选择器

  • :nth-child(index/even/odd/equation)：
    • 匹配选中元素是父元素的第（index)/基数/偶数/3n个元素。
    • :nth-child 从 1 开始的，而:eq()是从 0 算起的！
    • :eq(index) 只匹配一个元素，而这个将为每一个父元素匹配子元素。
    • 示例：$("ul li:nth-child(3n+2)")
  • :nth-last-child(index/even/odd/equation)：
    • 匹配选中元素是父元素的倒数第（index）)/基数/偶数/3n个元素。
    • 示例：$("ul li :nth-last-child(2)")
  • :first-child :
    • 匹配选中元素是父元素的第一个子元素。
    • 示例：$("ul li:first-child")
  •  :last-child :
    • 匹配选中元素是父元素的最后一个子元素。
    • 示例：$("ul li:last-child")
  •  :only-child :
    • 匹配选中元素是父元素的唯一子元素，如当前元素有兄弟节点，将被过滤掉。
    • 示例：$("ul li :only-child")


    
        
        Title
        
        
    
    
        

            
    
                
  • li1-1
  • li1-2
  • li1-3
  • li1-4
  • li1-5
    • 
            

            
            
    
                
  • li1-1
    • 
            

        

        

             
             
             
             
             
             
             

17. 内容过滤选择器

在已经选择的对象中根据它所包含的子元素和文本内容进行过滤。

  • :contains(text)：
    • 选择所有包含指定文本的元素。
    • text: 用来查找的一个文本字符串。这是区分大小写的。
    • 示例：$("div:contains('str')")
  • :empty :
    • 匹配所有不包含子元素或者文本的空元素。(包括文本节点)
    • 示例：$("td:empty")??返回值??集合元素
  • :has(selector)：
    • 在已经筛选的元素中根据selector在进行筛选，只有符合:之前以及has中定义的选择器规则，元素才能被选择。
    • 示例：如果表达式 $('div:has(p)') 匹配一个 
      ，那么应有一个

      存在于 

       后代元素中的任何地方，不是直接的子元素也可以。
  • :parent：
    • 选择所有含有子元素或者文本的父级元素。与empty相对。
    • 示例：$("td:parent")??返回值??集合元素


    
        
        Title
        
        
    
    
        

            

                
  • 路飞男
  • 索隆男
    • 
                
  • 娜美女
  • 乌索普男
    • 
                山治男
    
            
    
            
    
                
    
                    乔巴男
                
    
                
    
                    罗宾女
                
    
            
    
        
    
        
    
            
    弗兰奇男
    布鲁克男
        
    
        
    
         
         
         

    18. 可见性过滤选择器

    是根据元素的可见和不可见状态来选择相应的元素

    • :hidden：匹配所有的不可见元素,或者 type 为 hidden 的元素。
      • 示例：$("input:hidden")
    • :visible： 匹配所有的可见元素。
      • 示例：$("input:visible"）??返回值???集合元素
      • 元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。
    

    
        
        Title
        
        
    
    
        
    
            
            
    艾斯
    
            
     罗杰 
    
        
    
        
    
            
            
            
        
    
         
         

    19. 总结

    1. 语法：$("选择器").action()
    2. 互转
      1. dom->jquery：$(dom 对象)
      2. jquery->dom：
        1. jquery 对象[index]
        2. jquery 对象.get(index)
    3. 选择器
      1. 语法：$("选择器表达式")
      2. 基本选择器
        1. id：$("#id")
        2. 类：$(".类名")
        3. 元素：$("元素名")
        4. 组合选择器：$("选择器 1,选择器 2,选择器 3,...")
        5. 属性选择器
          1. [id]
          2. [属性=值]
          3. [属性!=值]
          4. [属性^=值]
          5. [属性$=值]
          6. [属性*=值]
          7. [属性=值][属性=值][属性=值]
        6. 层次选择器
          1. 后代：$("parent child")
          2. 子：$("parent>child")
          3. 相邻的下一个：$("prev+next")
          4. prev~siblings：匹配prev元素之后的所有siblings元素

    20. 表单类型过滤器

    • :input：匹配input, textarea,select和 button元素。
    • :text：匹配所有的单行文本框。
    • :password：匹配所有密码框。
    • :radio：匹配所有单选按钮。
    • :checkbox：匹配所有复选框。
    • :submit：匹配所有提交按钮。
    • :image：匹配所有图像域。
    

    
        
        Title
        
        
    
    
        
    
            文本：
    
            密码：
    
            按钮：
    
            
            按钮：
    
            隐藏：
    
            单选框：
    
            复选框：
    
            图片域：
    
            图片域：
    
            提交按钮：
    
            重置按钮：
    
            下拉菜单：
    
            上传文件：
    
            多行文本框：
    
             
             
             
             
             
             
             

    21. 表单状态过滤器

    状态过滤器：根据表单元素当前状态进行过滤的选择器??

    • :disabled 选择器、:enabled 选择器
      • 仅可用于选择支持disabled属性（attribute）的HTML元素(