首页
学习
活动
专区
圈层
工具
发布

jquery 获取元素(父节点,子节点,兄弟节点)

1、jquery 获取元素(父节点,子节点,兄弟节点) $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1")....test").contents(); // 返回#test里面的所有内容,包括节点和文本 $("#test").contents("#test1"); $("#test1").prev(); // 上一个兄弟节点...$("#test1").prevAll(); // 之前所有兄弟节点 $("#test1").next(); // 下一个兄弟节点 $("#test1").nextAll(); // 之后所有兄弟节点...$("#test1").siblings(); // 所有兄弟节点 $("#test1").siblings("#test2"); $("#test").find("#test1"); 2、元素筛选...// 以下方法都返回一个新的jQuery对象,他们包含筛选到的元素 $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素) $("ul li").first

7K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vue封装jquery修改自身以及兄弟元素的方法「建议收藏」

    在项目中我们经常有,点击某一个元素让其自身样式发生变化,同时其兄弟元素改变的需求,最简单的就是通过Jquery来操作,但是如果需求多的话,那么我们就可以对这个方法进行封装,然后再引入使用。...今天我们就来看看这个封装… 目录 一.引入Jquery 1.下载jquery源码: 2.NPM安装 二.封装 三.引用 1.单文件应用 2.全局引用 四.结尾 一.引入Jquery 1.下载jquery...源码: 我们在网页中打开https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js,复制代码粘贴到我们的项目文件中。...2.NPM安装 我们也可以在项目终端中输入如下代码: npm i jquery -S 二.封装 我们新建名为change.js的文件,在里面写入如下代码: //引入Jquery import $ from...let a = $(name)[index] $(a)[0].style.backgroundColor = "#4CD964" $(a)[0].style.color = "#fff" // 设置同等级兄弟元素的样式

    71320

    JS和JQuery获取当前元素的兄弟及父级等元素的方法

    ) jQuery.parents(expr),类似于 jQuery.parents(expr) ,但是是查找所有祖先元素,不限于父元素 jQuery.children(expr),返回所有子节点,这个方法只会返回直接的孩子节点...这个方法和 children() 的区别就在于,包括空白文本,也会被作为一个 jQuery 对象返回, children() 则只会返回节点 jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点...jQuery.prevAll(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQuery.nextAll(),返回所有之后的兄弟节点 jQuery.siblings...(),返回兄弟姐妹节点,不分前后 jQuery.find(expr),跟 jQuery.filter(expr) 完全不一样: jQuery.filter(),是从初始的 jQuery 对象集合中筛选出一部分...var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSibling;   //获得s的下一个兄弟节点

    13.6K10

    JS获取节点的兄弟,父级,子级元素的方法

    2015-08-18 03:48:27 下面介绍JQUERY的父,子,兄弟节点查找方法 jQuery.parent(expr)  找父亲节点,可以传入expr进行过滤,比如$("span").parent...()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children...这个方法和children()的区别就在于,包括空白文本,也会被作为一个 jQuery对象返回,children()则只会返回节点 jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点 jQuery.prevAll...(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQuery.nextAll(),返回所有之后的兄弟节点 jQuery.siblings(),返回兄弟姐妹节点...,不分前后 jQuery.find(expr),跟jQuery.filter(expr)完全不一样。

    11K10

    前端基础-jQuery选择器

    第2章 选择器 jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。...jQuery选择器有很多,基本兼容了CSS所有的选择器,并且jQuery还添加了很多更加复杂的选择器。...’#first’).parent(); 查找父亲 eq(index) $(‘li’).eq(2); 相当于$(‘li:eq(2)’),index从0开始 next() $(‘li’).next() 找下一个兄弟...prev() $(‘li’).prev() 找上一次兄弟 closest $(‘li’).closest(‘ul’) 找最近一个祖先元素 语法模板: 00-语法模板.html(需要包含jquery.js...closest('form') ); //获取 hobby 所有后代元素 console.log( $('#hobby').find('input') ); //获取 hobby 下一个兄弟元素

    92710

    jQuery常用函数汇总

    跨浏览器兼容性: jQuery的设计考虑了不同浏览器之间的兼容性,让开发者能够更好地处理不同浏览器的差异。插件生态系统: jQuery拥有丰富的插件生态系统,开发者可以利用这些插件来扩展和增强其功能。...获取元素//$(选择器)$('div')//获取页面中的所有div元素,返回的是jQuery对象get()参数为索引,返回值是原生对象eq()参数为索引,返回值为jQuery对象操作类名hasClass...,没有就增加查找元素parent()找到该元素的父级元素next()找到该元素紧挨的下一个兄弟节点prev()找到该元素紧挨的上一个兄弟节点nextAll()找到该元素下面所有兄弟节点传入选择器,找下面符合选择器的兄弟节点...prevAll()找到该元素上面所有兄弟节点传入选择器,找上面符合选择器的兄弟节点siblings()找到该元素的所有兄弟元素children()找到该元素的所有子元素find()通过参数类名找该元素下面的元素效果...after()作为元素的下一个兄弟节点插入我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

    46820

    jQuery常见结点操作

    jQuery常见结点操作汇总 jQuery获取节点 基本操作 功能 操作 注意事项 获取hxb的子节点 hxb.children(expr) 可以传入expr进行过滤,比如hxb.children()或者...获取hxb的下一个兄弟节点 hxb.next() — 获取hxb的上一个兄弟节点 hxb.prev() — 获取hxb之前的所有兄弟节点 hxb.nextAll() — 获取hxb之后的所有兄弟节点 hxb.prevAll...() — 获取hxb的所有兄弟姐妹节点 hxb.siblings() 返回所有兄弟姐妹节点,不分前后。...注意:jQuery.find(expr) 跟 jQuery.filter(expr) 完全不一样。...jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如("p").find("span"),是从p元素开始找,等同于

    24710

    JavaScript 学习-43.jQuery 选择器

    前言 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”(或选择)HTML 元素。它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。...jQuery 选择器 jQuery 中所有选择器都以美元符号开头:$() 常用的一些选择器总结 语法 描述 $(this) 选取当前 HTML 元素 $("*") 选取所有元素 $("p") 匹配  下一个兄弟元素 $('#p1~div') 同辈选择器,,通过定位当前元素,找到同一层级的该元素后面的全部兄弟元素 $('p, div') p标签和div标签元素 基础选择器...,通过定位当前元素,找到同一层级的下一个兄弟元素,中间用加号+ // 兄弟元素选择器 var d = $('#p1+div'); //查找id=p1的下一个兄弟div console.log...(d) 同辈选择器,,通过定位当前元素,找到同一层级的该元素后面的全部兄弟元素,中间用~ // 兄弟元素选择器 var d = $('#p1~div'); //查找id=p1的全部div兄弟元素

    79620
    领券