jQuery@TOC
jQuery选择器
通过jQuery方法获取的元素对象。返回的是jQuery的包装集
<!-- 基础选择器
id选择器 #id属性值 $("id属性值") 同名以第一个为准
类选择器 #class属性值 $("class属性值")
元素选择器 标签名/元素名 $("标签名/元素名")
通用选择器 * $("*")
组合选择器 选择器1,选择器2 $("选择器1,选择器2") 指定选择器选中的对象
层级选择器
后代选择器:$("选择器1 选择器2") 选择选择器1内部的所有选择器2
子选择器:$("选择器1 > 选择器2") 选择选择器1内部的所有子选择器2
属性选择器
属性名称选择器:$("选择器[属性名]") 选择包含指定属性的选择器
属性值选择器:$("选择器[属性名='值']") 选择包含指定属性等于指定值的选择器
$("选择器[属性名!='值']") 包含指定属性不等于指定值的选择器
$("选择器[属性名^='值']") 包含指定属性以指定值开头的选择器
$("选择器[属性名$='值']")包含指定属性以指定值结尾的选择器
$("选择器[属性名*='值']")包含指定属性含有指定值的选择器
属性选择器也可以复合使用,$("div[class='myClass'][id]"),选择calss为myClas并且存在属性id的div元素
过滤选择器
首/尾元素选择器:${"选择器:first/last"} 获得指定选择器的元素中的第一个/最后一个元素
非元素选择器:${"选择器1:not(选择器2)"} 获得指定选择器1的元素中不包含选择器2的元素
奇数/偶数选择器:${选择器:odd/even} 获得指定选择器的元素中索引为奇数/偶数的元素,索引从0开始计数
等于/大于/小于索引选择器:${选择器:eq/gt/it(index)} 获得指定选择器的元素中等于/大于/小于指定索引的元素,索引从0开始计数
标题选择器:${:header} 获得标题元素,固定写法
表单过滤选择器
可用/不可用元素选择器:${:enabled/disabled} 获得满足选择器中可用/不可用的元素
单复选框选择器:${:checked} 获得单选/复选框选中的元素
下拉框选择器:${:selected} 获得下拉框选中的元素
还有选中元素的方法,children('选择器')子代元素,find('选择器')后代元素,siblings('选择器')兄弟元素(不包括自己,可用于排他算法),parent()父代,eq(index)相当于eq选择器,next()下一个兄弟,prev()上一个兄弟
-->
jQueryDOM操作
JS和jQuery对象的转化
JS对象只能调用JS中提供的方法和属性,不能使用jquery中的方法和属性
jquery对象只能使用jQuery的方法和属性,不能使用JS提供的方法和属性
1.DOM对象转换为jQuery对象
var box = document.getElementById("box");//DOM对象
$(box);//jQuery对象
2.jQuery对象转换为一个DOM对象
var $divs=$("div");//jQuery对象 divs中包含所有的$divs元素
var div=$divs[0];//div为DOM对象
//使用jQuery中的get()方法进行转换,只需要提供一个索引就可以了
var div=$divs.get(0);//将$divs对象中索引为0的元素转换为DOM对象
DOM操作
入口函数
// jQuery入口函数有两种写法,
$(document).ready(function(){
})
$(function(){
})
jQuery入口函数可以添加多个,js(window.onload)后面的会覆盖前面的
jQuery入口函数在dom树加载完成后执行,window.onload需要等所有资源加载完成(dom树,外部css/js外部链接,图片等)
jQuery入口函数优先执行
属性操作
获取属性
attr(属性名),prop(属性名)
attr与prop的区别:
如果是固有属性,attr()和prop()方法均可获取
如果是自定义属性,attr()可获取,prop()不可获取
如果是返回值为Boolean类型的属性,若设置了属性,attr()返回具体的 值,prop()返回true;若未设置属性,attr()返回undefined,prop()返回false
width(),height()获取宽高,$(window).width获取可视区域的宽
innerWidth(),innerHeight()获取宽高(包括内边距)
outerWidth(),outerHeight()获取宽高(包括内边距和边框),加上参数true后可以获取宽高(包括内边距,边框,外边距)
offset()方法获取一个包含left和top的对象,获取元素距离document的距离
position()方法获取一个包含left和top的对象,获取元素距离其定位的父元素的距离
scrollLeft(),scrollTop()获取元素被卷曲的宽高(滚动条移动的距离),添加参数可以设置元素的卷曲宽高
设置属性
attr(“属性名”,“属性值”)
prop(“属性名”,“属性值”)
可以同时设置多个属性,采用对象方式添加
移除属性
removeAttr(“属性名”)移除多个属性用空格分开
内容操作
类似text()的获取内容、类似text(“text内容”)的设置内容 (如果有多个jQuery对象,则操作多个对象)
html()、html(“html内容”)、text()、text(“text内容”) 均操作非表单元素
val()、val(“值”)操作表单元素
样式操作
css(“属性名”) 获取样式,(如果包含多个dom对象则只获取第一个对象)
css(“属性名”,“属性值”)设置样式
除了单样式设置外,还可以实现多样式设置(如果有多个dom对象则设置所有对象的样式)
$('#box1').css({
'width':'200px',
'height':'200px',
'background-color': "blue",
'border':'1px solid red'
})
class类操作
.addClass(“类名”)方法添加类,添加多个类用空格隔开类名
.removeClass(“类名”)方法移除类,如果没有参数则移除所有的类
判断类.hasClass(‘类名’),有则返回true,否则为false
切换类.toggleClass(‘类名’)如果有该类则移除该类,没有就添加该类
节点操作
创建节点
html()获取和设置元素内容,会获取所有的元素内容,设置内容会把原来的内容覆盖(设置内容包含标签会解析)
$('#div1').html('我是设置的内容 <a href="#">百度以下</a>')
$()创建的节点只会保存在内存中,需要进行添加
var $a=$('我是设置的内容 <a href="#">百度以下</a>')
添加节点
append() 父元素.append(子元素)作为最后一个子元素添加,作用是剪切该元素后添加(若子元素已经存在则会剪切)
prepend() 父元素.append(子元素)作为第一个子元素添加,作用是剪切该元素后添加(若子元素已经存在则会剪切)
before(),after() A元素.append(B元素)在A元素之后/前添加元素B
appendTo(),prependTo()子元素.append(父元素)作为最后一个/第一个子元素添加,作用是剪切该元素后添加(若子元素已经存在则会剪切)
删除,清空节点
指定元素.remove()删除所选元素或者子元素,内容和元素都删除
指定元素.empty() 清空所选元素的内容
克隆节点
clone(),克隆触发元素,存在于内存中(克隆内容和所有元素),可以带有参数,不论是true还是false,都可以克隆子代节点,但是如果是false,那么不会克隆事件,默认false
事件
简单事件注册
形如click(),不支持同时注册也不支持动态注册(新创建的事件不会继承事件)
bind事件注册
$(“元素”).bind(“事件类型”,function(){})
支持同时注册,但也不支持动态注册
1.同时为多个事件绑定同一个函数
指定元素.bind("事件类型1 事件类型2 ...",function(){})
2.为元素绑定多个事件,并设置对应的函数
指定元素.bind("事件类型",function(){
}).bind("事件类型",function(){
})
3.为元素绑定多个事件,并设置对应的函数
指定元素.bind({
"事件类型":function(){},
"事件类型":function(){}
})
unbind()解绑事件,无参数解绑所有
delegate注册方式
支持同时注册也支持动态注册(原理事件冒泡)
$('父元素‘).delegate(‘子元素’,‘事件名’,回调函数)
undelegate()解绑事件,无参数解绑所有
on注册方式(推荐方式,已经统一)
注册简单事件(不支持动态注册)
$(selector).on( "click", function() {});
注册绑定事件(支持动态注册)
$(selector).on( "click",“span”, function() {})
selector为父元素
// 第一个参数:绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
// 第二个参数: 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
// 第三个参数:事件处理函数
off()解绑事件,无参数解绑所有
off('click')解绑所有click事件
事件触发
trigger()
$(“select”).trigger(“change”);
这里的trigger触发了select的change事件。
还可以用来触发自定义事件
$('select').on('biling',fuction(){})
$(“select”).trigger(“biling”);
jQuery动画
三种基础动画
显示,隐藏,切换
show()和hidden(),如果没有参数,就不会有动画效果
有参数的话第一个参数代表时长(单位毫秒或者代表时长的fast,slow,normal),第二个参数代表回调函数
toggle()如果元素是显示的就隐藏,隐藏就显示
划入,划出
通过高度变化(向下增大/向上减小)来动态显示匹配的所有元素
slideDown(),slideUp(),参数同上,但无参数时有动画效果(有默认参数)
slideToggle()通过高度变化来切换所有匹配元素的可见性
淡入,淡出
改变元素透明度的动画
fadeIn(),fadeOut()参数同上,但无参数时有动画效果(有默认参数)
fadeToggle() 通过透明度的变化来开关所有匹配元素的淡入和淡出效果
fadeTo(),fadeTo(speed,opacity,easing,fn), 将所有匹配元素的透明度以渐进方式调整到指定的透明度
自定义动画animate
animate(params,speed,easing,fn)
自定义动画
参数1:必选的**对象**代表需要做动画的属性
参数2:可选的 代表执行动画的时长
参数3:可选的 代表的是缓动还是匀速 linear匀速 swing缓动(默认)
参数4:可选的 回调函数(可以在其中再写动画)
//将div1和div2移动到left:800处
$('#mr800').click(function(){
$('#div1').animate({
left:800
},2000,'linear',function(){
alert('动画执行完毕')
})//匀速
$('#div2').animate({
left:800
},2000,'swing')//缓动
})
停止动画
1、stop()
stop() 停止所有在指定元素上正在运行的动画,默认运动到哪个位置就停止在哪个位置
有两个参数(默认两个false),第一个代表是否清除队列(true就会停止所有动画,flase只停止当前动画,后续继续执行),第二个代表是否到最终效果(对当前动画)
2、finish()
finish() 停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画
当 .finish()触发时,立即停止正在进行的动画,不管此时运动的位置,瞬间到达运动完成的位置
jQuery ajax
请求方式
1.$.ajax
jQuery 调用 ajax 方法
格式:$.ajax({});
参数:
type:请求方式GET/POST
url: 请求地址 url
async:是否一步,默认是 true 表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
contentType:设置请求头
success:请求成功时调用此函数
error:请求失败时调用此函数
beforeSend: 在所有发送请求的操作(open, send)之前调用该函数
complete: 不管是成功还是失败都是完成,都会执行这个 complete 函数(一般成功与失败都需要执行的操作写在这里)
<script src="js/jquery-3.6.0.js"></script>
<script>
$('#bt').click(function () {
$.ajax({
type: "get", // 请求方式
url: "js/data.txt", // 请求路径
dataType: "json", // 预期返回一个 json 类型数据
success: function (data) { // data是形参名,代表返回的数据
// Dom 操作
// 创建 ul
var ul = $('<ul></ul>');
// 遍历 data
for (let i = 0; i < data.length; i++) {
// 创建 li
var li = '<li>' + data[i].userName + '</li>';
// 将 li 追加到 ul 中
ul.append(li);
}
// 将 ul 追加到 body 中
$("body").append(ul);
}
});
});
</script>
2.$.get
这是一个简单的 GET 请求功能以取代复杂 $.ajax。
请求成功时可调用回调函数,如果需要在出错时执行函数,请使用 $.ajax
$.get("请求地址","请求参数",function(形参){
});
$.get('js/data.json',{name:'tom',age:19},function(data){
console.log(data);
});
3.$.post
$.post 与 $.get用法一模一样,唯一的区别在于这是发送了一个 post 请求,由于现在咱们没有后端,所以暂时无法展示,post 必须是去访问一个后端服务器路径
$.post("请求地址","请求参数",function(形参){
});
4.$.getJSON
$ .getJSON和$ .get、$ .post的用法是一致的,但是区别在于,$.getJSON 只能获取 json 格式的数据,其他的无法获取,而 $.get 和 $.post都可以获取。
$.getJSON("请求地址","请求参数",function(形参){
});
$.getScript( )方法
jQuery提供了 $.getScript( )方法来直接加载js文件,与加载一个HTML片段一样简单方便,并且不需要对JavaScript文件进行处理,JavaScript文件会自动执行。
全局事件
jquery中ajax的全局事件ajaxStart() 和ajaxStop()是给文档对象注册了之后,每当有ajax请求就会触发的事件。
.ajaxStart(function () {
// 只要有 ajax 请求发生 就会执行
$('.loading').fadeIn();
// 显示加载提示
console.log('注意即将要开始请求了');
})
.ajaxStop(function () {
// 只要有 ajax 请求结束 就会执行
$('.loading').fadeOut()
// 结束提示
console.log('请求结束了');
});