jQuery入门到精通学习教程，收藏我这篇就够了_jquery教程

2401_87034229

于 2024-09-11 16:54:53 发布

阅读量497

点赞数 1

文章标签： jquery 学习前端

本文链接：https://blog.csdn.net/2401_87034229/article/details/142144581

版权

<input type="text" id="mytext">

这是第二个div


#### 小结


* 选择集过滤可以使用has方法和eq方法来完成
* jquery给标签设置样式使用css方法


![](https://img-blog.csdnimg.cn/20210920165919937.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqU5YyF6L6j5p2h77yB,size_10,color_FFFFFF,t_70,g_se,x_16)



### 五、选择集转移




---


#### 选择集转移介绍


选择集转移就是以选择的标签为参照，然后获取转移后的标签


#### 选择集转移操作


* $('#box').prev(); 表示选择id是box元素的上一个的同级元素
* $('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
* $('#box').next(); 表示选择id是box元素的下一个的同级元素
* $('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素
* $('#box').parent(); 表示选择id是box元素的父元素
* $('#box').children(); 表示选择id是box元素的所有子元素
* $('#box').siblings(); 表示选择id是box元素的其它同级元素
* $('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素


**选择集转移的示例代码:**

这是第一个h2标签

这是第一个段落

这是一个 div 第二个span

这是第二个h2标签

这是第二个段落


#### 小结


* prev() 表示获取上一个同级元素
* prevAll() 表示获取上面所有同级元素
* next() 表示获取下一个同级元素
* nextAll() 表示获取下面所有同级元素
* parent() 表示获取父元素
* children() 表示获取所有的子元素
* siblings() 表示获取其它同级元素
* find("选择器名称") 表示获取指定选择器的元素


![](https://img-blog.csdnimg.cn/2021092017001089.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqU5YyF6L6j5p2h77yB,size_11,color_FFFFFF,t_70,g_se,x_16)



### 六、获取和设置元素内容




---


#### html方法的使用


jquery中的html方法可以获取和设置标签的html内容


**示例代码:**

hello


**说明:**


给指定标签追加html内容使用**append方法**


#### 小结


* 获取和设置元素的内容使用: html方法
* 给指定元素追加html内容使用: append方法


![](https://img-blog.csdnimg.cn/20210920170135620.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqU5YyF6L6j5p2h77yB,size_10,color_FFFFFF,t_70,g_se,x_16)



### 七、获取和设置元素属性




---


####  prop方法的使用


之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。


**示例代码:**

这是一个链接


**说明:** 获取value属性和设置value属性还可以通过**val方法**来完成。


#### 小结


* 获取和设置元素属性的操作可以通过prop方法来完成
* 获取和设置元素的value属性可以通过val方法来完成，更加简单和方便



![](https://img-blog.csdnimg.cn/20210920170219647.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqU5YyF6L6j5p2h77yB,size_9,color_FFFFFF,t_70,g_se,x_16)



### 八、jQuery事件




---


#### 常用事件


* click() 鼠标单击
* blur() 元素失去焦点
* focus() 元素获得焦点
* mouseover() 鼠标进入（进入子元素也触发）
* mouseout() 鼠标离开（离开子元素也触发）
* ready() DOM加载完成


**示例代码:**

列表文字
列表文字
列表文字

<input type="text" id="text1">
<input type="button" id="button1" value="点击">


**说明:**


* this指的是当前发生事件的对象，但是它是一个原生js对象
* $(this) 指的是当前发生事件的jquery对象


#### 小结


jQuery常用事件:


* click() 鼠标单击
* blur() 元素失去焦点
* focus() 元素获得焦点
* mouseover() 鼠标进入（进入子元素也触发）
* mouseout() 鼠标离开（离开子元素也触发）
* ready() DOM加载完成


![](https://img-blog.csdnimg.cn/20210920170600772.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqU5YyF6L6j5p2h77yB,size_9,color_FFFFFF,t_70,g_se,x_16)



### 九、事件代理




---


#### 事件代理介绍


事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，**事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作**。


**事件冒泡代码:**

哈哈


**说明:**


当点击子元素div，它的点击事件会向它父元素传递，也会触发了父元素的点击事件，这就是事件冒泡。


#### 事件代理的使用


**一般绑定事件的写法:**

$(function(){
$ali = $(‘#list li’);
$ali.click(function() {
$(this).css({background:‘red’});
});
})


**事件代理的写法**

$(function(){
$list = $(‘#list’);
// 父元素ul 来代理子元素li的点击事件
$list.delegate(‘li’, ‘click’, function() {
// $(this)表示当前点击的子元素对象
$(this).css({background:‘red’});
});
})


**delegate方法参数说明:**


delegate(childSelector,event,function)


* childSelector: 子元素的选择器
* event: 事件名称，比如: 'click'
* function: 当事件触发执行的函数


#### 小结


* 事件代理就是使用父元素来代理子元素的事件，好处是减少事件的绑定次数，提高性能。
* 使用场景当多个相同的子元素绑定同一个事件，可以使用事件代理。
* 事件代理使用是使用delegate方法来完成


![](https://img-blog.csdnimg.cn/20210920170650135.png)



### 十、JavaScript对象




---


#### JavaScript对象的介绍


JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript 允许自定义对象，对象可以拥有属性和方法。


#### JavaScript创建对象操作


创建自定义javascript对象有两种方式:


* 通过顶级Object类型来实例化一个对象
* 通过对象字面量创建一个对象


**Object类创建对象的示例代码:**


**对象字面量创建对象的示例代码:**


**说明:**


调用属性和方法的操作都是通过点语法的方式来完成，对象的创建推荐使用字面量方式，因为更加简单。


#### 小结


创建自定义javascript对象有两种方式:


* Object
* 字面量


![](https://img-blog.csdnimg.cn/20210920171442243.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqU5YyF6L6j5p2h77yB,size_10,color_FFFFFF,t_70,g_se,x_16)



### 十一、json




---


#### json的介绍


json是 JavaScript Object Notation 的首字母缩写，翻译过来就是javascript对象表示法，这里说的json就是**类似于javascript对象的字符串**，它同时是一种**数据格式**，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。


#### json的格式


json有两种格式：


1. 对象格式
2. 数组格式


**对象格式:**


对象格式的json数据，使用一对大括号({})，大括号里面放入key:value形式的键值对，多个键值对使用逗号分隔。


**对象格式的json数据:**

{
“name”:“tom”,
“age”:18
}


**格式说明:**


json中的(key)属性名称和字符串值需要用**双引号**引起来，用单引号或者不用引号会导致读取数据错误。


**数组格式:**


数组格式的json数据，使用一对中括号([])，中括号里面的数据使用逗号分隔。


**数组格式的json数据:**

[“tom”,18,“programmer”]


**实际开发的json格式比较复杂,例如:**

{
“name”:“jack”,
“age”:29,
“hobby”:[“reading”,“travel”,“photography”]
“school”:{
“name”:“Merrimack College”,
“location”:“North Andover, MA”
}
}


#### json数据转换成JavaScript对象


**json本质上是字符串**，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。


**示例代码:**

var sJson = ‘{“name”:“tom”,“age”:18}’;
var oPerson = JSON.parse(sJson);

// 操作属性
alert(oPerson.name);
alert(oPerson.age);


#### 小结


* json就是一个javascript对象表示法，json本质上是一个字符串。
* json有两种格式：1. 对象格式, 2. 数组格式


![](https://img-blog.csdnimg.cn/20210920171659364.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqU5YyF6L6j5p2h77yB,size_10,color_FFFFFF,t_70,g_se,x_16)



### 十二、ajax




---


#### 1. ajax的介绍


ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以**让 javascript 发送异步的 http 请求，与后台通信进行数据的获取**，ajax 最大的优点是**实现局部刷新**，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，**当前端页面想和后台服务器进行数据交互就可以使用ajax了。**


这里提示一下大家, **在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。**


#### 2. ajax的使用


jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。


**示例代码:**