jQuery学习笔记(二)—— 操作DOM元素

使用attr()方法控制元素的属性

attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值。

例如,使用attr(属性名)的格式获取页面中<a>元素的“href”属性值,并将该值的内容显示在<span>元素中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过attr()方法可以方便地获取元素中指定属性名称的内容,并将获取的内容通过html()方法显示在页面中。

操作元素的内容

使用html()text()方法操作元素的内容,当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容。

例如,分别使用html()text()方法获取一个元素的内pww,并将获取的内容显示在不同的<div>元素中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,html()方法可以获取元素的HTML内容,因此,原文中的格式代码也被一起获取,而text()方法只是获取元素中的文本内容,并不包含HTML格式代码,所以它显示的内容并没有变“歪”。

操作元素的样式

通过addClass()css()方法可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。

例如,使用addClass()方法,改变<div>元素的背景色和文字颜色,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过addClass()方法为<div>元素增加了两个样式名称,从而改变了<div>元素的背景和文字颜色,增加多个样式名称时,要用空格隔开。

css()方法和addClass方法用法类似,只是需要去设置具体样式了。

移除属性和样式

使用removeAttr(name)removeClass(class)分别可以实现移除元素的属性和样式的功能,前者方法中参数表示移除属性名,后者方法中参数则表示移除的样式名

例如,使用removeAttr()方法移除<a>元素中的“href”属性,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用removeAttr()方法移除元素的“href”属性后,再次显示元素的“href”属性值时,则为空值,<a>元素中的文字也丢失可点击的效果。

使用append()方法向元素内追加内容

append(content)方法的功能是向指定的元素中追加内容,被追加的content参数,可以是字符、HTML元素标记,还可以是一个返回字符串内容的函数。

例如,在页面的<body>元素中追加一个具有“id”、“title”属性和显示内容的<div>元素,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于使用append()方法在<body>元素中追加了一些HTML 元素标记,因此追加后,这些元素标记直接生成对应的元素和属性显示在页面中。

使用appendTo()方法向被选元素内插入内容

appendTo()方法也可以向指定的元素内插入内容,它的使用格式是:

$(content).appendTo(selector)

参数content表示需要插入的内容,参数selector表示被选的元素,即把content内容插入selector元素内,默认是在尾部。

例如,使用appendTo()方法,将<div>外的<span>元素插入<div>内,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用appendTo()方法将类别名为“red”的<span>元素插入到<div>元素的尾部,相当于追加的效果。

使用before()和after()在元素前后插入内容

使用before()after()方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容,调用格式分别为:

$(selector).before(content)$(selector).after(content)

其中参数content表示插入的内容,该内容可以是元素或HTML字符串。

例如,调用before()方法在一个<span>元素插入另一个<span>元素,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用before()方法将HTML格式的内容插入到原有<span>元素内容之前,而并不仅是它的内部文本。

使用clone()方法复制元素

调用clone()方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性,它的调用格式为:

$(selector).clone()

其中参数selector可以是一个元素或HTML内容。

例如,使用clone()方法复制页面中的一个<span>元素,并将复制后的元素追加到页面的后面,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用clone()方法复制元素时,不仅复制了该元素的文本和节点,还将它的“title”属性也一起复制过来了。

替换内容

replaceWith()replaceAll()方法都可以用于替换元素或元素中的内容,但它们调用时,内容和被替换元素所在的位置不同,分别为如下所示:

$(selector).replaceWith(content)$(content).replaceAll(selector)

参数selector为被替换的元素,content为替换的内容。

例如,调用replaceWith()方法将页面中<span>元素替换成一段HTML字符串,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用replaceWith()方法替换类别名为“green”的<span>元素,替换之后,旧元素完全由新替换的元素所取代。

使用wrap()和wrapInner()方法包裹元素和内容

wrap()wrapInner()方法都可以进行元素的包裹,但前者用于包裹元素本身,后者则用于包裹元素中的内容,它们的调用格式分别为:

$(selector).wrap(wrapper)$(selector).wrapInner(wrapper)

参数selector为被包裹的元素,wrapper参数为包裹元素的格式。

例如,调用wrap()方法,将<span>用<div>元素包裹起来,如下图所示:

在浏览器中显示的效果:

从图中可以看出,红色区域的<span>元素被绿色边框的<div>元素通过wrap()方法包裹起来。

使用each()方法遍历元素

使用each()方法可以遍历指定的元素集合,在遍历时,通过回调函数返回遍历元素的序列号,它的调用格式为:

$(selector).each(function(index))

参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。

例如,遍历页面中的<span>元素,当元素的序列号为2时,添加名为“focus”的样式,如下图所示:

在浏览器中显示的效果:

从图中可以看出,在使用each()方法遍历<span>元素时,回调函数中的“index”参数为元素的序列号,它从0开始,当为2时,表示第3个<span>元素增加样式。

使用remove()和empty()方法删除元素

remove()方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()方法则只删除所选元素的子元素。

例如,调用remove()方法删除<span>元素中类别名为“red”的,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用remove(".red")方法只是把<span>元素中类别名为“red”的这部分元素给删除了。








本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/386091.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web开发软件,8个优秀的CSS实践,附面试题

一.为什么要学习前端开发&#xff1f; 你可能是因为兴趣&#xff0c;完成一个网站、页面、功能的成就感。你也可能是因为现在前端岗位火爆&#xff0c;就业率高。不管是因为什么&#xff0c;只要找准了目标&#xff0c;学就是了&#xff01; 突破困境&#xff1a; 1. 提升学…

jQuery 学习笔记(三)——事件与应用

页面加载时触发ready()事件 ready()事件类似于onLoad()事件&#xff0c;但前者只要页面的DOM结构加载后便触发&#xff0c;而后者必须在页面全部元素加载成功才触发&#xff0c;ready()可以写多个&#xff0c;按顺序执行。此外&#xff0c;下列写法是相等的&#xff1a; $(docu…

web开发软件,HTML如何添加锚点,成功入职阿里

前言 正式学习前端大概 3 年多了&#xff0c;接触前端大概 4 年了&#xff0c;很早就想整理这个书单了&#xff0c;因为常常会有朋友问&#xff0c;前端该如何学习&#xff0c;学习前端该看哪些书&#xff0c;我就讲讲我学习的道路中看的一些书&#xff0c;虽然整理的书不多&a…

疯狂涨知识!Java多态实现原理技术总监都拍手叫好

##前言 多态是Java语言重要的特性之一&#xff0c;它允许基类的指针或引用指向派生类的对象&#xff0c;而在具体访问时实现方法的动态绑定。Java对于方法调用动态绑定的实现主要依赖于方法表&#xff0c;但通过引用调用&#xff08;invokevitual&#xff09;和接口引用调用&am…

疯狂涨知识!「高并发秒杀」微信抢红包实战案例帮你突破瓶颈

推荐阅读&#xff1a; 阿里二面凉经&#xff1a;设计模式缓存Spring虚拟机MySQL中间件并发等难题&#xff0c;全部迎刃而解阿里巴巴字节跳动那些大厂必问的HTTP该怎么学&#xff1f;我建议你看看这篇文章&#xff01;蚂蚁、字节、PDD社招面经Java岗&#xff08;分布式线程安全…

Android开发;Activity-Hook你了解多少?一起来debug

享学课堂特邀作者&#xff1a;周周 转载请声明出处&#xff01; 前言 手把手讲解系列文章&#xff0c;是我写给各位看官&#xff0c;也是写给我自己的。文章可能过分详细&#xff0c;但是这是为了帮助到尽量多的人&#xff0c;毕竟工作5,6年&#xff0c;不能老吸血&#xff0c;…

Android架构师谈:View-Pager-性能优化之-无限循环

作者&#xff1a;享学课堂Alvin老师 转载请声明出处&#xff01; ViewPager实现无限滑动 **方案一&#xff1a;**将viewpager上限设置成一个很大的数&#xff0c;第一个页面设置到中间。然后滑动的时候&#xff0c;用当前的序号与viewpager页面数取余得到目标页面的序号&#…

你知道如何用面向对象思想写好并发编程吗?

在工作中&#xff0c;我发现很多人在设计之初都是直接按照单线程的思路来写程序的&#xff0c;而忽略了本应该重视的并发问题&#xff1b;等上线后的某天&#xff0c;突然发现诡异的 Bug&#xff0c;再历经千辛万苦终于定位到问题所在&#xff0c;却发现对于如何解决已经没有了…

你知道怎么在生产环境下部署tomcat吗?

享学课堂特邀作者&#xff1a;老顾 转载请声明出处&#xff01; 一、前言 小伙伴们在网上看到的很多文章&#xff0c;都是对tomcat的一些介绍&#xff0c;什么配置啊&#xff0c;怎么启动。其实在生产环境中怎么部署&#xff0c;和网上介绍的有很大区别。这篇文章老顾就带着大…

浅谈HashMap

Java集合类的整体架构 比较重要的集合类图如下&#xff1a; 有序否 允许元素重复否 Collection 否 是 List 是 是 Set AbstractSet 否 否 HashSet TreeSet 是&#xff08;用二叉树排序&#xff09; Map AbstractMap 否 使用 key-value 来映射和存储数据&#xff0c; Key 必须惟…

互联网寒冬!“996”为什么还没实行?我还等着早点下班呢!

“喊了十多个月的‘996’&#xff0c;说要实行‘996’&#xff0c;上班上到现在&#xff0c;影子都没看到&#xff0c;我还能早点下班吗&#xff1f;” 我一个在广州上班的朋友小李&#xff0c;在我去广州出差期间&#xff0c;与他聊天的时候发出了这样的牢骚&#xff0c;我刚…

matlab求解常微分方程组/传染病模型并绘制SIR曲线

看了很多关于传染病模型的matlab程序,大都是绘制出两条曲线(I、S)的,本文最大的不同是绘出SIR三条曲线。 先给出SIR微分方程组 函数文件: run的程序:

互联网寒冬!技术站最全MySQL数据库实战规范

享学课堂特邀作者&#xff1a;老顾 转载请声明出处&#xff01; 前言 我们小伙伴们经常使用到mysql数据库&#xff0c;一般就这么一用&#xff0c;很少会考虑mysql里面的细节问题&#xff0c;如sql语句的规范&#xff0c;或索引有没有起到相应的效果&#xff0c;今天老顾就给大…

SQL求一个表中非重复数据及其出现的次数

mysql中&#xff0c;我们可以用distinct求不重复的数据有多少&#xff0c;也可以用group by。 这里有个例子&#xff0c;如下表sheet1&#xff0c;共有5411条数据 查询语句 共有3446条不重复数据&#xff0c;每条不重复数据出现的次数在第二列显示&#xff1a;

什么是微服务扩展性和高可用-可扩展性、高可用性和性能

欢迎关注专栏&#xff1a;Java架构技术进阶。里面有大量batj面试题集锦&#xff0c;还有各种技术分享&#xff0c;如有好文章也欢迎投稿哦。 Overview 可扩展性、高可用性和性能 术语可扩展性、高可用性、性能和关键任务对于不同的组织或组织内的不同部门来说可能意味着不同的…

SQL实现当前行等于前面两行数据之和

sql实现类似斐波那契数列的功能&#xff0c;即当前数据等于前面两个数据之和&#xff0c;详看本文例子 原表&#xff1a; sql语句&#xff08;此处要熟悉JION ON的用法&#xff09; 结果

【大牛系列教学】靠着这份面试题跟答案

开篇闲扯 打工人&#xff0c;打工魂&#xff0c;我们生而人上人。当“资本主义”逐渐禁锢我们人&#xff08;大&#xff09;上&#xff08;韭&#xff09;人&#xff08;菜&#xff09;肉体的时候&#xff0c;那一刻我才明白那个日不落帝国资本主义收割机瑞民族之光幸瑞幸咖啡…

【工作感悟】成功入职阿里月薪45K

前言 苦苦寻觅找工作之间&#xff0c;殊不知今日之时乃我心之痛&#xff0c;难道是我不配拥有工作嘛。自面试后他所谓的等待都过去一段时日&#xff0c;可惜在下京东上的小金库都要见低啦。每每想到不由心中一紧。正处为难之间&#xff0c;手机忽然来了个短信预约后续面试。 我…

【工作经验分享】不会真有人觉得mybatis很难学吧

什么是自旋锁和互斥锁&#xff1f; 由于CLH锁是一种自旋锁&#xff0c;那么我们先来看看自旋锁是什么&#xff1f; 自旋锁说白了也是一种互斥锁&#xff0c;只不过没有抢到锁的线程会一直自旋等待锁的释放&#xff0c;处于busy-waiting的状态&#xff0c;此时等待锁的线程不会…

【工作经验分享】这些新技术你们都知道吗

前言 近年来&#xff0c;微服务架构(Microservices Architecture)已经成为一种主流的软件开发方法论&#xff0c;所谓微服务( Microservices ),就是一些具有足够小的粒度、能够相互协作且自治的服务体系。 微服务架构基于分布式系统&#xff0c;同时借助了面向服务架构和企业服…