Jquery

最新推荐文章于 2024-05-07 11:07:47 发布

Leprehuan

最新推荐文章于 2024-05-07 11:07:47 发布

阅读量1.8k

点赞数 29

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/Leprehuan/article/details/119011701

版权

正课:

1. 什么是jQuery

2. 如何使用jQuery

3. jQuery原理:

4. jQuery API 三大特点:

5. 查找元素

6. 修改元素

7. 按节点间关系查找

一. 什么是jQuery

1. 什么是:

(1). 第三方开发的: 必须下载才能用

(2). 执行DOM操作的: jQuery还是执行DOM的增删改查+事件绑定操作。学习jQuery只是学习DOM的延续而已。

(3). 极简化的: jQuery对DOM操作的每一步都进行了简化。

(4). 函数库: jQuery中都是用函数来解决一切问题。

2. 为什么: 2个原因:

(1). 简单

(2). 解决了大部分浏览器兼容性问题。只要jQuery让用的，几乎都没有兼容性问题。

3. 何时: 从前很多旧的项目和框架都是用jQuery开发的！

4. 问题:

(1). 只有PC端，没有移动端。

(2). 简化的不彻底: 只对DOM操作的每一步进行了简化，但是没有减少步骤！

5. 所以，jQuery用的越来越少了。

二. 如何使用jQuery:

1. 官网: jquery.com

2. 下载: 版本:

1.x 兼容旧浏览器

jquery-1.11.3.js

未压缩版: 带有完备的注释、代码格式，以及见名知意的变量名。——可读性好，适合学习和开发之用。——体积大，不便于快速下载运行，不适合生产环境

压缩版: 删除所有注释和代码格式，极简化了变量名。——体积小，便于快速下载运行，适合生产环境。——可读性差，不适合学习和开发之用。

2.x 不再兼容旧浏览器，但是，暂时也不兼容ES6

3.x 才开始支持ES6

3. 在页面中引入jquery: 2种:

(1). 将jquery.js文件下载到项目本地文件夹，用相对路径引入

问题: 文件只保存在一个位置的服务器上。距离服务器近的用户访问当然快。但是，距离服务器很远的用户，访问就会慢。

(2). 引入CDN网络中的jquery.js文件

a. 什么是CDN网络: 内容分发网络。

b. 原理:

1). CDN网络可在全球范围共享一个文件

2). 任意地区的一个客户端想用CDN网络中的文件时，CDN网络都会从距离这个客户端网络最优的服务器下载资源给客户端。

c.如何: 官网->下载->CDN->自己想用的链接地址:

比如:微软提供的cdn网址:

4. 我的第一个jquery程序:

1_DOM.html

<!DOCTYPE html>

<html>

</head>

<body>

<h1>jQuery/$工厂函数</h1>

<button id="btn1">click me(0)</button>

//DOM 4步

//1. 查找触发事件的元素

//本例中: id为btn1的按钮触发事件

var btn=document.getElementById("btn1");

//2. 绑定事件处理函数

btn.οnclick=function(){

//3. 查找要修改的元素

//本例中: 就改this

//4. 修改元素

//4.1 先取出当前按钮的内容中()中的数字，转为整数

var n=parseInt(

this.innerHTML //click me(1123)

//0123456789 -1

// |← →|

.slice( 9 , -1)

);

//4.2 将数字+1

n++;

//4.3 再将数字拼接回原按钮的内容中

this.innerHTML=`click me(${n})`;

// 格式与旧内容必须完全一致

}

</script>

</body>

</html>

运行结果:

1_jQuery.html

<!DOCTYPE html>

<html>

</head>

<body>

<h1>jQuery/$工厂函数</h1>

<button id="btn1">click me(0)</button>

//DOM 4步

//1. 查找触发事件的元素

//本例中: id为btn1的按钮触发事件

// css的id选择器

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

//2. 绑定事件处理函数

$btn.click(function(){

//3. 查找要修改的元素

//本例中: 就改this

var $this=$(this);

//4. 修改元素

//4.1 先取出当前按钮的内容中()中的数字，转为整数

var n=parseInt(

$this.html()//click me(1123)

//0123456789 -1

// |← →|

.slice( 9 , -1)

);

//4.2 将数字+1

n++;

//4.3 再将数字拼接回原按钮的内容中

$this.html(`click me(${n})`);

// 格式与旧内容必须完全一致

})

</script>

</body>

</html>

运行结果:

三. jQuery原理:

1. 引入jquery.js文件后，是在内存中新增了一种类型:

(1). 构造函数: 创建该类型的子对象

(2). 原型对象: 集中保管该类型所有子对象共用的方法

2. 只要想使用jQuery家简化版函数，必须先创建jQuery类型的子对象。

(1). 标准: var jq子对象=new jQuery(选择器);

(2). 简写: var jq子对象=jQuery(选择器)

(3). 更简化: var jq子对象=$(选择器) //$=jQuery

(4). 强调: 只有jq子对象才能访问jQuery原型对象中的简化版共有方法。而原生的DOM元素对象，无权使用jQuery原型对象中的简化版函数。

(5). 约定俗成: 凡是用$创建的jquery类型的子对象，命名时都要以$开头！以此和原生DOM家的元素对象区分。

3. 问题: jQuery家所有的函数几乎都是为了操作DOM元素而定义的。所以，调用jQuery函数都要操作DOM元素。可是，DOM元素从哪儿来？

解决: jQuery要求，每次创建jQuery子对象时，必须提供一个css选择器作为参数。jQuery构造函数会自动用选择器去DOM树中查找原生的DOM元素。取回来保存进新创建的jq子对象中。

4. 问题: 将来调用简化版函数时，使用jq子对象调用的。不是用原生的DOM元素调用的！简化版函数的操作，能不能作用到内部保存的原生的DOM元素上？

解决: 每当对jq子对象调用简化版函数时，简化版函数内部封装的都是原生的DOM操作。所以调简化版函数等效于调用原生的方法和属性，并最终作用到内部保存的元素对象上。

5. 问题: jQuery中事件处理函数里的this。

(1). 因为.click会被翻译为.onclick=function(){ ... }，再执行。所以.click()中的this，其实最终还是.onclick里的this。与DOM中的this完全一样！都指向正在点击的当前原生DOM元素对象本身。所以，this无权使用jQuery家简化版函数。

(2). 解决: 今后，jquery中所有事件处理函数中的this都必须用$()包裹起来，形成一个jq子对象，才能有权利使用jQuery家的简化版函数。

四. jQueryAPI三大特点:

1. 自带for遍历: 只对jQuery查找结果对象调用一次简化版函数，就可以自动遍历查找结果中每个DOM元素，自动为每个DOM元素应用多用的DOM操作

2. 一个函数两用: 凡是和修改相关的函数，都既能用于修改新值，又能用于获取旧值。

重载:

如果本次调用函数时，没有传新值参数，则函数默认执行获取旧值的操作

如果本次调用函数时，传了新值参数，则函数自动改为执行修改操作。

3. (未完待续...)

4. 示例: 多个按钮，记录每个按钮的单击次数:

day01剩余/2_jQueryAPI.html

<!DOCTYPE html>

<html>

</head>

<body>

<h1>jQueryAPI特点</h1>

<button id="btn1">click me(0)</button>

<button id="btn2">click me(0)</button>

<button id="btn3">click me(0)</button>

//为三个按钮绑定单击事件，记录单击次数

//DOM 4步

//1. 查找触发事件的元素

//本例中: 查找三个按钮

// 创建jQ子对象

// 元素选择器

// 用元素选择器去查找所有button

//变量名可以自定义

//只是习惯上建议以$开头！

//但是=左边的$没有任何实际意义！

var $btn=$("button");

console.log($btn);

//2. 绑定事件处理函数

//本例中: 因为三个按钮都要单击

$btn.click(function(){

// alert("疼!");

//3. 查找要修改的元素

//本例中: 就改this

var $this=$(this);

//4. 修改元素

//4.1 先取出当前按钮的内容中()中的数字，转为整数

var n=parseInt(

$this.html().slice(9,-1)

);

//4.2 将数字+1

n++;

//4.3 再将数字拼接回原按钮的内容中

$this.html(`click me(${n})`);

// 格式与旧内容必须完全一致

})

</script>

</body>

</html>

运行结果:

五. 查找元素:

1. jQuery主要以选择器方式查找元素。jQuery支持几乎所有CSS3选择器。但是，又额外扩展了一批jquery独有的选择器。

2. 回顾: 子元素过滤选择器: （CSS中）

(1). 什么是: 按元素在其父元素下的相对位置选择匹配的元素.

(2). 包括:

a. :first-child 所有父元素下第一个直接子元素

b. :last-child 所有父元素下最后一个直接子元素

c. :nth-child(i) 所有父元素下第i个直接子元素

强调: css中下标从1开始

d. :only-child 所有父元素下唯一的一个子元素

(3). 示例: 使用子元素过滤选择器选择指定元素

day01剩余/5_child_filter.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>子元素过滤选择器.</h3>

<ul>

<li>child1-basic0</li>

<li>child2-basic1</li>

<li>child3-basic2</li>

</ul>

<ul>

<li>child1-basic3</li>

<li>child2-basic4</li>

<li>child3-basic5</li>

</ul>

<ul>

<li>child1-basic6</li>

</ul>

//查找每个ul中第一个li，让其字体颜色变为红色

$("ul>li:first-child")

//DOM中: .style.color="red"

//jq中: ↑ ↑ ↑

.css("color","red")

//查找每个ul中最后一个li

$("ul>li:last-child")

.css("background-color","yellow")

//查找每个ul中处于偶数位置的

$("ul>li:nth-child(2n)")

.css("box-shadow","0 0 5px green")

//查找每个ul中第2个li

$("ul>li:nth-child(2)")

.css("border","2px solid red")

//查找作为ul下唯一子元素的li

$("ul>li:only-child")

.css("padding","10px")

</script>

</body>

</html>

运行结果:

3. 基本过滤选择器: （jq新增、独有）

(1). 什么是: 先将所有符合要求的元素集中保存到一个大的集合中，统一编号。编号从0开始。然后，按元素在集合中的统一编号来选择指定的元素。

(2). 包括:

a. :first 或 :last 选择在结果集合中排名第一或最后的一个元素。

b. :eq(i) 或 :lt(i) 或 :gt(i) 选择在结果集合中下标i等于i、小于i、大于i位置的元素

eq->equal-> =

lt->less than-> <

gt->greater than-> >

c. :even 或 :odd 选择在结果集合中下标位置i等于偶数位置或奇数位置的元素

even 偶数

4个字母

odd 奇数

3个字母

(3). 示例: 使用基本过滤选择器选择指定元素:

day01剩余/6_basic_filter.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>基本过滤选择器.</h3>

<ul>

<li>child1-basic0</li>

<li>child2-basic1</li>

<li>child3-basic2</li>

</ul>

<ul>

<li>child1-basic3</li>

<li>child2-basic4</li>

<li>child3-basic5</li>

</ul>

<ul>

<li>child1-basic6</li>

</ul>

//查找第一个li

$("ul>li:first")

.css("color","red");

//查找最后一个li

$("ul>li:last")

.css("background-color","yellow")

//查找处于(正常人眼)偶数位置的li

$("ul>li:odd")

.css("box-shadow","0 0 5px green")

//查找第2个li

$("ul>li:eq(1)")

.css("border","2px solid red")

</script>

</body>

</html>

运行结果:

4. 内容过滤: (jq新增、独有)

(1). 什么是: 根据元素的内容不同来选择元素

(2). 包括：

a. :contains(文本) 选择内容中包含指定文本关键字的元素

包含

b. :has(其它选择器) 选择子元素中包含符合选择器要求的元素的父元素

c. :parent 选择内容非空的元素

父母

d. :empty 选择内容为空的元素

空

(3). 示例: 使用内容过滤选择器选择指定元素

10_content_filter.html

<!DOCTYPE html>

<html>

<style>

</style>

</head>

<body>

<h1>jQuery中的选择器——内容过滤选择器</h1>

<button>Submit注册信息</button>

<hr />

</div>

//选择包含"提交"二字的按钮，变为绿色按钮

$("button:contains(提交)")

.css("background-color","lightGreen")

//选中包含.close按钮的.alert元素，让它们变为红色的警告框

$(".alert:has(.close)")

.css("background-color","pink")

//选中不包含.close按钮的.alert元素，让它们变为绿色的警告框

$(".alert:not(:has(.close))")

// 不包含 ...

.css("background-color","lightGreen");

//选择内容为空的.alert元素

$(".alert:empty")

.css("box-shadow","0 0 5px red")

//选择内容不为空的.alert元素

$(".alert:not(:empty)")

.css("box-shadow","0 0 5px green")

</script>

</body>

</html>

运行结果:

5. 可见性过滤: (jq新增、独有)

(1). 什么是: 根据元素是否可见来选择元素

(2). 包括:

a. :visible 选择可见的元素

b. :hidden 选择不可见的元素

(3). 问题: HTML和CSS共有4种方式隐藏元素:

a. display:none

b. visibility:hidden

c. opacity:0

d. <input type="hidden">

:hidden都能选中吗?

(4). 强调: :hidden只能选择display:none和<input type="hidden">两种隐藏元素。

(5). 示例: 使用:hidden选择不可见的元素：

12_visibility_filter.html

<!DOCTYPE html>

<html>

<style>

</style>

</head>

<body>

<h1>可见性选择器</h1>

<div id="d1" style="display: none">lorem</div>

<div id="d2" style="visibility: hidden">lorem</div>

<div id="d3" style="opacity: 0">lorem</div>

</div>

console.log( $('div.container>:hidden') )

</script>

</body>

</html>

运行结果:

6. 表单元素过滤选择器: (jq新增、独有)

(1). 什么是: 根据表单元素的类别不同来选择不同的表单元素

(2). 包括:

a. :input 专门选择4大类表单元素(input, select, textarea, button)

input 是css中一个最普通的元素选择器，只能选择input元素。

b. 单单是input就有很多种type，于是jq为每种type都定义了专门的选择器:

:text 选择type="text"的普通文本框

:password 选择type="password"的密码框

:checkbox 选择type="checkbox"的复选框

:radio 选择type="radio"的单选按钮

... ...

(3). 示例: 点同意，启用元素，不同意，禁用元素

day01剩余/13_form_state_selector.html

<!DOCTYPE html>

<html>

<head>

<style>

</style>

</head>

<body>

<form>

用户名:<input disabled></br>

密码:<input type="password" disabled></br>

<input type="checkbox">我同意本站的使用条款<br>

</form>

//DOM 4步

//1. 查找触发事件的元素

//本例中: 选择type="checkbox"的复选框

$(":checkbox")

//2. 绑定事件处理函数

.click(function(){

//3. 查找要修改的元素

//本例中: 修改除checkbox之外的其余表单元素

// 除了 checkbox之外的

//表单元素

// jq对象

var $others=$(":input:not(:checkbox)")

//4. 修改元素

//如果当前checkbox是选中的

if(this.checked==true){

//则其它表单元素启用(disabled=false)

//jq对象不能用属性方式修改

//$others.disabled=false;//错误

$others.prop("disabled",false);

//prop()是jq中专门修改元素属性值的函数。

}else{//否则如果当前checkbox未选中

//则其它表单元素禁用

$others.prop("disabled",true);

}

//规律:

// $(":input:not(:checkbox)")

// .prop("disabled",!this.checked);

})

</script>

</body>

</html>

运行结果:

六. 修改: 3大类东西

强调: 凡是和修改有关的函数，都一个函数两用！

1. 内容: 3种方式:

(1). 元素开始标签到结束标签之间的原始的HTML内容:

a. DOM中: 元素.innerHTML

b. jq中: $元素.html("新内容")

(2). 元素开始标签到结束标签之间的纯文本内容

a. DOM中: 元素.textContent

b. jq中: $元素.text("新内容")

(3). 表单元素的值:

a. DOM中: 元素.value

b. jq中: $元素.val("新值")

(4). 示例: 使用元素内容实现表单验证

14_html_val.html

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

</head>

<body>

<h1>操作元素的内容和值</h1>

用户名:<input name="uname">

密码:<input type="password" name="upwd">

</form>

//正确时，使用图片:"<img src='img/ok.png'>"

//姓名错误时: "<img src='img/err.png'>用户名必须介于3~9位之间!"

//密码错误时: "<img src='img/err.png'>密码必须介于6~8位之间!"

/*先做用户名验证: */

//DOM 4步

//1. 查找触发事件的元素

//本例中: 当用户名文本框失去焦点时，验证文本框的内容

$(":text")

//2. 绑定事件处理函数

.blur(function(){

//因为当前文本框在后边可能反复使用，所以要保存在变量中

var $this=$(this);

//3. 查找要修改的元素

//本例中: 查找当前文本框旁边的span元素

//DOM中: var span=this.nextElementSibling

//jq中:

var $span=$this.next();

//4. 修改元素

//4.1 先获得当前文本框的内容

var value=$this.val();

//4.2 如果验证当前文本框的内容通过

if(value.length>=3&&value.length<=9){

//4.3 则修改span的内容为正确的提示

$span.html(`<img src='img/ok.png'>`);

}else{//4.4 否则如果验证当前文本框的内容不通过

//4.5 则修改span的内容为错误的提示

$span.html(`<img src='img/err.png'>用户名必须介于3~9位之间!`);

}

})

/*密码验证*/

//DOM 4步

//1. 查找触发事件的元素

//本例中: 当密码框失去焦点时，验证文本框的内容

$(":password")

//2. 绑定事件处理函数

.blur(function(){

//因为当前文本框在后边可能反复使用，所以要保存在变量中

var $this=$(this);

//3. 查找要修改的元素

//本例中: 查找当前文本框旁边的span元素

//DOM中: var span=this.nextElementSibling

//jq中:

var $span=$this.next();

//4. 修改元素

//4.1 先获得当前文本框的内容

var value=$this.val();

//4.2 如果验证当前文本框的内容通过

if(value.length>=6&&value.length<=8){

//4.3 则修改span的内容为正确的提示

$span.html(`<img src='img/ok.png'>`);

}else{//4.4 否则如果验证当前文本框的内容不通过

//4.5 则修改span的内容为错误的提示

$span.html(`<img src='img/err.png'>密码必须介于6~8位之间!`);

}

})

</script>

</body>

</html>

运行结果:

2. 属性: 3大类属性:

(1). 字符串类型的HTML标准属性:

a. DOM中: 2种:

1). 旧核心DOM: 2个函数：

元素.getAttribute("属性名")

元素.setAttribute("属性名","新值")

2). 新HTML DOM: 元素.属性名=新值

b. jq中: 也2种:

1). 代替旧核心DOM: $元素.attr("属性名","新值")

2). 代替新HTML DOM: $元素.prop("属性名","新值")

property

c. 示例: 点击图片切换下一张:

day01剩余/15_attr.html

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

</head>

<body>

<h1>操作元素的属性</h1>

//DOM 4步

//1. 查找触发事件的元素

//本例中: 只有一个img元素可以点击

$("img")

//2. 绑定事件处理函数

.click(function(){

//3. 查找要修改的元素

//本例中: 就是改自己this

//因为后边可能会反复使用这个this，所以保存在变量里

var $this=$(this);

//4. 修改元素

//4.1先取出alt属性值，转为整数

var alt=parseInt(

//因为alt是字符串类型的HTML标准属性，所以既可以用attr，又可以用prop

$this.attr("alt")

// .prop("alt")

);

//4.2判断如果alt值<4，就alt+1

if(alt<4){

alt++;

}else{//否则如果alt值==4，就alt=1

alt=1;

}

//4.3将新的alt值拼成图片路径，放入当前img的src属性中

//因为src属性是字符串类型的HTML标准属性，所以既可以用attr()，又可以用prop()

// $this.attr("src",`img/${alt}.jpg`);

// .prop("src",`img/${alt}.jpg`);

//4.4将新的alt值放回当前img的alt属性中

//因为alt是字符串类型的HTML标准属性，所以既可以用attr()，又可以用prop()

// $this.attr("alt",alt);

// .prop("alt",alt)

//因为src和alt属性都是字符串类型的HTML标准属性，所以即可用attr()，又可用prop()

// .prop({

$this.attr({

src:`img/${alt}.jpg`,

alt:alt //alt

});

})

</script>

</body>

</html>

运行结果:

(2). bool类型的HTML标准属性:

a. DOM中: 只有一种HTML DOM的方式: 元素.属性名

b. jq中: 也只有一种方式: $元素.prop("属性名",新bool值)

(3). 自定义扩展属性:

a. DOM中: 2种:

1). 旧核心DOM: 元素.getAttribute()和元素.setAttribute()

2). HTML5: 元素.dataset.属性名

b. jq中: 1种

1). 只能用$元素.attr()代替旧核心DOM

2). jq比HTML5早，所有暂时没有和HTML5对应的函数

总结: jQuery

1. 引入jQuery.js: 2种

(1). 引入项目本地jquery.js文件:

(2). 引入CDN网络中共享的jquery.js文件:

DOM家元素对象无权直接使用jQuery家简化版函数。

所以只要使用jQuery家简化版函数，都要先创建jQuery家子对象，其中保存一个要操作的DOM元素对象。
(2). 如何:2种:

a. 查找DOM元素对象，并保存进新创建的jQuery对象中:

var $jq子对象=$("选择器")

b. 不查找，直接将DOM元素对象保存进新创建的jQuery对象中:

var $jq子对象=$(DOM元素对象)

3. 原理:

(1). $=jQuery=new jQuery
(2). jq子对象其实是一个类数组对象，可保存找到的多个DOM元素对象

(3). 对jq子对象调用简化版函数，会被自动翻译为对应的原生DOM的方法和属性。

所以jQuery中的所有简化版函数效果和DOM中原生方法和属性效果一样。

jQuery中的this、e、e.target等，和DOM中的完全一样！

4. jQuery简化版函数3大特点:

(1). 一个函数两用: 调用函数时:

a. 没给新值作为参数，默认执行获取旧值的操作

b. 给了新值作为参数，自动切换为执行修改操作

(2). 自带for循环: 对整个jquery子对象调用一次简化版函数，等效于对jQuery子对象中保存的每个DOM元素对象分别调用一次对等的DOM原生方法或属性——不用自己写for循环

(3). 链式操作: 如果前一个函数返回的东西，刚好是下一个函数想要继续使用的主语，则后一个函数不用把主语重复写2遍。只要接着前一个函数继续.即可。

5. 查找元素:

(1). jQuery支持用所有CSS3选择器查找

(2). jQuery新增选择器: (css中不能用)

a. 基本过滤: (下标从0开始)

:first :last :eq(i) :lt(i) :gt(i) :even :odd

b. 内容过滤:

:contains(文本) :has(选择器) :parent :empty

c. 可见性过滤:

:visible :hidden(只能选择display:none和input type="hidden")

d. 表单元素过滤:
:input :text :password :radio :checkbox ... ...
(3).用节点间关系查找: 2大类关系, 8个函数

a. 父子关系：3个函数:

1). $元素.parent()

2). $元素.children("选择器")

3). $元素.find("选择器")

b. 兄弟关系：5个

$元素.prev() $元素.prevAll("选择器")

$元素.next() $元素.nextAll("选择器")

$元素.siblings("选择器")

6. 修改元素: 3种:

修改中的所有函数，都是一个函数两用！

(1). 内容: 3种:

a. 原始HTML内容:

$元素.html("新HTML内容") 代替.innerHTML

b. 纯文本内容:

$元素.text("纯文本内容") 代替.textContent

c. 表单元素的值:

$元素.val("新值") 代替.value

(2). 属性: 3种:

a. 字符串类型的HTML标准属性:2种:

1). $元素.attr("属性名","新属性值")

代替元素.getAttribute()和setAttribute()

2). $元素.prop("属性名", bool值)

代替元素.属性名=bool值
b. bool类型的HTML标准属性: 只有1种

$元素.prop("属性名", bool值)

代替元素.属性名=bool值

c. 自定义扩展属性:只有一种:

$元素.attr("属性名","新属性值")

代替元素.getAttribute()和setAttribute()

反过来总结:

$元素.attr()可修改一切字符串类型的属性(字符串类型HTML标准属性+自定义扩展属性)

$元素.prop()可修改一切可用.访问的属性(所有HTML标准属性)

今日对应小程序视频列表:

小程序->在线->JQUERY->day01

1. 什么是jQuery, 如何使用jQuery

链接：https://pan.baidu.com/s/1Ed9Y3JwTQs-ZORr7FSf8AQ 提取码：msga

2. 第一个jQuery程序 jQuery原理
链接：https://pan.baidu.com/s/1Okomf1Zj7Aixp-LMlEW89Q 提取码：lkyt

3. 子元素过滤 child filter 基本过滤
链接：https://pan.baidu.com/s/1_QkF0lteEkCC4IeZP0P1gQ 提取码：lr31

4. jQuery其它选择器...

链接：https://pan.baidu.com/s/1bdSWJPWZrLTnpWWXyNz72A 提取码：qe75

5.jQuery修改元素的内容...
链接：https://pan.baidu.com/s/1S4lRg3hJIJFUSXXbXB4jvA 提取码：c44m

小程序->在线->JQUERY->day02

2. jQuery修改元素属性attr() prop()

链接：https://pan.baidu.com/s/1_8JecH6HZyPhhDkHXQ5Xdg 提取码：edhb

作业:

1. 复习: 小程序->在线->JQUERY->day01

2. 复习第二阶段所有选择器！

3. 复习今日小程序中问题清单: 小程序->首页->JQUERY->day01

4. 复习第二阶段所有选择器

5. 东哥2年前年轻(18岁)时讲的真人出镜、高清无码、国语中字、无删减版HTML+CSS+LESS+BOOT:

链接：https://pan.baidu.com/s/1jw5LqnKq4YgScbaP-ZTD6A

提取码：7wbm

6. 使用css和jq实现按钮组效果和表格隔行变色效果:

参考视频: 小程序->在线->JQUERY->day01->作业: 分别使用css和jq实现按钮组效果和表格隔行变色效果:
链接：https://pan.baidu.com/s/1hbrT7SLrPx5cEwfRk1Mslw 提取码：y1ax

正课:

1. 修改

2. 按节点间关系查找

3. 添加删除替换克隆

4. 事件绑定

一. 修改:

1. 内容: 3种内容

2. 属性: 3大类属性:

(1). 字符串类型的HTML标准属性:

a. DOM中: 2种:

1). 旧核心DOM: 2个函数：

元素.getAttribute("属性名")

元素.setAttribute("属性名","新值")

2). 新HTML DOM: 元素.属性名=新值

b. jq中: 也2种:

1). 代替旧核心DOM: $元素.attr("属性名","新值")

2). 代替新HTML DOM: $元素.prop("属性名","新值")

property

(2). bool类型的HTML标准属性:

a. DOM中: 只有一种HTML DOM的方式: 元素.属性名

b. jq中: 也只有一种方式: $元素.prop("属性名",新bool值)

(3). 自定义扩展属性:

a. DOM中: 2种:

1). 旧核心DOM: 元素.getAttribute()和元素.setAttribute()

2). HTML5: 元素.dataset.属性名

b. jq中: 1种

1). 只能用$元素.attr()代替旧核心DOM

2). jq比HTML5早，所有暂时没有和HTML5对应的函数

c. 示例: 点小图片，切换大图片:

3_attr2.html

<!DOCTYPE html>

<html>

<style>

body {

text-align: center;

}

</style>

</head>

<body>

<hr />

//点击小图片，下方my-big中显示大图片

//DOM 4步

//1. 查找触发事件的元素

//本例中: 查找带有data-click属性的小图片

$("[data-click]")

//2. 绑定事件处理函数

// .click(function(){

//当

//鼠标进入

.mouseover(function(){

//3. 查找要修改的元素

//本例中: 要修改class为my-big的大图片

var $big=$(".my-big");

//4. 修改元素

//4.1 先获取当前点击的小图片上的data-target属性值

//因为data-target属性是自定义扩展属性，所以，只能用attr获取或修改

var src=$(this).attr("data-target");

// .prop("data-target")

//4.2 将data-target属性值作为大图片的新的src路径

//因为src是字符串类型的HTML标准属性，所以，既可用attr()，又可用prop()

$big.attr("src",src);

// .prop("src",src);

})

</script>

</body>

</html>

运行结果:

3. 样式:

(1). DOM中:

a. 修改内联样式: 元素.style.css属性="新值"

b. 获取完整样式: getComputedStyle(元素)

(2). jq中: 将style和getComputedStyle合二为一。

今后，在jq中无论获取css属性值，还是修改css属性值，都只用$元素.css("css属性","新值")就够了。

a. 如果.css()中没有给新值，则.css()底层自动执行getComputedStyle()操作，获取属性值

b. 如果.css()中给了新值，则.css()底层自动执行.style.css属性，执行修改操作。

(3). 批量修改一个元素的多个css属性:

a. DOM中: 元素.className="class名"

b. 问题: 只能整体替换所有class，不便于修改其中某一个class

c. jq中: 增加了4个函数，用来提高操作class的灵活性:

1). $元素.addClass("className")

2). $元素.removeClass("className")

3). $元素.hasClass("className") 判断元素上是否包含某个class

4). $元素.toggleClass("className")

切换

i. 在有或没有一个class之间来回切换。

ii. 原理相当于: 内部封装了if else判断

if($元素.hasClass("class名")){

$元素.removeClass("class名")

}else{

$元素.addClass("class名")

}

d. 优点: 只影响当前一个class，不影响其余class。

(4). 示例: 实现双态按钮:

4_class.html

<!DOCTYPE html>

<html>

<style>

.btn {

padding: 5px 10px;

border-radius: 3px;

border: 1px solid #aaa;

outline: none;

}

.up {

background: #fff;

color: #333;

}

.down {

background: #ddd;

color: #fff;

}

</style>

</head>

<body>

//双态按钮: 让按钮的class在up和down之间切换

//DOM 4步

//1. 查找触发事件的元素

//本例中: 只有一个class为btn的按钮可点击

$(".btn")

//2. 绑定事件处理函数

.click(function(){

//3. 查找要修改的元素

//本例中: 就是要修改自己

// var $this=$(this);

// //4. 修改元素

// //如果当前btn上有class down

// if($this.hasClass("down")){

// //就移除class down

// $this.removeClass("down")

// }else{//否则如果当前btn上没有class down

// //就添加class down

// $this.addClass("down");

// }

$(this).toggleClass("down");

})

</script>

</body>

</html>

运行结果:

简写:

其实.attr()、.prop()、.css()都可同时修改多个属性值，但是必须使用对象语法:

$元素.attr 或 .prop 或 .css({

属性名:"属性值",

... : ...

})

二. 按节点间关系查找:

1. DOM中: 2大类关系，6个属性

(1). 父子关系: 4个属性:

a. 元素.parentElement 父元素

b. 元素.children 所有直接子元素

c. 元素.firstElementChild 第一个直接子元素

d. 元素.lastElementChild 最后一个直接子元素

(2). 兄弟关系: 2个

a. 元素.previousElementSibling 前一个兄弟元素

b. 元素.nextElementSibling 后一个兄弟元素

2. jq中: 2大类关系，8个函数

(1). 父子关系: 3个函数

a. $元素.parent() 父元素

b. $元素.children() 所有直接子元素

1). 增强: $元素.children("选择器")，只选择符合要求的个别直接子元素

2). 新增: $元素.find("选择器")，选择所有后代中符合要求的元素。

c. 第一个直接子元素:

1). 没有专门对应的函数

2). 但是，可以用children()变通实现:

$元素.children(":first-child")

d. 最后一个直接子元素: $元素.children(":last-child")

(2). 兄弟关系: 5个函数

a. 前一个兄弟: $元素.prev()

b. 之前所有兄弟： $元素.prevAll("选择器")

c. 后一个兄弟: $元素.next()

d. 之后所有兄弟: $元素.nextAll("选择器")

e. 除当前元素之外，其余所有兄弟元素:

$元素.siblings("选择器")

3. 示例: 使用节点间关系查找指定元素:

6_traverse.html

<!DOCTYPE html>

<html>

<head>

</script>

</head>

<body>

<li class="parent1">parent1

<ul>

<li class="child">child1</li>

<li class="child">child2</li>

<li class="child">child3</li>

</ul>

</li>

<li class="parent2">parent2

<ul>

<li class="child">child1</li>

<li class="child">child2</li>

<li class="child">child3</li>

</ul>

</li>

</ul>

//修改class为top的ul的所有直接子元素

$(".top").children()

.css("border","2px solid red");

//修改class为top的ul的所有后代li

$(".top").find("li")

.css("box-shadow","0 0 5px green");

//为class为child的li绑定单击事件

$(".child").click(function(){

//选择当前元素的下一个元素/前一个元素/之前所有/之后所有/除自己之外所有

$(this).siblings()//.nextAll()//.prevAll()//.prev()//.next()

.css("background-color","yellow");

})

</script>

</body>

</html>

运行结果:

4. 示例: 标签页效果:

7_tabs.html

<!doctype html>

<head>

<style>

.tabs {

list-style: none;

padding: 0

}

.tabs a {

text-decoration: none;

color: #000;

padding: 6px 12px;

display: inline-block;

}

.tabs>li {

float: left;

border-bottom: 1px solid #000;

}

.tabs>.active {

border: 1px solid #000;

border-bottom: 0;

}

</style>

</head>

<body>

<h1>使用属性选择器实现标签页头的切换</h1>

</li>

<li>

<a data-toggle="tab" href="#">二十元套餐</a>

</li>

<li>

<a data-toggle="tab" href="#">三十元套餐</a>

</li>

</ul>

//DOM 4步

//1. 查找触发事件的元素

//本例中: 查找带有data-toggle属性，且属性值为tab的所有标签按钮

$("[data-toggle=tab]")

//2. 绑定事件处理函数

// .click(function(){

// //因为$this可能被反复使用，所以要保存到变量中

// var $this=$(this);

// //3. 查找要修改的元素

// //4. 修改元素

// //先给当前a的爹li添加class active

// $this.parent().addClass("active");

// //再给当前a的爹li的其余所有兄弟清除class active

// $this.parent().siblings().removeClass("active")

// })

.click(function(){

//因为$this可能被反复使用，所以要保存到变量中

$(this)

//3. 查找要修改的元素

//4. 修改元素

//先给当前a的爹li添加class active

.parent() //当前a的爹li

.addClass("active")

//return 当前a的爹li

//再给当前a的爹li

//的其余所有兄弟清除class active

.siblings()

.removeClass("active")

})

</script>

</body>

</html>

运行结果:

一. 添加/删除/替换/克隆

1. 添加新元素:

(1). DOM中: 3步

a. 创建新的空对象:

var 元素=document.createElement("标签名")

b. 添加必要属性: 元素.属性名=属性值

c. 将新元素添加到DOM树: 3种:

1). 末尾追加新元素: 父元素.appendChild(新元素)

2). 插入到现有元素之前:

父元素.insertBefore(新元素, 现有元素)

插入之前

3). 替换现有元素:

父元素.replaceChild(新元素, 现有元素)

(2). jq中: 2步:

a. 用HTML片段批量创建多个元素，同时设置元素的属性和内容。

var $新元素=$(`HTML片段`)

b. 将新元素添加到DOM树: 10个函数

1). 在父元素末尾追加新元素:

$父元素.append($新元素)

//return $父元素后接对父元素继续操作

$新元素.appendTo($父元素)

//return $新元素后接对新元素继续操作

2). 在父元素下开头插入一个新元素

$父元素.prepend($新元素)

之前 //return $父元素后接对父元素继续操作

$新元素.prependTo($父元素)

//return $新元素后接对新元素继续操作

3). 插入到一个现有元素之前

$现有元素.before($新元素)

//return $现有元素后接对现有元素继续操作

$新元素.insertBefore($现有元素)

//return $新元素后接对新元素继续操作

4). 插入到一个现有元素之后

$现有元素.after($新元素)

//return $现有元素后接对现有元素继续操作

$新元素.insertAfter($现有元素)

//return $新元素后接对新元素继续操作

5). 替换现有元素:

$~~现有元素~~.replaceWith($新元素)

用

//return $现有元素后接对现有元素继续操作

$新元素.replaceAll($现有元素)

//return $新元素后接对新元素继续操作

2. 删除: $元素.remove()

3. 克隆: var $新元素=$旧元素.clone();

4. 示例: 点按钮添加方块，点×删除方块：

day02剩余/9_append.html

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

<style>

.container {

border: 1px solid #aaa;

overflow: hidden;

}

.block {

float: left;

margin: 10px;

border: 1px solid #aaa;

background: #faa;

width: 150px;

height: 150px;

}

.block:hover {

box-shadow: 0 5px 6px #000;

}

.close {

float: right;

padding: 5px;

font-weight: bold;

opacity: .2;

cursor: pointer;

}

.close:hover {

opacity: .5;

}

</style>

</head>

<body>

<!-- <div class="block">

</div> -->

</div>

//DOM 4步

//1. 查找触发事件的元素

//本例中: 点按钮，添加方块

$("button")

//2. 绑定事件处理函数

.click(function(){

//3. 查找要修改的元素

//4. 修改元素

//4.1 先用注释的div元素的HTML片段创建一个新的方块

$(`<div class="block">

</div>`)

//4.2 每创建一个新方块，都设置当前方块的背景色为一个随机的颜色值

.css(

"background-color",

`rgb(${

parseInt(Math.random()*256)

},${

parseInt(Math.random()*256)

},${

parseInt(Math.random()*256)

})`

)//return .前的刚创建的$新方块

//4.3 再将新创建的元素添加到父级div container下的开头

// $(".container").prepend($block);

//需要新方块继续

// .prepentTo($(".container"))

// 选择器自动查找

.prependTo(".container")

})

/*实现删除功能*/

//DOM4步

//1. 查找触发事件的元素

//本例中: 因为多个方块中的×都可点击，所以，应该用事件委托优化。事件应该只绑定在父元素上一份即可。

//事件委托第1步:

$(".container")

//2. 绑定事件处理函数

.click(function(e){

//事件委托第2步: e.target代替this

var $tar=$(e.target);

//事件委托第3步: 判断当前元素是不是我们想要的

//本例中: 只有点击的元素内容是×，才继续执行删除操作

if($tar.html()=="×"){

//3. 查找要修改的元素

//本例中: 删除当前点击的span的父元素

$tar.parent()

//4. 修改元素

.remove();

}

})

</script>

</body>

</html>

运行结果:

5. 示例: 选飞机

day02剩余/10_replace_clone.html

<!DOCTYPE html>

<html>

<style>

body {

text-align: center;

}

</style>

</head>

<body>

</div>

<hr />

</div>

//DOM 4步

//1. 查找触发事件的元素

//本例中: id为list的div下所有img都可点击

$("#list>img")

//2. 绑定事件处理函数

.click(function(){

//3. 查找要修改的元素

//本例中: 要修改id为chosen下的img

$("#chosen>img")

//4. 修改元素

//本例中: 先将我当前点中的飞机克隆一个副本，用副本去替换上方的灰色飞机

.replaceWith($(this).clone());

})

</script>

</body>

</html>

运行结果:

四. 事件:

1. 事件绑定:

(1). DOM中: 3种:

a. 在HTML中手工绑定

缺点: 繁琐，极其不便于维护

b. 在js中用赋值方式绑定

缺点: 一个事件上只能绑定一个处理函数

c. 在js中添加事件监听对象的方式

元素.addEventListener("事件名",事件处理函数(){ ... })

元素.removeEventListener("事件名",原事件处理函数(){ ... })

优点: 一个事件可绑定多个事件处理函数，且还可以移除事件处理函数——灵活

(2). jq中: 1种:

a. 标准: $元素.on("事件名",事件处理函数(){ ... })

$元素.off("事件名",原事件处理函数)

b. 简写: 只有最常用的十几种事件才能使用简写:

1). $元素.事件名(事件处理函数(){ ... })

比如:$btn.click(function(){ ... })

//等效于addEventListener()

2). 常用事件列表:

blur 失去焦点

change 下拉列表选中项改变

click 单击

dblclick 双击

focus 获得焦点

keydown 键盘按键按下

keyup 键盘按键抬起

mousedown 鼠标按键按下

mouseenter 鼠标进入(jq)

mouseleave 鼠标移出(jq)

mousemove 鼠标移动

mouseout 鼠标移出(dom)

mouseover 鼠标进入(dom)

mouseup 鼠标按键抬起

resize 窗口大小改变

scroll 网页滚动

load 加载完成

(3). 2个问题:

a. 使用匿名函数无法移除事件监听。jq中没有解决！只能使用有名称的函数来绑定和移除，才能移除事件监听

b. 如果使用有名称的函数绑定，则无法添加多个完全相同的事件监听。jq中已经解决了。在jq中即使使用有名称的函数，也能同时绑定多个事件监听对象。只不过移除时，所有同名的事件处理函数，一次性全部移除.

(4). 示例: 点按钮发射子弹，可发射多种子弹，也可移除子弹

12_bind_unbind.html

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

</head>

<body>

//点btn1时，发射普通子弹

$("#btn1").click(function(){

console.log(`发射普通子弹......`)

});

var shoot2=function(){

console.log(`发射跟踪导弹=>=>=>`)

}

//点btn2时，给btn1多加一种跟踪导弹

$("#btn2").click(function(){

$("#btn1").click(shoot2)

})

//点btn3时，从btn1移除跟踪导弹

$("#btn3").click(function(){

$("#btn1").off("click",shoot2)

})

</script>

</body>

</html>

运行结果:

2. jq中的事件委托:

(1). 何时: 多个平级子元素都要绑定相同的事件时

(2). DOM中: 3步: 正统

a. 事件只绑定在父元素上一份即可

b. e.target代替this

c. 判断当前目标元素是不是想要的

(3). jq中: 3步: jq独有，了解

a. 事件还是绑定在父元素上一份即可，但是必须用on()方式绑定。不能用简写

b. 不用e.target代替this了，jq中this又指向最初实际点击的目标元素

c. 也不用自己写if判断了，但是，只需要将一个用于判断目标元素是否符合要求的选择器，绑在on()的第二个参数位置，on()就会自动用这个选择器判断当前元素是否符合要求。

$父元素.on("click","选择器条件",事件处理函数)

(4). 示例: 使用jq事件委托实现选飞机

13_jq_delegate.html

<!DOCTYPE html>

<html>

<style>

body {

text-align: center;

}

</style>

</head>

<body>

</div>

<hr />

</div>

//DOM 4步

//1. 查找触发事件的元素

//本例中: 因为多个img都可点击，所以，应该用事件委托优化。事件只绑定在父元素上一份即可

$("#list")

//2. 绑定事件处理函数

//本例中: 只允许img元素触发事件

// 元素选择器

.on("click","img",function(){

//3. 查找要修改的元素

//本例中: 查找id为chosen下的img元素

$("#chosen>img")

//4. 修改元素

//本例中: 用当前点击的img的副本替换上方的img

//虽然用了事件委托，但是jq中this又重新指向了最初点击的目标元素。所以，jq事件委托中不用e.target，仍然用this

.replaceWith($(this).clone());

})

</script>

</body>

</html>

运行结果:

3. 页面加载后自动执行:

(1). 问题: 放在外部js文件中的js代码，在结尾引入旧有效，在网页开头引入就无效。

(2). 原因: 网页顺序执行。如果在网页开头引入js文件，会立刻执行。而此时还没有读到body呢，无法操作网页中的任何元素。

(3). 解决: 今后，只要希望一些js初始化操作，必须在网页内容加载完成后才能执行！不要提前执行！都要用window.οnlοad=function(){}

a. 什么是window.onload：一个事件，专门在所有网页内容都加载完成后才自动触发！

b. 如何: window.οnlοad=function(){ ... }

c. 结果: 凡是放在window.οnlοad=function(){ ... }中的代码，无论写在哪儿，注定都会在整个网页内容加载完成(触发load事件)后，才自动执行。

(4). 问题2: 两个js文件中都有window.οnlοad=function(){}，则只有最后引入的一个js文件中的window.οnlοad=function(){}会幸存下来。最后一个会覆盖之前的οnlοad=function(){}

(5). 解决: 应该将所有window.οnlοad=function(){}都换为window.addEventListener("load",function(){})。

(6). 问题3: load事件必须等待所有网页内容（HTML+JS+CSS+图片）都加载完才能触发。有点儿晚。

(7). 解决:

a. 其实，网页加载过程中，有两次加载完成事件:

1). 仅DOM内容(HTML+JS)加载完成：

DOMContentLoaded

2). 然后才是所有网页内容加载完成

load

b. 绝大多数与css和图片无关的初始化操作，比如事件绑定，都不需要等待css和图片。

c. 所以，今后只要不依赖与css和图片的初始化操作，都应该绑定到DOMContentLoaded事件上。

window.addEventListener(
"DOMContentLoaded",

function(){ ... }
)

d. 今后绝大多数页面初始化操作都应该放在window.addEventListener("DOMContentLoaded",中

(8). 问题: 太长了！

(9). 解决: jq中

a. $(document).ready(function(){ ... })

b. $().ready(function(){ ... })

c. $(function(){ ... }) —— 常用

d. $(()=>{ ... })

(10). 示例: 仅DOM内容加载完成时，就提前给按钮绑定单击事件:

day02剩余/14_load1.js

//暂时保存，暂不执行

//直到整个页面所有内容都加载完才自动执行

// window.οnlοad=function(){

// window.addEventListener("load",function(){

// window.addEventListener(

// "DOMContentLoaded",

// function(){

$(function(){

alert("仅DOM内容加载完成，就提前触发...")

$("#btn1").click(function(){

alert("btn1疼!")

})

day02剩余/14_load2.js

//暂时保存，暂不执行

//直到整个页面所有内容都加载完才自动执行

// window.οnlοad=function(){

// window.addEventListener("load",function(){

// window.addEventListener(

// "DOMContentLoaded",

// function(){

$(function(){

alert("仅DOM内容加载完成，就提前触发...")

$("#btn2").click(function(){

alert("btn2疼!")

})

day02剩余/14_load.html

<!DOCTYPE html>

<head>

<title>Document</title>

window.οnlοad=function(){

alert("所有网页内容加载完成!")

}

</script>

</head>

<body>

<button id="btn1">click me 1</button>

<button id="btn2">click me 2</button>

</body>

</html>

运行结果：

总结:

4. jQuery简化版函数3大特点:

(1). 一个函数两用: 调用函数时:

a. 没给新值作为参数，默认执行获取旧值的操作

b. 给了新值作为参数，自动切换为执行修改操作

5. 查找元素:

(3).用节点间关系查找: 2大类关系, 8个函数

a. 父子关系：3个函数:

1). $元素.parent()

2). $元素.children("选择器")

3). $元素.find("选择器")

b. 兄弟关系：5个

$元素.prev() $元素.prevAll("选择器")

$元素.next() $元素.nextAll("选择器")

$元素.siblings("选择器")

6. 修改元素: 3种:

修改中的所有函数，都是一个函数两用！

(3). 样式:

a. 获取或修改单个css属性: 只有1种

$元素.css("css属性名", "属性值")

获取属性值时被翻译为getComputedStyle(元素)

修改属性值时被翻译为.style.css属性=属性值

b. 使用class批量修改样式:

1). $元素.addClass("class名")

2). $元素.removeClass("class名")

3). $元素.hasClass("class名")

4). $元素.toggleClass("class名")

修改相关的函数都可同时修改多个属性值:

$元素.attr或prop或css({

属性名:"属性值",

... : ...

})

8. 添加删除替换克隆元素:

(1). 添加新元素: 2步

a. 使用HTML片段批量创建新元素:

$(`HTML片段`)

b. 将新元素添加到DOM树: 5种方式，10个函数

1). 末尾追加:

$父元素.append($新元素)

$新元素.appendTo($父元素)
2). 开头插入: 新增:
$父元素.prepend($新元素)

$新元素.prependTo($父元素)

3). 插入到一个现有元素之前:

$现有元素.before($新元素)

$新元素.insertBefore($现有元素)

4). 插入到一个现有元素之后:

$现有元素.after($新元素)

$新元素.insertAfter($现有元素)

5). 替换现有元素:

$现有元素.replaceWith($新元素)

$新元素.replaceAll($现有元素)

(2). 删除元素: $元素.remove()

(3). 克隆元素: $元素.clone()

9. 事件绑定:

(1). 标准写法:
$元素.on("事件名", 事件处理函数)

$元素.off("事件名", 原事件处理函数)

(2). 简写: $元素.事件名(事件处理函数)

(3). 事件委托:

$父元素.on("事件名","选择器",function(){

...this指向e.target...

})

(4). 页面加载后自动执行:

a. 先$(document).ready(function(){})

简写: $(function(){ ... })

b. 后$(window).load(function(){ ... })

今日对应小程序视频列表:

小程序->在线->JQUERY->day02

2. jQuery修改元素属性attr() prop()

链接：https://pan.baidu.com/s/1_8JecH6HZyPhhDkHXQ5Xdg 提取码：edhb

3. jquery修改样式css()

链接：https://pan.baidu.com/s/1dBc_SftoY6YZc29uT4RUHw 提取码：yu3c

6. jquery 按节点间关系查找

链接：https://pan.baidu.com/s/1wxKehIv2Y8MBXGsCfiNpzw 提取码：4u7x

6.1 jquery tabs ...

链接：https://pan.baidu.com/s/1PNGQw1QA221hwdZhFABpCg 提取码：fdbp

                  7. jquery添加删除替换克隆
                  链接：https://pan.baidu.com/s/1fSgjH-fYpXWiEap0sFItjg 提取码：29op
                  8. jquery 事件 on off

链接：https://pan.baidu.com/s/1gicQXfXfuQu-SNQxZH0_Vg 提取码：n0gb

9. jquery 事件委托
链接：https://pan.baidu.com/s/1UJKkc3och3Z1mypKOBt1VQ 提取码：jnjg

小程序->在线->JQUERY->day03

1. 页面加载完成后自动...

链接：https://pan.baidu.com/s/1bA4oZHJpjxOQKmnxXMgBwQ 提取码：t0ob

作业:

1. 复习: 小程序->在线->JQUERY->day02,03

2. 预习VUE:

3. (学有余力) 作业:jQuery 带多种动画效果的对话框 alert fade in transition
链接：https://pan.baidu.com/s/12BCOXtorFxwYFSveWOufjg 提取码：kkk2

就在day02/ 5_class2.html中直接做即可

正课:

1. 事件

2. 动画
3. 类数组对象操作

4. 封装自定义函数

5. 封装自定义组件

6. ajax

一. 事件:

4. 鼠标事件:

(1). DOM中:

a. 传统: mouseover 鼠标进入, mouseout 鼠标离开

b. 问题: 即使反复进出子元素，也会反复触发父元素上的鼠标进出事件。与现实不符！

c. 解决: mouseenter代替了mouseover

进入进入

mouseleave 代替了mouseout

离开离开

(2). 简化: jq中独有: 如果同时绑定鼠标进入和鼠标离开两个事件，其实只需要绑定一个hover()即可。

$元素.hover( //=mouseenter+mouseleave
function(){ ... }, //给mouseenter

function(){ ... }, //给mouseleave
)

(3). 更简化: 如果你有本事把鼠标进入和鼠标离开的两个事件处理函数改为一模一样的，则只需要写一个处理函数即可。

虽然只写了一个函数，但是也是同时绑定了mouseenter和mouseleave事件。一个函数，既给mouseenter，又给mouseleave。

(4). 示例: 使用mouseenter和mouseover绑定鼠标进出事件，并使用hover简化鼠标进出事件:

event/15_mouse.html

<!DOCTYPE HTML>

<html>

<head>

<style>

#d1 #d2 #d3 {

cursor: pointer

}

#d1 {

background-color: green;

position: relative;

width: 150px;

height: 150px;

text-align: center;

cursor: pointer;

}

#d2 {

background-color: blue;

position: absolute;

top: 25px;

left: 25px;

width: 100px;

height: 100px;

}

#d3 {

background-color: red;

position: absolute;

top: 25px;

left: 25px;

width: 50px;

height: 50px;

line-height: 50px;

}

</style>

</head>

<body>

</div>

$("#d1")

.hover( //=mouseenter+mouseleave

function(){

console.log(`进入d1`)

function(){

console.log(`离开d1`)

}

)

// // .mouseover(function(){

// .mouseenter(function(){

// console.log(`进入d1`)

// })

// // .mouseout(function(){

// .mouseleave(function(){

// console.log(`离开d1`)

// })

</script>

</body>

</html>

运行结果:

event/16_hover.html

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

<style>

#target {

border: 1px solid #eee;

border-radius: 6px;

padding: 10px;

transition: all .5s linear;

}

#target.hover {

border: 1px solid #aaa;

box-shadow: 0 0 6px #aaa;

background-color:red;

color:#fff;

}

</style>

</head>

<body>

<h1>使用hover(fn,fn)</h1>

<h3>鼠标悬停在div上方，则突出显示；移出则取消突出显示</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi neque quae voluptatum ducimus culpa itaque maxime distinctio soluta cum cupiditate esse tenetur deserunt fuga perferendis sed veritatis asperiores. Numquam officia.</p>

</div>

$("#target").hover(

//但是，依然同时绑定了两个事件

//这个函数，既给mouseenter，又给mouseleave

function(){

$(this).toggleClass("hover")

// function(){

// $(this).toggleClass("hover")

// }

// function(){

// $(this).addClass("hover")

// },

// function(){

// $(this).removeClass("hover")

// }

)

</script>

</body>

</html>

运行结果:

5. 模拟触发:

(1). 什么是: 即使没有点在按钮上，也能触发按钮上的单击事件处理函数。

(2). 如何: $元素.trigger("事件名")

触发

(3). 简写: 如果要触发的事件属于十几种常见事件列表中，都可以省略trigger()

$元素.事件名()

(4). 示例: 实现点按钮、按回车、边输入都能搜索:

event/17_trigger.html

<!DOCTYPE html>

<html>

<style>

</style>

</head>

<body>

//当单击按钮时可以搜索

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

//获得文本框中用户输入的关键字

var str=$(this).prev().val();

if(str!==""){

console.log(`搜索${str}相关的内容...`)

}

})

//当在文本框按回车时也能执行和点击按钮一样的搜索

// 键盘按下再抬起后才自动触发

$("input").keyup(function(e){

//只有按的是回车键时，才执行搜索

if(e.keyCode==13){

// $("button").trigger("click");

$("button").click();

}

})

//一边输入，一边执行搜索

// 当输入内容时自动执行

$("input").on("input",function(){

$("button").click();

})

//开局时，让文本框自动获得焦点

$("input").focus();

</script>

</body>

</html>

运行结果:

二. 动画:

1. 简单动画: 写死的固定的三种动画效果:

(1). 显示隐藏:

$元素.show() $元素.hide() $元素.toggle()

切换

(2). 上滑下滑:

$元素.slideUp() $元素.slideDown() $元素.slideToggle()

幕布

(3). 淡入淡出:

$元素.fadeIn() $元素.fadeOut() $元素.fadeToggle()

消散

(4). 2大致命缺陷: 所以以上九个函数，很少使用

a. 在函数库中用js程序实现的动画效果。几乎不可维护。

b. 底层是用定时器+dom操作模拟的动画效果。效率极低。

(5). 特例: show() hide() toggle()在不指定毫秒数参数的情况下，仅仅是style.display的简写。还是非常好用的。

(6). 示例:测试简单动画各种效果：

1_show_hide2.html

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

<style>

*{margin:0; padding:0;}

#target{

border-radius:10px;

background:#eee;

}

.fade{/*动画起始状态*/

height:104px; width:970px; opacity:1;

padding: 10px; overflow:hidden;

border: 1px solid #aaa;

}

.out{/*动画结束状态*/

}

</style>

</head>

<body>

<h1>jQuery动画函数——显示隐藏动画</h1>

<button id="btn1">显示/隐藏div</button>

<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis animi sint iste sequi sunt ad excepturi error labore molestiae est expedita eos nisi placeat provident dolorem quos facilis! Sapiente!</span><span>Accusamus neque id reprehenderit! Voluptatem in deleniti laboriosam commodi facere magnam impedit minima corrupti distinctio culpa amet optio natus esse. Inventore incidunt ab id perspiciatis atque minus magnam tempore harum.</span></p>

</div>

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

var $tar=$("#target");

$tar//.toggle(2000);//显示隐藏

//.slideToggle();//上滑下滑

.fadeToggle();//淡入淡出

})

</script>

</body>

</html>

运行结果:

(7). 示例: 显示隐藏部分品牌

2_show_hide2.html

<!DOCTYPE html>

<html>

<style>

body {

text-align: center;

}

ul {

list-style: none;

}

li {

margin: 0;

padding: 0;

display: inline-block;

width: 30%;

}

</style>

</head>

<body>

</ul>

//DOM 4步

//1. 查找触发事件的元素

$("button")

//2. 绑定事件处理函数

.click(function(){

//3. 查找要修改的元素

//本例中: 要修改下标>4位置，且不是最后一个元素的元素们

$("ul>li:gt(4):not(:last-child)")

//4. 修改元素

.toggle();

//如果当前按钮的内容为收起

var $this=$(this);

if($this.html()=="收起"){

//就改为更多

$this.html("更多")

}else{//否则

//就改为收起

$this.html("收起")

}

})

</script>

</body>

</html>

运行结果:

2. 万能动画:

(1). 什么是: 能对多种css属性应用动画效果。

(2). 如何:

   $元素.animate({
     css属性名: 目标值
   },动画持续时间ms)

(3). 原理:

a. animate()先获得当前css属性的当前值。然后，用目标值-当前值，求出差值

b. animate()再按照动画持续时间的要求，规划如何在规定时间内，由当前值逐渐变化到目标值。

(4). 其实: 只支持单个数值的css属性。

不支持颜色过渡和css3变换

(5). 缺点: 2个

a. 底层是用定时器+DOM模拟的动画，效率远不如css

b. 功能上也不如css的transition

(6). 示例: 测试万能动画只会哪些css属性，不支持哪些css属性:

4_animate.html

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

<style>

#d1{

border:1px solid #aaa;

border-radius:6px;

background:#eee;

width:50px; height:50px;

position:absolute; top:120px; left:0;

}

</style>

</head>

<body>

<h1>animate</h1>

$("#btn1").click(function(){

$("#d1").animate({

left:300, //top bottom right

// width:300, //height

// padding:20,//margin

// backgroundColor:"red"

// transform:"rotate(90deg)"

},2000)

})

</script>

</body>

</html>

运行结果:

3. 排队和并发:

(1). 排队: 多个css属性先后依次变化

对同一个元素，先后调用多个animate，多个animate中的css属性是排队变化的.

原理: jq中每个元素都有一个动画队列。animate()并不是立刻执行动画的意思。而是先将animate放入动画队列中保存。如果队列中之前没有正在播放的动画，则新放入的animate可以立刻执行。但是，如果队列中之前还有未完成的动画，则新加入的animate，必须等待之前的动画播放完才能开始播放。

(2). 并发: 多个css属性同时变化

放在一个animate中的多个css属性，默认同时变化

4. 选择器: :animated jq独有

专门匹配正在播放animate动画的元素

5. 停止动画:

(1). $元素.stop() //问题: 默认只停止当前一个animate动画。动画队列中后续其它animate依然继续执行

(2). $元素.stop(true) //既停止当前animate，又清空后续动画队列

6. 动画播放后，自动执行:

其实，animate()还有第三个实参值——回调函数

凡是放在animate()中第三回调函数参数中的代码，注定只能在动画结束后才能自动执行。

  $元素.animate(
    { css属性: 目标值 },
    动画持续时间,

function(){ ... }

);

$元素.is(选择器)

是

专门用于判断一个元素是否符合选择器的条件

7. 示例: 点星星，播放动画

5_stars.html

<!DOCTYPE html>

<html>

<style>

img {

position: relative;

}

</style>

</head>

<body>

s1在屏幕左上角的小星星，点击后从左移动到屏幕右边

s2在屏幕左上角的小星星，点击后从左移动到屏幕右边，再移动到下边——走直角

s3在屏幕左上角的小星星，点击后从左上角移动到屏幕右下边，走斜线

s4点击小星星，变大、变淡.... 直至消失

$("#s1").click(function(){

var $this=$(this);

//如果当前星星正在播放动画

if($this.is(":animated")){

$this.stop();//则停止播放

}else{//否则如果当前星星没有播放动画

$this.animate({//才播放动画

left:400

},2000);

}

})

$("#s2").click(function(){

var $this=$(this);

//如果当前星星正在播放动画

if($this.is(":animated")){

$this.stop(true);//则停止播放

}else{//否则如果当前星星没有播放动画

$this.animate({

left:400,

},1500)

.animate({

top:200

},500)

}

})

$("#s3").click(function(){

var $this=$(this);

//如果当前星星正在播放动画

if($this.is(":animated")){

$this.stop();//则停止播放

}else{//否则如果当前星星没有播放动画

$this.animate({

left:400,

top:200

},2000)

}

})

$("#s4").click(function(){

alert("疼!");

$(this).animate(

{//DOM+定时器(异步)

width:175,

opacity:0

5000,

function(){//只能在动画播放完才自动执行

$(this).hide();

}

);

// $(this).hide();//不等定时器执行完，就提前执行了！

})

</script>

</body>

</html>

运行结果:

三. 类数组对象操作：

1. 遍历:

(1). js数组中:

   arr.forEach(function(当前元素, 当前下标, 当前数组){

   })

(2). jq中新增:

$jq查找结果.each(function(当前下标, 当前DOM元素){

})

(3).示例: 遍历找到的每个元素，并执行相同操作

9_each.html

<!DOCTYPE html>

<html>

<style>

</style>

</head>

<body>

</ul>

//回顾数组forEach

var arr = ["亮亮", "然然", "东东"];

arr.forEach(function (value) {

console.log(`${value} - 到！`)

})

//请给每个不足60分的成绩+10分，并将超过90分的成绩用绿色背景标识出来

$("ul>li").each(function(i,li){

//将取出的每个DOM元素li，包装为jq对象

var $li=$(li);

//获取当前元素的内容，转为整数

var n=parseInt($li.html());

if(n<60){

$li.html(n+10)

}else if(n>=90){

$li.css("background-color","green")

}

})

</script>

</body>

</html>

运行结果:

2. 查找

(1). js数组中:

var i=arr.indexOf(要找的元素值);

在数组arr中查找"要找的元素值"出现的下标位置i

如果没找到，返回-1

(2). jq中:

var i=$jq查找结果.index(要找的DOM元素)

(3). 示例: 五星评价

10_index.html

<!DOCTYPE html>

<html>

<style>

.score {

list-style: none;

margin: 0;

padding: 0;

}

.score li {

display: inline-block;

width: 50px;

height: 50px;

border: 1px solid #f00;

border-radius: 50%;

cursor: pointer;

}

</style>

</head>

<body>

</ul>

//回顾数组indexOf

var arr = ["亮亮", "然然", "东东"];

// 0 1 2

//想查找然然的位置:

var i=arr.indexOf("然然");

console.log(i);

//想查找小玥玥的位置:

var i=arr.indexOf("小玥玥");

console.log(i);

//获得当前单击的li在所有li中的位置i,i及其执行的都变为红色，i之后的都变为白色

//DOM 4步

//1. 查找触发事件的元素

//本例中，因为ul下所有li都可点击，所以用事件委托优化。事件只绑定在父元素上一份即可.

$("ul")

//2. 绑定事件处理函数

.click(function(e){

//e.target代替this

var $tar=$(e.target);

//只有点在li上才能触发事件

// 元素选择器

//当前元素是不是li元素

if($tar.is("li")){

//3. 查找要修改的元素

//4. 修改元素

//先获得当前点击的li是第几个li

var i=$("ul>li").index($tar);

//让<i+1位置的所有li背景变为黄色

// 变量

$(`ul>li:lt(${i+1})`)

.css("background-color","yellow");

//让>i位置的所有li背景变为白色

$(`ul>li:gt(${i})`)

.css("background-color","#fff");

}

})

</script>

</body>

</html>

运行结果:

四. 添加自定义函数:

1. 如果经常使用的一个功能，jquery中没有提供，那么，其实我们可以自定义函数，加入到jquery中。

2. 如何:

(1). 向jquery原型对象中添加一个自定义函数

jQuery.prototype.自定义函数=function(){

}

(2). 使用自定义函数:

$查找结果.自定义函数()

3. 示例: 封装自定义函数，对找到的所有元素内容求和:

day03剩余/11_sum.html

<!DOCTYPE html>

<html>

</head>

<body>

<ul>

</ul>

//假设在我的项目中经常需要对找到的所有元素内容求和

jQuery.prototype.sum=function(){

console.log(`调用了一次我自定义的sum()函数`);

//jquery原型对象中的this->

// 将来调用这个共有方法的.前的某个子对象——谁调用就指谁

//本例中: this->$("ul>li")

// {0:li, 1:li,...}

//1. 先定义变量，准备保存将来的汇总值

var result=0;

//2. 遍历数组中每元素值

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

//3. 将当前元素值累加到result变量上

result+=parseInt(

this[i].innerHTML

);

}

//4. 返回累加的结果result

return result;

}

//将来:

console.log($("ul>li").sum());

</script>

</body>

</html>

运行结果:

五. 封装自定义插件:

1. 什么是插件: 页面中一块可反复使用的独立的功能区域。

2. 为什么: 重用！

3. 何时: 只要页面中一块独立的功能区域，可能被反复使用时，都要封装为插件，然后再反复使用插件。

4. jq官网插件库: jqueryui

(1). 官网: jqueryui.com

(2). 下载:

(3). 引入插件库的文件:

(4). 使用插件: 2大步:

a. 先按照插件的要求，自行编写HTML内容和结构。

但是，不要加任何class

b. 用$("选择器")查找插件的父元素，对插件父元素调用jquery ui提供的专门的插件函数即可。

jquery ui提供的专门插件函数共自动做了2件事:

1). 自动为元素添加class

2). 自动为元素绑定事件处理函数

(5). 2大致命问题: jQuery UI将来用的越来越少了。

a. 都是用js写死的，几乎不可维护

b. 只有PC端，没有移动端。

(6). 示例: 使用jquery ui快速生成手风琴插件

day03剩余/12_widget_accordion.html

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

</head>

<body>

<h1>jQueryUI：Widgets —— Accordion</h1>

<div>一个和尚和四个动物的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique nulla voluptas velit minus esse voluptatem illum quis magni nihil sint facilis cupiditate nobis quia ab neque. Modi veniam omnis nisi? </div>

<div>105个男人和三个女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis provident sapiente aperiam reprehenderit repellat rem magnam vel odio quia harum hic impedit dolorem similique ea est consequatur adipisci at nemo!</div>

<div>一个男人和一群女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus minima quidem aspernatur eligendi optio cupiditate minus nam expedita? Aliquid veritatis doloribus maxime vel dicta illo unde iusto qui quasi doloremque.</div>

</div>

//只要找到插件的父元素，调用jQuery UI已经定义好的插件函数即可

$("#my-accordion").accordion();

</script>

</body>

</html>

运行结果:

5. 我们也可以仿照jquery ui的方式，自定义插件。

(1). 如何自定义插件:

a. 前提: 插件的功能和样式，已经在页面中用传统的HTML+CSS+JS+JQ实现了。只不过，暂时和别的页面代码混在一起，不便于重用而已。

b. 第一步: 将原页面中插件相关的css代码提取到一个独立的css文件中保存

c. 第二步: 我们也要在独立的js中，向jQuery的原型对象中添加一个自定义的插件函数:

jQuery.prototype.自定义插件函数=function(){

//2件事:

//1. 自动为元素添加class样式

//2. 自动为元素绑定事件

}

(2). 如何使用自定义插件: 和使用jquery ui完全一样

a. 引入插件的css、jquery.js、插件的js

b. 按插件要求编写HTML结构和内容:

1). 不要定义任何class

2). 给父元素一个id名，便于将来快速查找

c. 用$()查找插件父元素，调用我们自定义的插件函数()

(3). 示例: 封装自定义手风琴效果插件并使用插件

day03剩余/my-ui/my-ui.css

.accordion{width:80%; margin:0 auto;}

.accordion>.title{

background:#eee; border:1px soild #aaa;

padding:6px; font-size:1.5em;

font-weight:bold; cursor:pointer;

}

.accordion>.content{

border-left:1px solid #eee;

border-right:1px solid #eee;

}

.accordion>:last-child{

border-bottom:1px solid #eee;

}

.fade{

height:0;

opacity:0;

overflow:hidden;

transition:all .5s linear;

}

.in{

height:84px;

opacity:1;

}

day03剩余/my-ui/my-ui.js

jQuery.prototype.myAccordion=function(){

//this->将来调用myAccordion()函数的.前的某个$(父元素div)

//因为this已经是$()了，所以this不需要再重复用$()包住了

//2件事:

//1. 自动为元素添加class

//1.1 给当前父元素自己添加class accordion

this.addClass("accordion")

//return this->当前父元素自己

//1.2 给当前父元素下所有奇数位置的元素添加class title

.children(":nth-child(2n+1)")

//所有奇数位置的元素

.addClass("title")

//return 所有奇数位置的元素

//1.3 给所有奇数位置的元素的下一个兄弟(偶数位置的元素)添加class content fade

.next()

//所有偶数位置的元素

.addClass("content fade")

//return 所有偶数位置的元素

//1.4 给所有偶数位置的元素中排名第一的元素添加class in

.first() //任何查找结果中排名第一个的元素

.addClass("in");

//2. 自动为元素绑定事件

this//$(".accordion")父元素

.on("click",".title",function(e){

//先获得当前点击的某一个title

$(e.target)

//获取当前title的下一个兄弟

.next(".content")

//为其切换class in

//如果有in，就去掉in，否则如果没有in，就自动加上in

.toggleClass("in")

//清除其余兄弟content上残留的class in

.siblings(".content")

.removeClass("in")

});

}

//将来$("#my-accordion").myAccordion()

// 父元素

day03剩余/14_accordion.html

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

</head>

<body>

</div>

$("#my-accordion").myAccordion();

</script>

</body>

</html>

运行结果:

六. ajax

1. 问题: 最简单的get请求，都需要4步。将来项目中的请求很多！如果每个请求都需要4步，太繁琐了！

2. 解决: 今后，所有的函数库、框架、平台都提供给了一句话发送ajax请求的方法！

3. 但是: 每种函数库、框架、平台中的这一句话，不一样！

4. 如何:

$.ajax({

url:"服务器端接口地址",

type:"get或post",

data:{ //请求参数, 如果没有参数，可省略
参数名: 参数值,

... : ...
},

dataType:"json", //自动调用JSON.parse()将服务器端返回的json字符串转化为内存中直接可用的数组或对象。万一服务器端返回的不是json字符串，这里可以省略！

success:function(result){//回调函数，只有请求响应成功后才自动触发。形参result自动接住已经编译后的响应结果对象，可直接使用了。

//因为ajax是异步的，所以只要希望在请求成功后才能执行的代码必须写在success内部！决不能在success外部执行！

}

})

5. 示例: 使用ajax，请求东哥新浪云服务器接口中的数据
15_ajax.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

//向东哥新浪云服务器发送请求

//1. 请求首页6个商品对象

$.ajax({

url:"http://xzserver.applinzi.com/index",

dataType:"json",

success:function(result){

console.log(result);

}

})

//2. 查询5号商品的详细信息

$.ajax({

url:"http://xzserver.applinzi.com/details",

data:{ lid:5 },

dataType:"json",

success:function(result){

console.log(result);

}

})

//3. 登录验证

//（正确的用户名:dingding, 正确的密码:123456）

//乱写验证不通过

$.ajax({

url:"http://xzserver.applinzi.com/users/signin",

type:"post",

data:{

uname:"dingding",

upwd:"123456"

dataType:"json",

success:function(result){

console.log(result);

}

})

</script>

</body>

</html>

运行结果:

今日对应小程序视频列表:

小程序->在线->JQUERY->day03

2. 鼠标事件

链接：https://pan.baidu.com/s/1cJkFXF7ZACCTjn4AXVzs7g 提取码：420d

3. 模拟触发
链接：https://pan.baidu.com/s/1abMepbPQzaf8RyHUkhs1JQ 提取码：taka

4. jquery动画

链接：https://pan.baidu.com/s/11hT60mfjCoabDtAYzo2YiA 提取码：364k

5. 类数组对象操作

链接：https://pan.baidu.com/s/12HFiYmxJvahhFPJEiU1kfg 提取码：7nb4

小程序->在线->JQUERY->day04:

14 添加jQUery自定义函数

链接：https://pan.baidu.com/s/1MxMVHxnuOQ24YVLEs8JWbw 提取码：wyt7

15 jquery ui 封装自定义jquery插件

链接：https://pan.baidu.com/s/1PcI2n0u4VymsNziJwfYjMg 提取码：f733

16 jQuery发送ajax请求$.ajax

链接：https://pan.baidu.com/s/1Lq27Ljuxq5wPh_EikSkeXg 提取码：5i2g

总结: this7种情况:

1. obj.fun() this->.前的obj

2. new Fun() this->new正在创建的新对象

3. fun()或(function(...){})或回调函数

因为前边既没有.又没有new，所以this->window

4. 类型名.prototype.共有方法=function(){

this->将来调用这个共有方法的.前的某个子对象

谁调用指谁

}

5. 访问器属性中的this->访问器属性所在的对象

6. DOM和jq中事件处理函数中的this->正在触发事件的当前DOM元素对象

7. jQuery.prototype.共有方法=function(){

this->将来调用这个共有方法的.前的$(...)jq对象。

谁调用指谁.

因为this->已经是$()了，所以不需要重复再$()一次

}

总结: $共有4种用法:

1. $("选择器") 查找DOM元素，封装进jQuery对象中

2. $(DOM元素对象) 无需查找，直接将DOM元素封装进jQuery对象中

3. $(`HTML片段`) 创建新元素

4. $(function(){ ... }) 绑定DOMContentLoaded事件，让代码可以提前触发执行。

总结:

(5). 鼠标事件:

mouseenter代替mouseover

mouseleave 代替mouseout

简写: .hover(处理函数1,处理函数2)

等于: .mouseenter(处理函数1)

.mouseleave(处理函数2)

(6). 模拟触发:

a. 标准: $元素.trigger("事件名")

b. 如果属于常用事件列表，可简写为:

$元素.事件名()

10. 动画:

(1). 简单动画: 3种固定效果

a. 显示隐藏:

.show() .hide() . toggle()

b. 淡入淡出:

.fadeIn() .fadeOut() .fadeToggle()

c. 上滑下滑:

.slideUp() .slideDown() .slideToggle()

(2). 万能动画:

$元素.animate({

css属性: 目标值

},动画持续时间,function(){

动画播放结束自动执行

})

(3). 排队和并发:

a. 放在一个animate()中的多个css属性并发变化

b. 放在一个元素的多个animate()中的多个css属性排队变化

(4). 停止动画:

a. 只停止当前一个动画

$元素.stop()

b. 停止队列中所有动画

$元素.stop(true)

(5). 选择器匹配正在播放动画的元素: :animated

11. 类数组对象操作:

(1). 遍历查找结果中每个DOM元素对象:

$查找结果.each(function(i, domElem){ ... })

(2). 查找一个DOM元素在整个查找结果中的下标位置

var i=$查找结果.index(要找的DOM元素)

12. 添加自定义函数:

a. 添加:

1). 标准:

jQuery.prototype.自定义函数=function(){ ... }

2). 简写: jQuery.fn=jQuery.prototype

jQuery.fn.自定义函数=function(){ ... }

b. 调用: $jq对象.自定义函数()
13. 封装自定义插件:

a. 封装:

1). 将css提取到独立的插件.css文件中

2). 在独立js文件中为jquery原型对象添加自定义插件函数

jQuery.prototype.自定义插件函数=function(){

//自动做2件事:

//1. 为插件所在元素及其子元素自动添加class
//2. 将原网页中插件所需的事件绑定代码剪切到插件函数中

}

b. 使用自定义插件:

1). 引入jquery.js，插件.js，插件.css

2). 按插件要求编写HTML内容，不用加任何class

3). 在自定义js中，查找插件所在元素，调用自定义插件函数

14. 发送ajax请求:

$.ajax({

url:"服务器端接口地址",

type:"get或post",

data:{ 参数名: 参数值, ... },

dataType:"json",

success:function(result){

//result就是服务器端返回的结果

//不用自己调JSON.parse()

}

})

作业:

1. 复习: 小程序->在线->JQUERY->day04

2. 必须复习:

小程序->在线->JSCORE->day03 5. 访问器属性

小程序->在线->JSCORE->day05 作业: ES6中关于对象中属性和方法的简写

3. 预习: 小程序->在线->VUE->day01

4. JQUERY一小时串讲:
链接：https://pan.baidu.com/s/12lDWlXF840UiiplamQg-Dw 提取码：loew

5.（确实学有余力的同学）看小程序视频完成 jQuery版学子商城项目

小程序->在线->JQUERY->day04 项目: 0~4 学子商城项目...

所有人下载项目:0. 准备中的xz前端静态文件夹_起始，是项目的起始状态（空的），看着视频中项目:1，项目:2, 项目:3,...跟着做。

xz前端静态文件夹_完成中是完成的代码，如果作业过程中出错，可以跟完成文件夹中代码对一下。

家里环境xampp和nodejs能用，且第一阶段学的好的同学:

从小程序中项目: 0. 准备...中下载xzserver.zip，用自己的服务器端代码

家里环境xampp和nodejs不能用，或者第一阶段学的不好的同学：

无需下载xzserver.zip

视频中所有ajax请求的服务器端接口地址，都改为我的新浪云服务器地址，就不需要你再运行服务器端了。也不需要你了解任何服务器端知识了:

/index 改为 http://xzserver.applinzi.com/index

/details 改为 http://xzserver.applinzi.com/details?lid=xxx

正课:

1. 跨域:

六. *****跨域:

1. 什么是跨域: 一个域名下的网站中的网页，去请求另一个域名下的网站中的资源.

2. 哪些元素或程序可以跨域:

$.ajax({ url:"别的网站的接口地址" })

3. 包括:

(1). 域名不同: www.a.com下的网页 -> www.b.com

(2). 子级域名不同:

oa.tedu.cn下的网页 -> hr.tedu.cn

(3). 端口不同:

http://localhost:5500下的网页->http://localhost:3000

(4). 协议不同:

http://12306.cn下的网页 -> https://12306.cn

(5). 即使同一台主机，自己的域名与自己的IP地址之间也算跨域:

http://localhost:3000下的网页 -> http://127.0.0.1:3000

4. 问题: 使用ajax发送跨域请求，会报错:

Access to XMLHttpRequest at 'http://xzserver.applinzi.com/users/signin' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

从源头http://127.0.0.1:5500，到http://xzserver.applinzi.com/users/signin的XMLHttpRequest的访问被CORS策略阻止了！

因为在获取的结果的头部没有Access-Control-Allow-Origin配置.

5. 原因: 浏览器中都有一个CORS策略/同源策略

(1). 什么是CORS策略: Cross Origin Resources Sharing

浏览器默认不允许ajax请求使用其他域名返回的数据。

(2). 浏览器会自动检查每个响应回来的结果数据的来源地址("寄件人地址")。用数据的来源地址与当前网页所在的地址比较。如果发现来源地址与网页所在的地址不一致，则禁止网页使用其他来源的数据。

6. 解决跨域问题：3种方式:

(1). CORS方式: 纯服务器端跨域——简单

a. 原理: 请服务器端篡改数据的来源地址，强行与客户端地址保持一致！骗过浏览器的cors策略。让cors策略允许数据进入程序使用。

b. 如何: nodejs中:

~~不要用res.send(xxx)~~了！

res.writeHead(200,{ //先写请求头部

... : ...,

"Access-Control-Allow-Origin":"客户端网页所在地址"

});

res.write(JSON.stringify(响应结果)) //再写响应结果

res.end();//发送

(2). JSONP方式: 客户端+服务器端配合——繁琐(扩展)

(3). ?

7. 前后端分离:

(1). 什么是: 将来企业中开发都是前端一个项目，后端一个项目。前端项目独立运行，后端项目也独立运行。两个项目甚至不在一起！

(2). 为什么: 避免互相影响。

(3). 问题: 因为后端接口非常多！所以，不可能给每个接口都重复写一遍Access-Control-Allow-Origin。

(4). 解决: nodejs中: 使用中间件来解决的

a. 安装npm i -save cors

b. 在nodejs express项目的app.js中:

var cors=require("cors"); //引入cors中间件

var app=express();

app.use(cors({

origin:[ "http://127.0.0.1:5500", "其它允许跨域的客户端地址",... ]

}))

总结：

15. 跨域:

a. 同源策略(CORS): 浏览器只允许当前网页中的ajax请求使用自己网站的资源，禁止ajax请求使用其他网站的资源。

b. 解决: cors方式：只靠服务器端就能完成:

res.writeHead(200,{

... ...
"Access-Control-Allow-Origin": "http://客户端网页所在网址"
})

今日对应小程序视频:

小程序->在线->JQUERY->day04:

17 jquery跨域cors ...

链接：https://pan.baidu.com/s/1g0qktcIA3lIDW0IUCExSsg 提取码：lm2c

作业:

1. 复习: 小程序->在线->JQUERY->day04

2. 必须复习:

小程序->在线->JSCORE->day03 5. 访问器属性

小程序->在线->JSCORE->day05 作业: ES6中关于对象中属性和方法的简写

3. 预习: 小程序->在线->VUE->day01

4. JQUERY一小时串讲:
链接：https://pan.baidu.com/s/12lDWlXF840UiiplamQg-Dw 提取码：loew

5.（确实学有余力的同学）看小程序视频完成 jQuery版学子商城项目

小程序->在线->JQUERY->day04 项目: 0~4 学子商城项目...

所有人下载项目:0. 准备中的xz前端静态文件夹_起始，是项目的起始状态（空的），看着视频中项目:1，项目:2, 项目:3,...跟着做。

xz前端静态文件夹_完成中是完成的代码，如果作业过程中出错，可以跟完成文件夹中代码对一下。

家里环境xampp和nodejs能用，且第一阶段学的好的同学:

从小程序中项目: 0. 准备...中下载xzserver.zip，用自己的服务器端代码

家里环境xampp和nodejs不能用，或者第一阶段学的不好的同学：

无需下载xzserver.zip

视频中所有ajax请求的服务器端接口地址，都改为我的新浪云服务器地址，就不需要你再运行服务器端了。也不需要你了解任何服务器端知识了:

/index 改为 http://xzserver.applinzi.com/index

/details 改为 http://xzserver.applinzi.com/details?lid=xxx

Leprehuan

关注

29
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
Jquery

正课:1. 什么是jQuery2. 如何使用jQuery3. jQuery原理:4. jQuery API 三大特点:5. 查找元素6. 修改元素7. 按节点间关系查找一. 什么是jQuery1. 什么是: (1). 第三方开发的: 必须下载才能用 (2). 执行DOM操作的: jQuery还是执行DOM的增删改查+事件绑定操作。学习jQuery只是学习DOM的延续而已。 (3). 极简化的: jQuery对DOM操作的每一步都进行了简化。(...
复制链接

扫一扫