jQuery-阿里云开发者社区

## 1.jQuery的介绍

### 1.1jQuery的定义

**jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery极大地简化了JavaScript编程。**

### 1.2jQuery的作用

**jQuery和JavaScript它们的作用一样﹐都是负责网页行为操作﹐增加网页和用户的交互效果的﹐只不过jQuery简化了JavaScript编程﹐jQuery实现交互效果更简单。**

### 1.3.jQuery的优点

jQuery兼容了现在主流的浏览器﹐增加了程序员的开发效率

jQuery简化了JavaScript编程﹐代码编写更加简单

## 2.jQuery的使用

```html

<!DOCTYPE html>

<head>

<title>Document</title>

// window.onload= function(){

// // 当前页面全部加载完成，onload事件才会触发

// var oDiv = document.getElementById("div1");

// alert(oDiv);

// }

// $符号就是jquery的象征

// $本质上就是函数只不过这个函数名（$）

$(document).ready(function(){

var $div = $('#div01');

alert('jquery获取的div:' + $div)

})

// jQuery的简写

$(function(){

var $div1 = $('div1');

alert($div1)

})

</script>

</head>

<body>

</body>

</html>

```

## 3.jQuery选择器

#### 1.标签选择器

### 2.类选择器

### 3.id选择器

### 4.层级选择器

### 5.属性选择器

```html

<!DOCTYPE html>

<head>

<title>Document</title>

$(function(){

// 获取标签对象

var $p = $("p");

alert($p.length)

$p.css({"color": "green"});

var $div1 = $(".div1");

alert($div1.length);

$div1.css({"color": "red"});

var $box = $("#box1");

alert($box.length);

var $h = $("div h1");

alert($h.length);

// 属性选择器，先根据

var $input = $("input[type=text]");

alert($input.length);

});

// jquery选择器获取标签，和css选择器匹配标签的方式一致

</script>

</head>

<body>

<p>hello my name is hemingkang</p>

<p>nihao</p>

<div id="box1">xiaokang</div>

<div>

</div>

</body>

</html>

```

## 4.选择集过滤

### 4.1选择集过滤就是在选择标签的集合里面过滤自己需要的标签

### 4.2选择集过滤的操作

**has(选择器名称)方法**，表示选取包含指定选择器的标签

**eq(索引)方法**，表示选取指定索引的标签

```html

<!DOCTYPE html>

<head>

<title>Document</title>

$(function(){

// 通过jquery选择器获取html的标签

// 获取包含指定选择器的父标签

var $divs = $("div");

$divs.has(".kang").css({"background":"red"});

// 根据下标选择指定的标签

$divs.eq(1).css({"background": "green"});

});

</script>

</head>

<body>

<div>

</div>

<div>

</div>

</body>

</html>

```

## 5.选择集转移

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

```html

<!DOCTYPE html>

<head>

<title>Document</title>

$(function(){

// 获取div作为参照物，获取其他标签

var $div = $("#box1");

// 获取当前标签的上一级标签

$div.prev().css({"color":"red","font-size":"25px"});

// 选择上面所有的同级标签

$div.prevAll().css({"text-indent":"50px"});

// 选择下一个同级标签

$div.next().css({"color":"green"});

$div.nextAll().css({"text-indent":"30px"});

// 选择同级的其他标签

$div.siblings().css({"text-decoration":"underline"});

// 选择父标签

$div.parent().css({"background":"gray"});

// 获取所有的子标签

$div.children().css({"color":"green"});

// 查找指定的子标签

$div.find("#p1").css({"color":"red"});

})

</script>

</head>

<body>

<div>

<div id="box1"><span id="p1">我是</span><span>一个子标签</span>康康</div>

</div>

</body>

</html>

```

## 6.获取和设置标签内容

```html

<!DOCTYPE html>

<head>

<title>Document</title>

$(function(){

// 获取标签

var $div = $("div");

// html方法的使用

$div.html("<a href='https://www.baidu.com'>百度</a>");

// append方法追加内容

$div.append("<a>何明康</a>");

})

</script>

</head>

<body>

</body>

</html>

```

## 7.获取和设置元素属性

能够知道获取和设置元素属性的操作

**prop方法设置标签属性**，**样式属性用css方法**

```html

<!DOCTYPE html>

<head>

<title>Document</title>

$(function(){

// 获取标签

var $p = $("p");

var $text = $("#he");

// 获取样式属性，例：获取字体样式大小

var $px = $p.css("font-size");

alert($px);

$p.css({"font-size":"30px","background":"green"});

// 除了样式属性的相关操作使用css方法，其他属性的操作都是prop方法

// 获取属性

var $name = $text.prop("type")

alert($name);

var $type = $text.prop("name")

alert($type);

// 设置属性

// $text.prop({"value":"18"});

// value属性可以使用val方法

alert($text.val())

})

</script>

</head>

<body>

<p>我是一个段落标签</p>

</body>

</html>

```

## 8.jquery事件

### 8.1 常用事件

**click（）鼠标点击**

**blur() 元素失去焦点**

**focus() 元素获得焦点**

**mouseover()鼠标进入（进入子元素也触发）**

**mouseout()鼠标离开（离开子元素也触发）**

**ready() DOM加载完成**

```html

<!DOCTYPE html>

<head>

<title>Document</title>

// 等页面加载完成以后取标签元素

// $(document).ready(function(){

// });

$(function(){

// 获取ul里面的所有标签

var $li = $("ul li");

// 获取button标签

var $btn = $("#btn1");

// 获取text标签

var $text = $("#txt1");

// 获取div标签

var $div = $("div");

$li.click(function(){

// 获取当前点击的标签对象

// this.style.color = "red";

// jquery的写法

$(this).css({"color": "red"});

// 获取点击的索引

alert($(this).index());

});

$btn.click(function(){

// 获取文本框的内容

alert($text.val());

});

// 给text文本框添加焦点事件

$text.focus(function(){

// 获取得到焦点的文本框，然后设置样式属性

$(this).css({"background":"red"});

});

// 失去焦点事件

$text.blur(function(){

$(this).css({"background":"white"});

});

// 给div设置鼠标悬停（进入）事件

$div.mouseover(function(){

$(this).css({"background":"green"});

});

$div.mouseout(function(){

$(this).css({"background":"white"});

});

</script>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

```

## 9.事件代理

**事件代理就是利用事件冒泡的原理（事件冒泡就是事件会向他的父级一级一级的传递），把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能**

```html

<!DOCTYPE html>

<head>

<title>Document</title>

$(function(){

// 获取标签

var $btn = $("#btn1");

var $div = $("div");

$btn.click(function(){

alert("我是按钮");

// 扩展：取消冒泡事件，就是不让事件向父级控件传递

// 默认事件进行冒泡

return false;

});

// $div.click(function(){

// alert("我是div");

// });

// 通过事件代理，让父控件代理子控件的事件，然后执行子控件的相关操作

var $ul = $("div ul");

$ul.delegate("li","click",function(){

$(this).css({"color":"red"});

});

</script>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

```

## 10.javascript对象

### **10.1**JavaScript对象的介绍

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

### 10.2JavaScript创建对象操作

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

通过顶级Object类型实例化一个对象

通过对象字面量创建一个对象

```html

<!DOCTYPE html>

<head>

<title>Document</title>

// 自定义JavaScript对象有两种方式

// 1. 使用顶级类型Object创建自定义对象

var oPerson = new Object();

// 添加属性

oPerson.name = "limen";

oPerson.age = 20;

//添加方法

oPerson.show = function(){

alert("你怎么还一个人！")

};

// 通过对象获取属性和调用方法

alert(oPerson.name);

oPerson.show();

// 2. 使用字面量创建自定义的对象

var oStudent = {

name: "超哥",

age: 20,

show:function(){

alert("我喜欢一个人！")

}

alert(oStudent.name)

oStudent.show()

</script>

</head>

<body>

</body>

</html>

```

## 11.json

### 11.1json的介绍

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

### 11.2json的格式

1.对象格式

2.数组格式

对象格式:

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

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

```json

{

"name":"tom",

"age":18

}

```

**格式说明:**

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

**数组格式:**

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

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

```json

["tom",18,"programmer"]

```

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

```json

{

"name":"jack",

"age":29,

"hobby":["reading","travel","photography"]

"school":{

"name":"Merrimack College",

"location":"North Andover, MA"

}

```

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

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

**示例代码:**

```json

var sJson = '{"name":"tom","age":18}';

var oPerson = JSON.parse(sJson);

// 操作属性

alert(oPerson.name);

alert(oPerson.age);

```

- json就是一个javascript对象表示法，json本质上是一个字符串。

- json有两种格式：1. 对象格式, 2. 数组格式

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<!-- json: 就是类似于JavaScript对象的字符串。本质上就是一个字符串，同时还是一种数据格式

json的数据格式有两种：

1.对象格式：最外层的表现形式是一对大括号，key名和字符串数据都要使用双引号

2.数组格式：最外层是一对中括号，每项数据之间使用逗号进行分隔

-->

// 服务器把json数据给浏览器，当js解析json数据的时候为了方便，把json数据解析成一个javascript对象

// 对象格式的json数据

var sJson1 = '{"name":"hekang","age":21}';

// 把json数据转成JavaScript对象

var oPerson = JSON.parse(sJson1);

console.log(oPerson);

console.log(oPerson.name);

var sJson2 = '[{"name":"kang","age":21},{"name":"li","age":20}]';

var aArray = JSON.parse(sJson2);

console.log(aArray[0].age);

console.log(aArray[1].name);

// 扩展：浏览器给python服务器的json数据，python服务器程序可以解析成字典或者列表

</script>

</head>

<body>

</body>

</html>

```

## 12.ajax

**学习目标**

- 能够知道ajax的作用

------

### 12.1 ajax的介绍

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

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

### 12.2 ajax的使用

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

```html

// 向web服务器发送ajax请求，本质上是一个http协议的请求

$.ajax({

// 请求的资源地址,不指定IP地址和端口号表示请求的是自己的服务器资源数据

url: "data.json",

// 请求方式： GET POST

type: "GET",

// 指定对服务器数据解析的格式

dataType: "JSON",

data: {"name":"hekang"},

// data : 表示发送给web服务器的参数

// 请求成功执行的函数

success:function(data){

console.log(data.name);

// 请求失败执行的函数

error:function(){

// 是否使用异步默认表示使用异步

async: true

});

```

**ajax方法的参数说明:**

1. url 请求地址

2. type 请求方式，默认是'GET'，常用的还有'POST'

3. dataType 设置返回的数据格式，常用的是'json'格式

4. data 设置发送给服务器的数据，没有参数不需要设置

5. success 设置请求成功后的回调函数

6. error 设置请求失败后的回调函数

7. async 设置是否异步，默认值是'true'，表示异步，一般不用写

8. 同步和异步说明

- 同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。

- 异步是多个ajax同时请求，不需要等待其它ajax请求完成，好比线程异步。

**ajax的简写方式:**

$.ajax按照请求方式可以简写成$.get或者$.post方式

**ajax简写方式的示例代码:**

```html

// 发送get方式的ajax请求的简写

$.get("data.json",{"age":21},function(data){

// 如果按照json格式进行解析，js这块能得到一个JavaScript对象

alert(data.age);

}, "JSON").error(function(){

alert("网络问题，请求失败");

});

</script>

```

### **$.get和$.post方法的参数说明:**

$.get(url,data,success(data, status, xhr),dataType).error(func)

$.post(url,data,success(data, status, xhr),dataType).error(func)

1. url 请求地址

2. data 设置发送给服务器的数据，没有参数不需要设置

3. success 设置请求成功后的回调函数

- data 请求的结果数据

- status 请求的状态信息, 比如: "success"

- xhr 底层发送http请求XMLHttpRequest对象

4. dataType 设置返回的数据格式

- "xml"

- "html"

- "text"

- "json"

5. error 表示错误异常处理

- func 错误异常回调函数

### 小结

- ajax 是发送http请求获取后台服务器数据的技术

- ajax的简写方式可以使用$.get和$.post方法来完成

jQuery

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

jQuery

热门文章

最新文章

相关课程

相关电子书

相关实验场景