JavaScript jQuery

使用方式

在元素中添加：

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

按 jQuery官网提示下载

---

选择器

$(selector)，例如：

$('div');
$('.big-div');
$('div > p')   //选择子节点
1
2
3

selector类似于CSS选择器。

---

事件

$(selector).on(event, func)绑定事件，例如：

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

$(selector).off(event, func)删除事件，例如：

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

    $('div').off('click');   /*解绑*/
});
1
2
3
4
5

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

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

    $('div').off('click.first');
});
1
2
3
4
5

在事件触发的函数中的return false等价于同时执行：

• e.stopPropagation()：阻止事件向上传递
• e.preventDefault()：阻止事件的默认行为

---

元素的隐藏、展现

• $A.hide()：隐藏，可以添加参数，表示消失时间
• $A.show()：展现，可以添加参数，表示出现时间
• $A.fadeOut()：慢慢消失，可以添加参数，表示消失时间
• $A.fadeIn()：慢慢出现，可以添加参数，表示出现时间

---

元素的添加、删除

• $('
  Hello World
  ')：构造一个jQuery对象
• $A.append($B)：将$B添加到$A的末尾
• $A.prepend($B)：将$B添加到$A的开头
• $A.remove()：删除元素$A
• $A.empty()：清空元素$A的所有儿子

---

对类的操作

• $A.addClass(class_name)：添加某个类
• $A.removeClass(class_name)：删除某个类
• $A.hasClass(class_name)：判断某个类是否存在

---

对CSS的操作

• $("div").css("background-color")：获取某个CSS的属性
• $("div").css("background-color","yellow")：设置某个CSS的属性
• 同时设置多个CSS的属性：

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

---

对标签属性的操作

• $('div').attr('id')：获取属性
• $('div').attr('id', 'ID')：设置属性

---

对HTML内容、文本的操作

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

$A.html()：获取、修改HTML内容
$A.text()：获取、修改文本信息
$A.val()：获取、修改文本的值

---

查找

• $(selector).parent(filter)：查找父元素
• $(selector).parents(filter)：查找所有祖先元素
• $(selector).children(filter)：在所有子元素中查找
• $(selector).find(filter)：在所有后代元素中查找

---

ajax

GET方法：

$.ajax({
    url: url,
    type: "GET",
    data: {
    },
    dataType: "json",
    success: function (resp) {

    },
});
1
2
3
4
5
6
7
8
9
10

POST方法：

$.ajax({
    url: url,
    type: "POST",
    data: {
    },
    dataType: "json",
    success: function (resp) {

    },
});
1
2
3
4
5
6
7
8
9
10

---