# 1. jQuery 简介

# 1.1 jQuery 简介jQuery 是一个高效精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作事件处理动画和 Ajax 操作更加简单。目前超过 90% 的网站都使用了 jQuery 库，jQuery 的宗旨：写的更少，做得更多！

# 1.2 jQuery 官网官方地址：点击打开

官方文档：点击打开

# 1.3 jQuery 版本介绍 1.x

（本教程所采用）

兼容老版本 IE文件较大，但兼容性最好 2.x

部分 IE8 及以下版本不支持文件较小，执行效率更高 3.x

完全不再支持 IE8 及以下版本提供了一些新的 API提供不包含 AJAX / 动画 API 的版本# 1.4 jQuery 引入方式本地引入：将 jQuery 下载下来，然后导入项目中，使用 script 标签进行引用代码语言：javascript复制

CDN 引入：使用远程 CDN 资源库在线引入，避免了文件下载（本教程所采用）代码语言：javascript复制

# 1.5 jQuery 快速使用代码语言：javascript复制

jQuery

# 1.6 jQuery 两把利器jQuery 两把利器分别是：

jQuery 核心函数：即： () 或 jQuery ()，jQuery 定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同 / 格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时就是一个工具对象。jQuery 核心对象：即执行 jQuery 核心函数返回的对象，jQuery 对象内部包含的是 dom 元素对象的伪数组 (可能只有一个元素)，jQuery 对象拥有很多有用的属性和方法，让程序员能方便的操作 dom，调用 jQuery 对象的任何方法后返回的还是当前 jQuery 对象。# 2. jQuery 核心函数# 2.1 选择器# 2.1.1 基本选择器# 1. 标签选择器需求描述：选择页面中所有的 div 标签，设置其背景为红色

代码语言：javascript复制

我是div1

我是div2

我是div3

$('div').css('background', 'red');# 2. id 选择器需求描述：选择页面中所有 id 为 btn 的按钮，设置其背景为红色

代码语言：javascript复制

$('#btn').css('background', 'red');# 3. class 选择器需求描述：选择页面中所有 class 为 red 的段落，设置其背景为红色

代码语言：javascript复制

我是段落1

我是段落2

我是段落3

$('.red').css('background', 'red');# 4. 通配符选择器需求描述：选择页面中 class 为 content 的 div 下所有元素，设置其背景为红色

代码语言：javascript复制

我是段落1

我是段落2

我是段落3

$('.content *').css('background', 'red');# 5. 并集选择器需求描述：选择页面中所有的段落与按钮，设置其背景为红色

代码语言：javascript复制

我是段落

我是div

我是大标题

$('p,button').css('background', 'red');# 6. 交集选择器需求描述：选择页面中所有 class 为 red 的段落，设置其背景为红色

代码语言：javascript复制

我是段落1

我是段落2

我是段落3

我是div1

我是div2

我是div3

123456

$('p.red').css('background', 'red');

1# 2.1.2 层级选择器# 2. 子代选择器需求描述：选择 ul 下的所有 span 子元素，设置其背景为红色

代码语言：javascript复制

我是ul的span1

我是li1 我是li1的span1

我是li2 我是li2的span2

我是li3 我是li3的span3

我是ul的span2

$('ul>span').css('background', 'red');# 2. 后代选择器需求描述：选择 ul 下的所有 span 元素，设置其背景为红色

代码语言：javascript复制

我是ul的span1

我是li1 我是li1的span1

我是li2 我是li2的span2

我是li3 我是li3的span3

我是ul的span2

$('ul span').css('background', 'red');# 3. 兄弟选择器需求描述：选中 id 为 box 的下一个兄弟 li，设置其背景为红色

代码语言：javascript复制

我是ul的span1

我是li1 我是li1的span1

我是li2 我是li2的span2

我是li3 我是li3的span3

我是ul的span2

$('#box+li').css('background', 'red');需求描述：选中 id 为 box 的后边的兄弟 li，设置其背景为红色

代码语言：javascript复制

我是ul的span1

我是li1 我是li1的span1

我是li2 我是li2的span2

我是li3 我是li3的span3

我是ul的span2

$('#box~li').css('background', 'red');# 2.1.3 过滤选择器# 1. 基本筛选器需求描述：实现隔行变色，让表格的奇数行的背景变为红色，:even 代表选取下标为偶数的行

代码语言：javascript复制

张三	男	21
李四	女	22
王五	男	23
赵六	女	24

$('tr:even').css('background', 'red');需求描述：实现隔行变色，让表格的偶数行的背景变为红色，:odd 代表选取下标为奇数的行

代码语言：javascript复制

张三	男	21
李四	女	22
王五	男	23
赵六	女	24

$('tr:odd').css('background', 'red');需求描述：实现让表格的第一行的背景变为红色

代码语言：javascript复制

张三	男	21
李四	女	22
王五	男	23
赵六	女	24

$('tr:first').css('background', 'red');需求描述：实现让表格的最后一行的背景变为红色

代码语言：javascript复制

张三	男	21
李四	女	22
王五	男	23
赵六	女	24

$('tr:last').css('background', 'red');需求描述：实现让下标（从 0 开始）小于 2 的行数的背景变为红色

代码语言：javascript复制

张三	男	21
李四	女	22
王五	男	23
赵六	女	24

$('tr:lt(2)').css('background', 'red');需求描述：实现让下标（从 0 开始）大于 2 的行数的背景变为红色

代码语言：javascript复制

张三	男	21
李四	女	22
王五	男	23
赵六	女	24

$('tr:gt(2)').css('background', 'red');需求描述：实现让下标（从 0 开始）等于 2 的行数的背景变为红色

代码语言：javascript复制

张三	男	21
李四	女	22
王五	男	23
赵六	女	24

$('tr:eq(2)').css('background', 'red');需求描述：实现让下标（从 0 开始）不等于 2 的行数的背景变为红色

代码语言：javascript复制

张三	男	21
李四	女	22
王五	男	23
赵六	女	24

$('tr:not(tr:eq(2))').css('background', 'red');# 2. 内容筛选器需求描述：实现让内容为 “男” 的单元格的背景变为红色

代码语言：javascript复制

张三	男	21
李四	女	22
王五	男	23
赵六	女	24

$('td:contains("男")').css('background', 'red');需求描述：实现让内容为 span 标签的单元格的背景变为红色

代码语言：javascript复制

张三	男	21
李四	女	22
王五	男	23
赵六	女	24

$('td:has(span)').css('background', 'red');需求描述：实现让内容为空的单元格的背景变为红色

代码语言：javascript复制

张三	男	21
李四		22
王五	男	23
赵六		24

$('td:empty').css('background', 'red');需求描述：实现让内容不为空的单元格的背景变为红色

代码语言：javascript复制

张三	男	21
李四		22
王五	男	23
赵六		24

$('td:parent').css('background', 'red');# 3. 属性筛选器需求描述：查找 herflang 属性的标签元素，设置其背景为红色

代码语言：javascript复制en

en-UK

zh-CN

$('[hreflang]').css('background', 'red');需求描述：查找 hreflang 属性值是 en 的所有超链接，设置其背景为红色

代码语言：javascript复制en

en-UK

zh-CN

$('a[hreflang="en"]').css('background', 'red');需求描述：查找 hreflang 属性值不是 en 的所有超链接，设置其背景为红色

代码语言：javascript复制en

en-UK

zh-CN

$('a[hreflang!="en"]').css('background', 'red');需求描述：查找 hreflang 属性值是 en 或者以 en 开头的所有超链接，设置其背景为红色

代码语言：javascript复制en

en-UK

zh-CN

$('a[hreflang|="en"]').css('background', 'red');

或者

$('a[hreflang^="en"]').css('background', 'red');需求描述：查找 hreflang 属性值是以给定值 CN 结尾的元素，设置其背景为红色

代码语言：javascript复制en

en-UK

zh-CN

$('a[hreflang$="CN"]').css('background', 'red');需求描述：选择 hreflang 属性具有包含一个给定的子字符串 CN 的超链接，设置其背景为红色

代码语言：javascript复制en

en-UK

zh-CN

$('a[hreflang*="CN"]').css('background', 'red');需求描述：选择 hreflang 属性用空格分隔的值中包含一个给定值为 CN 的超链接，设置其背景为红色

代码语言：javascript复制en

en-UK

zh-CN

$('a[hreflang~="CN"]').css('background', 'red');需求描述：选择 hreflang 属性为 zh-CN，title 属性为 Chinese 的超链接，设置其背景为红色

代码语言：javascript复制en

en-UK

zh-CN

$('a[hreflang="zh-CN"][title="Chinese"]').css('background', 'red');# 4. 可见性筛选器需求描述：让隐藏的段落显示出来

代码语言：javascript复制

我是显示段落

$('p:hidden').css('display', 'block');需求描述：让显示的段落隐藏起来

代码语言：javascript复制

我是显示段落

$('p:visible').css('display', 'none');# 5. 子元素筛选器需求描述：选择所有父级元素 ul 下的第一个子元素 li，设置其背景为红色

代码语言：javascript复制

我是列表项1

我是列表项2

我是列表项3

我是列表项4

$('ul li:first-child').css('background', 'red');需求描述：选择所有父级元素 ul 下的最后一个子元素 li，设置其背景为红色

代码语言：javascript复制

我是列表项1

我是列表项2

我是列表项3

我是列表项4

$('ul li:last-child').css('background', 'red');需求描述：选择所有父级元素 ul 下的第二个子元素 li，设置其背景为红色

代码语言：javascript复制

我是列表项1

我是列表项2

我是列表项3

我是列表项4

$('ul li:nth-child(2)').css('background', 'red');# 2.1.4 表单选择器# 1. 表单类型选择器需求描述：选中表单中的文本框密码框文件框按钮提交按钮重置按钮等，设置其背景为红色

代码语言：javascript复制

$('input:text').css('background', 'red');

$('input:password').css('background', 'red');

$('input:file').css('background', 'red');

$('input:button').css('background', 'red');

$('input:submit').css('background', 'red');

$('input:reset').css('background', 'red');需求描述：选中复选框单选框，然后输出标签信息

代码语言：javascript复制

console.log($(':checkbox')[0]);

console.log($(':radio')[0]);# 2. 表单状态选择器需求描述：输出表单获取焦点表单选中表单禁用表单列表项选中的状态所在的标签信息

代码语言：javascript复制

console.log($(':focus')[0]);

console.log($(':checked')[0]);

console.log($(':disabled')[0]);

console.log($(':selected')[0]);# 2.2 工具# 2.2.1 $.each 方法方法描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从 0 到 length - 1，其他对象通过其属性名进行迭代。

需求描述：给定一个数组，使用 $.each 方法进行遍历输出

代码语言：javascript复制var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];

$.each(arr, function (index, element) {

console.log(index, element);

});需求描述：给定一个对象，使用 $.each 方法进行遍历输出

代码语言：javascript复制var obj = {

name: 'Tom',

age: 28,

speak: function () {}

};

$.each(obj, function (key, value) {

console.log(key, value);

});# 2.2.2 $.trim 方法方法描述：去掉字符串起始和结尾的空格。

需求描述：给定一个字符串，去掉该字符串的前后空格

代码语言：javascript复制var str = ' hello ';

console.log($.trim(str));# 2.2.3 $.type 方法方法描述：确定 JavaScript 对象的类型。

需求描述：给定一个对象，输出该对象的类型

代码语言：javascript复制var str = ' hello ';

console.log($.type(str));# 2.2.4 $.isArray 方法方法描述：用来测试指定对象是否为一个数组。

需求描述：给定一个对象，输出该对象是不是数组类型

代码语言：javascript复制var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];

console.log($.isArray(arr));# 2.2.5 $.isFunction 方法方法描述：用来测试指定对象是否为一个函数。

需求描述：给定一个对象，输出该对象是不是函数类型

代码语言：javascript复制var fun = function () {

console.log("hello");

};

console.log($.isFunction(fun));# 2.3 ajax# 2.3.1 $.ajax 方法方法描述：执行一个异步的 HTTP 的请求。

需求描述：执行一个异步的 HTTP GET 请求，从服务器加载数据。

代码语言：javascript复制$.ajax({

url: '/user/login',

type: 'get',

data: {

username: 'zhangsan',

password: '123456'

dataType: 'text',

success: function (response) {

alert(response);

error: function (response) {

alert(response);

}

});需求描述：执行一个异步的 HTTP POST 请求，从服务器加载数据。

代码语言：javascript复制$.ajax({

url: '/user/login',

type: 'post',

data: {

username: 'zhangsan',

password: '123456'

dataType: 'text',

success: function (response) {

alert(response);

error: function (response) {

alert(response);

}

});# 2.3.2 $.get 方法方法描述：使用一个 HTTP GET 请求从服务器加载数据。

这是一个 ajax 功能的缩写，这相当于:

代码语言：javascript复制$.ajax({

url: url,

data: data,

success: success,

dataType: dataType

});

$.get('/user/login', {username: 'zhangsan', password: '123456'}, function (response) {

alert(response);

});# 2.3.3 $.post 方法方法描述：使用一个 HTTP POST 请求从服务器加载数据。

这是一个 ajax 功能的缩写，这相当于:

代码语言：javascript复制$.ajax({

url: url,

data: data,

success: success,

dataType: dataType

});

$.post('/user/login', {username: 'zhangsan', password: '123456'}, function (response) {

alert(response);

});# 3. jQuery 核心对象# 3.1 属性# 3.1.1 属性# 1. attr()方法描述：专门操作属性值为非布尔值的属性，该方法读写一体。

需求描述：设置 p 标签的 title 属性为” 我是 attr 修改后的段落标题 “

代码语言：javascript复制

我是段落

$('#content').attr('title', '我是attr修改后的段落标题');需求描述：读取 p 标签的 title 属性并输出

代码语言：javascript复制

我是段落

console.log($('#content').attr('title'));# 2. prop()方法描述：专门操作属性值为布尔值的属性，该方法读写一体。

需求描述：设置复选框的状态为选中状态

代码语言：javascript复制复选框

$(':checkbox').prop('checked', 'true');需求描述：读取复选框的选中状态并输出

代码语言：javascript复制复选框

console.log($(':checkbox').prop('checked'));# 3. val()方法描述：该方法主要用于获取表单元素的值和设置表单元素的值，该方法读写一体。

需求描述：设置文本框的值为”123456“

代码语言：javascript复制

$(':text').val('123456');需求描述：读取文本框的值并输出

代码语言：javascript复制

console.log($(':text').val());# 3.1.2 样式# 1. css()方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个 CSS 属性。

需求描述：设置 div 的背景颜色为红色，字体颜色为白色

代码语言：javascript复制

我是div

$('div').css({

'background': 'red',

'color': 'white'

});需求描述：获取 div 的背景颜色和字体颜色并输出

代码语言：javascript复制

我是div

console.log($('div').css('background'));

console.log($('div').css('color'));# 2. addClass()方法描述：为每个匹配的元素添加指定的样式类名。

需求描述：为所有的 li 添加样式”beauty“

代码语言：javascript复制.beauty {

font-weight: bold;

font-size: 18px;

color: coral;

}

列表项1

列表项2

列表项3

列表项4

$('li').addClass('beauty');# 3. removeClass()方法描述：移除集合中每个匹配元素上一个，多个或全部样式。

需求描述：为所有的 li 移除样式”beauty“

代码语言：javascript复制.beauty {

font-weight: bold;

font-size: 18px;

color: coral;

}

列表项1

列表项2

列表项3

列表项4

$('li').removeClass('beauty');# 4. hasClass()方法描述：确定任何一个匹配元素是否有被分配给定的样式类。

需求描述：判断 p 标签是否包含”beauty“的样式

代码语言：javascript复制.beauty {

font-weight: bold;

font-size: 18px;

color: coral;

}

console.log($('p').hasClass('beauty'));# 5. toggleClass()方法描述：为匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在。

注意：如果存在（不存在）就删除（添加）一个样式类

需求描述：当单击按钮的时候，隐藏 div，再次单击按钮的时候，显示 div

代码语言：javascript复制.hide {

width: 100px;

height: 100px;

display: none;

}

我是div

$('button').click(function () {

$('div').toggleClass('hide');

});# 3.1.3 尺寸# 1. width()方法描述：获取内容元素 width 的值。

# 2. height()方法描述：获取内容元素 height 的值。

# 3. innerWidth()方法描述：获取内容元素 width+padding 的值。

# 4. innerHeight()方法描述：获取内容元素 height+padding 的值。

# 5. outerWidth()方法描述：outerWidth (false/true)，获取内容元素 width+padding+border 的值，如果是 true 再加上 margin 的值。

# 6. outerHeight()方法描述：outerHeight (false/true)，获取内容元素 height+padding+border 的值，如果是 true 再加上 margin 的值。

# 7. 综合演示需求描述：创建按一个 div，获取以上六种值

代码语言：javascript复制.box {

margin: 30px;

padding: 20px;

border: 10px;

width: 100px;

height: 100px;

background: coral;

}

var $box = $('.box');

console.log($box.width(), $box.height());// 100 100

console.log($box.innerWidth(), $box.innerHeight());// 140 140

console.log($box.outerWidth(), $box.outerHeight());// 160 160

console.log($box.outerWidth(true), $box.outerHeight(true));// 220 220# 3.1.4 位置# 1. offset()方法描述：相对页面左上角的坐标。

需求描述：获取 div 相对页面左上角的坐标

代码语言：javascript复制.box {

width: 100px;

height: 100px;

background: coral;

}

var offset = $('.box').offset();

console.log(offset.left, offset.top);# 2. position()方法描述：相对于父元素左上角的坐标。

需求描述：获取 div 相对于父元素左上角的坐标

代码语言：javascript复制.box-container {

width: 300px;

height: 300px;

background: pink;

position: absolute;

left: 20px;

top: 20px;

}

.box {

width: 100px;

height: 100px;

background: coral;

position: absolute;

left: 20px;

top: 20px;

}

1234567891011121314151617

var offset = $('.box').position();

console.log(offset.left, offset.top);# 3. scrollLeft()方法描述：读取 / 设置滚动条的 X 坐标，该方法读写合一。

读取页面滚动条的 Y 坐标 (兼容 chrome 和 IE)

代码语言：javascript复制var scrollLeft = $(document.body).scrollLeft()+$(document.documentElement).scrollLeft();设置页面滚动条滚动到指定位置 (兼容 chrome 和 IE)

代码语言：javascript复制$('body,html').scrollLeft(60);需求描述：设置页面的宽度为 2000px，设置滚动条的 X 轴坐标为 300px，要求兼容各种浏览器

代码语言：javascript复制$('body').css('width', '2000px');

$('html,body').scrollLeft(300);# 4. scrollTop()方法描述：读取 / 设置滚动条的 Y 坐标，该方法读写合一。

读取页面滚动条的 Y 坐标 (兼容 chrome 和 IE)

代码语言：javascript复制var scrollTop = $(document.body).scrollTop()+$(document.documentElement).scrollTop();设置页面滚动条滚动到指定位置 (兼容 chrome 和 IE)

代码语言：javascript复制$('body,html').scrollTop(60);需求描述：设置页面的高度为 2000px，设置滚动条的 Y 轴坐标为 300px，要求兼容各种浏览器

代码语言：javascript复制$('body').css('height', '2000px');

$('html,body').scrollTop(300);# 3.2 操作# 3.2.1 DOM 内部插入# 1. text()方法描述：设置 / 获取元素的文本内容，该方法读写合一。

需求描述：设置 p 段落标签的内容为 “我是段落”

代码语言：javascript复制

$('p').text('我是段落');需求描述：获取 p 段落标签的内容并输出

代码语言：javascript复制

我是段落

console.log($('p').text());# 2. html()方法描述：设置 / 获取元素的 html 内容，该方法读写合一。

需求描述：设置 ul 列表标签的 li 列表项

代码语言：javascript复制

var li = '

我是列表项

$('ul').html(li);需求描述：获取 ul 列表中的列表项并输出

代码语言：javascript复制

我是列表项

console.log($('ul').html());# 3. append()方法描述：向当前匹配的所有元素内部的最后面插入指定内容。

需求描述：为当前的 ul 向后添加一个列表项

代码语言：javascript复制

我是列表项1

我是列表项2

var last = '

我是最后一个列表项

$('ul').append(last);# 4. appendTo()方法描述：将指定的内容追加到当前匹配的所有元素的最后面。

需求描述：为当前的 ul 向后添加一个列表项

代码语言：javascript复制

我是列表项1

我是列表项2

var last = '

我是最后一个列表项

$(last).appendTo($('ul'));# 5. prepend()方法描述：向当前匹配的所有元素内部的最前面插入指定内容。

需求描述：为当前的 ul 向前添加一个列表项

代码语言：javascript复制

我是列表项1

我是列表项2

var first = '

我是第一个列表项

$('ul').prepend(first);# 6. prependTo()方法描述：将指定的内容追加到当前匹配的所有元素的最前面。

需求描述：为当前的 ul 向前添加一个列表项

代码语言：javascript复制

我是列表项1

我是列表项2

var first = '

我是第一个列表项

$(first).prependTo($('ul'));# 3.2.2 DOM 外部插入# 1. after()方法描述：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

需求描述：在 div 的后边插入一个段落

代码语言：javascript复制

我是div

var after = '

我是段落

$('div').after(after);# 2. before()方法描述：在匹配元素集合中的每个元素前边插入参数所指定的内容，作为其兄弟节点。

需求描述：在 div 的前边插入一个段落

代码语言：javascript复制

我是div

var before = '

我是段落

$('div').before(before);# 3. insertAfter()方法描述：.after () 和.insertAfter () 实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。对于 .after ()，选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter ()，刚好相反，内容在方法前面，它将被放在参数里元素的后面。

需求描述：在 div 的后边插入一个段落

代码语言：javascript复制

我是div

var content = '

我是段落

$(content).insertAfter($('div'));# 4. insertBefore()方法描述：.before () 和.insertBefore () 实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。对于 .before ()，选择表达式在函数前面，参数是将要插入的内容。对于 .insertBefore ()，刚好相反，内容在方法前面，它将被放在参数里元素的前面。

需求描述：在 div 的前边插入一个段落

代码语言：javascript复制

我是div

var content = '

我是段落

$(content).insertBefore($('div'));# 3.2.3 DOM 移除# 1. empty()方法描述：删除所有匹配元素的子元素。

需求描述：将 ul 列表下所有的子节点全部移除

代码语言：javascript复制

列表项1

我是段落1

列表项2

我是段落2

列表项3

$('ul').empty();# 2. remove()方法描述：删除所有匹配的元素。

注意：同时移除元素上的事件及 jQuery 数据

需求描述：将 ul 列表下所有的 p 子节点全部移除

代码语言：javascript复制

列表项1

我是段落1

列表项2

我是段落2

列表项3

$('ul>p').remove();# 3.2.4 DOM 替换# 1. replaceWith()方法介绍：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

需求描述：将 ul 下的所有 li 替换为 p 标签

代码语言：javascript复制

列表项1

列表项2

列表项3

$('ul>li').replaceWith('

我是段落

');# 2. replaceAll()方法介绍： .replaceAll() 和 .replaceWith() 功能类似，但是目标和源相反。

需求描述：将 ul 下的所有 li 替换为 p 标签

代码语言：javascript复制

列表项1

列表项2

列表项3

$('

我是段落

').replaceAll($('ul>li'));# 3.2.5 DOM 拷贝# clone()方法描述：创建一个匹配的元素集合的深度拷贝副本。如果传入一个 true，则表示是否会复制元素上的事件处理函数，从 jQuery 1.4 开始，元素数据也会被复制。

需求描述：为 ul 列表创建一个深克隆并追加到 body 后

代码语言：javascript复制

列表项1

列表项2

列表项3

var ul = $('#ul').clone();

$('body').append(ul);# 3.2.6 DOM 遍历# 1. parent()方法描述：获取集合中每个匹配元素的父元素，可以提供一个可选的选择器来进行筛选。

需求描述：输出 id 为 two 的 li 的父元素

代码语言：javascript复制

我是段落1

列表项1

列表项2

列表项3

我是段落2

console.log($('#two').parent()[0]);# 2. children()方法描述：获取集合中每个匹配元素的子元素，可以提供一个可选的选择器来进行筛选。

需求描述：输出 ul 下的所有子元素

代码语言：javascript复制

我是段落1

列表项1

列表项2

列表项3

我是段落2

var childrens = $('ul').children();

for (var i = 0; i < childrens.length; i++) {

console.log(childrens[i]);

}# 3. prev()方法描述：获取集合中每个匹配元素紧邻的前一个兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取 id 为 two 元素的前一个兄弟元素并输出

代码语言：javascript复制

我是段落1

列表项1

列表项2

列表项3

我是段落2

console.log($('#two').prev()[0]);# 4. prevAll()方法描述：获得集合中每个匹配元素的所有前面的兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取 id 为 two 元素的前边所有的兄弟元素并输出

代码语言：javascript复制

我是段落1

列表项1

列表项2

列表项3

我是段落2

var prevs = $('#two').prevAll();

for (var i = 0; i < prevs.length; i++) {

console.log(prevs[i]);

}# 5. next()方法描述：获取集合中每个匹配元素紧邻的后一个兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取 id 为 two 元素的后一个兄弟元素并输出

代码语言：javascript复制

我是段落1

列表项1

列表项2

列表项3

我是段落2

console.log($('#two').next()[0]);# 6. nextAll()方法描述：获得集合中每个匹配元素的所有后面的兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取 id 为 two 元素的后边所有的兄弟元素并输出

代码语言：javascript复制

我是段落1

列表项1

列表项2

列表项3

我是段落2

var nexts = $('#two').nextAll();

for (var i = 0; i < nexts.length; i++) {

console.log(nexts[i]);

}# 7. siblings()方法描述：获得集合中每个匹配元素的兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取 id 为 two 元素的所有兄弟元素并输出

代码语言：javascript复制

我是段落1

列表项1

列表项2

列表项3

我是段落2

var siblings = $('#two').siblings();

for (var i = 0; i < siblings.length; i++) {

console.log(siblings[i]);

}# 3.3 遍历# 3.3.1 遍历# 3.3.1.1each()方法描述：遍历一个 jQuery 对象，为每个匹配元素执行一个函数。

需求描述：获取每一个 li 元素并把每一个 li 元素的标签及内容输出

代码语言：javascript复制

我是段落1

列表项1

列表项2

列表项3

我是段落2

$('li').each(function (index, element) {

console.log(index, element);

});# 3.3.2 筛选# 3.3.2.1first()方法描述：获取匹配元素集合中第一个元素。

需求描述：设置 ul 下第一个 li 的背景为红色

代码语言：javascript复制

列表项1

列表项2

列表项3

$('ul>li').first().css('background', 'red');# 3.3.2.2last()方法描述：获取匹配元素集合中最后一个元素。

需求描述：设置 ul 下最后一个 li 的背景为红色

代码语言：javascript复制

列表项1

列表项2

列表项3

$('ul>li').last().css('background', 'red');# 3.3.2.3eq()方法描述：获取匹配元素集合中指定位置索引的一个元素。

注意：索引下标从 0 开始

需求描述：设置 ul 下第二个 li 的背景为红色

代码语言：javascript复制

列表项1

列表项2

列表项3

$('ul>li').eq(1).css('background', 'red');# 3.3.2.4not()方法描述：从匹配的元素集合中移除指定的元素。

需求描述：设置 ul 下 li 标签的背景为红色，排除第二个 li

代码语言：javascript复制

列表项1

列表项2

列表项3

var two = $('ul>li').eq(1);

$('ul>li').not(two).css('background', 'red');# 3.3.2.5filter()方法描述：筛选元素集合中匹配表达式或通过传递函数测试的元素集合。

需求描述：查找所有 id 为 two 的 li 标签设置其背景为红色

代码语言：javascript复制

列表项1

列表项2

列表项3

$('ul>li').filter('[id=two]').css('background', 'red');# 3.4 事件# 3.4.1 浏览器事件# 1. resize()方法描述：为 JavaScript 的 “resize” 事件绑定一个处理函数，或者触发元素上的该事件。

需求描述：当浏览器窗口的尺寸改变时，控制台输出 “浏览器尺寸改变了”

代码语言：javascript复制$(window).resize(function () {

console.log('浏览器尺寸改变了');

});# 2. scroll()方法描述：为 JavaScript 的 “scroll” 事件绑定一个处理函数，或者触发元素上的该事件。

需求描述：当浏览器窗口的滚动条滚动时，控制台输出 “浏览器滚动条改变了”

代码语言：javascript复制body {

height: 2000px;

}

$(window).scroll(function () {

console.log('浏览器滚动条改变了');

});# 3.4.2 事件绑定# 1. on()方法描述：在选定的元素上绑定一个或多个事件处理函数。

需求描述：为按钮添加单击事件，当按钮单击的时候，向控制台输出 “按钮被单击了”

代码语言：javascript复制

$('button').on('click',function () {

console.log('按钮被单击了');

});# 2. off()方法描述：移除一个事件处理函数。

需求描述：为按钮添加单击事件，然后再解绑，这时候你在点击按钮看看是不是不会输出信息了

代码语言：javascript复制

$('button').on('click',function () {

console.log('按钮被单击了');

});

$('button').off('click');# 3.4.3 事件委托# 1. delegate()方法描述：设置事件委托。

需求描述：为 ul 下的所有 li 添加单击事件，要求将该单击事件委托给 ul，当单击 li 时，所对应的 li 背景变为红色

代码语言：javascript复制

1111

2222

3333

4444

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

this.style.background = 'red';

});# 2. undelegate()方法描述：移除事件委托。

需求描述：要求移除上一节中设置的事件委托，然后在分别点击 li 进行验证是否移除事件委托

代码语言：javascript复制

1111

2222

3333

4444

// 设置事件委托

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

this.style.background = 'red';

});

// 移除事件委托

$('ul').undelegate('click');# 3.4.4 事件对象对象属性名称

对象属性描述

event.currentTarget

当前执行的 DOM 元素。

event.target

触发事件的 DOM 元素。

event.pageX

相对于页面的左上角。

event.pageY

相对于页面的顶部。

event.clientX

相对于视口的左上角。

event.clientY

相对于视口的顶部。

event.offsetX

相对于事件元素左上角。

event.offsetY

相对于事件元素顶部。

event.key

键盘的按键信息。

event.preventDefault()

阻止事件默认行为。

event.stopPropagation()

防止事件向外冒泡。

# 3.4.5 表单事件# 1. focus()方法描述：当失去焦点时触发所绑定的函数。

需求描述：当文本框获取焦点时，设置其背景为红色

代码语言：javascript复制

$(':text').focus(function () {

$(this).css('background', 'red');

});# 2. blur()方法描述：当获取焦点时触发所绑定的函数。

需求描述：当文本框获取焦点时，设置其背景为红色，当文本框失去焦点时，设置其背景为绿色

代码语言：javascript复制

$(':text').focus(function () {

$(this).css('background', 'red');

});

$(':text').blur(function () {

$(this).css('background', 'green');

});# 3. change()方法描述：当内容改变时触发所绑定的函数。

需求描述：当文本框内容改变时，就向控制台输出当前文本框的内容

代码语言：javascript复制

$(':text').change(function () {

console.log($(this).val());

});需求描述：当选择框的内容改变时，就向控制台输出当前选中项的内容

代码语言：javascript复制

$('select').change(function () {

console.log($(this).val());

});# 4. select()方法描述：当内容选择时触发所绑定的函数。

需求描述：当文本框的内容被选择时，就向控制台输出当前文本框的内容

代码语言：javascript复制

$('input').select(function () {

console.log($(this).val());

});# 5. submit()方法描述：当表单提交时触发所绑定的函数。

需求描述：当表单提交的时候，弹出对话框 “表单提交了”

代码语言：javascript复制

$('form').submit(function () {

alert('表单提交了');

});# 3.4.6 鼠标事件# 1. click()方法描述：当鼠标单击时调用所绑定的函数。

需求描述：为按钮绑定一个单击函数，然后点击按钮，在控制台输出 “按钮被单击了”

代码语言：javascript复制

$('button').click(function () {

console.log('按钮被单击了');

});# 2. dblclick()方法描述：当鼠标双击时调用所绑定的函数。

需求描述：为按钮绑定一个双击函数，然后双击按钮，在控制台输出 “按钮被单击了”

代码语言：javascript复制

$('button').dblclick(function () {

console.log('按钮被双击了');

});# 3. mousedown()方法描述：当鼠标左键按下的时候调用所绑定的函数。

需求描述：当鼠标左键按下的时候，控制台输出 “鼠标左键按下”

代码语言：javascript复制

$('button').mousedown(function () {

console.log('鼠标左键按下');

});# 4. mouseup()方法描述：当鼠标左键松开的时候调用所绑定的函数。

需求描述：当鼠标左键松开的时候，控制台输出 “鼠标左键松开”

代码语言：javascript复制

$('button').mouseup(function () {

console.log('鼠标左键松开');

});# 5. mouseenter()方法描述：当鼠标进入目标元素的时候调用所绑定的函数。

需求描述：创建两个 div，当鼠标移到外层 div 的时候，向控制台输出 “mouse enter”

代码语言：javascript复制.outer {

width: 200px;

height: 200px;

background: coral;

}

.inner {

width: 100px;

height: 100px;

background: pink;

}

$('.outer').mouseenter(function () {

console.log('mouse enter');

});# 6. mouseleave()方法描述：当鼠标离开目标元素的时候调用所绑定的函数。

需求描述：创建两个 div，当鼠标移出外层 div 的时候，向控制台输出 “mouse leave”

代码语言：javascript复制.outer {

width: 200px;

height: 200px;

background: coral;

}

.inner {

width: 100px;

height: 100px;

background: pink;

}

$('.outer').mouseleave(function () {

console.log('mouse leave');

});# 7. mouseover()方法描述：当鼠标进入目标元素的时候调用所绑定的函数。

注意： mouseenter 事件和 mouseover 的不同之处是事件的冒泡的方式。 mouseenter 事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。

需求描述：创建两个 div，当鼠标移到外层 div 的时候，向控制台输出 “mouse over”，鼠标移到内层 div 的时候，向控制台输出 “mouse over”，当鼠标移到外层 div 的时候，向控制台输出 “mouse over”

代码语言：javascript复制.outer {

width: 200px;

height: 200px;

background: coral;

}

.inner {

width: 100px;

height: 100px;

background: pink;

}

$('.outer').mouseover(function () {

console.log('mouse over');

});# 8. mouseout()方法描述：当鼠标离开目标元素的时候调用所绑定的函数。

注意： mouseleave 事件和 mouseout 的不同之处是事件的冒泡的方式。 mouseleave 事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。

需求描述：创建两个 div，当鼠标移出外层 div 的时候，向控制台输出 “mouse out”

代码语言：javascript复制.outer {

width: 200px;

height: 200px;

background: coral;

}

.inner {

width: 100px;

height: 100px;

background: pink;

}

$('.outer').mouseout(function () {

console.log('mouse out');

});# 9. mousemove()方法描述：当鼠标指针在元素内移动时， mousemove 事件就会被触发，任何 HTML 元素都可以接受此事件。

需求描述：鼠标在 div 内移动，获取当前鼠标相对 div 的位置坐标

代码语言：javascript复制.outer {

width: 200px;

height: 200px;

background: black;

position: absolute;

left: 20px;

top: 20px;

}

$('.outer').mousemove(function (event) {

console.log(event.offsetX, event.offsetY);

});# 10. hover()方法描述： .hover() 方法是同时绑定 mouseenter 和 mouseleave 事件。

需求描述：当鼠标进入 div 设置背景为红色，当鼠标移出 div 设置背景为绿色，默认背景为黑色

代码语言：javascript复制.outer {

width: 200px;

height: 200px;

background: black;

}

$('.outer').hover(function () {

$(this).css('background', 'red');

}, function () {

$(this).css('background', 'green');

});# 3.4.7 键盘事件# 1. keydown()方法描述：当键盘按键按下的时候调用绑定的函数。

需求描述：当键盘按键按下的时候，输出当前的按键

代码语言：javascript复制

$(':text').keydown(function (event) {

console.log(event.key);

});# 2. keyup()方法描述：当键盘按键松开的时候调用绑定的函数。

需求描述：当键盘按键松开的时候，输出当前的按键

代码语言：javascript复制

$(':text').keyup(function (event) {

console.log(event.key);

});# 3. keypress()方法描述：keypress 与 keydown 类似，当键盘按键按下的时候调用绑定的函数。

需求描述：当键盘按键按下的时候，输出当前的按键

代码语言：javascript复制

$(':text').keypress(function (event) {

console.log(event.key);

});# 3.5 动画# 3.5.1 基础# 1. hide()方法描述：隐藏元素。

需求描述：创建一个显示 div，然后隐藏该元素

代码语言：javascript复制.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

$('.box').hide();# 2. show()方法描述：显示元素。

需求描述：创建一个隐藏 div，然后显示该元素

代码语言：javascript复制.box {

width: 200px;

height: 200px;

background: coral;

display: none;

}

$('.box').show();# 3. toggle()方法描述：如果隐藏就设置为显示，如果显示就设置为隐藏。

需求描述：创建一个按钮，控制 div 显示和隐藏

代码语言：javascript复制.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

$('button').click(function () {

$('.box').toggle();

});# 3.5.2 渐变# 1. fadeIn()方法描述：通过淡入的方式显示匹配元素。

需求描述：创建一个按钮，控制 div 缓慢淡入

代码语言：javascript复制.box {

width: 200px;

height: 200px;

background: coral;

display: none;

}

$('button').click(function () {

$('.box').fadeIn('slow');

});# 2. fadeOut()方法描述：通过淡出的方式隐藏匹配元素。

需求描述：创建一个按钮，控制 div 缓慢淡出

代码语言：javascript复制.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

$('button').click(function () {

$('.box').fadeOut('slow');

});# 3. fadeToggle()方法描述：用淡入淡出动画显示或隐藏一个匹配元素。

需求描述：创建一个按钮，控制 div 淡入和淡出

代码语言：javascript复制.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

$('button').click(function () {

$('.box').fadeToggle('slow');

});# 3.5.3 滑动# 1. slideDown()方法描述：用滑动动画显示一个匹配元素。

需求描述：创建一个按钮，控制 div 滑动显示

代码语言：javascript复制.box {

width: 200px;

height: 200px;

background: coral;

display: none;

}

$('button').click(function () {

$('.box').slideDown();

});# 2. slideUp()方法描述：用滑动动画隐藏一个匹配元素。

需求描述：创建一个按钮，控制 div 滑动隐藏

代码语言：javascript复制.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

$('button').click(function () {

$('.box').slideUp();

});# 3. slideToggle()方法描述：用滑动动画显示或隐藏一个匹配元素。

需求描述：创建一个按钮，控制 div 滑动显示和滑动隐藏

代码语言：javascript复制.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

$('button').click(function () {

$('.box').slideToggle();

});# 3.5.4 自定义# 1. animate()方法描述：根据一组 CSS 属性，执行自定义动画，并且支持链式调用。

需求描述：创建一个 div，默认 div 宽高 100px，背景颜色为黑色，先让 div 宽度变为 200px，再让 div 高度变为 200px

代码语言：javascript复制.box {

width: 100px;

height: 100px;

background: black;

}

$('.box')

.animate({

width: '200'

})

.animate({

height: '200',

});# 2. stop()方法描述：停止匹配元素当前正在运行的动画。

# 4. jQuery 插件介绍# 4.1 扩展 jQuery 工具给 jQuery 工具添加 4 个工具方法：

代码语言：javascript复制min(a, b) : 返回较小的值

max(c, d) : 返回较大的值

leftTrim() : 去掉字符串左边的空格

rightTrim() : 去掉字符串右边的空格如何实现呢？请参考以下代码：

代码语言：javascript复制// 扩展jQuery工具的方法

$.extend({

min: function (a, b) {

return a < b ? a : b

max: function (a, b) {

return a > b ? a : b

leftTrim: function (str) {

return str.replace(/^\s+/, '')

rightTrim: function (str) {

return str.replace(/\s+$/, '')

}

});

// 测试扩展jQuery工具的方法

console.log($.min(3, 5));

console.log($.max(3, 5));

console.log('-----' + $.leftTrim(' hello ') + '-----');

console.log('-----' + $.rightTrim(' hello ') + '-----');# 4.2 扩展 jQuery 对象给 jQuery 对象添加 3 个功能方法：

代码语言：javascript复制checkAll() : 全选

unCheckAll() : 全不选

reverseCheck() : 全反选如何实现呢？请参考以下代码：

代码语言：javascript复制// 扩展jQuery对象的方法

$.fn.extend({

checkAll: function () {

this.prop('checked', true);

unCheckAll: function () {

this.prop('checked', false);

reverseCheck: function () {

this.each(function () {

this.checked = !this.checked;

});

}

});

足球

篮球

羽毛球

乒乓球

// 测试扩展jQuery对象的方法

var $items = $(':checkbox[name=items]');

$('#checkedAllBtn').click(function () {

$items.checkAll();

});

$('#checkedNoBtn').click(function () {

$items.unCheckAll();

});

$('#reverseCheckedBtn').click(function () {

$items.reverseCheck();

});

学习jQuery这一篇就够了

我是大标题

相关推荐

聚美优品

周年坐骑宝箱说明

Apple Music空间音频设置指南

外媒评测：摩托通讯耳机的王者之争-SENA vs CARDO

如何关闭QQ农场

装修了2次，我终于知道了究竟该怎样隐藏插座和电源线！

《笑傲江湖》门派深度解析：衡山派为什么会被左冷禅优先打击？

浑窳的意思/分词解释/用法/读音

大象的鼻子为什么这么长？

友情链接