JavaScript的常用库 —— jQuery

jQuery

用来更加方便地去控制前端的HTML标签和CSS属性。

使用方式:

1. 直接在<head>元素中添加:

<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>

2. 按jQuery官网提示下载。


选择器:

$(selector)selector类似于CSS选择器。

$('div');
$('.big-div');
$('div > p')

 
例如:
test.js中的内容为:

let main = function() {
 let $div = $('.mydiv');
 console.log($div);
}
export {
 main
}

test.html中的内容为:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>test</title>
 <link rel="stylesheet" href="/test/test.css">
 <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script> // jQuery
</head>
<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
 <div class="mydiv"></div>
</body>
</html>

test.css中的内容为:

div {
 width: 300px;
 height: 300px;
 background-color: pink;
}

事件:

$(selector).on(event, func)绑定事件。

$('div').on('click', function (e) {
 console.log("click div");
})

简写:

$div.click(function() {
 console.log("click div");
 })

$(selector).off(event, func)删除事件。

$('div').on('click', function (e) {
 console.log("click div");
 $('div').off('click');
});

 
例如:
test.js中的内容为:

let main = function() {
 let $div = $('div');
 
 $div.on("click", function() { // 绑定事件
 console.log("这是click div");
 //$div.off("click"); // 删除(解绑)事件
 })
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
 <div></div>
</body>

test.css中的内容为:

div {
 width: 300px;
 height: 300px;
 background-color: pink;
}

 

当存在多个相同类型的事件触发函数时,可以通过click.name来区分。

$('div').on('click.first', function (e) {
 console.log("click div");
 $('div').off('click.first');
});

 
例如:
test.js中的内容为:

let main = function() {
 let $div = $('div');
 
 $div.on("click.name1", function() { // 绑定事件
 console.log("这是click div 1");
 $div.off("click.name2"); // 解绑click.name2事件
 })
 $div.on("click.name2", function() { // 绑定事件
 console.log("这是click div 2");
 })
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
 <div></div>
</body>

test.css中的内容为:

div {
 width: 300px;
 height: 300px;
 background-color: pink;
}

 

在事件触发的函数中的return false等价于同时执行以下两个操作:

  • e.stopPropagation():阻止事件向上传递

  • e.preventDefault():阻止事件的默认行为

 
例如:
test.js中的内容为:

let main = function() {
 let $div = $('div');
 
 $div.on("click", function(e) { // 给<div>绑定点击事件
 console.log("这是click div 1");
 });
 $('a').on("click", function(e) { // 给<a>绑定点击事件
 console.log("click a");
 e.stopPropagation(); // 阻止向上传递,a事件触发div事件不触发
 e.preventDefault(); // 阻止当前点击事件的操作,a事件不触发div事件触发
 //return false; // 等同于e.stopPropagation(); e.preventDefault(); a事件不触发div事件也不触发
 })
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
 <div>
 <a href="https://www.baidu.com" target="_blank">百度</a>
 </div>
</body>

test.css中的内容为:

div {
 width: 300px;
 height: 300px;
 background-color: pink;
}

元素的隐藏、展现:

  • $A.hide():隐藏,可以添加参数,表示消失时间

  • $A.show():展现,可以添加参数,表示出现时间

  • $A.fadeOut():慢慢消失,可以添加参数,表示消失时间

  • $A.fadeIn():慢慢出现,可以添加参数,表示出现时间

 
例如:
test.js中的内容为:

let main = function() {
 let $div = $('div');
 let $btn_hide = $('#hide-btn');
 let $btn_show = $('#show-btn');
 $btn_hide.click(function() {
 $div.hide(3000); // 花费3000毫秒(= 3秒)隐藏
 //$div.fadeOut(3000); // 淡出
 });
 $btn_show.click(function() {
 $div.show(1000); // 花费1秒展现
 //$div.fadeIn(1000); // 淡入
 });
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
 <div></div>
 <button id="hide-btn">隐藏</button>
 <button id="show-btn">展现</button>
</body>

test.css中的内容为:

div {
 width: 300px;
 height: 300px;
 background-color: pink;
}

元素的添加、删除:

  • $('<div class="mydiv"><span>Hello World</span></div>'):构造一个jQuery对象

  • $A.append($B):将$B添加到$A的末尾

  • $A.prepend($B):将$B添加到$A的开头

  • $A.remove():删除元素$A

  • $A.empty():清空元素$A的所有儿子

 
例如:
test.js中的内容为:

let main = function() {
 let $div = $('div');
 let $a = $(
 `<a id="" style="" href="https://www.baidu.com">
 百度
 <span>!!!</span>
 </a>`);
 $div.click(function() { // 单击
 $div.append($a); // 将$a添加到$div
 });
 $div.dblclick(function() { // 双击
 $a.remove(); // 删除元素$a
 // $dic.empty():清空元素$div里的所有儿子
 });
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
 <div></div>
</body>

test.css中的内容为:

div {
 width: 300px;
 height: 300px;
 background-color: pink;
}

对类的操作:

  • $A.addClass(class_name):添加某个类

  • $A.removeClass(class_name):删除某个类

  • $A.hasClass(class_name):判断某个类是否存在

 
例如:
test.js中的内容为:

let main = function() {
 let $div = $('div');
 $div.click(function() { // 单击
 $div.addClass('my-div'); // 添加my-div类
 });
 $div.dblclick(function() { // 双击
 $div.removeClass('my-div'); // 删除my-div类
 });
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
 <div></div>
</body>

test.css中的内容为:

div {
 width: 300px;
 height: 300px;
 background-color: pink;
}
.my-div {
 background-color: orange;
}

对CSS的操作:

  • $("div").css("background-color"):获取某个CSS的属性

  • $("div").css("background-color","yellow"):设置某个CSS的属性

  • 同时设置多个CSS的属性:

$('div').css({
 width: "200px",
 height: "200px",
 "background-color": "orange",
});

 
例如:
test.js中的内容为:

let main = function() {
 let $div = $('div');
 $div.click(function() { // 单击
 console.log($div.css('background-color')); // 获取div的CSS属性
 $div.css('background-color', 'orange'); // 将div的background-color属性变为orange
 $div.css({ // 同时改变div多个CSS的属性
 width: "200px",
 height: "200px",
 "background-color": "orange",
 });
 });
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
 <div></div>
</body>

test.css中的内容为:

div {
 width: 300px;
 height: 300px;
 background-color: pink;
}

对标签属性的操作:

  • $('div').attr('id'):获取属性

  • $('div').attr('id', 'ID'):设置属性

 
例如:
test.js中的内容为:

let main = function() {
 let $div = $('div');
 $div.click(function() { // 单击
 console.log($div.attr('wzy')); // 返回18
 $div.attr('id', 'ID'); // 把div的id属性改成ID的属性
 });
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
 <div wzy="18"></div>
</body>

test.css中的内容为:

div {
 width: 300px;
 height: 300px;
 background-color: pink;
}
#ID {
 background-color: orange;
}

对HTML内容、文本的操作:

不需要背每个标签该用哪种,用到的时候Google或者百度即可。

  • $A.html():获取、修改HTML内容(标签内容)

  • $A.text():获取、修改文本信息

  • $A.val():获取、修改文本的值

 
例如:
test.js中的内容为:

let main = function() {
 let $div = $('div');
 $div.click(function() { // 单击
 console.log($div.text()); // 获取div的文本内容,返回 哈哈哈
 //$div.text("hello"); // 修改div的文本内容为hello
 console.log($div.html()); // 获取标签内容,返回<span>哈哈哈</span>
 });
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
 <div wzy="18"><span>哈哈哈</span></div>
</body>

test.css中的内容为:

div {
 width: 300px;
 height: 300px;
 background-color: pink;
}

查找:

  • $(selector).parent(filter):查找父元素

  • $(selector).parents(filter):查找所有祖先元素

  • $(selector).children(filter):在所有子元素中查找

  • $(selector).find(filter):在所有后代元素中查找

 
例如:
test.js中的内容为:

let main = function() {
 let $div3 = $('.div-3');
 console.log($div3.parents('.div-1'));
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
 <div class="div-1">
 <div class="div-2">
 <div class="div-3"></div>
 </div>
 </div>
</body>

ajax

用来跟后端通信。在不刷新页面的情况下,只从服务器端获取某些数据,一般是获取json数据。

  • GET方法:

从服务器获取内容。

$.ajax({
 url: url, // 后端的链接
 type: "GET", 
 data: { // 往后端传的参数
 },
 dataType: "json",
 success: function (resp) { // 当后端成功返回内容后,从resp里解析出来内容
 },
});
  • POST方法:

把内容提交给服务器。

$.ajax({
 url: url,
 type: "POST", 
 data: {
 },
 dataType: "json",
 success: function (resp) {
 },
});
作者:kitty又困了原文地址:https://www.cnblogs.com/kitty-38/p/18684429

%s 个评论

要回复文章请先登录注册