学习jQuery这一篇就够了_jquery学习-程序员宅基地

技术标签： 学习  Web  jquery  javascript  

目录

配套资料，免费下载
链接：https://pan.baidu.com/s/152NnFqzAUx9br2qb49mstA
提取码：ujyp
复制这段内容后打开百度网盘手机App，操作更方便哦

第一章 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标签进行引用
<head>
    <script src="jquery-1.9.1.min.js"></script>
</head>
  • CDN引入：使用远程CDN资源库在线引入，避免了文件下载（本教程所采用）
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

1.5、jQuery快速使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function () {
      
        // 请将jQuery代码书写在这里 ...
        alert('Hello,World!');
    });
</script>
</body>
</html>

1.6、jQuery两把利器

jQuery两把利器分别是：

  • jQuery核心函数：即： $() 或 jQuery()，jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同/格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时 $ 就是一个工具对象。
  • jQuery核心对象：即执行jQuery核心函数返回的对象，jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom，调用jQuery对象的任何方法后返回的还是当前jQuery对象。

第二章 jQuery核心函数

2.1、选择器

2.1.1、基本选择器

2.1.1.1、标签选择器

需求描述：选择页面中所有的div标签，设置其背景为红色

<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>

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

image-20201108173258243

2.1.1.2、id选择器

需求描述：选择页面中所有id为btn的按钮，设置其背景为红色

<button>按钮1</button>
<button id="btn">按钮2</button>
<button>按钮3</button>

$('#btn').css('background', 'red');

image-20201108174241651

2.1.1.3、class选择器

需求描述：选择页面中所有class为red的段落，设置其背景为红色

<p class="red">我是段落1</p>
<p>我是段落2</p>
<p class="red">我是段落3</p>

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

image-20201108174410579

2.1.1.4、通配符选择器

需求描述：选择页面中class为content的div下所有元素，设置其背景为红色

<div class="content">
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
</div>

$('.content *').css('background', 'red');

image-20201108183707902

2.1.1.5、并集选择器

需求描述：选择页面中所有的段落与按钮，设置其背景为红色

<p>我是段落</p>
<button>我是按钮</button>
<div>我是div</div>
<h1>我是大标题</h1>

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

image-20201108183914014

2.1.1.6、交集选择器

需求描述：选择页面中所有class为red的段落，设置其背景为红色

<p class="red">我是段落1</p>
<p class="red">我是段落2</p>
<p class="red">我是段落3</p>
<div class="red">我是div1</div>
<div class="red">我是div2</div>
<div class="red">我是div3</div>

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

image-20201108184128559

2.1.2、层级选择器

2.1.2.1、子代选择器

需求描述：选择ul下的所有span子元素，设置其背景为红色

<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

$('ul>span').css('background', 'red');

image-20201110181100657

2.1.2.2、后代选择器

需求描述：选择ul下的所有span元素，设置其背景为红色

<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

$('ul span').css('background', 'red');

image-20201110181202087

2.1.2.3、兄弟选择器

需求描述：选中id为box的下一个兄弟li，设置其背景为红色

<ul>
    <span>我是ul的span1</span>
    <li id="box">我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

$('#box+li').css('background', 'red');

image-20201110181745366

需求描述：选中id为box的后边的兄弟li，设置其背景为红色

<ul>
    <span>我是ul的span1</span>
    <li id="box">我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

$('#box~li').css('background', 'red');

image-20201110181831495

2.1.3、过滤选择器

2.1.3.1、基本筛选器

需求描述：实现隔行变色，让表格的奇数行的背景变为红色，:even代表选取下标为偶数的行

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:even').css('background', 'red');

image-20201111112357714

需求描述：实现隔行变色，让表格的偶数行的背景变为红色，:odd代表选取下标为奇数的行

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:odd').css('background', 'red');

image-20201111112537833

需求描述：实现让表格的第一行的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:first').css('background', 'red');

image-20201111113400031

需求描述：实现让表格的最后一行的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:last').css('background', 'red');

image-20201111113453734

需求描述：实现让下标（从0开始）小于2的行数的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:lt(2)').css('background', 'red');

image-20201111113912067

需求描述：实现让下标（从0开始）大于2的行数的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:gt(2)').css('background', 'red');

image-20201111114920024

需求描述：实现让下标（从0开始）等于2的行数的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:eq(2)').css('background', 'red');

image-20201111115028273

需求描述：实现让下标（从0开始）不等于2的行数的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:not(tr:eq(2))').css('background', 'red');

image-20201111115202609

2.1.3.2、内容筛选器

需求描述：实现让内容为“男”的单元格的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('td:contains("男")').css('background', 'red');

image-20201111120011180

需求描述：实现让内容为span标签的单元格的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td><span>女</span></td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td><span>女</span></td><td>24</td></tr>
</table>

$('td:has(span)').css('background', 'red');

image-20201111120813884

需求描述：实现让内容为空的单元格的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td></td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td></td><td>24</td></tr>
</table>

$('td:empty').css('background', 'red');

image-20201111120205737

需求描述：实现让内容不为空的单元格的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td></td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td></td><td>24</td></tr>
</table>

$('td:parent').css('background', 'red');

image-20201111120622665

2.1.3.3、属性筛选器

需求描述：查找herflang属性的标签元素，设置其背景为红色

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

$('[hreflang]').css('background', 'red');

image-20201112091316884

需求描述：查找hreflang属性值是en的所有超链接，设置其背景为红色

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

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

image-20201112091734984

需求描述：查找hreflang属性值不是en的所有超链接，设置其背景为红色

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

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

image-20201112091926200

需求描述：查找hreflang属性值是en或者以en开头的所有超链接，设置其背景为红色

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

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

image-20201112091126256

需求描述：查找hreflang属性值是以给定值CN结尾的元素，设置其背景为红色

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

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

image-20201112093211690

需求描述：选择hreflang属性具有包含一个给定的子字符串CN的超链接，设置其背景为红色

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

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

image-20201112092429193

需求描述：选择hreflang属性用空格分隔的值中包含一个给定值为CN的超链接，设置其背景为红色

<a href="" hreflang="en">en</a>
<a href="" hreflang="en UK">en-UK</a>
<a href="" hreflang="zh CN">zh-CN</a>

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

image-20201112092856115

需求描述：选择hreflang属性为zh-CN，title属性为Chinese的超链接，设置其背景为红色

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN" title="Chinese">zh-CN</a>

$('a[hreflang="zh-CN"][title="Chinese"]').css('background', 'red');

image-20201112095539910

2.1.3.4、可见性筛选器

需求描述：让隐藏的段落显示出来

<p style="display: block">我是显示段落</p>
<p style="display: none">我是隐藏段落</p>

$('p:hidden').css('display', 'block');

image-20201112100048861

需求描述：让显示的段落隐藏起来

<p style="display: block">我是显示段落</p>
<p style="display: none">我是隐藏段落</p>

$('p:visible').css('display', 'none');

image-20201112100256467

2.1.3.5、子元素筛选器

需求描述：选择所有父级元素ul下的第一个子元素li，设置其背景为红色

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>

$('ul li:first-child').css('background', 'red');

image-20201112101446747

需求描述：选择所有父级元素ul下的最后一个子元素li，设置其背景为红色

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>

$('ul li:last-child').css('background', 'red');

image-20201112101837483

需求描述：选择所有父级元素ul下的第二个子元素li，设置其背景为红色

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>

$('ul li:nth-child(2)').css('background', 'red');

image-20201112104323763

2.1.4、表单选择器

2.1.4.1、表单类型选择器

需求描述：选中表单中的文本框、密码框、文件框、按钮、提交按钮、重置按钮等，设置其背景为红色

<form>
    <input type="text"><br>
    <input type="password"><br>
    <input type="file"><br>
    <input type="button" value="按钮"><br>
    <input type="submit" value="提交按钮"><br>
    <input type="reset" value="重置按钮"><br>
</form>

$('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');

image-20201112105954052

需求描述：选中复选框、单选框，然后输出标签信息

<form>
    <input type="checkbox">复选框<br>
    <input type="radio">单选框<br>
</form>

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

image-20201112111743216

2.1.4.2、表单状态选择器

需求描述：输出表单获取焦点、表单选中、表单禁用、表单列表项选中的状态所在的标签信息

<form>
    <input type="text" autofocus><br>
    <input type="checkbox" checked>复选框<br>
    <input type="radio" disabled>单选框<br>
    <select>
        <option selected>列表项1</option>
        <option>列表项2</option>
    </select>
</form>

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

image-20201112111607308

2.2、工具

2.2.1、$.each方法

方法描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1，其他对象通过其属性名进行迭代。

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

var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
$.each(arr, function (index, element) {
    
    console.log(index, element);
});

image-20201112150402126

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

var obj = {
    
    name: 'Tom',
    age: 28,
    speak: function () {
    }
};
$.each(obj, function (key, value) {
    
    console.log(key, value);
});

image-20201112150826663

2.2.2、$.trim方法

方法描述：去掉字符串起始和结尾的空格。

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

var str = '    hello    ';
console.log($.trim(str));

image-20201112153235248

2.2.3、$.type方法

方法描述：确定JavaScript 对象的类型。

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

var str = '    hello    ';
console.log($.type(str));

image-20201112153751009

2.2.4、$.isArray方法

方法描述：用来测试指定对象是否为一个数组。

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

var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
console.log($.isArray(arr));

image-20201112154343259

2.2.5、$.isFunction方法

方法描述：用来测试指定对象是否为一个函数。

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

var fun = function () {
    
    console.log("hello");
};
console.log($.isFunction(fun));

image-20201112154758585

2.3、ajax

2.3.1、$.ajax方法

方法描述：执行一个异步的HTTP的请求。

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

$.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请求，从服务器加载数据。

$.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功能的缩写，这相当于:

$.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功能的缩写，这相当于:

$.ajax({
    
    url: url,
    data: data,
    success: success,
    dataType: dataType
});

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

第三章 jQuery核心对象

3.1、属性

3.1.1、属性

3.1.1.1、attr()

方法描述：专门操作属性值为非布尔值的属性，该方法读写一体。

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

<p id="content" title="我是段落标题">我是段落</p>

$('#content').attr('title', '我是attr修改后的段落标题');

image-20201112173818651

需求描述：读取p标签的title属性并输出

<p id="content" title="我是段落标题">我是段落</p>

console.log($('#content').attr('title'));

image-20201112173942146

3.1.1.2、prop()

方法描述：专门操作属性值为布尔值的属性，该方法读写一体。

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

<input type="checkbox">复选框

$(':checkbox').prop('checked', 'true');

image-20201112174254845

需求描述：读取复选框的选中状态并输出

<input type="checkbox" checked>复选框

console.log($(':checkbox').prop('checked'));

image-20201112174448411

3.1.1.3、val()

方法描述：该方法主要用于获取表单元素的值和设置表单元素的值，该方法读写一体。

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

<input type="text">

$(':text').val('123456');

image-20201112174730206

需求描述：读取文本框的值并输出

<input type="text" value="123456">

console.log($(':text').val());

image-20201112175045084

3.1.2、样式

3.1.2.1、css()

方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。

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

<div>我是div</div>

$('div').css({
    
    'background': 'red',
    'color': 'white'
});

image-20201112210702861

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

<div style="background: red;color: white">我是div</div>

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

image-20201112210937731

3.1.2.2、addClass()

方法描述：为每个匹配的元素添加指定的样式类名。

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

.beauty {
    
    font-weight: bold;
    font-size: 18px;
    color: coral;
}

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

$('li').addClass('beauty');

image-20201112211305303

3.1.2.3、removeClass()

方法描述：移除集合中每个匹配元素上一个，多个或全部样式。

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

.beauty {
    
    font-weight: bold;
    font-size: 18px;
    color: coral;
}

<ul>
    <li class="beauty">列表项1</li>
    <li class="beauty">列表项2</li>
    <li class="beauty">列表项3</li>
    <li class="beauty">列表项4</li>
</ul>

$('li').removeClass('beauty');

image-20201112211549376

3.1.2.4、hasClass()

方法描述：确定任何一个匹配元素是否有被分配给定的样式类。

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

.beauty {
    
    font-weight: bold;
    font-size: 18px;
    color: coral;
}

<p class="beauty"></p>

console.log($('p').hasClass('beauty'));

image-20201112212506796

3.1.2.5、toggleClass()

方法描述：为匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在。

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

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

.hide {
    
    width: 100px;
    height: 100px;
    display: none;
}

<button>按钮</button>
<div>我是div</div>

$('button').click(function () {
    
    $('div').toggleClass('hide');
});

1

3.1.3、尺寸

3.1.3.1、width()

方法描述：获取内容元素width的值。

3.1.3.2、height()

方法描述：获取内容元素height的值。

3.1.3.3、innerWidth()

方法描述：获取内容元素width+padding的值。

3.1.3.4、innerHeight()

方法描述：获取内容元素height+padding的值。

3.1.3.5、outerWidth()

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

3.1.3.6、outerHeight()

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

3.1.3.7、综合演示

需求描述：创建按一个div，获取以上六种值

.box {
    
    margin: 30px;
    padding: 20px;
    border: 10px;
    width: 100px;
    height: 100px;
    background: coral;
}

<div class="box"></div>

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、位置

3.1.4.1、offset()

方法描述：相对页面左上角的坐标。

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

.box {
    
    width: 100px;
    height: 100px;
    background: coral;
}

<div class="box"></div>

var offset = $('.box').offset();
console.log(offset.left, offset.top);

image-20201113081934904

3.1.4.2、position()

方法描述：相对于父元素左上角的坐标。

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

.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;
}

<div class="box-container">
    <div class="box"></div>
</div>

var offset = $('.box').position();
console.log(offset.left, offset.top);

image-20201113082307166

3.1.4.3、scrollLeft()

方法描述：读取/设置滚动条的X坐标，该方法读写合一。

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

var scrollLeft = $(document.body).scrollLeft()+$(document.documentElement).scrollLeft();

设置页面滚动条滚动到指定位置(兼容chrome和IE)

$('body,html').scrollLeft(60);

需求描述：设置页面的宽度为2000px，设置滚动条的X轴坐标为300px，要求兼容各种浏览器

$('body').css('width', '2000px');
$('html,body').scrollLeft(300);
3.1.4.4、scrollTop()

方法描述：读取/设置滚动条的Y坐标，该方法读写合一。

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

var scrollTop = $(document.body).scrollTop()+$(document.documentElement).scrollTop();

设置页面滚动条滚动到指定位置(兼容chrome和IE)

$('body,html').scrollTop(60);

需求描述：设置页面的高度为2000px，设置滚动条的Y轴坐标为300px，要求兼容各种浏览器

$('body').css('height', '2000px');
$('html,body').scrollTop(300);

3.2、操作

3.2.1、DOM内部插入

3.2.1.1、text()

方法描述：设置/获取元素的文本内容，该方法读写合一。

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

<p></p>

$('p').text('我是段落');

image-20201113095528518

需求描述：获取p段落标签的内容并输出

<p>我是段落</p>

console.log($('p').text());

image-20201113095705829

3.2.1.2、html()

方法描述：设置/获取元素的html内容，该方法读写合一。

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

<ul></ul>

var li = '<li>我是列表项</li>';
$('ul').html(li);

image-20201113095925458

需求描述：获取ul列表中的列表项并输出

<ul><li>我是列表项</li></ul>

console.log($('ul').html());

image-20201113100057187

3.2.1.3、append()

方法描述：向当前匹配的所有元素内部的最后面插入指定内容。

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

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
</ul>

var last = '<li>我是最后一个列表项</li>';
$('ul').append(last);

image-20201113100558048

3.2.1.4、appendTo()

方法描述：将指定的内容追加到当前匹配的所有元素的最后面。

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

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
</ul>

var last = '<li>我是最后一个列表项</li>';
$(last).appendTo($('ul'));

image-20201113100558048

3.2.1.5、prepend()

方法描述：向当前匹配的所有元素内部的最前面插入指定内容。

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

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
</ul>

var first = '<li>我是第一个列表项</li>';
$('ul').prepend(first);

image-20201113100940938

3.2.1.6、prependTo()

方法描述：将指定的内容追加到当前匹配的所有元素的最前面。

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

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
</ul>

var first = '<li>我是第一个列表项</li>';
$(first).prependTo($('ul'));

image-20201113100940938

3.2.2、DOM外部插入

3.2.2.1、after()

方法描述：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

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

<div>我是div</div>

var after = '<p>我是段落</p>';
$('div').after(after);

image-20201113101726137

3.2.2.2、before()

方法描述：在匹配元素集合中的每个元素前边插入参数所指定的内容，作为其兄弟节点。

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

<div>我是div</div>

var before = '<p>我是段落</p>';
$('div').before(before);

image-20201113101831389

3.2.2.3、insertAfter()

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

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

<div>我是div</div>

var content = '<p>我是段落</p>';
$(content).insertAfter($('div'));

image-20201113101726137

3.2.2.4、insertBefore()

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

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

<div>我是div</div>

var content = '<p>我是段落</p>';
$(content).insertBefore($('div'));

image-20201113101831389

3.2.3、DOM移除

3.2.3.1、empty()

方法描述：删除所有匹配元素的子元素。

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

<ul>
    <li>列表项1</li>
    <p>我是段落1</p>
    <li>列表项2</li>
    <p>我是段落2</p>
    <li>列表项3</li>
</ul>

$('ul').empty();

image-20201113134718228

3.2.3.2、remove()

方法描述：删除所有匹配的元素。

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

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

<ul>
    <li>列表项1</li>
    <p>我是段落1</p>
    <li>列表项2</li>
    <p>我是段落2</p>
    <li>列表项3</li>
</ul>

$('ul>p').remove();

image-20201113135157720

3.2.4、DOM替换

3.2.4.1、replaceWith()

方法介绍：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

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

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

$('ul>li').replaceWith('<p>我是段落</p>');

image-20201113141113105

3.2.4.2、replaceAll()

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

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

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

$('<p>我是段落</p>').replaceAll($('ul>li'));

image-20201113141113105

3.2.5、DOM拷贝

3.2.5.1、clone()

方法描述：创建一个匹配的元素集合的深度拷贝副本。如果传入一个true，则表示是否会复制元素上的事件处理函数，从jQuery 1.4开始，元素数据也会被复制。

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

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

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

image-20201113142643169

3.2.6、DOM遍历

3.2.6.1、parent()

方法描述：获取集合中每个匹配元素的父元素，可以提供一个可选的选择器来进行筛选。

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

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>

console.log($('#two').parent()[0]);

image-20201113160103802

3.2.6.2、children()

方法描述：获取集合中每个匹配元素的子元素，可以提供一个可选的选择器来进行筛选。

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

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>

var childrens = $('ul').children();
for (var i = 0; i < childrens.length; i++) {
    
    console.log(childrens[i]);
}

3.2.6.3、prev()

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

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

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>

console.log($('#two').prev()[0]);

image-20201113160609018

3.2.6.4、prevAll()

方法描述：获得集合中每个匹配元素的所有前面的兄弟元素，可以提供一个可选的选择器来进行筛选。

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

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>

var prevs = $('#two').prevAll();
for (var i = 0; i < prevs.length; i++) {
    
    console.log(prevs[i]);
}

image-20201113160818258

3.2.6.5、next()

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

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

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>

console.log($('#two').next()[0]);

image-20201113160653695

3.2.6.6、nextAll()

方法描述：获得集合中每个匹配元素的所有后面的兄弟元素，可以提供一个可选的选择器来进行筛选。

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

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>

var nexts = $('#two').nextAll();
for (var i = 0; i < nexts.length; i++) {
    
    console.log(nexts[i]);
}

image-20201113160909669

3.2.6.7、siblings()

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

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

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>

var siblings = $('#two').siblings();
for (var i = 0; i < siblings.length; i++) {
    
    console.log(siblings[i]);
}

image-20201113161035419

3.3、遍历

3.3.1、遍历

3.3.1.1、each()

方法描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

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

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>

$('li').each(function (index, element) {
    
    console.log(index, element);
});

image-20201113161908056

3.3.2、筛选

3.3.2.1、first()

方法描述：获取匹配元素集合中第一个元素。

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

<ul>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
</ul>

$('ul>li').first().css('background', 'red');

image-20201113162641338

3.3.2.2、last()

方法描述：获取匹配元素集合中最后一个元素。

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

<ul>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
</ul>

$('ul>li').last().css('background', 'red');

image-20201113162614635

3.3.2.3、eq()

方法描述：获取匹配元素集合中指定位置索引的一个元素。

注意：索引下标从0开始

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

<ul>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
</ul>

$('ul>li').eq(1).css('background', 'red');

image-20201113162850361

3.3.2.4、not()

方法描述：从匹配的元素集合中移除指定的元素。

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

<ul>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
</ul>

var two = $('ul>li').eq(1);
$('ul>li').not(two).css('background', 'red');

image-20201113164056611

3.3.2.5、filter()

方法描述：筛选元素集合中匹配表达式或通过传递函数测试的元素集合。

image-20201113164236008

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

<ul>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
</ul>

$('ul>li').filter('[id=two]').css('background', 'red');

image-20201113164417479

3.4、事件

3.4.1、浏览器事件

3.4.1.1、resize()

方法描述：为 JavaScript 的 “resize” 事件绑定一个处理函数，或者触发元素上的该事件。

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

$(window).resize(function () {
    
    console.log('浏览器尺寸改变了');
});

image-20201113165513522

3.4.1.2、scroll()

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

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

body {
    
    height: 2000px;
}

$(window).scroll(function () {
    
    console.log('浏览器滚动条改变了');
});

image-20201113165656598

3.4.2、事件绑定

3.4.2.1、on()

方法描述：在选定的元素上绑定一个或多个事件处理函数。

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

<button>按钮</button>

$('button').on('click',function () {
    
    console.log('按钮被单击了');
});

image-20201113170843098

3.4.2.2、off()

方法描述： 移除一个事件处理函数。

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

<button>按钮</button>

$('button').on('click',function () {
    console.log('按钮被单击了');
});

$('button').off('click');

image-20201113171052034

3.4.3、事件委托

3.4.3.1、delegate()

方法描述：设置事件委托。

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

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

$('ul').delegate('li', 'click', function () {
    
    this.style.background = 'red';
});

7

3.4.3.2、undelegate()

方法描述：移除事件委托。

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

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

// 设置事件委托
$('ul').delegate('li', 'click', function () {
    
    this.style.background = 'red';
});

// 移除事件委托
$('ul').undelegate('click');

8

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、表单事件

3.4.5.1、focus()

方法描述：当获取焦点时触发所绑定的函数。

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

<input type="text">

$(':text').focus(function () {
    
    $(this).css('background', 'red');
});

image-20201113172343263

3.4.5.2、blur()

方法描述：当失去焦点时触发所绑定的函数。

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

<input type="text">

$(':text').focus(function () {
    
    $(this).css('background', 'red');
});
$(':text').blur(function () {
    
    $(this).css('background', 'green');
});

2

3.4.5.3、change()

方法描述：当内容改变时触发所绑定的函数。

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

<input type="text">

$(':text').change(function () {
    
    console.log($(this).val());
});

3

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

<select>
    <option>河北</option>
    <option>河南</option>
    <option>上海</option>
    <option>北京</option>
    <option>广东</option>
</select>

$('select').change(function () {
    
    console.log($(this).val());
});

4

3.4.5.4、select()

方法描述：当内容选择时触发所绑定的函数。

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

<input type="text" value="123456">

$('input').select(function () {
    
    console.log($(this).val());
});

5

3.4.5.5、submit()

方法描述：当表单提交时触发所绑定的函数。

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

<form action="#">
    <input type="submit">
</form>

$('form').submit(function () {
    
    alert('表单提交了');
});

6

3.4.6、鼠标事件

3.4.6.1、click()

方法描述：当鼠标单击时调用所绑定的函数。

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

<button>按钮</button>

$('button').click(function () {
    
    console.log('按钮被单击了');
});

10

3.4.6.2、dblclick()

方法描述：当鼠标双击时调用所绑定的函数。

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

<button>按钮</button>

$('button').dblclick(function () {
    
    console.log('按钮被双击了');
});

11

3.4.6.3、mousedown()

方法描述：当鼠标左键按下的时候调用所绑定的函数。

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

<button>按钮</button>

$('button').mousedown(function () {
    
    console.log('鼠标左键按下');
});

12

3.4.6.4、mouseup()

方法描述：当鼠标左键松开的时候调用所绑定的函数。

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

<button>按钮</button>

$('button').mouseup(function () {
    
    console.log('鼠标左键松开');
});

13

3.4.6.5、mouseenter()

方法描述：当鼠标进入目标元素的时候调用所绑定的函数。

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

.outer {
    
    width: 200px;
    height: 200px;
    background: coral;
}

.inner {
    
    width: 100px;
    height: 100px;
    background: pink;
}

<div class="outer">
    <div class="inner"></div>
</div>

$('.outer').mouseenter(function () {
    
    console.log('mouse enter');
});

14

3.4.6.6、mouseleave()

方法描述：当鼠标离开目标元素的时候调用所绑定的函数。

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

.outer {
    
    width: 200px;
    height: 200px;
    background: coral;
}

.inner {
    
    width: 100px;
    height: 100px;
    background: pink;
}

<div class="outer">
    <div class="inner"></div>
</div>

$('.outer').mouseleave(function () {
    
    console.log('mouse leave');
});

15

3.4.6.7、mouseover()

方法描述：当鼠标进入目标元素的时候调用所绑定的函数。

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

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

.outer {
    
    width: 200px;
    height: 200px;
    background: coral;
}

.inner {
    
    width: 100px;
    height: 100px;
    background: pink;
}

<div class="outer">
    <div class="inner"></div>
</div>

$('.outer').mouseover(function () {
    
    console.log('mouse over');
});

16

3.4.6.8、mouseout()

方法描述：当鼠标离开目标元素的时候调用所绑定的函数。

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

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

.outer {
    
    width: 200px;
    height: 200px;
    background: coral;
}

.inner {
    
    width: 100px;
    height: 100px;
    background: pink;
}

<div class="outer">
    <div class="inner"></div>
</div>

$('.outer').mouseout(function () {
    
    console.log('mouse out');
});

17

3.4.6.9、mousemove()

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

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

.outer {
    
    width: 200px;
    height: 200px;
    background: black;
    position: absolute;
    left: 20px;
    top: 20px;
}

<div class="outer"></div>

$('.outer').mousemove(function (event) {
    
    console.log(event.offsetX, event.offsetY);
});

19

3.4.6.10、hover()

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

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

.outer {
    
    width: 200px;
    height: 200px;
    background: black;
}

<div class="outer"></div>

$('.outer').hover(function () {
    
    $(this).css('background', 'red');
}, function () {
    
    $(this).css('background', 'green');
});

18

3.4.7、键盘事件

3.4.7.1、keydown()

方法描述：当键盘按键按下的时候调用绑定的函数。

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

<input type="text">

$(':text').keydown(function (event) {
    
    console.log(event.key);
});

20

3.4.7.2、keyup()

方法描述：当键盘按键松开的时候调用绑定的函数。

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

<input type="text">

$(':text').keyup(function (event) {
    
    console.log(event.key);
});

20

3.4.7.3、keypress()

方法描述：keypress与keydown类似，当键盘按键按下的时候调用绑定的函数。

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

<input type="text">

$(':text').keypress(function (event) {
    
    console.log(event.key);
});

20

3.5、动画

3.5.1、基础

3.5.1.1、hide()

方法描述：隐藏元素。

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

.box {
    
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
}

<div class="box"></div>

$('.box').hide();

image-20201113210027194

3.5.1.2、show()

方法描述：显示元素。

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

.box {
    
    width: 200px;
    height: 200px;
    background: coral;
    display: none;
}

<div class="box"></div>

$('.box').show();

image-20201113210159713

3.5.1.3、toggle()

方法描述：如果隐藏就设置为显示，如果显示就设置为隐藏。

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

.box {
    
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
}

<button>隐藏/显示</button>
<div class="box"></div>

$('button').click(function () {
    
    $('.box').toggle();
});

21

3.5.2、渐变

3.5.2.1、fadeIn()

方法描述：通过淡入的方式显示匹配元素。

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

.box {
    
    width: 200px;
    height: 200px;
    background: coral;
    display: none;
}

<button>淡入</button>
<div class="box"></div>

$('button').click(function () {
    
    $('.box').fadeIn('slow');
});

22

3.5.2.2、fadeOut()

方法描述：通过淡出的方式隐藏匹配元素。

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

.box {
    
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
}

<button>淡出</button>
<div class="box"></div>

$('button').click(function () {
    
    $('.box').fadeOut('slow');
});

23

3.5.2.3、fadeToggle()

方法描述：用淡入淡出动画显示或隐藏一个匹配元素。

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

.box {
    
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
}

<button>淡出/淡入</button>
<div class="box"></div>

$('button').click(function () {
    
    $('.box').fadeToggle('slow');
});

24

3.5.3、滑动

3.5.3.1、slideDown()

方法描述：用滑动动画显示一个匹配元素。

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

.box {
    
    width: 200px;
    height: 200px;
    background: coral;
    display: none;
}

<button>滑动显示</button>
<div class="box"></div>

$('button').click(function () {
    
    $('.box').slideDown();
});

25

3.5.3.2、slideUp()

方法描述：用滑动动画隐藏一个匹配元素。

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

.box {
    
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
}

<button>滑动隐藏</button>
<div class="box"></div>

$('button').click(function () {
    
    $('.box').slideUp();
});

26

3.5.3.3、slideToggle()

方法描述：用滑动动画显示或隐藏一个匹配元素。

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

.box {
    
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
}

<button>滑动隐藏/滑动显示</button>
<div class="box"></div>

$('button').click(function () {
    
    $('.box').slideToggle();
});

27

3.5.4、自定义

3.5.4.1、animate()

方法描述：根据一组 CSS 属性，执行自定义动画，并且支持链式调用。

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

.box {
    
    width: 100px;
    height: 100px;
    background: black;
}

<button>自定义动画</button>
<div class="box"></div>

$('.box')
.animate({
    
    width: '200'
})
.animate({
    
    height: '200',
});

28

3.5.4.2、stop()

方法描述：停止匹配元素当前正在运行的动画。

第四章 jQuery插件介绍

4.1、扩展jQuery工具

给 jQuery工具 添加4个工具方法：

min(a, b) : 返回较小的值
max(c, d) : 返回较大的值
leftTrim()  : 去掉字符串左边的空格
rightTrim() : 去掉字符串右边的空格

如何实现呢？请参考以下代码：

// 扩展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     ') + '-----');

image-20201113214525050

4.2、扩展jQuery对象

给 jQuery对象 添加3个功能方法：

checkAll()     : 全选
unCheckAll()   : 全不选
reverseCheck() : 全反选

如何实现呢？请参考以下代码：

// 扩展jQuery对象的方法
$.fn.extend({
    
    checkAll: function () {
    
        this.prop('checked', true);
    },
    unCheckAll: function () {
    
        this.prop('checked', false);
    },
    reverseCheck: function () {
    
        this.each(function () {
    
            this.checked = !this.checked;
        });
    }
});

<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="reverseCheckedBtn" value="全反选"/>

// 测试扩展jQuery对象的方法
var $items = $(':checkbox[name=items]');
$('#checkedAllBtn').click(function () {
    
    $items.checkAll();
});
$('#checkedNoBtn').click(function () {
    
    $items.unCheckAll();
});
$('#reverseCheckedBtn').click(function () {
    
    $items.reverseCheck();
});

29

第五章 jQuery项目百练

5.1、项目百练介绍

这一章一共提供了100道练习，源码请在配套资料中获取，这些练习均是作者早期的练习、兼容性代码、CSS特效、精品收藏等等，仅供参考，有精力朋友的可以看看，可能有些写法不是很标准或者您有更好的方案，可以直接在评论区留言，大家一起学习！

5.2、项目百练目录

  • Sample0001-美女相册.zip
  • Sample0002-兼容性代码.zip
  • Sample0003-精美选项卡.zip
  • Sample0004-百度首页换肤功能.zip
  • Sample0005-带复选框表格.zip
  • Sample0006-兼容性代码.zip
  • Sample0007-兼容性代码.zip
  • Sample0008-获取节点或者元素.zip
  • Sample0009-验证密码强度.zip
  • Sample0010-百度首页搜索项目.zip
  • Sample0011-模拟星空.zip
  • Sample0012-美女时钟.zip
  • Sample0013-定时阅读协议.zip
  • Sample0014-动态创建表格.zip
  • Sample0015-滑动式轮播图.zip
  • Sample0016-小汽车动画.zip
  • Sample0017-渐入式轮播图.zip
  • Sample0018-捉迷藏动画.zip
  • Sample0019-吸附式导航栏.zip
  • Sample0020-滑动式导航栏.zip
  • Sample0021-旋转式轮播图.zip
  • Sample0022-手风琴案例展示.zip
  • Sample0023-开机小助手动画.zip
  • Sample0024-筋斗云案例.zip
  • Sample0025-美丽的天使.zip
  • Sample0026-可拖拽对话框.zip
  • Sample0027-放大镜效果.zip
  • Sample0028-自定义滚动条.zip
  • Sample0029-贪吃蛇.zip
  • Sample0030-扁平化二级菜单.zip
  • Sample0031-选戏子.zip
  • Sample0032-手风琴选项卡.zip
  • Sample0033-淘宝精品展示.zip
  • Sample0034-选项卡公告栏.zip
  • Sample0035-精美购物车插件.zip
  • Sample0036-呼吸灯轮播图.zip
  • Sample0037-仿小米手风琴展示.zip
  • Sample0038-音乐导航栏.zip
  • Sample0039-城市选择框.zip
  • Sample0040-文字弹幕效果.zip
  • Sample0041-钢琴案例.zip
  • Sample0042-小火箭返航案例.zip
  • Sample0043-五角星评分案例.zip
  • Sample0044-懒加载图片案例.zip
  • Sample0045-仿淘宝首页轮播图.zip
  • Sample0046-仿京东首页轮播图.zip
  • Sample0047-仿360安全换机.zip
  • Sample0048-拖拽旋转相册.zip
  • Sample0049-仿百度经验时光轴.zip
  • Sample0050-照片墙案例.zip
  • Sample0051-瀑布流加载案例.zip
  • Sample0052-旋转翻页案例.zip
  • Sample0053-立体图片翻转特效.zip
  • Sample0054-鼠标不同方位移入特效.zip
  • Sample0055-省市县三级联动.zip
  • Sample0056-抽屉式手风琴.zip
  • Sample0057-仿厅客世界.zip
  • Sample0058-兼容性开发模板.zip
  • Sample0059-仿腾讯新闻多图序列展示.zip
  • Sample0060-3D分块旋转轮播图.zip
  • Sample0061-仿优酷TV轮播图.zip
  • Sample0062-仿商品参数选购.zip
  • Sample0063-仿w3school首页.zip
  • Sample0064-仿家有易购电商首页.zip
  • Sample0065-网页新功能提示案例.zip
  • Sample0066-鼠标点击展开详情.zip
  • Sample0067-组件排序案例.zip
  • Sample0068-仿职位发布案例.zip
  • Sample0069-仿迅雷首页.zip
  • Sample0070-后台侧栏导航.zip
  • Sample0071-弹性广告栏.zip
  • Sample0072-照片墙案例.zip
  • Sample0073-仿京东商品图片展示.zip
  • Sample0074-仿AppIntro首页.zip
  • Sample0075-Material Design Icons.zip
  • Sample0076-英语之家.zip
  • Sample0077-鲜来鲜往.zip
  • Sample0078-麦子学院.zip
  • Sample0079-Material Design Color.zip
  • Sample0080-Java关键字.zip
  • Sample0081-浏览历史静态页面案例.zip
  • Sample0082-小灯泡开关案例.zip
  • Sample0083-百度折叠案例.zip
  • Sample0084-计算器.zip
  • Sample0085-计算器.zip
  • Sample0086-judge_online_system.zip
  • Sample0087-选项卡01.zip
  • Sample0088-选项卡02.zip
  • Sample0089-焦点轮播图.zip
  • Sample0090-抽奖活动.zip
  • Sample0091-抽屉式信息栏.zip
  • Sample0092-无缝轮播图.zip
  • Sample0093-Attendance.zip
  • Sample0094-统计数字.zip
  • Sample0095-反转字符串.zip
  • Sample0096-表单验证.zip
  • Sample0097-显示时间.zip
  • Sample0098-扁平化选项卡.zip
  • Sample0099-吃热狗小游戏.zip
  • Sample0100-爱阅读APP.zip
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38490457/article/details/109683256

智能推荐

获取大于等于一个整数的最小2次幂算法（HashMap#tableSizeFor）_整数 最小的2的几次方-程序员宅基地

文章浏览阅读2w次，点赞51次，收藏33次。一、需求给定一个整数，返回大于等于该整数的最小2次幂（2的乘方）。例： 输入 输出 -1 1 1 1 3 4 9 16 15 16二、分析当遇到这个需求的时候，我们可能会很容易想到一个"笨"办法：..._整数 最小的2的几次方

Linux 中 ss 命令的使用实例_ss@,,x,, 0-程序员宅基地

文章浏览阅读865次。选项，以防止命令将 IP 地址解析为主机名。如果只想在命令的输出中显示 unix套接字 连接，可以使用。不带任何选项，用来显示已建立连接的所有套接字的列表。如果只想在命令的输出中显示 tcp 连接，可以使用。如果只想在命令的输出中显示 udp 连接，可以使用。如果不想将ip地址解析为主机名称，可以使用。如果要取消命令输出中的标题行，可以使用。如果只想显示被侦听的套接字，可以使用。如果只想显示ipv4侦听的，可以使用。如果只想显示ipv6侦听的，可以使用。_ss@,,x,, 0

conda activate qiuqiu出现不存在activate_commandnotfounderror: 'activate-程序员宅基地

文章浏览阅读568次。CommandNotFoundError: 'activate'_commandnotfounderror: 'activate

Kafka 实战 - Windows10安装Kafka_win10安装部署kafka-程序员宅基地

文章浏览阅读426次，点赞10次，收藏19次。完成以上步骤后，您已在 Windows 10 上成功安装并验证了 Apache Kafka。在生产环境中，通常会将 Kafka 与外部 ZooKeeper 集群配合使用，并考虑配置安全、监控、持久化存储等高级特性。在生产者窗口中输入一些文本消息，然后按 Enter 发送。ZooKeeper 会在新窗口中运行。在另一个命令提示符窗口中，同样切换到 Kafka 的。Kafka 服务器将在新窗口中运行。在新的命令提示符窗口中，切换到 Kafka 的。，应显示已安装的 Java 版本信息。_win10安装部署kafka

【愚公系列】2023年12月 WEBGL专题-缓冲区对象_js 缓冲数据 new float32array-程序员宅基地

文章浏览阅读1.4w次。缓冲区对象（Buffer Object）是在OpenGL中用于存储和管理数据的一种机制。缓冲区对象可以存储各种类型的数据，例如顶点、纹理坐标、颜色等。在渲染过程中，缓冲区对象中存储的数据可以被复制到渲染管线的不同阶段中，例如顶点着色器、几何着色器和片段着色器等，以完成渲染操作。相比传统的CPU访问内存，缓冲区对象的数据存储和管理更加高效，能够提高OpenGL应用的性能表现。_js 缓冲数据 new float32array

四、数学建模之图与网络模型_图论与网络优化数学建模-程序员宅基地

文章浏览阅读912次。（1）图（Graph）：图是数学和计算机科学中的一个抽象概念，它由一组节点（顶点）和连接这些节点的边组成。图可以是有向的（有方向的，边有箭头表示方向）或无向的（没有方向的，边没有箭头表示方向）。图用于表示各种关系，如社交网络、电路、地图、组织结构等。（2）网络（Network）：网络是一个更广泛的概念，可以包括各种不同类型的连接元素，不仅仅是图中的节点和边。网络可以包括节点、边、连接线、路由器、服务器、通信协议等多种组成部分。网络的概念在各个领域都有应用，包括计算机网络、社交网络、电力网络、交通网络等。_图论与网络优化数学建模

随便推点

android 加载布局状态封装_adnroid加载数据转圈封装全屏转圈封装-程序员宅基地

文章浏览阅读1.5k次。我们经常会碰见 正在加载中，加载出错， “暂无商品”等一系列的相似的布局，因为我们有很多请求网络数据的页面，我们不可能每一个页面都写几个“正在加载中”等布局吧，这时候将这些状态的布局封装在一起就很有必要了。我们可以将这些封装为一个自定布局，然后每次操作该自定义类的方法就行了。 首先一般来说，从服务器拉去数据之前都是“正在加载”页面， 加载成功之后“正在加载”页面消失，展示数据；如果加载失败，就展示_adnroid加载数据转圈封装全屏转圈封装

阿里云服务器（Alibaba Cloud Linux 3）安装部署Mysql8-程序员宅基地

文章浏览阅读1.6k次，点赞23次，收藏29次。PS: 如果执行sudo grep 'temporary password' /var/log/mysqld.log 后没有报错，也没有任何结果显示，说明默认密码为空，可以直接进行下一步（后面设置密码时直接填写新密码就行）。3.（可选）当操作系统为Alibaba Cloud Linux 3时，执行如下命令，安装MySQL所需的库文件。下面示例中，将创建新的MySQL账号，用于远程访问MySQL。2.依次运行以下命令，创建远程登录MySQL的账号，并允许远程主机使用该账号访问MySQL。_alibaba cloud linux 3

excel离散度图表怎么算_excel离散数据表格-Excel 离散程度分析图表如何做-程序员宅基地

文章浏览阅读7.8k次。EXCEL中数据如何做离散性分析纠错。离散不是均值抄AVEDEV……=AVEDEV(A1:A100)算出来的是A1：A100的平均数。离散是指各项目间指标袭的离散均值(各数值的波动情况)，数值较低表明项目间各指标波动幅百度小，数值高表明波动幅度较大。可以用excel中的离散公式为STDEV.P(即各指标平均离散)算出最终度离散度。excel表格函数求一组离散型数据，例如，几组C25的...用exc..._excel数据分析离散

学生时期学习资源同步-JavaSE理论知识-程序员宅基地

文章浏览阅读406次，点赞7次，收藏8次。i < 5){ //第3行。int count;System.out.println ("危险！System.out.println(”真”);System.out.println(”假”);System.out.print(“姓名：”);System.out.println("无匹配");System.out.println ("安全");

linux 性能测试磁盘状态监测：iostat监控学习，包含/proc/diskstats、/proc/stat简单了解-程序员宅基地

文章浏览阅读3.6k次。背景测试到性能、压力时，经常需要查看磁盘、网络、内存、cpu的性能值这里简单介绍下各个指标的含义一般磁盘比较关注的就是磁盘的iops,读写速度以及%util（看磁盘是否忙碌）CPU一般比较关注，idle 空闲，有时候也查看wait （如果wait特别大往往是io这边已经达到了瓶颈）iostatiostat uses the files below to create ..._/proc/diskstat

glReadPixels读取保存图片全黑_glreadpixels 全黑-程序员宅基地

文章浏览阅读2.4k次。问题：在Android上使用 glReadPixel 读取当前渲染数据，在若干机型（华为P9以及魅族某魅蓝手机）上读取数据失败，glGetError()没有抓到错误，但是获取到的数据有误，如果将获取到的数据保存成为图片，得到的图片为黑色。解决方法：glReadPixels实际上是从缓冲区中读取数据，如果使用了双缓冲区，则默认是从正在显示的缓冲（即前缓冲）中读取，而绘制工作是默认绘制到后缓..._glreadpixels 全黑

推荐文章

热门文章

相关标签