JQuery的Dom操作

我就是我 2022-07-16 05:11 310阅读 0赞

JQuery的Dom操作

小编最近参与了一个网站项目的开发,所以遇到了大量的js操作。让小编大为挠头。JQuery这东西,我貌似曾经熟练过一阵子。后来太久不写就给忘了。(悲伤小编脑子不好,从小就这样。)今天重新整理一下,JQuery的Dom操作。希望能对自己有点帮助。

先说几个基础操作

1.html()

使用html()方法读取或者设置元素的innerHTML。

就是相当于javascript里头的innerHTML。

2.text()

使用text()方法读取或者设置元素的innerText。

就是相当于javascript里头的innerText。

3.attr()

使用attr()方法读取或者设置元素的属性,对于jQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作。

4.removeAttr

使用removeAttr删除属性。删除的属性在源代码中看不到,这是和清空属性的区别。attr(‘name’,’’)

动态创建Dom节点

1.$(html字符串)

使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象。

然后调用可以append等方法将新创建的节点添加到Dom中。

$()创建的就是一个jQuery对象,完全可以进行操作。

2.小经验

使用$(‘’);,而不要在创建好后通过attr(‘name’,’gender’).

//通过attr()设置name,在IE6下有问题。我用的版本是这样,新版本我不晓得。

clipboard

还有就是,我说的是name属性,上面例子中的 type属性,是可以用attr的。

追加(父元素.append(子元素))

1.添加小儿子 append

append方法用来在元素的末尾追加元素(最后一个子节点)。增加元素末尾(儿子)

2.添加大儿子 prepend

prepend,在元素的开始添加元素(第一个子节点)。增加元素开始(儿子)

3.添加弟弟 after

after,在元素之后添加元素(添加兄弟)增加元素后面(兄弟)

4.添加哥哥 before

before:在元素之前添加元素(添加兄弟)增加元素前面(兄弟)

将自己追加到某元素(子元素.appendTo(父元素))

1.成为小儿子 appendTo

子元素.appendTo(父元素);//主动巴结!到最后一个

2.成为大儿子 prependTo

子元素.prependTo(父元素);//主动巴结到第一个。

3.成为弟弟 insertBefore

(*)A.insertBefore(B);将A加到到B的前面,等同于B.before(A);

4.成为哥哥 insertAfter

(*)X.insertAfter(Y);将X加到到Y的后面,等同于Y.after(X);

删除节点

1.empty() 清空

清空某元素下的所有子节点

内部实现:

while(ele.firstChild){

ele.removeChild(ele.firstChild);

}//不同版本可能不一样。

![clipboard[1]]clipboard_1_clipboard_1

2.remove(selector)

删除当前元素,返回值为被删除的元素。

还可以继续使用被删除的节点。比如重新添加到其他节点下:

节点操作

1.替换节点

$(“br”).replaceWith(“


“);


替换br

2.替换所有节点

$(‘
‘).replaceAll(‘hr’); //调用者也得是选择器选择到的元素。


元素替换所有的hr

3.包裹节点

wrap()方法用来将所有元素逐个用指定标签包裹:

wrapAll()

wrapInner()//在内部围绕

样式操作

1.attr()

1)获取样式 attr(“class”)。

2)设置样式attr(“class”,”myclass”)。

/*注意:一个参数是获取,两个参数是设置*/

2.追加样式

追加样式addClass(“myclass”)(不影响其他样式)

这里说的样式,是css中写好的。myclass是css的选择器名

3.移除样式

移除样式removeClass(“myclass”),

4.切换样式

切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)

toggleClass(“myclass”)。

5.判断

判断是否存在样式:hasClass(“myclass”)

作者: 大黑兔

出处: http://www.cnblogs.com/mcad/

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

分类: JQuery

标签: JQuery Dom操作

好文要顶 关注我 收藏该文 icon_weibo_24.png wechat.png

u395192.jpg_id_06135139

大黑兔
关注 - 14
粉丝 - 109

+加关注

2

0

« 上一篇: 详细说说如何生成验证码—ASP.NET细枝末节(4)
» 下一篇: JQuery对RadioButton和CheckButton的操作

发表评论

表情:
评论列表 (有 0 条评论,310人围观)

还没有评论,来说两句吧...

相关阅读

    相关 JQueryDom操作

    [JQuery的Dom操作][JQuery_Dom]    小编最近参与了一个网站项目的开发,所以遇到了大量的js操作。让小编大为挠头。JQuery这东西,我貌似曾经熟练过一

    相关 jquery 操作DOM

    操作属性 -------------------- 通过attr可以获取标签的属性值, 还可以设置属性值, 和css()类似. 测试代码如下 <div c