简单分享一个jq知识点，值得收藏

has_filter_not

filter   过滤 对已经获取到的元素进行过滤not      filter反义词has    拥有 直接判断子节点是否拥有符合条件的元素eg:$("div").has(".box").css("background","blue");

prev_next_prevAll_nextAll

prev  查找当前节点兄弟节点中的上一个next  查找当前节点兄弟节点中的下一个prevAll  所有的上一个兄弟节点nextAll  所有的下一个兄弟节点eg:$("h3").prev().css("fontSize","50px");$("h3").nextAll().css("color","red");

find

 find 查找子节点eg:$("ul").find(".hello").css("background","red");

eq_index

eq(下标)   通过下标获取到指定的节点  index()    获取当前节点在兄弟节点中的下标eg:const index = $("h1").index();$("li").eq(3).css("background","red");

addClass_removeClass

 addClass      添加class类名removeClass   移除class类名eg:$("#div1").addClass("box3 box4");$("#div1").removeClass("box1 box3");

attr_prop

attr 设置属性/获取属性prop 操作布尔类型的属性eg:$("#div1").attr("class","world");$("#div1").prop("checked",true);

siblings

siblings() 兄弟节点eg:$(this).addClass("active").siblings().removeClass("active")

width

 width 宽度innerWidth 宽度 + paddingouterWidth 宽度 + padding + bordereg:$("#div1").width()$("#div1").innerWidth()

on_off

 on 给函数添加事件off 取消事件eg:$("#div1").on("click",function () {} 给一个事件添加一个函数$("#div1").on("click mouserover",function () {} 同时给多个事件添加函数$("#div1").off() 取消掉所有的事件$("#div1").off("click"); 取消单个事件类型$("#div1").off("click", show); 取消事件类型下的具体的函数$("#div1").on("click","li.aaa",function () {} 事件委托

before_after_append_prepend

 insertBefore()    before() 插入到前面insertAfter()    after() 插入到后面appendTo()      append() 插入到末尾prependTo()      prepend() 插入到首位remove() 移除eg:$("<span>111</span>").insertBefore("p") 在每个<p>元素前插入一个 <span> 元素$("p").before("<p>Hello world!</p>") 在每个 p 元素前插入内容

scrollTop

scrollTop 获取距离顶部高度eg:$(window).scrollTop()

offset_margin_position

 offset 直接获取当前元素距离最左/最上的距离 可以获取 可以设置margin 不计算在内position 当前元素距离第一个有定位父节点的距离 只读 margin计算在内eg:$("#div2").offset().left 获取$("#div2").offset({top: 100,left: 200}) 设置$("#div2").position() 获取

val_size_each

val()  获取/设置表单元素的值size()  获取元素的个数each()  遍历eg:$("input").val() / $("input").val("hello")$("input").size()$("input").each(function (index,item) {})

特效函数

hover(funOver,funOut) 鼠标移入移出共同点：都是去控制元素的显示隐藏不同点：hide()  show()修改display none/blockslideDown() slideUp() 修改的高度fadeIn() fadeOut() 修改的透明度hide()  隐藏第一个参数：效果持续的毫秒数第二个参数：回调函数 效果结束之后的时候执行【注】左上角收起左上角展开show()  显示slideDown()slideUp()  卷闸效果（展开/收起）fadeIn()  淡入fadeOut()  淡出fadeTo(时间, 透明度, 回调函数)animate第一个参数：轨迹第二个参数：时间第三个参数：执行的效果第四个参数：回调函数eg:$("#div1").hover(function () {// 鼠标移入$(this).html("移入");$("#div2").hide(2000,function () {$("#div1").html("2消失了");});$("#div2").slideUp(2000,function () {console.log("收起");});$("#div2").fadeOut(2000);$("#div2").fadeTo(300, 0.1);}, function () {// 鼠标移出$(this).html("移出");$("#div2").show(2000);$("#div2").slideDown();$("#div2").fadeIn(2000);$("#div2").fadeTo(300, 1);})//动画实例$("#div1").animate({left: 800},3000).animate({top: 400}).animate({width: 800}).animate({height: 800}).animate({top: 100}).animate({left: 100}).animate({width: 100,height: 100})

remove_detach_empty

remove() 删除元素节点
【注】不会保留这个节点上的事件行为
detach() 删除元素节点
【注】会保留这个节点上的事件行为
empty() 清空子节点  eg:
$("ul").find(".hello").css("background","red");

$冲突

$.noConflict() 将$使用权释放出来eg:var Ning = $.noConflict();// 将$使用权释放出来Ning("#box").click(function () {console.log("123");})

切换

slideDown() slideUp() slideToggle() 展开 收起 切换fadeIn() fadeOut() fadeToggle() 淡入 淡出 切换show() hide() toggle() 显示 隐藏 切换$("div").toggleClass("active") 切换类

简单分享一个jq知识点，值得收藏相关推荐

简单分享一个轻量级自动化测试框架目录结构设计
更多关于python selenium的文章,请关注我的专栏:Python Selenium自动化测试详解很多人在做自动化测试的过程中会遇到一个瓶颈,就是能够写脚本,但是不知道怎么去组织代码,怎么搭 ...
转载:::::简单分享一个轻量级自动化测试框架目录结构设计
很多人在做自动化测试的过程中会遇到一个瓶颈,就是能够写脚本,但是不知道怎么去组织代码,怎么搭建测试框架,今天博主就放点干货,分享一个轻量级的自动化测试框架的目录结构,如下图: 分层如下: config ...
【Github分享】GitHub 上值得收藏的100个精选前端项目！
引言整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者简书上文章会持续更新,版权归原作者所有. 最新更新 codepen 一个在线编辑前端项目的网站,其中有一些 ...
分享一个小知识点：沟通技巧
文章目录一.如何成为一个清晰的表达者二.如何成为一个高效的倾听者三.如何有效沟通 1. 清晰(Clear) 2.简洁(Concise) 3.具体(Concretel) 4.准确(Correct) ...
网络策划方案怎么写？分享一个品牌策划方案撰写方法
做文案策划和策略的朋友都或多或少有这样的经历,常常为了熬一个策划方案而通宵达旦,头发都要掉不少.网络策划方案怎么写,其实有章可循,有法可依.今天策划人文哥就简单分享一个实操过的某品牌事件炒作策划方案撰 ...
精心为学弟学妹准备的C语言与C++学习路线、书籍、视频推荐和资料，值得收藏！
C语言有人说:"C生万物,编程之本",这一点都没有错! C语言是最接近计算机的语言,很多时间,我们都会发现,C语言是非常有必要学习的. 刚开始就是泡书,然后就是抄代码,上机调试, ...
历时一个月！50+Vue经典面试题详解，值得收藏！
大家好,我是若川.持续组织了8个月源码共读活动,感兴趣的可以点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
【值得收藏】如此心机的老婆，不难教出一个优秀的女儿。谁娶了都是福。
2019独角兽企业重金招聘Python工程师标准>>> 特别感谢作者,分享这么好的教育经验,其中好多招都和小时候我妈妈用的基本一样,不过我妈妈不会上网,方法也更农村,但原理是一样的, ...
华为手机隐藏的5个技巧，每一个值得收藏
本文转自迅捷办公:https://www.xunjiepdf.com/6582 手机对于每一个人来说几乎都是形影不离的,而华为手机最近更是做的比较好,真可谓是风生水起,华为手机也凭借着自身的优点让更多 ...

简单分享一个jq知识点，值得收藏

简单分享一个jq知识点，值得收藏相关推荐

最新文章

热门文章