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…

cs硕士妹子找工作经历【阿里人搜等互联网】

摘自 北邮人论坛 分享他人成功的求职经历。原文如下&#xff1a; 唉&#xff0c;妹子本来是本着写面经的态度与大家分享&#xff0c;之自己情况也是想说明一啥都不会的菜鸟在悲催的逆境下也可以凭自身努力找到offer&#xff0c;没想到被评为作秀。。。妹子能力背景确实和说的…

web开发项目,web前端CSS全局样式,面试必问

前言 表格是网页制作中使用最多的工具之一&#xff0c;在制作网页时&#xff0c;使用表格可以更清晰地排列数据。但是在实际制作过程中&#xff0c;表格更多用在网页布局的定位上。很多网页都是以表格布局的。这是因为表格在文本和图像的位置控制方面都有很强的功能。 字节跳…

Java中key可以重复的Map集合:IdentityHashMap

范例&#xff1a;Map中的key不允许重复&#xff0c;重复就是覆盖 [java] view plaincopy package org.lxh.demo13.mapdemo; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Set; class Person { …

牛客网笔记之数组(一)

最近开始在“牛客网”上做题&#xff0c;希望通过日积月累&#xff0c;每天记录一点小知识&#xff0c;每天前进一小步。 今天练习的题目关于数组。 1. 数组存储&#xff1a;链式存储、顺序存储 线性表逻辑上是线性的&#xff0c;存储上可以是顺序的&#xff0c;可以是链式的…

社交网络节点理论

1.顿巴数 每个人的朋友圈子对多能达到150个人。&#xff08;密友3-5人&#xff0c;好友30-50人&#xff0c;其他100-150人&#xff09;纵使高科技带来的人际圈越来越大&#xff0c;但是人脑的容量是有限的&#xff0c;你也不可能和这么多人维持一定的人际关系&#xff08;没有人…

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

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

国内互联网公司算法机器学习岗(阿里星)面试总结

从2015年8月到2015年10月&#xff0c;花了3个月时间找工作&#xff0c;先后通过内推参加了美团、阿里蚂蚁金服、京东、腾讯、今日头条、Growing IO、微软这7个公司的面试&#xff0c;同时参加了网易游戏、LinkedI In中国这2个公司的笔试&#xff0c;拿到比较优质的offer是京东S…

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

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

2016面试——腾讯、蚂蚁金服、蘑菇街

腾讯TST技术面&#xff1a; 先罗列一下问题吧: 编程语言编译的过程 同样的逻辑,golang的二进制代码比C语言的二进制代码长很多.试分析原因 项目 ,三个项目都有聊.因为现场面,可以用纸写,所以描述的更清楚些 N * N的方格纸,里面有多少个正方形 两个数组求交集 什么样的…

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

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

牛客网笔记之JAVA运算符

计算机的最基本用途之一就是执行数学运算&#xff0c;作为一门计算机语言&#xff0c;Java也提供了一套丰富的运算符来操纵变量。我们可以把运算符分成以下几组&#xff1a; 算术运算符 关系运算符 位运算符 逻辑运算符 赋值运算符 其他运算符 逻辑运算符结果 ~a是按位非&#…

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 必须惟…

matlab实现一元线性回归和多元线性回归

在回归分析中,如果有两个或两个以上的自变量,就称为多元回归。事实上,一种现象常常是与多个因素相联系的,由多个自变量的最优组合共同来预测或估计因变量,比只用一个自变量进行预测或估计更有效,更符合实际。 在实际经济问题中,一个变量往往受到多个变量的影响。例如,家…

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

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