文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

) jQuery.parents(expr)，类似于 jQuery.parents(expr) ，但是是查找所有祖先元素，不限于父元素 jQuery.children(expr)，返回所有子节点，这个方法只会返回直接的孩子节点...()，返回兄弟姐妹节点，不分前后 jQuery.find(expr)，跟 jQuery.filter(expr) 完全不一样： jQuery.filter()，是从初始的 jQuery 对象集合中筛选出一部分...，而 jQuery.find()，的返回结果，不会有初始集合中的内容，比如 $("p").find("span") ，是从 元素开始找 ，等同于 $("p span") JS获取：...var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSibling;   //获得...;   //获得s的最后一个子节点 JS获取节点父级，子级元素：JS的方法会比JQUERY麻烦很多，主要则是因为FF、谷歌浏览器会把你的换行也当作DOM元素：空的text元素，目前IE也是这样 <div

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

    jQuery

    jQuery 学习了jQuery感觉是真的很好用，感谢那些参与代码编写的大佬们 1.1 初认识 1.1.1 入口函数 作用相当于onload事件,等dom结构渲染完毕即可执行 但又有所不同 onload...$(‘li:last’) 获取最后一个li元素 :eq(index) $(“li:eq(2)”) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。...parent() $(“li”).parent(); 查找父级 children(selector) $(“ul”).children("“li”) 相当于$(“ul>li”)，最近一级（亲儿子) find...如果参数是数字，则修改样式 参数不写单位 4.4.2 jQuery 位置操作 offset()设置获取元素偏移 获取的位置是相对于文档的偏移坐标，与父级没有关系 传入的参数是一个对象 //获取偏移量...$('div').offset() //更改位置 $('div').offset({ top: 200, left: 100 }) position()获取带有定位的偏移 获取的位置是相对于带有定位的父级元素

    10.2K10

    python_day15_前端_jQue

    jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 二 什么是jQuery对象？     ...xx parent()    //父级标签元素 parents() //父级往上的所有标签元素 parentUntil() //// 直到找着父级id为xx的标签或者class,但不包含xx...('.ccc').css('color','blue'); // 父级标签除了本身标签往上一层的标签都是父级 $('.three').parent().css('color','blue'); //...父级往上的所有标签元素 $('.firsts .twodiv .three').parents('body').css('color','blue'); // 直到找着父级id为xx的标签或者class...以position做为偏移量,down的porision参照物是它的父级,所以也就是直接为0，如果是以body那就是200 height widht // 高度height console.log($(

    7K20

    Python全栈之jQuery笔记

    jQuery的选择器基本兼容了CSS1到CSS3所有的选择器,并且还添加了很多复杂的选择器....的方法.遍历方法中最大的种类是树遍历(tree-traversal). 1.jQuery遍历-祖先: parent() 返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历...,那么此事件就会调用这个处理程序, 如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活), 或者它到达了对象层次的最顶层...事件冒泡的作用: 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件....//该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent() //跳到ul的父元素，也就是

    6.7K40

    前端成神之路-02_jQuery

    1.1.2 元素自定义属性值 attr() ​ 用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。 语法 ? ​...(详情参考源代码) 1.3. jQuery 元素操作 ​ jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。 1.3.1....遍历元素 ​ jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。 语法1 ? ​...创建、添加、删除 ​ jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下： 语法总和 ? ​ 注意：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。...获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准 // 这个方法只能获取不能设置偏移 console.log(

    3K10

    自写JQ控件-树状菜单控件

    真正使用的时候，后台只需要传data到前端，加载到页面就ok了。 这里面依赖了JQuery、XBGMenuTree.css、XBGMenuTree.js。 JQuery文件没什么好说的。...this.tree.find("ul ul[show='true']").show(); /* 显示 show 属性为 true 的子级菜单 */ }/* option....主要有这几点： （1）$(function() {}); 当文档载入完毕就执行的意思 （2）jQuery插件开发分为两种： 1、 类级别 类级别你可以理解为拓展jquery类，最明显的例子是$.ajax...虽然this随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象！好好体会吧。...（1）比如一些位置的知识： jquery获取元素位置的方法有两个： position方法： 获取匹配元素集中第一个元素的坐标，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。

    2.4K30

    jQuery常用函数汇总

    跨浏览器兼容性： jQuery的设计考虑了不同浏览器之间的兼容性，让开发者能够更好地处理不同浏览器的差异。插件生态系统： jQuery拥有丰富的插件生态系统，开发者可以利用这些插件来扩展和增强其功能。...()检测某个元素是否有某个类名，返回值为true或falseaddClass()给某个元素添加类名，返回值为jQuery对象removeClass()移除类名toggleClass()切换类名，有就删除...，没有就增加查找元素parent()找到该元素的父级元素next()找到该元素紧挨的下一个兄弟节点prev()找到该元素紧挨的上一个兄弟节点nextAll()找到该元素下面所有兄弟节点传入选择器，找下面符合选择器的兄弟节点...innerText相似attr()操作行内属性一个参数的时候 是获取对应属性名的属性值两个参数的时候 是设置对应属性若需要设置多个属性的时候 我们可以传递一个对象console.log($inp.attr...('type'))console.log($inp.attr('class','qqq'))console.log($inp.attr({ q:123, w:123, e:345}))$inp.attr

    70120

    JQuery的属性操作及事件

    （不会更改DOM结构），但是该属性是存在的，且可以获取输出②attr()：在元素本身是可以看到设置的属性，也可以获取输出二、遍历操作1、区别（1）隐式迭代：给同一类元素做同样的操作（2）遍历操作：给同一类元素做不同的事情...}) console.log($('div').offset());（2）position()：获取元素偏移【只能获取不能设置】返回被选元素带有定位的父级偏移坐标...,如果父级没有定位,那就是以文档为准②处理不同的程序 $('button').on({ click:function(){ console.log('点击成功');...插件库-收集最全最新最好的jQuery插件小伙伴可以在这个网站找喜欢的作品，下载压缩包后，可以直接看效果，而且都有源码的哦

    2.2K70

    jQuery基础

    // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :...位置： offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft...和 .position()的差别在于： .position()是相对于相对于父级元素的位移。...jQuery中使用attr对checkbox进行复制操作时会出bug，在3.x版本的jQuery中则没有这个问题。...(B)// 把A前置到B 添加到指定元素外部的后面 $(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面 添加到指定元素外部的前面 $(A).before

    2.6K120

    前端架构师之01_JQuery

    解决的问题：不同浏览器的兼容问题。...好处：可以轻松的获取DOM元素。 jQuery选择器的基本语法：$(选择器)。 根据选择器获取方式的不同大致可以将其分为以下几类。...获取父元素下的所有子元素 $(".box >.con") 选取class名为box下的所有class名为con的子元素（一级） prev + next 获取当前元素紧邻的一下同级元素 $("div +.../odd/公式) 选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个 带有“of-type” 与未带有“of-type”项的选择器有一定的区别。...7.3 jQuery UI jQuery UI是在jQuery基础上新增的一个库。 特点： 拥有强大的可扩展功能，具有吸引人的漂亮页面，能够更轻松地在网页中添加专业级的UI元素。

    3.1K00

    jQuery学习笔记

    它封装了很多 DOM 对象的操作，但是它和 DOM 对象之间是不同的。...从 DOM 对象转到 jQuery 对象： $(obj) 从 jQuery 对象转到 DOM 对象： obj[0] 比较正规地从 jQuery 对象到 DOM 的转换，是使用 jQuery 对象的 get...offset是相对于 document， position是相对于父级元素 4. 结构控制 1. 文本节点 .html().text() 设置和获取节点的文本值。...从功能上看，它们都可以添加回调函数，但是，方法的返回值是不同的。前组的返回值是原来的那个 defer对象，而 then返回的是一个新的 defer对象。...() 从调用链中移除指定的函数 callbacks.empty() 清空调用链 callbacks.disable() 关闭调用链的继续执行，新添加的函数也不会被执行 callbacks.lock()

    4.3K20

    Jquery的属性操作和DOM操作

    规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。 2. Function(index,currentclass)可选。规定返回需要添加/删除的一个或多个类名的函数。...中offset和position的区别     JQ中的两个方法都返回一个包含两个属性的对象－左边距和上边距，它们两个的不同点在于位置的相对点不同。    ...具体区别为：    1、position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。...二  DOM操作---节点插入     1.创建节点  $(html)     2 append() 和appendTo()  :在被选元素的尾部添加内容         不同：append（）能够使用函数来附加内容...删除所有子节点），绑定的事件，附加的数据都会移除         2 detach（）从DOM中删除所有匹配的元素（）与remove（）不同的是，绑定的事件，附加的数据都会被保留下来        3

    1.8K20

    JQuery选择器（中）

    中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"):选取所有该mix且具有attr属性的节点 $("mix...:选取单前节点的父节点 @:选取属性,这个在之前说过了(属性选择器) nodename:选取节点下的所有节点 jQuery中的应用: 根节点是很少用到的,常用的如下面的例子: $("div/p")相当于...jQuery对象包装的DOM元素.如: $("Hello").appendTo("#body");//把Hello添加到body元素中...这意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的元素(每次都是一个不同的匹配元素).而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数...: $("div").index($(".test"))[1] //表示从所有div节点中查找class属性为test的节点.并且找的是第二个节点(基数从0开始).返回值是该节点在div节点中的位置(基数也是从

    2.8K90

    jQuery选择器和选取方法

    一、jQuery选择器 在CSS3选择器标淮草案定义的选择器语法中，jQuery支持相当完整的一套子集，同时还添加了一些非标准但很有用的伪类。注意:本节讲述的是 jQuery选择器。...=val] 匹配没有attr属性、或attr属性的值不为val的所有元素((jQuery的扩展) [attr^=val] 匹配attr属性值以val开头的元素 [attr$=val] 匹配attr...注意:这与“:first”不同 :gt(n) 匹配基于文档顺序、序号从0开始的选中列表中序号大于n的元素( jQuery的扩展) :has(sel) 匹配的元素拥有匹配内嵌选择器sel的子孙元素...注意:这与“:last”不同 :lt(n) 匹配基于文档顺序、序号从0开始的选中列表中序号小于n的元素( jQuery的扩展) :not(sel) 匹配的元素不匹配内嵌选择器sel :nth..."div p")相同 该类别中的其他方法返回新的jQuery对象，代表当前选中元素集中每一个元素的子元素、兄弟元素或父元素。

    6.1K40

    jQuery

    $("div").filter(".c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签...}); 　　不同写法： 　　一句话的写法： 操作标签 样式操作 　　　　样式类（添加删除class类的值来修改样式） addClass();// 添加指定的CSS类名。...，不管子标签 有没有绑定事件，都会触发父级标签的点击事件，如果有，会先触发子标签的点击事件，然后触发父级标签的点击事件，不管子标签有没有点击事件，都会一级一级的还往上找点击事件 //所以我们要阻止这种事件冒泡...$("table").on("click", ".delete", function () { //中间的参数是个选择器，前面这个$('table')是父级标签选择器，选择的是父级标签，意思就是将子标签...(5000)；意思就是5秒内把你的高度变为0//还有如果你直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的 slideUp([s,[e],[fn]]) slideToggle([s

    10.2K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券