jQuery常用函数

目录

jQuery函数特点

 查找元素

修改元素

添加元素

删除元素

事件

事件绑定

事件委托

页面加载后自动执行事件

鼠标事件

模拟触发

动画

其他函数

---

jQuery函数特点

• for循环，对整个jQuery对象调用一次函数，等于jQuery对象中每一个dom元素调用一次函数。
• 一个函数两用，调用时，传了参数--修改操作；不传参数--获取旧值。
• 链式操作，多数函数都会返回正在操作的jQuery对象。

 查找元素

节点间关系
parent()	父亲选择器
parents("选择器")	祖先级元素，可使用选择器选择具体的某个祖先
children("选择器")	直接子元素选择器，可使用选择器选择具体的某个子元素
find("选择器")	后代选择器，可使用选择器选择具体的某个后代元素
prev()	前一个兄弟元素
prevAll("选择器")	前面所有兄弟元素，可使用选择器选择具体的某个兄弟元素
next()	后一个兄弟元素
nextAll("选择器")	后面所有兄弟元素，可使用选择器选择具体的某个兄弟元素
siblings("选择器")	除自己之外的所有兄弟元素

修改元素

内容获取/修改
html("新值")	原始HTMl内容，“新值”传了--修改该元素内容，未传--获取该元素内容
text("新值")	纯文本内容
val("新值")	input中的value
属性值获取/修改
prop("属性名","新值")	标准HTML属性，值为bool类型的属性
attr("属性名","新值")	标准HTML属性，自定义扩展属性
样式获取/修改
css("css名","新值")	css样式
addClass("class名")	添加class
removeClass("class名")	去掉class
hasClass("class名")	判断是否含该class，含有返回true
toggleClass("class名")	此元素若不含该class，就添加；若含有该class，就去掉
css({"css名":"值"}) prop({"属性名":"值"}) attr({"属性名":"值"})	同时修改多个属性或者样式

添加元素

$父元素.append($新元素)	该父元素末尾追加
$新元素.appendTo($父元素)
$父元素.prepend($新元素)	该父元素开头插入
$新元素.prependTo($父元素)
$元素.before($新元素)	该元素前面插入
$新元素.insertBefore($元素)
$元素.after($新元素)	该元素后面插入
$新元素.insertAfter($元素)
$元素.replaceWith($新元素)	替换现有元素
$新元素.replaceAll($元素)

删除元素

remove()	连同父节点一起删除
empty()	只删除父节点下面的子节点

事件

事件绑定

标准写法        绑定事件：$元素.on("事件名","事件处理函数")

                      去除事件：$元素.off("事件名","原事件处理函数")

简化写法        绑定事件：$元素."事件名"("事件处理函数")

常见事件
resize	窗口大小改变
change	input，select，radio值改变
blur	input框失去焦点
focus	input框获得焦点
dbclick	双击
click	单击
keyup	键盘按键抬起
keydown	键盘按键按下
mousedown	鼠标按键按下
mouseenter	鼠标进入（jQuery）
mouseleave	鼠标移出（jQuery）
mousemove	鼠标移动
mouseout	鼠标移出（dom）
mouseover	鼠标进入（dom）
mouseup	鼠标按键抬起

事件委托

$元素.on("事件名","选择器",function(){})

页面加载后自动执行事件

先==>原：$(document).ready(function(){})

          简：$(function(){})

后==>$(window).load(function(){})

鼠标事件

鼠标进入：mouseenter(处理函数1)

鼠标出去：mouseleave(处理函数2)

简写：hover(处理函数1,处理函数2)

模拟触发

$元素.trigger("事件名")     

简写：$元素."事件名"  --常见事件才能简写

注：“$元素”是之前绑定事件的元素

<div class="jump">
    <input type="text" >
    <button>搜索</button>
</div>

//点击button
$(document).on("click",".jump button",function(){
    console.log($(".jump input").val());
})

// 在input中按回车模拟触发button事件
$(document).on("keyup",".jump input",function(e){
    if(e.keyCode==13){
        $(".jump button").click();  //$(".jump button")为$元素
    }
})

动画

简单动画
show(ms)	显示
hide(ms)	隐藏
toggle(ms)	若该元素显示状态，将其隐藏；反之显示
fadeIn(ms)	淡入
fadeOut(ms)	淡出
fadeToggle(ms)	若该元素显示状态，将其淡出；反之淡入
slideUp(ms)	滑入
slideDown(ms)	滑出
slideToggle(ms)	若该元素显示状态，将其滑出；反之滑入
$元素.animate({         css属性:目标值 },持续时间,function(){         //动画播放结束后执行 })	动画 并发：一个animate()中的多个css属性并发变化 排队：一个元素的多个animate()排队执行
$元素.stop()	停止当前动画
$元素.stop(true)	停止队列中所有动画
注：选择器匹配正在播放动画的元素: :animated

其他函数

is("选择器")	判断元素是否有某特征
clone()	克隆元素
$查找结果.index(要找的DOM元素)	返回某个dom元素在整个查找结果中的下标位置
$查找结果.each((i,item)=>{})	遍历
$.ajax({         url:"服务器地址",         type:"get/post",         data,         dataType:"json",         success:function(result){         } })	发送请求