jQuery常见方法

一、遍历筛选元素的方法
- find()
- children()
- siblings()
- first()
- eq()
- parent()
- filter()
- end()
- has()
- prev()
二、获取设置标签属性值的方法
- attr()
- removeAttr()
- prop()
- removeProp()
- addClass()
- text()
- html()
- val()
三、获取和设置元素尺寸位置样式的方法
- offset()
- position()
- width()
- css()
四、HTML文档结构处理的方法
- append()
- prepend()
- after()
- before()
- wrap()
- remove()
- detach()
- replaceWith()
- replaceAll()
- empty()

一、遍历筛选元素的方法

find()

find(selector)方法实现的是找出正在处理的元素的后代元素的功能，如：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo").find("span").css({"border":"2px solid red"});});</script>

找出class为demo的元素底下的span标签，并设置相应的css样式：

children()

children(selector)方法实现的功能与find()类似，但是不同的是，children()方法取得的是子元素的合集，并且只能找到DOM树的下一级子元素，例如这里像上述代码设置demo底下的span标签：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo").children("span").css({"border":"2px solid red"});});</script>

这里就没有办法变色，因为span不是demo的下一级子元素，不加参数默认所有子元素都获取到：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo").children().css({"border":"2px solid red"});});</script>

siblings()

siblings(selector)方法实现的是筛选同辈元素的功能，例子如下：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo1").siblings().css({"border":"2px solid red"});});</script>

同样的，siblings()方法也可以添加参数，用于匹配指定的元素。

first()

first()方法实现的是获取匹配的第一个元素，相当于:first选择器，如：

 <script type="text/javascript">$("#btn2").click(function (){$("span").first().css({"border":"2px solid red"});$("li").last().css({"border":"2px solid red"});});</script>

匹配到的就是第一个span元素，last()实现的就是匹配最后一个元素，结果如下：

eq()

eq(index)方法实现的是获取第N个元素，与选择器:eq(index)类似，如：

 <script type="text/javascript">$("#btn2").click(function (){$("li").eq(0).css({"border":"2px solid red"});//注意这里的索引是和数组一样，从0开始});</script>

parent()

parent(selector)方法实现的是获取父元素的功能，但是只能沿DOM树向上遍历一级，若要再往上遍历，则需要使用parents()方法，如：

 <script type="text/javascript">$("#btn2").click(function (){$(".getParent").parent().css({"border":"2px solid red"});});</script>

这里只能匹配到上一级的相应父元素：

使用parents()可以匹配到祖先元素：

 <script type="text/javascript">$("#btn2").click(function (){$(".getParent").parents(".demo").css({"border":"2px solid red"});});</script>

filter()

filter(selector)方法实现的是筛选出与指定表达式匹配的元素集合的功能，如：

 <script type="text/javascript">$("#btn2").click(function (){$("ul li").filter(".demo1").css({"border":"2px solid red"});});</script>

end()

end()方法实现的是将匹配的元素列变为前一次的状态的功能，如：

 <script type="text/javascript">$("#btn2").click(function (){$("ul li").filter(".demo1").end().css({"border":"2px solid red"});});</script>

其实就是将filter()的匹配去除了，相当于匹配ul li并改变样式：

has()

匹配元素中拥有指定元素的元素：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo li").has("span").css({"border":"2px solid red"});});</script>

prev()

匹配指定元素的前一个元素，next()匹配下一个元素，如果是prevAll()或nextAll()的话就是匹配之前或之后所有的元素：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo1").prev().css({"border":"2px solid red"});$(".demo1").next().css({"border":"2px solid blue"});});</script>

二、获取设置标签属性值的方法

attr()

设置或返回被选元素的属性值，一般用于获取和设置自定义属性，如：

 <body><div class="demo"><input type="text" id="input1" value="文本输入框" /></div><button type="button" id="btn2" value="JQuery">实现方法</button><script type="text/javascript">$("#btn2").click(function (){$(".demo #input1").attr({value:'改变文本框的值'});});</script></body>

removeAttr()

删除被选元素的属性值，如：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo #input1").removeAttr("value");});</script>

成功删除value属性：

prop()

与attr()类似，设置或返回被选元素的属性值，一般用于设置和获取标签自带的属性，不作演示了。

removeProp()

与removeAttr()类似，删除被选元素的属性值，也是用于设置和获取标签自带的属性，不作演示了。

addClass()

添加类名，如：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo #input1").addClass("demo1");});</script>

<style type="text/css">.demo{width: 800px;height: 700px;background-color: #F0F8FF;border: 1px solid black;}#input1{height: 30px;width: 300px;padding: 5px;font-size: 20px;color: white;background-color: #556677;}.demo1{border: 2px solid red;}
</style>

也可以使用removeClass()、toggleClass()实现删除类名和切换类名，实现方式和添加类名类似，就不做演示了。

text()

获取文本值，如：

 <script type="text/javascript">$("#btn2").click(function (){console.log($(".demo").text());});</script>

html()

获取元素内容结构，如：

 <script type="text/javascript">$("#btn2").click(function (){console.log($(".demo").text());console.log($(".demo").html());});</script>

val()

获取输入框的值，如：

 <script type="text/javascript">$("#btn2").click(function (){console.log($("#input1").val());});</script>

三、获取和设置元素尺寸位置样式的方法

offset()

获取匹配元素在当前视口的相对偏移，返回一个位置对象，如：
（html代码与上述一致）

 <script type="text/javascript">$("#btn2").click(function (){console.log($("p").offset());});</script>

position()

获取匹配元素相对父元素的偏移，返回一个位置对象，如：

 <script type="text/javascript">$("#btn2").click(function (){console.log($("p").position());});</script>

width()

类似的还有height()，用于获取元素尺寸宽高等外加边距的值，width()和height()不包括border、margin、padding，innerWidth()、innerHeight() 返回匹配元素的内部宽度和高度，包括padding，不包含border、margin，outerWidth()、outerHeight()返回匹配元素的外部的宽度和高度，并且包含padding和border，但不包含margin，如：

 <script type="text/javascript">$("#btn2").click(function (){console.log($("p").width());console.log($("p").height());console.log($("p").innerWidth());console.log($("p").innerHeight());console.log($("p").outerWidth());console.log($("p").outerHeight());});</script>

 p{margin: 10px;padding: 5px;border: 1px solid black;}

css()

设置或获取元素样式，上述代码有使用到，这里就不再说明了，就是修改css的样式。

四、HTML文档结构处理的方法

append()

向每个匹配的元素内部后置添加内容，如：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo1").append("添加元素");});</script>

prepend()

向每个匹配的元素内部前置添加内容，如：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo1").prepend("添加元素");});</script>

after()

在每个匹配的元素之后插入内容，如：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo1").after("<li>添加元素</li>");});</script>

before()

在每个匹配的元素之前插入内容，如：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo1").before("<li>添加元素</li>");});</script>

wrap()

把所有匹配的元素用其他元素的结构化标记包裹起来，如：

 <script type="text/javascript">$("#btn2").click(function (){$("span").wrap("<div>包裹的div</div>");});</script>

remove()

从DOM中删除所有匹配的元素，可以移除元素，包括文本和子节点，还有元素的数据和事件。

detach()

从DOM中删除所有匹配的元素，可以移除元素和元素包括的文本和子节点，但是无法移除元素的数据和事件。

replaceWith()

把元素替换成新的内容，如：

 <script type="text/javascript">$("#btn2").click(function (){$(".demo1").replaceWith("<li>替换的文本</li>");});</script>

replaceAll()

替换元素，把元素替换成为新的HTML元素，如：

 <script type="text/javascript">$("#btn2").click(function (){$("<li class='demo1'>li结点 demo1</li>").replaceAll($("li"));});</script>

实现的是将所有的li标签都替换成，并且这里的replaceAll()前面的元素必须包含标签：

<li class='demo1'>li结点 demo1</li>

empty()

删除匹配元素集合中所有的子节点：

 <script type="text/javascript">$("#btn2").click(function (){$("ul div").empty();});</script>

成功清空：

jQuery常见方法汇总相关推荐

java 字符串拼接_JAVA字符串拼接常见方法汇总
字符串的拼接,常使用到的大概有4种方式: 1.直接使用"+"号 2.使用String的concat方法 3.使用StringBuilder的append方法 4.使用StringB ...
javascript常见方法汇总之一——数组字符串相关
(转载至慕课网) 原文链接:https://www.imooc.com/article/46933 github地址:https://github.com/dorseysen/notes-about- ...
正态检验 (Normality Test)——常见方法汇总与简述
前言在科学研究中,往往需要对数据进行差异性检验,而常用的参数检验需要数据服从正态分布,因此在决定是否采用参数检验之前需要先对数据进行正态性检验.这一步在任何统计学软件中(如SPSS.SAS.Ori ...
彩色图像到灰度转换常见方法汇总与对比
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达补一下基础知识,关注一波彩色转灰度觉得不错,请点[在看]支持! ...
Python 2D列表转1D列表的常见方法汇总
Win8/Win8.1常见错误代码的解决方法汇总
相信已经有不少网友早已升级到Windows 8.1,同时,伴随Windows XP操作系统服务终止,也会有部分老用户直接升级到最新系统.为了帮助大家更好的使用,今天笔者就把一些常见系统错误汇总并予以解 ...
主机关机后第二天就无法开机_工控机几种常见的在开机或关机后不能正常使用的故障处理方法汇总...
工控机开机启动时我们经常会碰到各种不能正常使用的问题,下面我们把这类故障现象及处理方法在这里给大家汇总分析一下,希望你在碰到类似的问题时,能给你们提供一定的帮助! 故障现象一: 工控机在开机过程中出现 ...
常见小票打印机打印故障及解决方法汇总视频教程
通过对"常见小票打印机故障及解决方法汇总视频教程"课程学习,达到以下目的:1.可以独立自主安装打印机驱动以及安装打印机硬件设备 2.可以独立自主排除常见打印机故障学习教程常见小 ...
安卓盒子刷rec linux启动,常见电视或盒子进入Recovery模式的方法汇总
智能电视或盒子出现故障时,我们比较常用的一个操作就是进入Recovery模式(工厂模式),但是很多用户并不知道具体如何操作,下面就看看以下教程吧! 一.创维进入Recovery模式需要用到遥控的快捷 ...

jQuery常见方法汇总