jQuery学习随笔

偏执的太偏执、 2022-02-28 03:40 309阅读 0赞

### 一.jQuery简介 ###

##### 1.简介 #####

*  jQuery是一个优秀的JavaScript库，目前最流行的JavaScript框架库
 *  jQuery理念：write less,do more

##### 2.优势 #####

· 轻量级  
· 强大的选择器  
· 出色的DOM操作的封装  
· 可靠的事件处理机制  
· 出色的浏览器兼容性  
· 使用隐式迭代简化编程  
· 丰富的插件支持

##### 3.能做什么 #####

· 访问和操作DOM元素  
· 控制页面样式  
· 对页面事件进行处理  
· 扩展新的jQuery插件  
· 与Ajax技术完美结合

##### 4.下载jQuery #####

官网下载jQuery：[http://jquery.com/][http_jquery.com]

jQuery分为开发版和发布版本：  
![jQuery版本][jQuery]

##### 5.页面引入jQuery #####

在页面中使用`<script>`标签引入jQuery，以jquery-1.10.2.js为例：

### 二.jQuery基本语法 ###

#### 1.语法 ####

$(selector).action();

· 工厂函数$()：将DOM对象转化为jQuery对象  
· 选择器selector：获取需要操作的DOM元素  
· 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

例如：  
`$("h2").css("background","#CCFFFF")`;

#### 2.ready函数： ####

![实例][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70]  
提示：`$(document).ready();`可缩写为`$();`,绑定一个在DOM文档载入完成后执行的函数，**在同一个页面上可以多次使用**。

###### $(document).ready()与window.onload的区别： ######

![区别][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 1]

#### 3.在jQuery中，`$`其实是jQuery的别名，一般都直接使用`$`符号 ####

#### 4.实例： ####

![实例][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 2]

### 三.jQuery选择器 ###

· 选择器是jQuery的根基，在jQuery中，对事件处理，遍历DOM和Ajax操作都依赖于选择器  
· 优点：  
写法简洁：  
`$("#id");` 等价于`document.getElementById("id");`  
`$("tagName");`等价于`document.getElementsByTagName("tagName");`  
· 完善的时间处理机制  
· val() --> 获取第一个匹配元素的当前值

选择器分为：

###### · 基本选择器： ######

基本选择器通过元素id、class、和标签名来查找DOM元素  
![基本选择器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 3]

###### · 层次选择器 ######

通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器  
![层次选择器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 4]

###### · 基本过滤选择器 ######

![基本过滤选择器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 5]

###### · 内容过滤选择器 ######

过滤规则主要体现在它所包含的子元素和文本内容上  
![内容过滤选择器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 6]

###### · 属性过滤选择器 ######

过滤规则是通过元素的属性来获取相应的元素  
![属性过滤选择器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 7]

###### · 子元素过滤选择器 ######

![子元素过滤选择器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 8]

###### · 可见性过滤选择器 ######

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素  
可见选择器：hidden不仅包含样式属性display为none的元素，也包含文本隐藏域（`<input type="hidden">`）和`visibility:hidden`(`<span></span>`)\`之类的元素  
![可见性过滤选择器][20190324170539874.png]

###### · 表单选择器 ######

![表单选择器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 9]

###### · 表单属性过滤选择器 ######

![表单属性过滤选择器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 10]

### 四.jQuery中的事件 ###

##### 1.鼠标事件 #####

鼠标事件是当用户在文档上移动或点击鼠标时而产生的事件，常用鼠标事件有：  
![鼠标事件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 11]

##### 2.键盘事件 #####

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：  
![键盘事件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 12]

###### 3.表单事件 ######

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件  
![表单事件][20190324172824503.png]

###### 4.绑定事件 ######

除了使用事件名绑定事件外，还可以使用bind()方法或on();  
例如绑定鼠标点击事件还可以这样写：

$("input[name=event]").bind("click",function(){
        $("p").css("background-color","#F30");
    });

###### 5.移除事件 ######

移除事件使用unbind()方法，其语法如下：

unbind([type],[fn])

![移除事件][2019032417370590.png]  
提示：当unbind()不带参数时，表示移除所绑定的全部事件

###### 6.鼠标光标悬停事件 ######

hover()方法有两个函数，相当于mouseover()和mouseout()事件的结合

###### 7.表单提交事件 ######

submit()方法

//提交本页面的第一个表单
        $("form:first").submit();
        //阻止表单提交
        $("form").submit(function(){
                return false;
        });

### 五.jQuery中的DOM操作 ###

##### 1.jQuery中的样式操作 #####

jQuery中的DOM操作可分为：  
· 样式操作  
· 内容及value属性值操作  
· 节点操作  
· 节点属性操作  
· 节点遍历  
· CSS-DOM操作

###### · 直接设置样式值 ######

使用`css()`方法获取或设置指定元素的样式

css(name,value)

或

css(name:value,name:value,name:value...)

注：class是元素的一个属性，所以获取class和设置class也可以使用attr()方法来完成

###### · 追加和移除样式 ######

· 追加样式：

addClass(class)

或

addClass(class1,class2,class3...)

· 移除样式：

removeClass("style1")

或

removeClass("style1","style2","style3"...)

##### 2.jQuery中的内容操作HTML代码操作 #####

· html()可以对HTML代码进行从操作，类似于JS中的innerHTML  
· text()可以获取或设置元素的文本内容  
html()和text()的区别：  
![html()与text()区别][html_text]

##### 3.value属性值操作 #####

val()可以获取或设置元素的value属性值

$(this).val(); //获取元素的value属性值

或

$(this).val(""); //设置元素的value的属性值

##### 4.节点操作 #####

jQuery中节点操作主要分为：  
· 查找节点  
通过jQuery选择器完成。查找属性节点：查找到所需要的元素之后，可以调用jQuery对象的attr()方法来获取它的各种属性值。

· 创建节点  
使用jQuery的工厂函数`$():$()html`;会根据传入的html标记字符串创建一个DOM对象，并把这个DOM对象包装成一个jQuery对象返回。创建文本节点就是在创建元素节点时直接把文本内容写出来。创建属性节点就是在创建元素节点时直接指定属性。例如：

var newNode1=$("<li>运动</li>");

· 插入节点  
动态创建HTML元素并没有实际用处，还需要将新创建的节点插入到文档中，即称为文档中某个节点的子节点  
![插入节点1][1]  
![插入节点2][2]  
· 删除节点  
remove()：从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素，当某个节点用remove()方法删除后，该节点所包含的所有后代节点将被同时删除。这个方法的返回值是一个指向已被删除的节点的引用。  
empty()：清空节点 - 清空元素中的所有后代节点（包含属性节点）。

· 复制节点  
clone()：克隆匹配的DOM元素，返回值为克隆后 的副本，但此时复制的新节点不具有任何行为。  
clone(true)：复制元素的同时也复制元素中的事件。

· 替换节点  
replaceWith()：将所有匹配的元素都替换为指定的HTML或DOM元素  
replaceAll()：颠倒了的replaceWith()方法  
注意：若在替换之前，已经在元素上绑定了事件，替换后原先绑定的事件会与原先的元素一起消失。

##### 5.节点属性操作 #####

attr()：获取属性和设置属性。  
· 当为该方法传递一个参数时，表示获取指定属性的值  
· 当为该方法传递两个参数时，表示设置指定属性的值  
removeAttr()：删除指定元素的指定属性。

###### jQuery中有很多方法都是一个函数实现获取和设置。如：`attr(),html(),text(),val(),height(),width(),css()`等。 ######

##### 6.节点遍历操作 #####

遍历子元素：  
· children()方法可以用来获取元素的所有子元素，只考虑子元素而不考虑任何后代元素。  
遍历前辈元素：  
· parent()：获取元素的父级元素。  
· parents()：获取元素的祖先元素。  
![节点遍历][20190324210148808.png]

### 六.jQuery动画效果 ###

jQuery内置动画效果：  
· 显示与隐藏  
show(\[speed\],\[callback\])  
使元素集合的元素显示。  
speed：效果的持续时间（可选），毫秒或者预定义的字符串（slow、normal、fast）。如果省略则不产生动画，立即显示元素。  
callback：动画结束时，jQuery自动调用的方法（回调方法）。  
hide(\[speed\],\[callback\])  
使元素集合的元素变成隐藏状态  
speed：效果的持续时间（可选），毫秒或者预定义的字符串（slow、normal、fast）。如果省略则不产生动画，立即显示元素。  
callback：动画结束时，jQuery自动调用的方法（回调方法）。

· 淡入和淡出  
与显示/隐藏不同的是，淡入与淡出效果不改变元素大小，只是逐渐调整元素透明度达到显示与隐藏的效果  
fadeIn(\[speed\],\[callback\]) 元素淡入  
fadeOut(\[speed\],\[callback\]) 元素淡出  
参数用法与show()/hide()方法完全相同

· 滑上和滑下  
与显示/隐藏不同的是，滑上与滑下效果只改变元素大小，让元素显示时像拉窗帘一样从顶部滑下来或者拉上去  
slideDown(\[speed\],\[callback\]) 元素滑下  
slideUp(\[speed\],\[callback\]) 元素滑上  
参数用法与show()/hide()方法完全相同

· 自定义动画效果  
调用animate()方法可以创建自定义动画效果，调用格式为：

$(selector).animate({params},speed,[callback])

params参数为制作动画效果的CSS属性名与值，必选  
speed参数为动画的效果的速度，单位为毫秒，可选  
callback参数为动画完成时执行的回调函数名，可选

[http_jquery.com]: http://jquery.com/
[jQuery]: /images/20220228/0aa16977e58b4142a3cd0638a201fc1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70]: /images/20220228/a2c4f940412f4254b3f5f2a5db846b03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 1]: /images/20220228/fa5867e60be44fb2820780f68d6032ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 2]: /images/20220228/08ccc6d1ba5a487ab8b26a28215bafc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 3]: /images/20220228/82a3ba3de21141bf83a0b385282ee26a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 4]: /images/20220228/d052482720884b67946dfad6d8b2f631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 5]: /images/20220228/83a7e29118db4f659b6c9453c2e424c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 6]: /images/20220228/1ef990b8e15c4f578298bfa20f2e2515.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 7]: /images/20220228/72bbeeeeb5f6493baca2047baa619378.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 8]: /images/20220228/6d5528f0ee7f49a087dbb0a9b693187a.png
[20190324170539874.png]: /images/20220228/c37a533db378459796e252b77dda761a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 9]: /images/20220228/36c8392e0a7648079914830bc02cc064.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 10]: /images/20220228/627d425f38064234a1076b67884b2449.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 11]: /images/20220228/6d37cf1e47f447b095e873a3e9db9cc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 12]: /images/20220228/2d502b0f82104a579a3e201bd9a63078.png
[20190324172824503.png]: /images/20220228/83723823012b425fbac489179160a205.png
[2019032417370590.png]: /images/20220228/085a47fdedd14725af0df7969c90c53a.png
[html_text]: /images/20220228/a5d97a326e0348c2a7d0c76ab48f1361.png
[1]: /images/20220228/505756310d5249c6bc8c9af4b8cb3b8f.png
[2]: /images/20220228/5ba11b46973140a1832cf4146753b378.png
[20190324210148808.png]: /images/20220228/5d2e54ca2a864f8da9d2931c9d23e722.png