这是我参与「第四届青训营 」笔记创作活动的的第5天
一、使用方式:
- 在
<head>元素中添加:
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
- 按
jQuery官网提示下载
二、选择器:
$(selector),例如:
$('div');
$('.big-div');
$('div > p')
selector类似于CSS选择器。
三、事件:
$(selector).on(event, func)绑定事件,例如:
$('div').on('click', function (e) {
console.log("click div");
})
$(selector).off(event, func)删除事件,例如:
$('div').on('click', function (e) {
console.log("click div");
$('div').off('click');
});
当存在多个相同类型的事件触发函数时,可以通过click.name来区分,例如:
$('div').on('click.first', function (e) {
console.log("click div");
$('div').off('click.first');
});
在事件触发的函数中的return false等价于同时执行:
e.stopPropagation():阻止事件向上传递e.preventDefault():阻止事件的默认行为
四、元素的隐藏与展现:
$A.hide():隐藏,可以添加参数,表示消失时间$A.show():展现,可以添加参数,表示出现时间$A.fadeOut():慢慢消失,可以添加参数,表示消失时间$A.fadeIn():慢慢出现,可以添加参数,表示出现时间
五、元素的添加与删除:
$('<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的所有儿子
六、对类的操作:
$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",
});
八、对标签属性的操作:
$('div').attr('id'):获取属性$('div').attr('id', 'ID'):设置属性
九、对HTML、文本的操作:
对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) {
},
});
POST方法:
$.ajax({
url: url,
type: "POST",
data: {
},
dataType: "json",
success: function (resp) {
},
});