首页 / JQUERY / jQuery操作dom
jQuery操作dom
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery操作dom，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5772字，纯文字阅读大概需要9分钟。
内容图文
参考：jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
$(
function
(){
//1.操作元素属性
//1.1 设置或返回被选元素的属性值 attr：attr(name)获取值，attr(name,value)设置name的值为value
$(
"img"
).attr(
"src"
);
//获取img的src属性的值
$(
"img"
).attr(
"src"
,
"b.jpg"
);
//将img的src属性设置为b.jpg
$(
"img"
).attr({
src:
"b.jpg"
,
title:
"test"
});
//同时将img的src属性设置为b.jpg，title设置为test
$(
"img"
).attr(
"title"
,
function
(){
return
"test2"
;
});
//将匿名函数返回的值设置到title中
//1.2 删除属性 removeAttr(name)
$(
"img"
).removeAttr(
"title"
);
//删除img的title属性
//2.操作元素内容
//2.1 获取元素内容
var
strHtml = $(
"#div1"
).html();
//获取div1的html元素
var
strText = $(
"#div1"
).text();
//获取div1的text文本内容
//2.2 设置元素内容
var
strHtml = $(
"#div1"
).html(
"<span>span</span>"
);
//设置div1的html元素为<span>span</span>
var
strText = $(
"#div1"
).text(
"demo"
);
//设置div1的文本内容为demo
//3.获取元素的值val,val()获取元素的值 val(value);//设置元素的值
$(
"#select1"
).val();
//获取select选中的option的值
$(
"#input1"
).val(
""
);
//清空input1的值
//4.操作元素样式
$(
"p"
).css(
"color"
);
//获取p的color值
$(
"p"
).css(
"color"
,
"red"
);
//设置p的color值为red
$(
"p"
).css({color:
"red"
,background:
"green"
});
//设置p的color值为red,background的值为green
//5.操作class
//添加class
$(
"img"
).addClass(
"p2 p3"
);
//这是追加，不是覆盖。比如原来的<p >,执行完addClass后为<p >
//切换class
$(
"img"
).toggleClass(
"i"
);
//toggleClass也是追加，例如：
//比如原来是<img src="a.jpg" alt="aa">，执行完toggleClass后为<img src="a.jpg" alt="aa">
//删除class
$(
"img"
).removeClass(
"i"
);
//移除class，这里表示在的基础上移除了i，结果为
$(
"img"
).removeClass();
//不传参数则会删除所有class。结果就是
//6.内部插入节点
//在当前元素追加内容
$(
"p"
).append(
"<b>Hello</b>"
);
//向p段落追加<b></b>
//把所有匹配的元素追加到另一个指定的元素元素集合中。
$(
"p"
).appendTo($(
"#div1"
));
//把所有p段落，追加到#div1中
//向匹配的元素前置内容：放在匹配元素的最前面
$(
"p"
).prepend(
"<b>Hello</b>"
);
//在p元素内容的最前面添加<b>Hello</b>
//把所选元素追加到另一个元素中的最前面
$(
"p"
).prependTo(
"#foo"
);
//把所有p追加到#foo元素的最前面
//7.外部插入节点
//在匹配的元素之后插入同级html内容
$(
"p"
).after(
"<b>Hello</b>"
);
//源：<p>I</p> 插入后<p>I</p><b>Hello</b>
//在匹配的元素之后插入dom元素
$(
"p"
).after( $(
"#foo"
)[0] );
//源：<b >Hello</b><p>I</p> 插入后的p为：<p>I</p><b >Hello</b>
//在每个匹配的元素之前插入html内容。
$(
"p"
).before(
"<b>Hello</b>"
);
//源：<p>I</p> 插入后<b>Hello</b><p>I</p>
//在匹配的元素之前插入dom元素
$(
"p"
).before( $(
"#foo"
)[0] );
//源：<b >Hello</b><p>I</p> 插入后的p为：<b >Hello</b><p>I</p>
//把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
$(
"p"
).insertAfter(
‘#foo‘
);
//源：<p>I</p><div >Hello</div> 插入后的p为：<div >Hello</div><p>I</p>
//把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
$(
"p"
).insertBefore(
"#foo"
);
//源：<div >Hello</div><p>I</p> 插入后的p为：<p>I</p><div >Hello</div>
//8.复制节点：clone()克隆并且选中该元素
//只复制元素，不复制元素的事件。
//源内容：<b>Hello</b><p>, how are you?</p>
$(
"b"
).clone().prependTo(
"p"
);
//结果为：<b>Hello</b><p><b>Hello</b>, how are you?</p> 第二个b标签是没有事件的
//复制元素和元素的事件。
$(
"button"
).click(
function
(){
//源内容：<button>Clone Me!</button>
$(
this
).clone(
true
).insertAfter(
this
);
});
//复制了按钮，并且具有同样的事件
//9.替换节点
//替换单个元素为html元素
//案例：将所有的p替换成b
$(
"p"
).replaceWith(
"<b>b</b>"
);
//源：<p>p1</p><p>p2</p><p>p3</p> 替换后：<b>b</b><b>b</b><b>b</b>
//替换单个元素为html元素，值为函数返回值
//案例：将所有的p替换成b
$(
"p"
).replaceWith(
function
(){
return
"<a>a</a>"
});
//源：<p>p1</p><p>p2</p><p>p3</p> 替换后：<a>a</a>
//替换所有元素
//把所有的p替换成<b>替换后</b>
$(
"<b>替换后</b>"
).replaceAll(
"p"
);
//源：<p>p1</p><h1>h1</h1> 替换后：<b>替换后</b><h1>h1</h1>
//10.包裹节点
//使用html代码包裹整个元素
//用<div class=‘wrap‘></div>将所有的p包裹起来
$(
"p"
).wrap(
"<div class=‘wrap‘></div>"
);
//使用指定元素包裹整个元素
$(
"p"
).wrap(document.getElementById(
‘content‘
));
//使用回调函数包裹整个元素
$(
‘.inner‘
).wrap(
function
() {
return
‘<div class="‘
+ $(
this
).text() +
‘" />‘
;
});
//使用html包裹匹配元素的内容
//将p里的元素内容，用<b></b>包裹起来
$(
"p"
).wrapInner(
"<b></b>"
);
//源：<p>helloWord</p> 包裹后<p><b>helloWord</b></p>
//使用指定元素包裹匹配内容
$(
"p"
).wrapInner(document.createElement(
"b"
));
//使用回调函数包裹匹配内容
$(
‘p‘
).wrapInner(
function
() {
return
‘<b></b>‘
;
});
//11.遍历元素
//html内容为<img/><img/>
//遍历src属性为a.jpg
$(
function
(){
$(
"img"
).each(
function
(index, el) {
//index为每个元素的索引，el为当前元素(也可以直接用this)
console.info(index,el,
this
);
//el和this是相等的
this
.src =
"a.jpg"
;
//设两个图片的src属性
});
});
//遍历后结果为<img src="a.jpg"/><img src="a.jpg"/>
//12.删除元素
//remove()：从DOM中删除所有匹配的元素。
//删除p元素
$(
"p"
).remove();
//源：<p>Hello</p> how are <p>you?</p> 删除后：how are
$(
"p"
).remove(
".p1"
);
//源：<p>Hello</p> how are <p >you?</p> 删除后：<p>Hello</p> how are
//empty()：删除匹配的元素集合中所有的子节点。
//源内容：<p>Hello, <span>Person</span> <a href="#">and person</a></p>
$(
"p"
).empty();
//删除后：<p></p>
});
|
原文：http://www.cnblogs.com/meet/p/4748460.html
内容总结
以上是互联网集市为您收集整理的jQuery操作dom全部内容，希望文章能够帮你解决jQuery操作dom所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】