2021-03-09

JQuery 基础笔记

JQuery 基础笔记

1. jQuery 概述
   1.1 jQuery 是什么？
   1.2 jQuery 简单应用
   1.3 jQuery 功能应用
   1.4 jQuery 技术优势
   1.5 jQuery 下载安装
   1.6 jQuery 使用方法
   1.7 jQuery 基本语法结构
   1.8 jQuery 语法特性
2. jQuery 入口函数
   2.1 jQuery 与JavaScript 加载模式对比
   2.2 jQuery 其他写法
   2.3 解决$符号冲突问题
   2.3.1 释放 $ 使用权
   2.3.2 自定义访问符号
   2.4 jQuery 核心函数
3. DOM 对象和 jQuery 对象
   3.1 DOM 对象和 jQuery 对象区别
   3.2 DOM 对象和 jQuery 对象转化
   3.3 DOM 对象和 jQuery 对象的获取
   3.4 DOM 对象和 jQuery 对象的练习
   3.5 jQuery 对象的本质
4. jQuery 选择器
   4.1 基础选择器
   4.2 层次选择器
   4.2.1 层次选择器练习
   4.3 属性选择器
   4.4 过滤选择器
   4.4.1 基本过滤选择器
   4.4.2 可见性过滤选择器
   4.4.3 内容过滤性选择器
5. jQuery Class 操作
   5.1 Class 类操作
   5.1.1 addClass
   5.1.2 removeClass
   5.1.3 toggleClass
   5.2 jQuery 文本操作
   5.2.1 html
   5.2.2 text
   5.2.3 html() 和 text() 的区别
   5.2.4 val
   5.3 jQuery CSS 样式
   5.3.1 css 方法
   5.3.2 width 方法
   5.3.3 height 方法
   5.4. jQuery 元素位置
   5.4.1 offset 方法
   5.4.2 position 方法
   5.5 jQuery scroll 方法
   5.5.1 scrollTop 方法
   5.5.2 scrollLeft 方法
6. jQuery 属性操作
   6.1 属性与属性节点
   6.1.1 什么是属性?
   6.1.2 如何操作属性?
   6.1.3 什么是属性节点?
   6.1.4 如何操作属性节点?
   6.1.5 属性和属性节点有什么区别?
   6.2 属性节点方法
   6.2.1 attr 方法
   6.2.2 removeAttr 方法
   6.2.3 prop 方法
   6.2.4 removeProp 方法
   6.2.5 attr 方法和 prop 方法区别
7. jQuery DOM 操作
   7.1 常见的 DOM 操作
   7.2 DOM 节点操作
   7.2.1 创建 DOM 节点
   7.2.2 插入 DOM 节点
   7.2.3 删除 DOM 节点
   7.2.4 替换节点
   7.2.5 复制节点
   7.2.6 包裹节点
   7.2.7 遍历节点
   7.3 jQuery DOM 操作练习
   7.3.1 商品列表
   7.3.2 滑动门
8. 事件机制
   8.1 事件注册
   8.2 事件绑定
   8.3 事件解绑
   8.4 事件坐标
   8.5 事件冒泡
   8.6 默认行为
   8.7 自动触发事件
   8.8 自定义事件
   8.9 事件命名空间
   8.10 事件委托
   8.10.1 什么是事件委托
   8.10.2 事件委托的好处
   8.10.3 jQuery 中添加事件委托
   8.10.4 事件的委托注册
   8.11 移入移出事件
   8.11.1 mouseenter/mouseleave
   8.11.2 mouseover/mouseout
   8.11.3 hover
9. jQuery 动画
   9.1 常见动画类型
   9.2 显示与隐藏动画
   9.2.1 show
   9.2.2 hide
   9.2.3 toggle
   9.3 展开与收起动画
   9.3.1 slideDown
   9.3.2 slideUp
   9.3.3 slideToggle
   9.4 淡入淡出动画
   9.4.1 fadeIn
   9.4.2 fadeOut
   9.4.3 fadeToggle
   9.4.4 fadeTo
   9.5 通用动画函数
   9.5.1 animate
   9.6 多动画的组合
   9.7 动画队列
   9.8 动画相关方法
   9.8.1 delay
   9.8.2 stop
   9.9 动画的结束
   9.10 动画练习
   9.10.1 切换显示列表
   9.10.2
10. jQuery 静态方法
    10.1 什么是静态方法
    10.2 jQuery.holdReady()
    10.3 each 方法
    10.4 map 方法
    10.5 filter 方法
    10.6 find 方法
    10.7 each 与 map 区别
    10.8 type 方法
    10.9 trim 方法
    10.10 isWindow 方法
    10.11 isArray 方法
    10.12 inArray 方法
    10.13 isFunction 方法
    10.14 parseJSON 方法
    10.15 makeArray 方法
    10.16 extend 方法
    10.17 fn.extend 方法
11. jQuery 的 Ajax
    11.1 Ajax 的定义
    11.2 异步刷新的作用
    11.3 Ajax 和 传统 web 区别
    11.4 Ajax 异步请求原理
    11.5 jQuery 的 Ajax 请求
    11.6 Ajax 请求方法的语法
    11.7 get 请求方法的语法
    11.8 load 请求方法的语法
    11.9 getJSON 请求方法的语法
12. jQuery 异步请求 Ajax
    12.1 跨域问题
    12.2 跨域问题的解决
    12.3 Ajax 练习
    12.3.1 模糊搜索功能
13. 总结
14. jQuery 概述
    1.1 jQuery 是什么？

jQuery 由美国人 John Resig 于2006年创建
jQuery 是目前最流行的 JavaScript 程序库之一，它是对 JavaScript 对象和函数的封装
它的设计思想是write less,do more，能对 HTML 文档遍历和操作，事件处理，动画以及 Ajax 变得更加简单
1.2 jQuery 简单应用
原生 JS 设置背景
window.onload = function (ev) {
// 1.利用原生的JS查找DOM元素
var div1 = document.getElementsByTagName(“div”)[0];
var div2 = document.getElementsByClassName(“box1”)[0];
var div3 = document.getElementById(“box2”);

// 2.利用原生的JS修改背景颜色
div1.style.backgroundColor = “red”;
div2.style.backgroundColor = “blue”;
div3.style.backgroundColor = “yellow”;
}
1
2
3
4
5
6
7
8
9
10
11
使用 jQuery 设置背景
$(document).ready(function(){
// 查询，操作 CSS 一步到位
$(“div”).eq(0).css(‘background’,‘red’);
$(".one").eq(0).css(‘background’,‘blue’);
$("#two").css(‘background’,‘yellow’);
});
1
2
3
4
5
6
1.3 jQuery 功能应用
强大的选择器
方便快速查找 DOM 元素
jQuery 允许开发者使用 CSS1-CSS3 几乎所有的选择器,以及 jQuery 独创的选择器
样式操作
链式调用
事件处理
DOM 操作（C增U改D删）
隐式遍历(迭代)
读写合一
扩展新的jQuery插件
与Ajax技术完美结合
浏览器兼容（建议学习1.x版本）
版本 兼容性
1.x 兼容ie678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本：1.12.4
2.x 不兼容ie678，相对1.x文件较小，官方只做BUG维护，功能不再新增，最终版本：2.2.4
3.x 不兼容ie678，只支持最新的浏览器，很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本
1.4 jQuery 技术优势
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
1.5 jQuery 下载安装
jQuery 官网
http://jquery.com
1.6 jQuery 使用方法
jQuery 库分开发版和发布版
名称 大小 说明
jQuery-1.版本号.js(开发版) 约268KB 完整无压缩版本，主要用于测试，学习和开发
jQuery-1.版本号.min.js(发布版) 约91KB 经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目
在页面中引入jQuery

1
1.7 jQuery 基本语法结构
工厂函数 $()
将 DOM 对象转化为 jQuery 对象
选择器 selector
获取需要操作的 DOM 元素
方法 action()
jQuery 中提供的方法
$(selector).action()
$("#current").addClass(“current”)
1
2
1.8 jQuery 语法特性
$ 等同于 jQuery
$(document).ready()=jQuery(document).ready()
$(function(){…})=jQuery(function(){…})
1
2
jQuery 链式调用
jQuery 可以通过 . 不断调用 jQuery 对象的方法，而原生 JavaScript 则不一定
// 1.原生JavaScript
var div = document.getElementsByTagName(“div”);
// 报错,必须分开写
div[0].style.backgroundColor = “red”.width = 200+“px”;
// div[0].style.width = 200+“px”;

// 2.jQuery
$(document).ready(function () {
// 不报错,后面还可以接着继续写
$(“div”).eq(1).css(‘background’, ‘yellow’).css(‘width’, ‘200px’);
});
1
2
3
4
5
6
7
8
9
10
11
jQuery 隐式遍历(迭代)
// 1.原生JavaScript
var div = document.getElementsByTagName(“div”);
// div.style.backgroundColor = “red”;// 无效
for(var i = 0; i<div.length; i++){
div[i].style.backgroundColor = “red”;
}

// 2.jQuery
$(document).ready(function () {
// 隐式遍历(迭代)找到的所有div
$(“div”).css(‘background’, ‘yellow’);
});
1
2
3
4
5
6
7
8
9
10
11
12
读写合一
$(document).ready(function () {
// 读取数据
var $tx = $("div").eq(0).text();alert($tx);
// 写入数据
$(“div”).eq(0).text(“新的数据”);
});
1
2
3
4
5
6
7
2. jQuery 入口函数
2.1 jQuery 与JavaScript 加载模式对比
原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行

1. js 原生入口函数

window.onload = function (ev) {
// 1.通过原生的JS入口函数可以拿到DOM元素
var images = document.getElementsByTagName(“images”)[0];

// 2.通过原生的JS入口函数可以拿到DOM元素的宽高
var width = window.getComputedStyle(images).width;
}

2. jQuery 入口函数

$(document).ready(function () {
// 1.通过jQuery入口函数可以拿到DOM元素
var $images = $(“images”);

// 2.通过jQuery入口函数不可以拿到DOM元素的宽高
var $width = $images.width();

});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
原生JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
jQuery中编写多个入口函数,后面的不会覆盖前面的

1. 原生 js

window.onload = function (ev) {
alert(“hello lnj1”);// 不会显示
}
window.onload = function (ev) {
alert(“hello lnj2”);// 会显示
}

2. jQuery

$(document).ready(function () {
alert(“hello lnj1”);// 会显示
});
$(document).ready(function()alert("hellolnj2");//会显示);1234567891011121314151617jQuery不会覆盖的本质jQuery框架本质是一个闭包每次执行都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰为何能访问$符号
因为$符号jQuery框架对外暴露的一个全局变量为何window.jQuery=window.$ = jQuery;
jQuery框架不仅提供了jQuery访问还提供$访问,提升开发者的编码效率JavaScript中如何定义一个全局变量?所有全局变量是window对象的属性jQuery框架源码实现window.jQuery=window.$ = jQuery;
1
使用 jQuery 框架只有两种方式

通过 $
通过 jQuery
总结

window.onload $(document).ready()
执行时机 必须等待网页全部加载完毕(包括 图片等),然后再执行包裹代码 只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码
执行次数 只能执行一次,如果第二次,那么第一次的执行会被覆盖 可以执行多次,第N次都不会被上一次覆盖
2.2 jQuery 其他写法
// 1.第一种写法
$(document).ready(function () {
alert(“hello lnj”);
});

// 2.第二种写法
jQuery(document).ready(function () {
alert(“hello lnj”);
});

// 3.第三种写法(推荐)
$(function () {
alert(“hello lnj”);
});

// 4.第四种写法
jQuery(function () {
alert(“hello lnj”);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2.3 解决$符号冲突问题
2.3.1 释放 $ 使用权
当便捷访问符号发生冲突时,可以释放$使用权注意点释放操作必须在其它jQuery代码之前编写释放之后就不能再使用$,改为使用jQuery
jQuery.noConflict();
1
2.3.2 自定义访问符号
// 2.自定义一个访问符号
var nj = jQuery.noConflict();
nj(function () {
alert(“hello lnj”);
});
1
2
3
4
5
2.4 jQuery 核心函数

我是span 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3. DOM 对象和 jQuery 对象 3.1 DOM 对象和 jQuery 对象区别 DOM对象 直接使用 JavaScript 获取的节点对象 var objDOM = document.getElementById("title"); var objHTML = objDOM.innerHTML; 1 2 jQuery对象 使用 jQuery 包装 DOM 对象后产生的对象，能够使用 jQuery 中的方法 $("#title").html(); 等同于 document.getElementById("title").innerHTML; 1 2 3 DOM 对象和 jQuery 对象分别拥有一套独立的方法，不能混用 3.2 DOM 对象和 jQuery 对象转化 使用$()函数进行转化：$(DOM对象) jQuery 对象命名一般约定以$开头 var txtName = document.getElementById("txtName"); //DOM对象 var $txtName = $(txtName); //jQuery对象 1 2 3.3 DOM 对象和 jQuery 对象的获取 jQuery 对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象 var $txtName = $("#txtName"); // jQuery对象 var txtName = $txtName[0]; // DOM对象 1 2 通过get(index)方法得到相应的DOM对象 var $txtName = $("#txtName"); // jQuery对象 var txtName = $txtName.get(0); // DOM对象 1 2 3.4 DOM 对象和 jQuery 对象的练习

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 3.5 jQuery 对象的本质 jQuery 对象的本质是一个伪数组 var $div = $("div"); console.log($div);

var arr = [1, 3, 5];
console.log(arr);
1
2
3
4
5
什么是伪数组
有 0 到 length-1 属性
并且有 length 属性
var obj = {0:“lnj”, 1:“33”, 2:“male”, length: 3}
1
4. jQuery 选择器
4.1 基础选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
名称 语法构成 描述 示例
标签选择器 element 根据给定的标签名匹配元素 $(“h2”)选取所有h2元素
类选择器 .class 根据给定的class匹配元素 $(".title")选取所有class为title的元素
ID 选择器 #id 根据给定的id匹配元素 $("#title")选取id为title的元素
并集选择器 selector1,selector2,…,selectorN 将每一个选择器匹配的元素合并后一起返回 $(“div,p,.title” )选取所有div、p和拥有class为title的元素
交集选择器 element.class或element#id 匹配指定class或id的某元素或元素集合 $(“h2.title”)选取所有拥有class为title的h2元素
全局选择器 * 匹配所有元素 $("*" )选取所有元素
4.2 层次选择器
层次选择器通过DOM 元素之间的层次关系来获取元素
名称 语法构成 描述 实例
后代选择器 ancestor descendant 选取 ancestor 元素里的所有 descendant (后代)元素 $("#menu span" )选取 #menu 下的 span 元素
子选择器 parent > child 选取 parent 元素下的child(子)元素 $(" #menu>span" )选取 #menu 的子元素 span
相邻元素选择器 prev + next 选取紧邻 prev 元素之后的 next 元素 $(" h2+dl " )选取紧邻 h2 元素之后的同辈元素 dl
同辈元素选择器 prev~sibings 选取 prev 元素之后的所有 siblings 元素 $(" h2~dl " )选取 h2 元素之后所有的同辈元素 dl
4.2.1 层次选择器练习
导航菜单案例

• 男装
• 女装
• 童装
• 老年款式
• 婴儿专用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 4.3 属性选择器 属性选择器通过HTML元素的属性来选择元素 名称 语法构成 描述 示例 属性选择器 [attribute] 选取包含给定属性的元素 $(" [href]" )选取含有href属性的元素 属性选择器 [attribute=value] 选取等于给定属性是某个特定值的元素 $(" [href =’#’]" )选取含有href属性的元素 属性选择器 [attribute != value] 选取不等于给定属性是某个特定值的元素 $(" [href !=’#’]" )选取含有href属性的元素 属性选择器 [attribute ^= value] 选取给定属性是以某些特定值开始的元素 $(" [href ^=‘en’]" )选取含有href属性的元素 属性选择器 [attribute $=value] 选取给定属性是以某些特定值结尾的元素 $(" [href $=’.jpg’]" )选取含有href属性的元素 属性选择器 [attribute *=value] 选取给定属性是以包含某些值的元素 $(" [href *=‘txt’]" )选取含有href属性的元素 4.4 过滤选择器 过滤选择器通过特定的过滤规则来筛选元素 语法特点 使用":" 如使用$(“li:first”)来选取第一个li元素 主要分类 基本过滤选择器 可见性过滤选择器 内容过滤选择器 子元素过滤选择器 4.4.1 基本过滤选择器 基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素 基本过滤选择器可以根据索引的值选取元素 名称 语法构成 描述 示例 基本过滤选择器 :first 选取第一个元素 $(" li:first" )选取所有 li 元素中的第一个 li 元素 基本过滤选择器 :last 选取最后一个元素 $(" li:last" )选取所有 li 元素中的最后一个 li 元素 基本过滤选择器 :even 选取索引是偶数的所有元素（index从0开始） $(" li:even" )选取索引是偶数的所有 li 元素 基本过滤选择器 :odd 选取索引是奇数的所有元素（index从0开始） $(" li:odd" )选取索引是奇数的所有 li 元素 基本过滤选择器 :eq(index) 选取索引等于index的元素（index从0开始） $(“li:eq(1)” )选取索引等于1的 li 元素 基本过滤选择器 :gt(index) 选取索引大于index的元素（index从0开始） $(" li:gt(1)" )选取索引大于1的 li 元素（注：大于1，不包括1） 基本过滤选择器 :lt(index) 选取索引小于index的元素（index从0开始） $(“li:lt(1)” )选取索引小于1的 li 元素（注：小于1，不包括1） 4.4.2 可见性过滤选择器 可见性过滤选择器可以通过元素显示状态来选取元素 名称 语法构成 描述 示例 可见性过滤选择器 :visible 选取所有可见的元素 $(":visible" )选取所有可见的元素 可见性过滤选择器 :hidden 选取所有隐藏的元素 $(":hidden" ) 选取所有隐藏的元素 4.4.3 内容过滤性选择器 选择器 描述 返回 :empty 选取不包含子元素或文本为空的元素 集合元素 :parent 选取含有子元素或文本的元素 集合元素 :contains(text) 选取含有文本内容为text的元素 集合元素 :has(selector) 选取含有选择器所匹配的元素的元素 集合元素 :empty 找到既没有文本内容也没有子元素的指定元素

jjj

zs

lnj

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 5. jQuery Class 操作 5.1 Class 类操作 5.1.1 addClass 元素添加一个或多个类 如果要添加多个, 多个类名之间用空格隔开即可 addClass(class)或addClass(class1 class2 … classN) 1 5.1.2 removeClass 删除元素的一个或多个类 如果想删除多个, 多个类名之间用空格隔开即可 removeClass(“style2 ”)或removeClass("style1 style2 ") 1 5.1.3 toggleClass 切换元素 添加或删除一个类(存在就删除不存在就添加) toggleClass()模拟了addClass()与removeClass()实现样式切换的过程 toggleClass(class) 1 5.2 jQuery 文本操作 5.2.1 html 添加或获取元素中的HTML 类似于JS中的innerHTML 解析内部HTML标签 $("div.left").html(); // 获取元素中的html代码 或 $("div.left").html("

…

"); // 设置元素中的html代码 1 2 3 5.2.2 text 添加或获取元素中的文本 text方法能做的html方法都能做,所以一般使用html方法即可 $("div.left").text(); // 获取元素中的文本内容 或 $("div.left").text("

…

"); // 设置元素中的文本内容 1 2 3 5.2.3 html() 和 text() 的区别 语法 参数 功能 html() 无参数 用于获取第一个匹配元素的HTML内容或文本内容 html(content) content参数为元素的HTML内容 用于设置所有匹配元素的HTML内容或文本内容 text() 无参数 用于获取所有匹配元素的文本内容 text(content) content参数为元素的文本内容 用于设置所有匹配元素的文本内容 5.2.4 val 添加或获取元素value属性的值 $(this).val(); // 获取元素的value属性值 或 $(this).val(""); // 设置元素的value属性值 1 2 3 5.3 jQuery CSS 样式 5.3.1 css 方法 使用css()为指定的元素设置样式值，修改的是行内样式 css(name,value)

$(this).css(“border”,“5px solid #f5f5f5”);
1
2
3
5.3.2 width 方法
设置或获取元素宽度(相当于获取width属性值)
$(function () {
KaTeX parse error: Expected '}', got 'EOF' at end of input: …er) // alert((’.son’).width());
});
$(“button”).eq(1).click(function () {
// 2.设置元素宽度(不包括padding和border)
// $(".son").width(“50px”);
});
});
1
2
3
4
5
6
7
8
9
10
5.3.3 height 方法
设置或获取元素高度(相当于获取height属性值)
$(function () {
KaTeX parse error: Expected '}', got 'EOF' at end of input: …er) // alert((’.son’).width());
});
$(“button”).eq(1).click(function () {
// 2.设置元素宽度(不包括padding和border)
// $(".son").width(“50px”);
});
});
1
2
3
4
5
6
7
8
9
10
5.4. jQuery 元素位置
5.4.1 offset 方法
获取或设置元素相对窗口的偏移位
$(function () {
KaTeX parse error: Expected '}', got 'EOF' at end of input: … alert((’.son’).offset().left); // 100
});
$(“button”).eq(1).click(function () {
// 2.设置距离窗口的偏移位
$(’.son’).offset({left:10, top:10});
});
});
1
2
3
4
5
6
7
8
9
10
5.4.2 position 方法
获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离
$(function () {
KaTeX parse error: Expected '}', got 'EOF' at end of input: … alert((’.son’).position().left);// 50
});
$(“button”).eq(1).click(function () {
// 2.无效,不能设置相对定位元素的偏移位
$(’.son’).position({left:10, top:10})
});
});
1
2
3
4
5
6
7
8
9
10
5.5 jQuery scroll 方法
5.5.1 scrollTop 方法
设置或获取匹配元素相对滚动条顶部的偏移
$(function () {
KaTeX parse error: Expected '}', got 'EOF' at end of input: …的偏移 // alert((’.scroll’).scrollTop());
// alert(${(}^{\prime }htm{l}^{\prime }).scrollTop());//兼容所有浏览器写法alert($(‘html’).scrollTop()+$(‘body’).scrollTop());
});
$(“button”).eq(1).click(function () {
// 8.设置匹配元素相对滚动条顶部的偏移
// $(’.scroll’).scrollTop(100);
// $(‘html’).scrollTop(100);
// 兼容所有浏览器写法
$(‘html,body’).scrollTop(100);
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
5.5.2 scrollLeft 方法
scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置
滚动条的水平位置指的是从其左侧滚动过的像素数
当滚动条位于最左侧时，位置是 0
$(function () {
KaTeX parse error: Expected '}', got 'EOF' at end of input: …的偏移 // alert((’.scroll’).scrollLeft());
// alert(${(}^{\prime }htm{l}^{\prime }).scrollLeft());//兼容所有浏览器写法alert($(‘html’).scrollLeft()+$(‘body’).scrollLeft());
});
$(“button”).eq(1).click(function () {
// 8.设置匹配元素相对滚动条水平的偏移
// $(’.scroll’).scrollLeft(100);
// $(‘html’).scrollLeft(100);
// 兼容所有浏览器写法
$(‘html,body’).scrollLeft(100);
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
6. jQuery 属性操作
6.1 属性与属性节点
6.1.1 什么是属性?
对象身上保存的变量就是属性
只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)
6.1.2 如何操作属性?
添加或修改属性(没有就会添加,有就会修改)
对象.属性名称 = 值
对象[“属性名称”] = 值
获取属性
对象.属性名称
对象[“属性名称”]
6.1.3 什么是属性节点?
在编写HTML代码时,在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点
// 这里的class和nj就是属性节点
1
6.1.4 如何操作属性节点?
获取属性节点
DOM元素.getAttribute(“属性名称”);
设置属性节点
DOM元素.setAttribute(“属性名称”, “值”);
6.1.5 属性和属性节点有什么区别?
任何对象都有属性, 但是只有DOM对象才有属性节点
6.2 属性节点方法
6.2.1 attr 方法
作用
获取或设置属性节点的值
参数
如果传递一个参数, 代表获取属性节点的值
如果传递两个参数, 代表设置属性节点的值
注意点
如果是获取
无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置
找到多少个元素就会设置多少个元素
如果设置的属性节点不存在, 那么系统会自动新增
$(function () {
// 1.获取指定属性节点值
var $res = $(".span1").attr("nj");console.log($res);
// 2.设置属性节点
$(".span1").attr(“nj”, “666”);
$(".span2").attr(“id”, “box1 box2”);

// 3.注意点:
// 3.1.获取属性节点时,只会获取找到所有元素中第一个元素的属性节点
$res = $("span").attr("class");
console.log($res);
 $("span").attr("class", "lnj");

});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
6.2.2 removeAttr 方法
作用

删除属性节点
注意点

删除所有找到元素指定的属性节点
$(function () {
// 1.设置属性节点时,会给所有找到元素设置属性节点
$(“span”).attr(“test”, “jonathan”);
// 2.删除属性节点时,会删除所有找到元素的属性节点
$(“span”).removeAttr(“test”);
});
1
2
3
4
5
6
6.2.3 prop 方法
作用
设置或获取元素的属性值
注意点
prop方法不仅能够操作属性, 还能操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点
如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
$(function () {
// 1.设置属性
// 1.1.设置属性时,会设置所有找到元素的属性
$("span").prop("demo","lnj");//2.获取属性//2.1.获取属性时,只会获取找到第一个元素的属性console.log($(“span”).prop(“demo”));
});
1
2
3
4
5
6
7
8
6.2.4 removeProp 方法
$(function () {
// 删除所有找到元素的demo属性
$(“span”).removeProp(“demo”);
});
1
2
3
4
6.2.5 attr 方法和 prop 方法区别
所有DOM对象，都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点
在操作属性节点时,具有 true 和 false 两个属性的属性节点(如 checked, selected 或者 disabled)使用prop()，其他的使用 attr()
如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false
KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log((“input”).prop(“class”));
// 2.可以通过prop设置属性节点
$(“input”).prop(“class”, “tag”);

// 3.如果没有默认值,那么attr获取返回undefined
//console.log($("input[type=checkbox]").attr("checked"));
// 4.如果没有默认值,那么prop获取返回false
console.log($("input[type=checkbox]").prop("checked"));
// 5.通过attr设置选中
//$("input[type=checkbox]").attr("checked", true);

// 6.通过prop设置选中
$("input[type=checkbox]").prop("checked", true)

});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
7. jQuery DOM 操作
7.1 常见的 DOM 操作
jQuery对JavaScript中的DOM操作进行了封装，使用更简便
jQuery中的DOM操作可分为：
内容及Value属性值操作
节点操作
节点属性操作
节点遍历
7.2 DOM 节点操作
jQuery中节点操作主要分为：
查找节点（利用选择器完成）
创建节点
插入节点
删除节点
替换节点
复制节点
7.2.1 创建 DOM 节点
工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点
// 创建含文本与属性

• 元素节点
  var $newNode2=$(“
• 千与千寻
• ”);
  1
  2
  7.2.2 插入 DOM 节点
  元素内部插入子节点
  语法 功能
  append(content) $(A).append(B)表示将B追加到A内部的最后，如：$(“ul”).append($newNode1);
  appendTo(content) $(B).appendTo(A)表示把B追加到A内部的最后，如：$newNode1.appendTo(“ul”);
  prepend(content) $(A).prepend(B)表示将B前置插入到A内部中，如：$(“ul”). prepend ($newNode1);
  prependTo(content) $(B).prependTo(A)表示将B前置插入到A内部中，如：$newNode1. prependTo (“ul”);
  元素外部插入同辈节点
  语法 功能
  after(content) $(A).after(B)表示将B插入到A外部之后，如：$(“ul”).after($newNode1);
  insertAfter(content) $(B).insertAfter(A)表示将B插入到A外部之后，如：$newNode1.insertAfter(“ul”);
  before(content) $(A).before(B)表示将B插入至A外部之前，如：$(“ul”).before($newNode1);
  insertBefore(content) $(B).insertBefore(A)表示将A插入到B外部之前，如：$newNode1.insertBefore(“ul”);
  7.2.3 删除 DOM 节点
  empty()
  删除指定元素的内容和子元素, 指定元素自身不会被删除
  $(“div”).empty();
  1
  remove()
  删除指定元素
  // 删除所有div
  $(“div”).remove();
  // 删除div中id是box1的那个div
  $(“div”).remove("#box1");
  1
  2
  3
  4
  detach()
  删除指定元素
  // 删除所有div
  $(“div”).detach();
  // 删除div中id是box1的那个div
  $(“div”).detach("#box1");
  1
  2
  3
  4
  remove 和 detach 区别
  remove 删除元素后,元素上的事件会被移出
  detach 删除元素后,元素上的事件会被保留
  $(“button”).click(function () {
  // $(“div”).remove();
  // $(“div”).empty();
  // $(“li”).remove(".item");

  // 利用remove删除之后再重新添加,原有的事件无法响应
  // var $div = $("div").remove();
  // 利用detach删除之后再重新添加,原有事件可以响应
  var $div = $("div").detach();
  // console.log($div);
  // 将删除的返回值重新添加到body上
  $("body").append($div);
  

  });
  $(“div”).click(function () {
  alert(“div被点击了”);
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  7.2.4 替换节点
  replaceWith
  将所有匹配的元素替换成指定的 HTML 或 DOM 元素
  replaceWith 参数可以是一个DOM元素、也可以是一个代码片段
  replaceAll
  用匹配的元素替换掉所有 selector 匹配到的元素
  // 编写jQuery相关代码
  $(“button”).click(function () {
  // 创建一个新的节点
  var $item = $(“

  我是标题6

  ”);
  // 利用新的节点替换旧的节点
  // $("h1").replaceWith($item);
  $item.replaceAll(“h1”);
  });
  1
  2
  3
  4
  5
  6
  7
  8
  7.2.5 复制节点
  clone
  复制一个节点
  参数 true 表示复制事件处理
  浅复制
  不会复制节点的事件
  深复制
  会复制节点的事件
  $(function () {
  // clone([Even[,deepEven]])
  $(“button”).eq(0).click(function () {
  // 1.浅复制一个元素
  var $li = $(“li:first”).clone(false);
  // 2.将复制的元素添加到ul中
  $("ul").append($li); // 点击li无法响应事件
  });
  $(“button”).eq(1).click(function () {
  // 1.深复制一个元素
  var $li = $(“li:first”).clone(true);
  // 2.将复制的元素添加到ul中
  $("ul").append($li); // 点击li可以响应事件
  });

  $("li").click(function () {
      alert($(this).html());
  });
  

  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  7.2.6 包裹节点
  wrap
  将指定节点用其他标记包裹起来
  该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义
  wrapAll
  将所有匹配的元素用一个元素来包裹
  而wrap方法是将所有的元素进行单独包裹
  wrapInner
  将每一个匹配的元素的子内容（包括文本节点）用其他结构化标记包裹起来
  //测试使用 jQuery wrap, wrapAll, wrapInner
  $(function(){
  //包装 li 本身
  $("#box1 li").wrap("");

  //包装所有的 li
  $("#box2 li").wrapAll("<font color='red'></font>");
  
  //包装 li 里边的文字. 
  $("#box3 li").wrapInner("<font color='red'></font>");
  

  })
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  7.2.7 遍历节点
  方法 作用
  children 只考虑子元素，不考虑后代元素
  next 同辈紧邻后面一个元素
  nextAll 同辈紧邻后面所有兄弟元素
  prev 同辈紧邻前一个兄弟元素
  prevAll 同辈紧邻前所有兄弟元素
  siblings 同辈所有兄弟元素
  find(‘xx’) 返回被选元素的后代元素，括号内必填写，如果查找所有后代使用 “*”，起查找作用
  filter(‘xx’) 指定选择器的xx元素，括号内必填写，符合条件的同级元素，非后代元素，起过滤作用
  has(‘xx’) 符合条件的后代元素，不包含自身，括号内必填写，起过滤作用
  parent() 获取元素的父级元素
  parents() 获取所有祖先元素，参数为筛选条件
  parentsUntil() 截止到xx位置的祖先节点
  closest(‘xx’)
  用来取得最近的匹配元素，包括自身
  首先检查自身是否符合
  如果符合返回元素本身
  如果不匹配，向上查找父元素，逐级向上直到匹配到选择器的元素
  如果什么没找到，返回一个空的jQuery对象
  必须填写筛选条件，且只能找到一个元素
  7.3 jQuery DOM 操作练习
  7.3.1 商品列表
  增删全选

  全选	商品信息	宜美惠价	数量	操作
  	天堂直杆彩虹伞	￥32.9元		删除
  	苹果手机iphone5	￥3999元		删除

  增加 删除
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 7.3.2 滑动门
  
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 8. 事件机制 jQuery事件是对JavaScript事件的封装 Window事件 鼠标事件 键盘事件 表单事件 8.1 事件注册 事件注册语法 $(对象).type(fn) type是事件名 fn是事件处理函数 $(对象).事件名(fn)

  $(‘input’).click(function(){
  alert(‘123’)
  })
  1
  2
  3
  4
  5
  8.2 事件绑定
  使用bind()方法和on()方法
  优点
  编码效率略低
  缺点
  所有js事件都可以添加
  注意点
  可以添加多个相同或者不同类型的事件,不会覆盖
  $(对象).on(type,[event],fn)

  type – 事件类型
  event – 事件参数
  fn – 处理函数

  // 2.通过on绑定事件
  $(“button”).on(“click”, function () {
  alert(“hello click1”);
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  同时为多个事件绑定方法
  $(“input[name=event_1]”).on({
  mouseover: function () { // 为 mouseover 绑定方法
  $(“ul”).css(“display”, “none”);
  },
  mouseout: function () { // 为 mouseout 绑定方法
  $(“ul”).css(“display”, “block”);
  }
  });
  1
  2
  3
  4
  5
  6
  7
  8
  8.3 事件解绑
  移除事件使用unbind()方法和off()方法
  off方法如果不带参数时，表示移除所绑定的全部事件
  off方法如果传递一个参数, 会移除所有指定类型的事件
  off方法如果传递两个参数, 会移除所有指定类型的指定事件
  $(对象).off([type],[fn])

  $(“button”).off(); // 移除button中全部事件
  $(“button”).off(“click”); // 移除button中click事件
  $(“button”).off(“click”, test1); // 移除button中click事件中test1事件
  1
  2
  3
  4
  5
  8.4 事件坐标
  当事件被触发时,系统会将事件对象(event)传递给回调函数,通过event对象就能获取时间的坐标

  获取事件坐标有三种方式

  event.offsetX, event.offsetY 相对于事件元素左上角
  event.pageX, event.pageY 相对于页面的左上角
  event.clientX, event.clientY 相对于视口的左上角
  event.page 和 event.client 区别

  网页是可以滚动的,而视口是固定的
  所以想获取距离可视区域坐标通过event.client
  想获取距离网页左上角的坐标通过event.page
  $(function () {
  // 获取事件的坐标
  $(".son").click(function (event) {
  // 获取相对于事件元素左上角坐标
  console.log(event.offsetX, event.offsetY);
  // 获取相对于视口左上角坐标
  console.log(event.clientX, event.clientY);
  // 获取相对于页面左上角坐标
  console.log(event.pageX, event.pageY);
  });
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  8.5 事件冒泡
  什么是事件冒泡

  事件冒泡是从目标元素逐级向上传播到根节点的过程
  阻止事件冒泡

  如果希望在触发一个元素的事件处理程序时，不影响其父元素, 此时便可以使用停止事件冒泡
  $(function () {
  $(".son").click(function (event) {
  console.log(".son");
  // 在子元素中停止事件冒泡,时间不会继续向上传播,所以父元素click方法不会被触发
  event.stopPropagation();
  });
  $(".father").click(function () {
  console.log(".father");
  });
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  8.6 默认行为
  什么是默认行为

  网页中的元素有自己的默认行为
  例如
  单击超链接后会跳转
  点击提交表单按钮会提交
  阻止默认行为

  可以使用event.preventDefault();方法阻止事件默认行为
  $(function () {
  $(“a”).click(function (event) {
  var str = $(“a”).attr(“href”);
  // 如果超链接是百度就不跳转
  if(str.indexOf(“baidu”) > 0){
  // 阻止默认行为
  event.preventDefault();
  }
  });
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  8.7 自动触发事件
  什么是自动触发事件

  通过代码控制事件, 不用人为点击/移入/移除等事件就能被触发
  自动触发方式

  $(“selector”).trigger(“eventName”);
  触发事件的同时会触发事件冒泡
  触发事件的同时会触发事件默认行为
  $(“selector”).triggerHandler(“eventName”);
  触发事件的同时不会触发事件冒泡
  触发事件的同时不会触发事件默认行为
  $(function () {
  /*
  $(".son").click(function () {
  alert(“son”);
  });
  $(".father").click(function () {
  alert(“father”);
  });

  // trigger 会触发事件冒泡
  // $(".father").trigger("click");
  // $(".son").trigger("click");
  
  // triggerHandler 不会触发事件冒泡
  // $(".father").triggerHandler("click");
  // $(".son").triggerHandler("click");
  */
  
  $("input[type='submit']").click(function () {
      alert("点击了A标签");
  });
  // trigger 会触发系统默认事件
  // $("input[type='submit']").trigger("click");
  // triggerHandler 不会触发系统默认事件
  $("input[type='submit']").triggerHandler("click");
  

  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  8.8 自定义事件
  什么是自定义事件

  自定义事件就是自己起一个不存在的事件名称来注册事件,
  然后通过这个名称还能触发对应的方法执行, 这就是自定义事件
  自定义事件的条件

  事件必须是通过on绑定的
  事件必须通过trigger来触发
  因为trigger方法可以自动触发对应名称的事件,所以只要事件的名称和传递给trigger的名称一致就能执行对应的事件方法
  $(function () {
  $(".father").on(“njClick”, function () {
  alert(“njClick”);
  });
  $(".father").trigger(“njClick”);
  });
  1
  2
  3
  4
  5
  6
  8.9 事件命名空间
  什么是事件命名空间

  事件命名空间主要用于区分相同类型的事件,区分不同前提条件下到底应该触发哪个事件
  格式: eventName.命名空间
  添加事件命名空间的条件

  事件是通过on来绑定的
  通过trigger触发事件
  事件命名空间注意点（面试题）

  利用trigger触发子元素带命名空间的事件时，会触发父元素带相同命名空间的事件，父元素没有命名空间的事件不会被触发
  利用trigger触发子元素不带命名空间的事件时，所有父元素（带相同命名空间，不带命名空间）事件都会被触发，所有子元素（带相同命名空间，不带命名空间）事件也都会被触发
  $(function () {
  // 给父元素添加不带命名空间事件
  $(".father").on(“click”, function () {
  alert(“father”);
  });
  // 给父元素添加带命名空间事件
  $(".father").on(“click.66”, function () {
  alert(“66 - father”);
  });

  $(".son").on("click.nj", function () {
      alert("nj - 向左走");
  });
  $(".son").on("click.66", function () {
      alert("66 - 向右走");
  });
  // 会同时触发NJ和66编写的click事件
  // 事件会冒泡到不带命名空间上级元素和带相同命名空间的上级元素
  // $(".son").trigger("click");
  // 只会触发NJ编写的click事件
  // 事件不会冒泡到不带命名空间上级元素
  // $(".son").trigger("click.nj");
  // 只会触发66编写的click事件
  // 事件只会冒泡到带相同命名空间的上级元素
  $(".son").trigger("click.66");
  

  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  8.10 事件委托
  8.10.1 什么是事件委托
  事件委托就是请其他人帮忙做我们想做的事
  做完之后最终的结果还是会反馈到我们这里
  8.10.2 事件委托的好处
  减少监听数量
  添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能
  因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间
  每个监听的函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差
  新增元素自动有事件响应处理
  默认情况下新增的元素无法响应新增前添加的事件
  8.10.3 jQuery 中添加事件委托
  添加前
  $("li").click隐式迭代给界面上所有li都添加了click事件(监听数量众多)通过$(“ul”).append新添加的li无法影响click事件

  • 我是第1行
  • 我是第2行
  • 我是第3行
  新增一行 移除事件委托 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 添加后 格式:$(parentSelector).delegate(childrenSelector, eventName, callback) $("ul").delegate隐式迭代所有ul添加事件(相比开始迭代li,必然ul的个数会少很多) 当事件被触发时,系统会自动动态查找当前是哪个li触发了事件,所以新增的li也能响应到事件 $(function () { // 1.委托ul监听li的点击事件 $("ul").delegate("li","click",function () { // 前面我们说过事件委托就是让别人帮忙做事,但最终的结果还是会返回到我们手里,所以这里的this是触发事件的li // 这里的this之所以是触发事件的li,本质是因为"事件冒泡", 触发事件的li向上传递到ul,触发了click事件. // console.log(this); // 弹出当前点击行内容 alert($(this).html()); });

  // 2.监听新增按钮点击
  var count = 0;
  $("button").eq(0).click(function () {
      count++;
      // 新增一行内容
      $("ul").append("<li>我是新增内容"+count+"</li>")
  });
  

  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  8.10.4 事件的委托注册
  delegate()方法用于委托事件的注册
  $(对象).delegate(子元素名,事件名,处理函数）
  1
  委托事件的特点
  利用事件冒泡机制实现委托
  提高事件处理的性能
  解决动态添加DOM元素的事件绑定
  $(function(){
  // 简单低级方式
  $(‘li’).on(‘mouseover’,function(){
  $(this).css(‘color’,’#f00’)
  })

  // 代理高级方式
  $(‘ul’).delegate(‘li’,‘mouseover’,function(){
  $(this).css(‘color’,’#f00’)
  })
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  8.11 移入移出事件
  8.11.1 mouseenter/mouseleave
  移动到子元素不会触发事件
  $(function () {
  // 移动到子元素不会触发事件
  // 2.1移入事件
  $(’.father’).mouseenter(function () {
  console.log(‘mouseenter’);
  });
  // 2.2移除事件
  $(’.father’).mouseleave(function () {
  console.log(‘mouseleave’);
  });
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  8.11.2 mouseover/mouseout
  移动到子元素会触发事件
  $(function () {
  // 2.1移入事件
  $(’.father’).mouseover(function () {
  console.log(‘mouseover’) ;
  });
  // 2.2移除事件
  $(’.father’).mouseout(function () {
  console.log(‘mouseout’) ;
  });
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  8.11.3 hover
  内容监听移入和移出
  内部实现就是调用mouseenter和mouseleave
  $(function () {
  /*
  // 传入两个回调函数,一个监听移入,一个监听移出
  $(".father").hover(function () {
  console.log(“mouseenter”);
  }, function () {
  console.log(“mouseleave”);
  });
  */
  // 如果只传入一个方式,那么这个方式既监听移入也监听移出
  $(".father").hover(function () {
  console.log(“移入移除”);
  });
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  9. jQuery 动画
  9.1 常见动画类型
  jQuery 提供了很多动画效果
  控制元素显示与隐藏
  控制元素淡入淡出
  改变元素高度
  9.2 显示与隐藏动画
  9.2.1 show
  显示动画
  设置显示速度可以实现动画效果
  显示速度可以取如下值：毫秒（如1000）、slow、normal、fast
  默认的动画时长是400毫秒
  slow本质是600毫秒
  normal本质是400毫秒
  fast本质是200毫秒
  原理
  当前操作的元素是块级，调用display:block;
  当前操作的元素是行内，调用display:inline;
  // 编写jQuery相关代码
  $(“button”).eq(0).click(function () {
  // $(“div”).css(“display”, “block”);
  // 注意: 这里的时间是毫秒
  $(“div”).show(1000, function () {
  // 作用: 动画执行完毕之后调用
  alert(“显示动画执行完毕”);
  });
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  9.2.2 hide
  隐藏动画
  参数也可以设置隐藏的动画效果
  $(“button”).eq(1).click(function () {
  // $(“div”).css(“display”, “none”);
  $(“div”).hide(1000, function () {
  alert(“隐藏动画执行完毕”);
  });
  });
  1
  2
  3
  4
  5
  6
  9.2.3 toggle
  切换动画
  显示变隐藏，隐藏变显示
  $(“button”).eq(2).click(function () {
  $(“div”).toggle(1000, function () {
  alert(“切换动画执行完毕”);
  });
  });
  1
  2
  3
  4
  5
  9.3 展开与收起动画
  9.3.1 slideDown
  展开动画
  使元素逐步延伸显示
  $(“button”).eq(0).click(function () {
  $(“div”).slideDown(1000, function () {
  alert(“展开完毕”);
  });
  });
  1
  2
  3
  4
  5
  9.3.2 slideUp
  收起动画
  使元素逐步缩短直至隐藏
  $(“button”).eq(1).click(function () {
  $(“div”).slideUp(1000, function () {
  alert(“收起完毕”);
  });
  });
  1
  2
  3
  4
  5
  9.3.3 slideToggle
  切换动画
  展开变收起,收起变展开
  $(“button”).eq(2).click(function () {
  $(“div”).slideToggle(1000, function () {
  alert(“收起完毕”);
  });
  });
  1
  2
  3
  4
  5
  9.4 淡入淡出动画
  9.4.1 fadeIn
  淡入动画
  改变元素的透明度实现淡入效果
  $(“button”).eq(0).click(function () {
  $(“div”).fadeIn(1000, function () {
  alert(“淡入完毕”);
  });
  });

  // 以较慢的速度淡入
  $(“input[name=fadein_btn]”).click(function(){
  $(“img”).fadeIn(“slow”);
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  9.4.2 fadeOut
  淡出动画
  改变元素的透明度实现淡出效果
  $(“button”).eq(1).click(function () {
  $(“div”).fadeOut(1000, function () {
  alert(“淡出完毕”);
  });
  });
  1
  2
  3
  4
  5
  9.4.3 fadeToggle
  切换动画
  显示变淡出，不显示变淡入
  $(“button”).eq(2).click(function () {
  $(“div”).fadeToggle(1000, function () {
  alert(“切换完毕”);
  });
  });
  1
  2
  3
  4
  5
  9.4.4 fadeTo
  淡入到指定透明度动画
  可以通过第二个参数,淡入到指定的透明度(取值范围0~1)
  $(“button”).eq(3).click(function () {
  $(“div”).fadeTo(1000, 0.2, function () {
  alert(“淡入完毕”);
  })
  });
  1
  2
  3
  4
  5
  9.5 通用动画函数
  9.5.1 animate
  animate()针对各类样式变化提供渐变的动画功能
  $(selector).animate(styles,speed,easing,callback)

  styles 变化的样式
  speed 动画的速度
  easing 动画的方式
  callback 动画后的执行回调函数
  1
  2
  3
  4
  5
  6
  /*
  第一个参数: 接收一个对象, 可以在对象中修改属性
  第二个参数: 指定动画时长
  第三个参数: 指定动画节奏, 默认就是swing
  第四个参数: 动画执行完毕之后的回调函数
  */
  $(".two").animate({
  marginLeft: 500
  }, 5000, “linear”, function () {
  // alert(“自定义动画执行完毕”);
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  每次开始运动都必须是初始位置或者初始状态,如果想在上一次位置或者状态下再次进行动画可以使用累加动画
  $(“button”).eq(1).click(function () {
  $(".one").animate({
  width: “+=100”
  }, 1000, function () {
  alert(“自定义动画执行完毕”);
  });
  });
  1
  2
  3
  4
  5
  6
  7
  同时操作多个属性,自定义动画会执行同步动画,多个被操作的属性一起执行动画
  $(".one").animate({
  width: 500,
  height: 500
  }, 1000, function () {
  alert(“自定义动画执行完毕”);
  });
  1
  2
  3
  4
  5
  6
  9.6 多动画的组合
  同时执行的动画
  $(selector).animate({样式1,样式2…},speed)
  1
  先后执行的动画
  //先执行的动画
  $(selector).animate(styles,speed,easing,function(){
  //后执行的动画
  $(selector).animate(styles,speed,easing)
  })
  1
  2
  3
  4
  5
  9.7 动画队列
  多个动画方法链式编程
  等到前面的动画执行完毕再依次执行后续动画
  $(“div”).slideDown(1000).slideUp(1000).show(1000);

  $(".one").slideDown(1000,function () {
  $(".one").slideUp(1000, function () {
  $(".one").show(1000);
  });
  });
  1
  2
  3
  4
  5
  6
  7
  如果后面紧跟一个非动画方法则会被立即执行
  // 立刻变为黄色,然后再执行动画
  $(".one").slideDown(1000).slideUp(1000).show(1000).css(“background”, “yellow”);
  1
  2
  如果想颜色在动画执行完毕之后设置
  使用回调
  使用动画队列
  $(".one").slideDown(1000,function () {
  $(".one").slideUp(1000, function () {
  $(".one").show(1000, function () {
  $(".one").css(“background”, “yellow”)
  });
  });
  });

  $(".one").slideDown(1000).slideUp(1000).show(1000).queue(function () {
  $(".one").css(“background”, “yellow”)
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  注意
  动画队列方法queue()后面不能继续直接添加queue()
  如果想继续添加必须在上一个queue()方法中next()方法
  $(".one").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {
  $(".one").css(“background”, “yellow”);
  next(); // 关键点
  }).queue(function () {
  $(".one").css(“width”, “500px”)
  });
  1
  2
  3
  4
  5
  6
  9.8 动画相关方法
  9.8.1 delay
  设置动画延迟时长
  $(".one").animate({
  width: 500
  // height: 500
  }, 1000).delay(2000).animate({
  height: 500
  }, 1000);
  1
  2
  3
  4
  5
  6
  9.8.2 stop
  停止指定元素上正在执行的动画
  // 立即停止当前动画, 继续执行后续的动画
  $(“div”).stop();
  $(“div”).stop(false);
  $(“div”).stop(false, false);

  // 立即停止当前和后续所有的动画
  $(“div”).stop(true);
  $(“div”).stop(true, false);

  // 立即完成当前的, 继续执行后续动画
  $(“div”).stop(false, true);

  // 立即完成当前的, 并且停止后续所有的
  $(“div”).stop(true, true);
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  9.9 动画的结束
  动画停止stop(stopAll，gotoEnd)
  参数stopAll表示是否停止后续其他动画执行
  参数gotoEnd表示是否允许完成当前动画，是在第一个参数生效时使用
  9.10 动画练习
  9.10.1 切换显示列表

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 9.10.2
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 10. jQuery 静态方法 10.1 什么是静态方法 静态方法对应的是对象方法 对象方法用实例对象调用,而静态方法用类名调用 // 1.定义一个类 function AClass() { } // 2.给这个类添加一个静态方法 // 直接添加给类的就是静态方法 AClass.staticMethod = function () { alert("staticMethod"); } // 静态方法通过类名调用 AClass.staticMethod();

  // 3.给这个类添加一个实例方法
  AClass.prototype.instanceMethod = function () {
  alert(“instanceMethod”);
  }
  // 实例方法通过类的实例调用
  // 创建一个实例(创建一个对象)
  var a = new AClass();
  // 通过实例调用实例方法
  a.instanceMethod();
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  10.2 jQuery.holdReady()
  暂停或者恢复 jQuery.ready() 事件
  传入 true 或 false

  点击测试弹出 解除延迟 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 10.3 each 方法 js 原生 forEach 方法 原生的forEach方法只能遍历数组, 不能遍历伪数组 /* 第一个参数: 遍历到的元素 第二个参数: 当前遍历到的索引 */ var arr = [1, 3, 5, 7, 9]; var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};

  arr.forEach(function (value, index) {
  console.log(index, value);
  });

  obj.forEach(function (value, index) {
  console.log(index, value);// 报错
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  jQuery 的 each 静态方法
  遍历对象或数组(伪数组)
  优点统一遍历对象和数组的方式
  回调参数的顺序更符合我们的思维模式
  // 1.利用jQuery的each静态方法遍历数组
  /*
  第一个参数: 当前遍历到的索引
  第二个参数: 遍历到的元素
  */
  $.each(arr, function (index, value) {
  console.log(index, value);
  });
  $.each(obj, function (index, value) {
  console.log(index, value);
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  10.4 map 方法
  js 原生 map 方法
  不能遍历的伪数组
  jQuery 的 map 方法
  遍历对象或数组
  将回调函数的返回值组成一个新的数组返回
  $(function () {
  // 4.1遍历数组
  var arr = [1, 3, 5, 7, 9];
  // 4.1.1通过原生方法遍历数组
  // 第一个回调函数参数是遍历到的元素
  // 第二个回调函数参数是当前遍历的索引
  // 第三个回调函数参数是当前被遍历的数组
  // 返回值: 将回调函数返回值收集起来组成一个新的数组
  var res = arr.map(function (ele, idx, arr) {
  console.log(idx, ele, arr);
  return ele + idx;
  });
  console.log(res);

   // 4.1.2通过jQuery静态方法遍历数组
   // 第一个回调函数参数是遍历到的元素
   // 第二个回调函数参数是当前遍历的索引
   // 返回值: 将回调函数返回值收集起来组成一个新的数组
   var $res2 = $.map(arr, function (ele,idx) {
       console.log(idx, ele);
       return ele + idx;
   });
   console.log($res2);
  
   // 4.2遍历对象
   var obj = {name: "lnj", age:"33", gender:"male"};
   /*
   obj.map(function (ele, idx, obj) {
       // 报错,原生JS没有map方法
       console.log(idx, ele, obj);
   });
   */
   var $res = $.map(obj, function (value, key) {
       console.log(key, value);
       return key + value;
   });
   console.log($res);
  

  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  10.5 filter 方法
  作用
  返回符合一定条件的元素
  该方法让您规定一个条件
  不符合条件的元素将从选择中移除
  符合条件的元素将被返回
  该方法通常用于缩小在被选元素组合中搜索元素的范围
  返回带有类名 “intro” 的所有

  元素

  $(“p”).filter(".intro")
  1
  2
  3
  10.6 find 方法
  作用
  返回被选元素的后代元素
  后代是子、孙、曾孙，依此类推
  返回

  • 后代中所有的 元素

  $(document).ready(function(){
  $(“ul”).find(“span”).css({“color”:“red”,“border”:“2px solid red”});
  });
  1
  2
  3
  4
  5
  10.7 each 与 map 区别
  each 静态方法默认的返回值就是遍历谁就返回谁
  map 静态方法默认的返回值是一个空数组
  each静态方法不支持在回调函数中对遍历的数组进行处理
  map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
  10.8 type 方法
  作用
  该参数是否一个正则表达式
  如果对象是undefined或null，则返回相应的"undefined"或"null"
  如果对象有一个内部属性[[Class]]和一个浏览器的内置对象的 [[Class]] 相同，就返回相应的 [[Class]] 名字
  $.type( undefined ) === “undefined”

  $.type() === “undefined”

  $.type( window.notDefined ) === “undefined”

  $.type( null ) === “null”

  $.type( true ) === “boolean”

  $.type( 3 ) === “number”

  $.type( “test” ) === “string”

  $.type( function(){} ) === “function”

  $.type( [] ) === “array”

  $.type( new Date() ) === “date”

  $.type( new Error() ) === “error” // jQuery 1.9 新增支持

  $.type( /test/ ) === “regexp”

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  10.9 trim 方法
  作用
  去除字符串两端的空格
  参数
  需要去除空格的字符串
  返回值
  去除空格之后的字符串
  $(function () {
  var str = " lnj “;
  console.log(”—"+str+"—");
  var $res = $.trim(str);console.log("---"+$res+"—");
  });
  1
  2
  3
  4
  5
  6
  10.10 isWindow 方法
  作用
  判断传入的对象是否是window对象
  返回值 true / false
  // 真数组
  var arr = [1, 3, 5, 7, 9];
  // 伪数组
  var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
  // 对象
  var obj = {“name”:“lnj”, age:“33”};
  // 函数
  var fn = function(){};
  // window对象
  var w = window;

  var res = $.isWindow(w);
  console.log(res);
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  10.11 isArray 方法
  作用
  判断传入的对象是否是真数组
  返回值 true / false
  $(function () {
  // 对象
  var obj = {name:“lnj”,age: “33”, gender:“male”};
  // 真数组
  var arr = [1, 3, 5, 7, 9];
  var $res = $.isArray(obj);console.log($res);// false
  var $res2 = $.isArray(arr);console.log($res2);// true
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  10.12 inArray 方法
  作用
  返回数组中指定元素的索引值
  如果没有找到，则返回-1
  $(function () {
  var arr = [ 4, “Pete”, 8, “John” ];
  var $spans = $( “span” );
  $spans.eq( 0 ).text( jQuery.inArray( “John”, arr ) );
  $spans.eq( 1 ).text( jQuery.inArray( 4, arr ) );
  $spans.eq( 2 ).text( jQuery.inArray( “Karl”, arr ) );
  $spans.eq( 3 ).text( jQuery.inArray( “Pete”, arr, 2 ) );
  })
  1
  2
  3
  4
  5
  6
  7
  8
  10.13 isFunction 方法
  作用
  判断传入的对象是否是一个函数
  返回值: true / false
  注意点
  jQuery框架本质上是一个函数
  (function( window, undefined ) {})( window );
  $(function () {
  var obj = {name:“lnj”,age: “33”, gender:“male”};
  var arr = [1, 3, 5, 7, 9];
  var fn = function () {}
  var $res = $.isFunction(obj);console.log($res);// false
  $res = $.isFunction(arr);console.log($res);
  $res = $.isFunction(fn);console.log($res);
  // 通过该方法验证了我们前面所说的,jQuery框架本质是一个匿名函数
  $res = $.isFunction($);
  console.log($res);
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  10.14 parseJSON 方法
  作用
  $.parseJSON()函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象
  传入格式有误的 JSON 字符串可能导致抛出异常
  JSON标准不允许"控制字符"如制表符或换行符
  解析一个 JSON 字符串

  $(function () {
  var obj = jQuery.parseJSON(’{“name”:“John”}’);
  alert( obj.name === “John” );
  })
  1
  2
  3
  4
  5
  6
  10.15 makeArray 方法
  作用
  $.makeArray()函数用于将一个类似数组的对象转换为真正的数组对象
  注意
  类数组对象具有许多数组的属性(例如length属性，[]数组访问运算符等)
  但是缺少从数组的原型对象上继承下来的内置方法(例如：pop()、reverse()等)
  将一个HTML元素集合转换成对应的数组

  $(function () {
  var elems = document.getElementsByTagName(“div”); // 返回一个节点列表
  var arr = jQuery.makeArray(elems);
  arr.reverse(); //对列表的元素使用一个数组方法
  KaTeX parse error: Expected 'EOF', got '}' at position 32: …ocument.body); }̲) 1 2 3 4 5 6 7….extend()指定了一个参数，则意味着参数target被省略，此时，target就是jQuery对象本身
  通过这种方式，可以为全局对象 jQuery 添加新的函数
  如果多个对象具有相同的属性，则后者会覆盖前者的属性值

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 10.17 fn.extend 方法 作用 $.fn.extend()函数为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法) 提示 jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法 这些方法可以在jQuery实例对象上调用 11. jQuery 的 Ajax 11.1 Ajax 的定义 Ajax: 异步刷新技术

  11.2 异步刷新的作用
  无刷新: 不刷新整个页面，只刷新局部
  无刷新的好处
  只更新部分页面，有效利用带宽
  提供连续的用户体验
  提供类似C/S的交互效果，操作更方便
  11.3 Ajax 和 传统 web 区别
  传统web Ajax技术
  提交表单方式发送请求 异步引擎对象发送请求
  响应内容是一个完整页面 响应内容只是需要的数据
  需等待服务器响应完成并重新加载整个页面后，用户才能进行操作 可以动态更新页面中的部分内容，用户不需要等待请求的响应
  11.4 Ajax 异步请求原理

  11.5 jQuery 的 Ajax 请求
  传统方式实现Ajax的不足
  方法、属性、常用值较多不好记忆
  步骤繁琐
  浏览器兼容问题
  jQuery常用Ajax方法(“$”不需要选择器，这是工具方法)
  $.ajax()
  $.get()
  $.post()
  $.getJSON()load()11.6Ajax请求方法的语法使用$.ajax()实现异步交互
  $.ajax(url:url,//要提交的URL路径type:"get",//发送请求的方式data:data,//要发送到服务器的数据dataType:"json"//指定传输的数据格式success:function(result)//请求成功后要执行的代码,error:function()//请求失败后要执行的代码);1234567891011.7get请求方法的语法使用$.get()实现异步交互
  $.get(url,data,function(result){
  // 省略将服务器返回的数据显示到页面的代码
  });

  // 以上代码等价于

  $.ajax({
  url:url,
  data:data,
  type:“get”,
  success: function(result) {
  //省略代码
  }
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  11.8 load 请求方法的语法
  使用load()实现异步交互
  加载外部的页面文件到当前页面中
  $("#nameDiv").load(url,data);

  // 以上代码等价于

  $.get(url,data,function(result){
  KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲nameDiv").html(….getJSON()实现异步交互
  仅限于JSON数据格式
  $.getJSON(url,data, success(result) {
  //省略将服务器返回的数据显示到页面的代码
  });
  1
  2
  3
  12. jQuery 异步请求 Ajax
  12.1 跨域问题
  跨域的限制

  跨域的规定
  URL 原因 是否允许通信
  http://www.a.com/dir/b.html 同一域名下 允许
  http://www.a.com/dir2/c.html 同一域名，不同文件夹 允许
  http://www.a.com:81/dir/d.html 同一域名,不同端口 不允许
  https://www.a.com/dir/e.html 同一域名，不同协议 不允许
  http://71.23.92.77/dir/f.htmll 域名和域名对应 ip 不允许
  http://script.a.com/g.html 主域相同，子域不同 不允许
  http://a.com/h.html 同一域名，不同二级域名(同上) 不允许(cookie 这种情况下也不允许访问)
  http://www.cc.com/a.html 主机名不同 不允许
  12.2 跨域问题的解决
  常用解决方法
  服务器设置
  允许跨域请求
  代理设置
  jsonp
  通过script可以跨域的特点
  配置dataType参数
  配置jsonp参数
  12.3 Ajax 练习
  12.3.1 模糊搜索功能
  使用淘宝商品推荐的接口，实现模糊搜索功能
  淘宝商品推荐接口
  http://suggest.taobao.com/sug?code=utf-8&q=关键字&callback=cb

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
  13. 总结
      jQuery 库能简化原生js编写，做个笔记
      ————————————————
      版权声明：本文为CSDN博主「教员的小粉红～」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
      原文链接：https://blog.csdn.net/qq_43645678/article/details/93380482