jquery寻找节点

更新日期: 2020-09-28阅读: 1.8k标签: jquery
$("p")//引号第一个无特殊字符,在页面中选取所有 <p> 元素:
$(".test")//在引号中第一个字符为“.”,即选择的是的节点
$("#test")//在引号中第一个字符为“#”,即选择的是id="test"的节点
//标签不唯一,如果找到符合标签的有多个,则会返回所有符合条件的节点。
//id是唯一的,如果找到符合id的有多个,则只会返回一个。
//class不唯一,如果找到符合id的有多个,则会返回所有符合条件的节点。

$("#test1").parent(); // 父节点
$("#test1").parents(); // 全部父节点
$("#test1").parents(".mui-content");//返回class为mui-content的父节点
$("#test1").children(); // 全部子节点
$("#test1").children("#test1"); //返回id为test1的子节点
$("#test1").contents(); // 返回id为test1里面的所有内容,包括节点和文本
$("#test1").contents("#test1"); //返回id为test里面的id为#test1的节点和文本
$("#test1").prev();  // 上一个兄弟节点
$("#test1").prevAll(); // 之前所有兄弟节点
$("#test1").next(); // 下一个兄弟节点
$("#test1").nextAll(); // 之后所有兄弟节点
$("#test1").siblings(); // 所有兄弟节点
$("#test1").siblings("#test2"); //返回id为test2的兄弟节点
$("#test").find("#test1"); //选中id为test后代中 id为test1的节点

$("#test").eq(1); // 选取id为test1中匹配的索引顺序为1的元素(也就是第2个li元素)
$("#test").first(); // 选取id为test1中匹配的第一个元素
$("#test").last(); // 选取id为test1中匹配的最后一个元素
$("#test").slice(1, 4); // 选取第2 ~ 4个元素
$("#test").filter(":even"); // 选取ul li中所有奇数顺序的元素


$("*")//选取所有元素
$(this)//选取当前 html 元素
$("p.intro")//选取 class 为 intro 的 <p> 元素$("p:first")选取第一个 <p> 元素
$("ul li:first")//选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")//选取每个 <ul> 元素的第一个 <li> 元素$("[href]")选取带有 href 属性的元素
$("a[target='_blank']")//选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")//选取所有 target 属性值不等于 "_blank" 的 <a> 元素$(":button")选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")//选取偶数位置的 <tr> 元素
$("tr:odd")//选取奇数位置的 <tr> 元素

注意的是JavaScript获得的节点并不等于jquery节点。

通过javascript的getElementsByTagName获取到的节点的元素是一个dom合集对象 , 通过jQuery生成的对象是一个做了包装处理的对象 。

注意上面的方法 返回的是jquery 集合 需要继续用jq的方法操作或取值。

如果想要转为dom 直接操作的只需要 取它的下标即可。

 $("#test1").parent()[0] //返回的就是dom节点

链接: https://fly63.com/article/detial/9875

是时候和 jQuery 说拜拜了么?

在网络上也时不时会看到,“是时候和jQuery说拜拜了”,最著名的莫过于在2013年的这篇文章You Might Not Need jQuery。

前端程序员应该知道的15个jQuery小技巧

15个jQuery小技巧:返回顶部按钮,预加载图像,检查图像是否加载,自动修复破坏的图像,悬停切换类,禁用输入字段,停止加载链接,淡入/滑动切换,简单的手风琴...

Jquery插件开发的方法总汇

jquery插件是用来扩展jquery对象的一种方法,它的使用方法是通过jquery对象$来调用。其中Jquery插件开发一共有三种方式:$.extend(),$.fn,$.widget()

JQuery 自动触发事件

在JQuery中,可以使用trigger()方法完成模拟操作,trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。rigger(type[,data])方法有两个参数

高版本jquery中attr和prop的区别

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

原生js中DOM对象转成jQuery对象、jQuery 对象转成 DOM 对象的实现

jquery是对js语言的封装、扩展,实现了对浏览器的兼容,使用jquery能让操作更方便简洁,这篇文章主要讲解原生js中Dom对象和jquery对象的相互转换。

jquery分页插件pagination.js报错pagination is not a function的bug解决方法

在使用jquery.pagination.js插件的时候,会出现pagination is not a function的错误,这是什么原因导致的呢?这里为大家整理一下,请对比自己的代码参考!

jQuery 常用小技巧分享

整理一些简单技巧的集合,帮你提升 jQuery 技能,你可以直接拿来使用,下面内容包括:禁止右键点击、隐藏搜索文本框文字、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器...

jquery动画实现_浅谈jQuery之动画

jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑,包括:滑入滑出动画、淡入淡出动画、显示隐藏动画、停止动画、自定义动画

jQuery如何为指定标签添加和删除一个样式

在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!