jQuery常用函数 |
您所在的位置：网站首页 › jq的常用方法 › 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名")添加classremoveClass("class名")去掉classhasClass("class名")判断是否含该class，含有返回truetoggleClass("class名")此元素若不含该class，就添加；若含有该class，就去掉css({"css名":"值"}) prop({"属性名":"值"}) attr({"属性名":"值"}) 同时修改多个属性或者样式 添加元素 $父元素.append($新元素)该父元素末尾追加$新元素.appendTo($父元素)$父元素.prepend($新元素)该父元素开头插入$新元素.prependTo($父元素)$元素.before($新元素)该元素前面插入$新元素.insertBefore($元素)$元素.after($新元素)该元素后面插入$新元素.insertAfter($元素)$元素.replaceWith($新元素)替换现有元素$新元素.replaceAll($元素) 删除元素 remove()连同父节点一起删除empty()只删除父节点下面的子节点 事件 事件绑定标准写法 绑定事件：$元素.on("事件名","事件处理函数") 去除事件：$元素.off("事件名","原事件处理函数") 简化写法 绑定事件：$元素."事件名"("事件处理函数") 常见事件resize窗口大小改变changeinput，select，radio值改变blurinput框失去焦点focusinput框获得焦点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("事件名") 简写：$元素."事件名" --常见事件才能简写 注：“$元素”是之前绑定事件的元素 搜索 //点击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){ } }) 发送请求 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |