前端开发(HTML,CSS,VUE,JS)从入门到精通！第五天(jQuery函数库)

一、jQuery 函数库

1．jQuery 是使用 JavaScript 语言编写的一个优秀的函数库，jQuery 的理念是：写得少，做的多。

二、jQuery 的 hello world 程序

<!DOCTYPE html>

<head>

/**

* <script> 用在 <head> 中可能出现问题，如果 js 代码用到了下面的某个 dom 元素，但是浏览器解释执行到 head 中的 js

* 的时候，下面的 dom 还没有加载，所以就会报错，解决办法：

* 1. 使用原生的 js：

* window.onload = function(){ //当整个页面加载完成之后

* //进行 dom 操作

* }

//2. 使用 jquery 的页面加载完毕事件：

$(function () {//当整个页面加载完成之后

/**

* jquery 的选择器：$(CSS 选择器)，这样就可以找到一个 jquery 对象，然后就可以调用 jquery 对象提供的方法

//$("#mdiv")：可以找到 #mdiv 这个 jquery 对象，而 html() 方法就是这个 jquery 对象的方法

$("#mdiv").html("<h1>通过 jquery 对象的 html() 方法新增的内容</h1>");//html() 等效于 DOM 中的 innerHTML

})

</script>

<style>

#mdiv{

border: 1px solid #ccc;

}

</style>

</head>

<body>

</body>

</html>

三、jQuery 和 DOM 对象互转

1．jQuery 对象是通过 $() 包裹了 DOM 对象之后产生的对象，jQuery 对象是 jQuery 所独有的，如果一个对象是jQuery 对象，那么这个对象就可以使用 jQuery 的各种方法，否则就不能使用 jQuery 的方法。

2．jQuery 对象只能使用 jQuery 的方法，不能使用 DOM 提供的方法，但是有些时候 jQuery 提供的方法不能满足要求时，我们需要将 jQuery 对象和 DOM 对象进行互转。

(1) DOM 对象转换为 jQuery 对象

$(dom对象) // 只需要将 dom 对象包裹在$ () 中就转换为 jQuery 对象了

(2) jQuery 对象转为 DOM 对象

① 方式一：

var jq = $('div'); //这就是一个jQuery对象

var dom = jq[index];// jQuery 对象转换为 DOM 对象，其中 index 是对应 HTML 元素组成的集合的索引位置，从0 开始

② 方式二：

var jq = $('div');

var dom =jq.get(index); //index 也是对应 dom 对象的索引

示例：

四、jQuery 的选择器

jQuery 的选择器都是放在 $() 中的，被选中的元素就成了一个 jQuery 对象，就可以调用 jQuery 提供的所有方法来操作 DOM，jQuery 的选择器和 CSS 选择器大同小异，无非就是将 CSS 选择器包裹在$ () 中形成 jQuery 对象，所以这部分内容省略，具体去查看CSS的选择器。

五、jQuery 操作 DOM

1．查找节点：

（1）查找属性节点：

通过jQuery选择器完成

（2）操作属性节点：

找到节点后，通过 attr() 双向方法来设置或获取属性值，attr() 在设置属性的时候，可以使用 JSON 格式的参数，一次性设置多个属性值。

（3）操作文本节点：

通过 jQuery 的 text()（相当于DOM的innerText）双向方法来设置或获取文本节点的文本。

示例：attr()

示例2：text()

2．创建节点

（1）创建节点，只需要将 HTML 标签包裹在 $() 中，然后就可以创建一个节点对象（jquery对象）

需要注意的是，动态创建节点不会自动添加到文档中，需要调用其他方法来进行添加，创建单个元素时，需要注意闭合标签，比如创建一个 p 元素，可以使用 $('\')或$ ('<p></p>')，但是不能是 $('p') 或$ ('P')。

（2）创建文本节点就是在创建元素节点的时候直接把文本内容写出来即可。

（3）插入节点

1) append()：向每个匹配的元素内部的结尾处插入节点

2) appendTo()：和append相反，将节点插入到匹配元素的内部结尾处

3) prepend()：向每个匹配元素的内部开始处插入节点

4) prependTo()：和prepend()相反，将节点插入到匹配元素的内部开始处

示例1：

示例2：在两个select之间互相移动项目

<!DOCTYPE html>

<head>

<style>

select{

width: 100px;

height: 200px;

}

</style>

</head>

<body>

</select>

</select>

//按钮1的单击事件

$("#btn1").click(function () {//事件函数

$("#right").append($ ("#left>option:selected"));

});

//按钮2的单击事件

$("#btn2").click(function () {//事件函数

$("#left").append($ ("#right>option:selected"));

});

</script>

</body>

</html>

5) after()：向匹配元素之后插入内容

6) insertAfter()：和after相反，拿节点向匹配元素之后插入

7) before()：向匹配元素之前插入

8) insertBefore()：和before相反，拿节点向匹配元素之前插入

示例：

（4）删除节点

① remove(selector)：从 DOM 中删除所有匹配的节点，传递的参数表示根据jquery选择器来筛选元素，该方法会删除所有的节点包括后代节点。

② empty()：清空节点，清空元素中所有的后代节点。

③ clone()：克隆节点，返回值是克隆后的副本，此时复制的节点不具有任何行为

④ clone(true)：复制节点，同时也复制元素的事件。

示例：前后分离删除表格内容

<!DOCTYPE html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>d>

</tr>

<tr>

<td>

</td>

</tr>

</table>

//找到 td 中的所有儿子 a 标签中的第一个(删除标签)，全部绑定单击事件

$("td > a:first-child").click(function () {//事件函数

//parent()：表示父元素

//事件里面的 this，表示当前发生单击事件的对象，这里就是指我们点击的"删除"，$(this)将发生事件的对象转换为 jquery 对象

$(this).parent().parent().remove();

});

</script>

</body>

</html>

4. 替换节点

（1）replaceWith()：将所有匹配元素都替换成指定的 HTML 标签或 DOM 对象

（2）replaceAll()：颠倒了 replaceWith 的用法

注意：如果替换之前，已经在元素上绑定了事件，替换后事件会随着原先的元素一起消失。

示例：

5. 包裹标签

（1）wrap()：将匹配的每一个节点都是用指定的 HTML 标签包裹

（2）wrapAll()：将匹配的所有节点用一个HTML标签包裹，注意：wrap()是单独包裹，wrapAll()是整体包裹。

（3）wrapInner()：将每一个匹配元素的子内容用HTML标签包裹。

示例：

6. 属性操作

（1）attr()：设置或获取属性值，设置属性值时，参数可以是 JSON 格式，那么一次可以设置多个值，带一个参数表示获取属性值

（2）html()：设置或获取 HTML 片段，带参数是设置，不带参数是获取

（3）text()：设置或获取文本值，带参数是设置，不带参数是获取

（4）val()：获取或设置 value 属性值，比如表单元素，对于这个方法，经常用于获取表单元素的值，比如文本框，下拉菜单，单选框，对于多选框，只能返回第一个值，对于下拉列表框，则返回选中的下拉框的值

（5）height()：获取或设置高度

（6）width()：获取或设置宽度

（7）css()：获取或设置 CSS 样式，设置的时候，也支持 JSON 格式，获取只带一个参数

示例：val()

示例2：css()

<!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

}

#mdiv a{

text-decoration: none;

color: #333;

display: inline-block;

width: 80px;

height: 30px;

text-align: center;

line-height: 30px;

border: 1px solid #ccc;

}

</style>

</head>

<body>

</div>

var flag = true;

$("#mdiv > a").click(function () {//给 a 标签绑定单击事件

if(flag){

//$(this)指当前发生单击事件的 jquery 对象，就是指点击的这个 a 标签，这里设置它的 CSS 样式

$(this).css({"background-color":"#ff6700","color":"#fff"});

//next()：当前元素的下一个兄弟元素，指下面的 div

$(this).next().css({

"width":"200px",

"height":"200px",

"background-color":"#ff6700",

"color":"#fff",

"display":"block",

"border":"1px solid #ccc"

}).html("<h3>新增的内容</h3>");//juqery 支持链式编程，因为每个 jquery 方法又将当前 jquery 对象返回了

flag = false;

}else {

//$(this)指当前发生单击事件的 jquery 对象，就是指点击的这个 a 标签，这里设置它的 CSS 样式

$(this).css({"background-color":"#fff","color":"#333"});

//next()：当前元素的下一个兄弟元素，指下面的 div

$(this).next().css({"display":"none"});

flag = true;

}

});

</script>

</body>

</html>

7. 常用遍历节点的方法

（1）children(Selector)：找出所有的子元素组成的集合

（2）find(Selector)：找出所有的后辈元素组成的集合

（3）eq(index)：找出索引为index的元素

（4）next(Selector)：找出兄弟元素（同辈元素）中的下一个元素

（5）prev(Selector)：找出兄弟元素中的前一个元素

（6）siblings()：找出所有的兄弟元素

示例1：突出显示

<!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

body{

background: #000;

}

.wrap{

margin: 100px auto 0;

width: 630px;

height: 394px;

padding: 10px 0 0 10px;

background: #000;

overflow: hidden;

border: 1px solid #ccc;

}

.wrap li{

float: left;

margin: 0 10px 10px 0;

}

.wrap img{

display: block;

border: 0;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

//需求：鼠标放入 li 中，其他的 li 半透明(opacity)，当前的li就高亮显示了，鼠标离开后，全部正常显示

$(".wrap").find("li").mouseenter(function () {//鼠标进入事件

//链式编程

//$(this)是指当前发生事件的 li，透明度为正常显示，而它的其他兄弟 li 的透明度改为半透明

$(this).css({"opacity":1}).siblings("li").css({"opacity":0.4});

});

//鼠标离开 .wrap 的时候将所有的 li 的 opacity 改为1，正常显示

$(".wrap").mouseleave(function () {//鼠标离开时

$(this).find("li").css({"opacity":1});

})

</script>

</body>

</html>

示例2：菜单

<!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

}

ul.parentWrap{

list-style: none;

width: 200px;

text-align: center;

}

li.menuGroup{

border: 1px solid #999;

background-color: #e0ecff;

}

span.groupTitle{

display: block;

height: 20px;

line-height: 20px;

font-size: 16px;

border-bottom: 1px solid #ccc;

cursor: pointer;

}

li.menuGroup > div{

height: 200px;

background-color: #fff;

display: none;

}

</style>

</head>

<body>

<div>我是弹出来的 div1</div>

</li>

<div>我是弹出来的 div2</div>

</li>

<div>我是弹出来的 div3</div>

</li>

<div>我是弹出来的 div4</div>

</li>

</ul>

//给所有的 span 标题绑定单击事件

$("ul.parentWrap span").click(function () {

//show()：显示，hide()：隐藏

//$(this)：指发生单击事件的当前的 span

$(this).next().show().parent().siblings("li").find("div").hide();//链式编程

});

</script>

</body>

</html>

示例3：五角星评分

<!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

}

.comment{

list-style: none;

font-size: 40px;

color: #ff3100;

}

.comment li{

float: left;

cursor: pointer;

}

</style>

</head>

<body>

</ul>

var wjx_none = '☆'//空心五角星

var wjx_sel = '★' //实心五角星

//需求1：鼠标放上去，当前的 li 和前面的所有 li 内容变化实心五角星，移开后变为空心

$(".comment li").mouseenter(function () {//给所有 li 绑定鼠标进入事件

//当前的 li 和前面的所有 li 内容变化实心五角星

//prevAll()：前面的所有兄弟元素

$(this).text(wjx_sel).prevAll("li").text(wjx_sel);

//nextAll()：后面的所有兄弟元素

$(this).nextAll().text(wjx_none);

});

//解决bug：如果没有点击过li，那么会出现无法清除的现象，处理办法就是先判断，看看是否有current类

$(".comment li").mouseleave(function () {//鼠标离开事件

if($("li.current").length === 0){//li 没有 .current 类

$(".comment li").text(wjx_none);

}else {//li 有 .current 类

$("li.current").text(wjx_sel).prevAll("li").text(wjx_sel);

$(this).nextAll("li").text(wjx_none);

}

});

//需求2：鼠标点击哪个 li，当前的 li 和前面的li都变成实心的，其他变成空心

$(".comment li").click(function () {

//点击哪个 li 就给哪个li 添加一个类名 .current，清空其他所有的li的类型

//removeAttr()：移除属性值

$(this).attr({class : "current"}).siblings("li").removeAttr("class");

});

</script>

</body>

</html>

8. 样式操作

（1）addClass()：添加类样式

（2）removeClass()：移除类样式

（3）toggleClass()：在添加类样式和移除类样式之间切换

9. CSS-DOM操作

（1）css()：设置或获取样式，支持JSON格式

（2）opacity 属性：获取或设置元素透明度

（3）height()：获取或设置高度

（4）width()：获取或设置宽度，默认情况下，高度和宽度的单位都是像素px，如果需要使用其他单位，则需要显示的指明，比如$('p').width('2em');

（5）offset()：获取元素的偏移量（一般指定位的元素），包含两个属性：left（距父元素左边的距离），top（距父元素上边的距离）。

示例：

<!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

}

#mdiv{

width: 100px;

height: 100px;

background-color: blue;

position: absolute;

left: 200px;

top: 100px;

}

</style>

</head>

<body>

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

$("#mdiv").width("200px");

$("#mdiv").height("200px");

//获取它距离父元素的偏移量

console.log("left:" + $("#mdiv").offset().left + ",top:" +$ ("#mdiv").offset().top);

});

</script>

</body>

</html>

10. 页面加载完毕后，会发生加载页面事件，对于 DOM 操作来说，可以使用如下方式：

原生 DOM 方式：

对于jQuery来说，使用如下方式：

这是针对于 script 标签写在 head 中的情况，总的来说就是要在 DOM 还没加载完毕时就操作 DOM 就可以使用上面的几种方式。

11. 事件绑定

（1）jQuery对象.事件名(function(){ //事件名和 DOM 中的 addEventListener 的事件名相同

//事件处理函数

});

（2）bind(事件名,事件处理函数)：绑定事件，事件名和DOM中的addEventListener的事件名相同

（3）unbind(事件名)：解除事件绑定

（4）父元素.on(事件名,子元素选择器,事件函数)：监听事件，对于比如 AJAX 或其他方式 append() 进来的元素，它的事件处理只能使用 on 进行监听，使用普通的事件处理将无法响应。

示例：

<!DOCTYPE html>

<head>

</head>

<body>

</div>

//click()：表示单击事件

$("#btn1").click(function () {//事件函数

alert("发生点击事件");

});

//绑定单击事件

$("#btn2").bind("click",function () {//事件函数

alert("bind 单击事件");

});

//异步函数：模拟 AJAX 请求动态的添加元素

setTimeout(function () {

var content = "<button id='btn3'>点我3</button>";

$("#mdiv").append(content);

},1000);

//企图使用普通的添加事件的方式来监听新加入元素的事件

//click()：表示单击事件

/*$("#btn3").click(function () {//事件函数

alert("新加入元素发生点击事件");

});*/

//对于 AJAX 或其他异步函数新加入的元素要去监听事件，只能使用 on 去监听，普通的方式监听事件都会失败

$("#mdiv").on("click","#btn3", function () {

alert("新加入元素发生点击事件");

});

</script>

</body>

</html>

12. 合成事件

（1）hover(function(){...},function(){...})：类似于CSS中的hover

（2）toggle()：在显示和隐藏之间切换

13. 事件冒泡

事件默认情况下会像水泡一样不断向上直到顶端，可以在事件函数中返回 false，停止冒泡。

示例：

<!DOCTYPE html>

<head>

<style>

.p{

width: 300px;

height: 300px;

background-color: blue;

}

.s{

width: 200px;

height: 200px;

background-color: red;

}

.ss{

width: 100px;

height: 100px;

background-color: yellow;

}

</style>

</head>

<body>

父 DIV

儿子 DIV

孙子 DIV

</div>

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

console.log("父元素被点击");

});

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

console.log("子元素被点击");

});

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

console.log("孙子元素被点击");

return false;//阻止事件传播

});

</script>

</body>

</html>

14. jQuery中的动画

（1）hide(毫秒数)/hide()：在指定的毫秒内隐藏，这里的隐藏和现实是通过改变CSS的display属性为none来实现，和remove()方法不一样，remove()是删除元素

（2）show(毫秒数)/show()：在指定的毫秒内显示

（3）fadeIn()/fadeOut()：通过改变元素透明度来显示或隐藏元素

（4）slideDown()/slideUp()：通过改变元素的高度来显示或隐藏元素

（5）toggle()：在显示和隐藏之间切换

（6）slideToggle()：通过高度变化来显示和隐藏之间切换

（7）fadeTo(毫秒数,透明度)：将元素以渐进的方式将透明度调整到指定值，透明度的取值是0~1.

示例：

六、AJAX

1．什么是 AJAX

（1）AJAX全称 Asynchronous JavaScript And Xml，即异步的 JavaScript 和 XML，AJAX 能够保证在不重新加载整个页面的情况下，通过加载后台数据，并在页面上的某个区域进行显示，AJAX 也称为局部刷新技术。

2．通过 AJAX 提供的方法，可以使用 HTTP 的 GET 和 POS T请求从远程服务器上请求文本、HTML内容、XML 内容或 JSON 数据，同时可以把这些后台数据直接渲染到页面的某个部分。

3．jQuery提供的 AJAX 方法：

（2） $.post(url,data,success(response,status,xhr),dataType)：向后台发送post请求，类似与表单的method=post，参数和$ .get相同

（3）$.ajax({

url: "后台服务器地址",

data: 传送给后台的请求参数，可以是JSON对象,

type: "POST", //请求的类型，可以是GET或POST

dataType: 'json', //返回的响应数据类型

success: function(res){}, //成功收到后台响应后自动调用的回调方法

error: function(err){} //和后台通讯发生错误之后自动调用的回调方法

});

示例：AJAX综合案例，将之前写的原生 AJAX 的项目改成 jQuery 的AJAX

其他都不变，只是将 index.html 前端页面的 js 代码改为 jquery 的代码

<!DOCTYPE html>

<head>

<title>index</title>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

</table>

//发送 get 请求到后台

$.get("userServlet",//请求后台的 URL 地址

{},//发送给请求参数，没有请求参数

function (data) {//成功收到后台响应后的回调函数，是自动执行的

//将服务器发送过来的JSON字符串转换为JavaScript的JSON对象

let users = JSON.parse(data);//得到的 users 是一个 json 对象组成数组

var content = "";

for (let i = 0; i < users.length; i++) {

content += "<tr>";//行

content += "<td>" + users[i].id + "</td>" +

"<td>" + users[i].name + "</td>" +

"<td>" + users[i].age + "</td>" +

"<td>" + users[i].sex + "</td>" +

"<td><a href=''>删除</a><a href=''>更新</a></td>";

content += "</tr>";

}

$("table tbody").append(content);

"text" //表示后台是以文本的形式发送数据到前端的

);

</script>

</body>

</html>