首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Jquery:从不同的父级添加.attr()

JQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画效果和AJAX交互的操作。它具有跨浏览器兼容性,并提供了丰富的API,使开发人员能够更轻松地操作DOM元素、处理事件和执行各种操作。

.attr()是JQuery提供的一个方法,用于获取或设置HTML元素的属性值。通过.attr()方法,可以获取元素的属性值,也可以设置元素的属性值。

从不同的父级添加.attr()意味着我们要在DOM中添加一个元素,并为该元素设置属性值。具体操作步骤如下:

  1. 创建一个新的HTML元素,可以使用JQuery提供的.createElement()方法或直接使用HTML标签字符串创建。
  2. 使用.attr()方法为该元素设置属性值。可以传入两个参数,第一个参数是要设置的属性名,第二个参数是属性值。

示例代码如下:

代码语言:txt
复制
// 创建一个新的div元素
var newDiv = $("<div>");

// 设置新元素的class属性为"my-class"
newDiv.attr("class", "my-class");

// 将新元素添加到指定的父级元素中
$("#parent-element").append(newDiv);

在上面的示例中,我们创建了一个新的div元素,并为其设置了class属性为"my-class"。然后,我们将这个新元素添加到了id为"parent-element"的父级元素中。

这样,我们就成功地从不同的父级添加了一个带有属性的元素。

推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云服务器(CVM):提供可扩展的云服务器实例,支持多种操作系统,可根据需求灵活选择配置和规模。了解更多信息,请访问:腾讯云服务器(CVM)产品介绍
  • 腾讯云对象存储(COS):提供高可靠性、低成本的对象存储服务,适用于存储和处理各种类型的数据。了解更多信息,请访问:腾讯云对象存储(COS)产品介绍
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

12.4K10

jQuery

jQuery 学习了jQuery感觉是真的很好用,感谢那些参与代码编写大佬们 1.1 初认识 1.1.1 入口函数 作用相当于onload事件,等dom结构渲染完毕即可执行 但又有所不同 onload...$(‘li:last’) 获取最后一个li元素 :eq(index) $(“li:eq(2)”) 获取到li元素中,选择索引号为2元素,索引号index0开始。...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()获取带有定位偏移 获取位置是相对于带有定位元素

8.4K10

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做为偏移量,downporision参照物是它,所以也就是直接为0,如果是以body那就是200 height widht // 高度height console.log($(

6K20

Python全栈之jQuery笔记

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

5.4K40

前端成神之路-02_jQuery

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

2.2K10

自写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方法: 获取匹配元素集中第一个元素坐标,获取是该元素相当于最近一个拥有绝对或者相对定位元素偏移位置。

1.9K30

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

12820

JQuery属性操作及事件

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

1.7K70

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

1.9K120

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()

3.5K20

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.3K20

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节点中位置(基数也是

2K90

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

8.9K20

JQuery

; }); ``` jQuery 属性操作 .html() .prop() .attr() 获取自定义标签值,用法和prop一样 循环 each $(function(){ $(...submit() 提交表单 表单验证 规则: var re = new RegExp(‘规则’,’可选参数’) var re =/规则/参数; 事件冒泡 作用: 事件冒泡允许多个被集中处理(把事件处理器添加到一个元素上...,避免把事件处理器添加到多个子元素上),它还可以让你在对象层不同级别捕获事件。.../根标签 追加节点:同级追加和自己追加(前面 后面) 步骤: 声明变量保存节点数据 使用追加函数追加节点 子追加: append()和appendTo():在现存元素内部,后面放入元素 prepend...()和prependTo():在现存元素内部,从前面放入元素 追加: after()和insertAfter():在现存元素外部,后面放入元素 before()和insertBefore():

94421

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对象,代表当前选中元素集中每一个元素子元素、兄弟元素或元素。

5.1K40
领券