06: jQuery

Posted 2020-10-16 不做大哥好多年

1.1 JQuery作用

　　简介：jQuery库为Web脚本编程提供了通用的抽象层，使得它几乎适用于任何编程的情形。

# 1.    取得页面中的元素
    1、    如果不使用javascript库，遍历DOM树，以及查找html文档结构中某个特殊的部分，必需编写很多代码
    2、    jQuery为准确获取需要操纵的文档元素，提供了可靠而富有效率的选择符机制。

# 2.    修改页面的外观
    1、    CSS虽然为呈现方式提供了一种强大的手段，但当所有浏览器不完全支持相同的标准时，单纯使用CSS就会
    显得力不从心
    2、    jQuery可以弥补这一不足，它提供了跨浏览器的标准来解决方案。
    3、    而且即使在页面已经呈现之后，jQuery仍然能够改变文档中某个部分的类或都个别的样式属性。

# 3.    改变页面的内容
    1、    jQuery能够影响的范围并不局限于简单的外观变化，使用少量的代码
    2、    jQuery就能改变文档的内容，可以改变文本、插入或都翻转图像、对列表重新排序，甚至对HTML文档的整个结构都能重写和扩充——所有这些只需要一个简单易用的API。

# 4.    响应用户的页面操作
    1、    jQuery提供了截取形形色色的页面事件（比如用户单击一个链接）的适当方式，而不需要使用事件处理程
    序搞乱HTML代码
    2、    此外，它的事件处理API也消除了经常困扰Web开发人员的浏览器不一致性

# 5.    为页面添加动态效果
    1、    为了实现某种交互式行为，设计者也必须向用户提供视觉上的反馈
    2、    jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利

# 6．无需刷新页面
    1、即可从服务器获取信息，这种编程模式就是从所周知的AJAX（Asyynchoronous JavaScript and XML），它能辅
       助Web开发人员创建出反应灵敏、功能丰富的网站
    2、jQuery通过消除这一过程中的浏览器特定的复杂性，使开发人员得以专注于服务器端的功能设计

# 7、简化常见的JavaScript任务
    1、除了这些完全针对文档的特性之外，jQuery也提供了对基本的JavaScript结构（例如迭代和数组操作等）的增强

jQuery作用介绍

 1.2 jQuery与DOM比较 与 相互转换

　　　　1.  $=jQuery   可以使用这两个关键字调用jQuery中的方法

　　　　2.  JQuery内部实质上封装的是DOM，JQuery中获得的东西比DOM获得的多

　　　　3.  JQuery对象返回的是一个列表，列表中第0个元素就是用DOM获取的对象

　　　　4.  分别用JQuery和DOM获取对象的方法：

　　　　　　　　$("#i1")                                                            #使用JQuery获取对象

　　　　　　　　document.getElementById(‘i1‘);                      #使用DOM获取对象

　　　　5.  将通过JQuery获取的对象转换成通过DOM获取的对象

　　　　　　　　jquery对象[0]       =>           Dom对象

　　　　　　　　$("#i1")[0] = document.getElementById(‘i1‘);                 #JQuery第0个元素就是DOM对象

　　　　6.  将通过DOM获取的对象装换成通过JQuery获取的对象

　　　　　　　　dom对象          =>               $(Dom对象)

　　　　　　　　d = document.getElementById(‘i1‘);

　　　　　　　　$(d)  =  $("#i1")                                                              #DOM对象用$()包起来就是JQuery对象

1.3 jQuery选择器

　　1、基本选择器

　　　　1. id选择器

　　　　　　　　$("#i1")                 #找到id=i1的标签

　　　　2. class选择器

　　　　　　　　$(".c1")

　　　　3. 标签选择器

　　　　　　　　$(‘a‘)                   #找到所有a标签

　　　　4. 组合选择器

　　　　　　　　$(‘a,.c2,#i10‘)     # 作用：找到所有a标签和所有class等于.c2的标签和id=i10的所有标签

　　　　5. 匹配所有元素，多用于结合上下文来搜索。

　　　　　　　　$("*")

　　2、层级选择器
　　　　　　1.   $(‘#i1 a‘)                        #找到id=i1标签下面所有的a标签（子子孙孙都找到）

　　　　　　2.   $(‘#i1>a‘)                      #找到id=i1标签下面所有的a标签（只能找到儿子）

　　　　　　3.   $("label + input")            #匹配所有跟在 label 后面的 input 元素

　　　　　　4.   $("form ~ input")            #找到所有与表单同辈的 input 元素

　　3、属性
　　　　　　1. $(‘[alex]‘) #找到具有alex属性的标签（比如：alex=‘123‘，alex=‘456‘）

　　　　　　2. $(‘[alex="456"] #只找到标签中alex=‘456‘的标签（属性：alex;值：456）

1.4 jQuery筛选与过滤

　　1、查找

　　　　　　1.  $("p").parent()                                   #取得一个包含着所有匹配元素的唯一父元素的元素集合

　　　　　　     $("span").parents()                           # parents()将查找所有祖辈元素

　　　　　　     $(‘#i1‘).parentsUntil(‘.c1‘)                  #查找当前元素的所有的父辈元素，直到遇到匹配元素为止

　　　　　　2.  $("div").children()                              # children()只考虑子元素而不考虑所有后代元素

　　　　　　3.  $("div").siblings()                              #获取所有兄弟标签，不包含自己

　　　　　　4.  $("p").next()                                     #获取匹配标签后面的兄弟标签

　　　　　　     $("div:first").nextAll().addClass("after");                        #查找当前元素之后所有的同辈元素。

　　　　　　     $(‘#i1’).nextUntil(‘#i2’)                      #查找当前元素之后所有的同辈元素，直到遇到匹配元素为止

　　　　　　5. $("p").prev()                                      #用于筛选前一个同辈元素的表达式

　　　　　　     $("div:last").prevAll().addClass("before");                     #查找当前元素之前所有的同辈元素

　　　　　　     $(‘#i1’). prevUntil (‘#i2’)                    #查找当前元素之前所有的同辈元素，直到遇到匹配元素为止

　　　　　　6.  $("p").find("span")                            #搜索所有与指定表达式匹配的元素, 子子孙孙中查找