第4章 jQuery之dom操作
2016-03-07 22:20
781 查看
我们把页面上的元素分为3种节点:
1、元素节点 用过选择器获取
2、属性节点
3、文本节点
如:<div id="zhangsan"></div>,获取id的值
则:$("div").attr("id");
结果:zhangsan
设置:
1、attr(key,value)方法 --- 设置单个属性值
如:<img/>,为图像设置src属性
则:$("img").attr("src","test.jpg");
结果: <img src= "test.jpg" />
2、attr(properties) 方法 -- 设置多个属性值
如:<img/>,为图像设置src和alt属性
则:$("img").attr({ src: "test.jpg", alt: "Test Image" });
结果:<img src= "test.jpg" alt:="Test Image" />
3、attr(key,fn)方法 -- 函数的返回值作为属性值
如:<img src="test.jpg"/>,把src属性的值设置为title属性的值
则:$("img").attr("title", function() { return this.src });
结果:<img src="test.jpg" title="test.jpg" />
注意:这里的函数可以有两个参数:
index:当前元素的索引值
attr:原先的属性值
移除:removeAttr(name)
如:<img src="test.jpg"/>,图像的src属性删除
则:$("img").removeAttr("src");
结果:<img />
1、css() ---- 添加一个
如:$("#mover").css("font-size","30px");
2、addClass(class|fn) ---- 添加多个
如:$("#itcastit").addClass("spanone1")
注意:
1、多个用“逗号“隔开
2、fn:此函数必须返回一个或多个空格分隔的class名
有两个参数
index:索引值,
class:原先的class属性值
移除
removeClass([class|fn])
如:$("#itcastit").removeClass();
注意:
1、class 可以指定需移除的样式名,如果没有指定表示移除所有
2、fn:此函数必须返回一个或多个空格分隔的class名
有两个参数
index:索引值,
class:原先的class属性值
toggleClass(class|fn[,sw]):如果存在(不存在)就删除(添加)一个类。
class:类名
class,sw:
1:要切换的CSS类名.
2:用于决定元素是否包含class的布尔值。
如:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
表示每点击三下加上一次 'highlight' 类
function(index, class,switch)[, switch] :
1:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
2: 一个用来判断样式类添加还是移除的 boolean 值。
如:
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
表示:根据父元素来设置class属性
包含
hasClass() 是否有某样式
如:$("#itcastit").hasClass("spanone1")
如:<p>I would like to say: </p>,向其内部后面加入<b>Hello</b>
则:$("p").append("<b>Hello</b>");
结果:<p>I would like to say: <b>Hello</b></p>
2、prepend(content) ---- 追加到前面
如:<p>I would like to say: </p>,向其内部前面加入<b>Hello</b>
则:$("p"). prepend ("<b>Hello</b>");
结果:<p><b>Hello</b>I would like to say: </p>
3、appendTo(content) ---- 反追加到后面
如:把所有段落追加到ID值为foo的元素中
则:$("p").appendTo("div");
结果:
4、prependTo(content) ---- 反追加到前面
则:$("p").prependTo("#foo");
结果:<div id="foo"><p>I would like to say: </p></div>
如:<p>I would like to say: </p>,向其后面加入<b>Hello</b>
则:$("p").after("<b>Hello</b>");
结果:<p>I would like to say: </p><b>Hello</b>
注意:
这里还可以是函数,但是函数必须返回一个html字符串。
2、before(content|fn) --- 追加到前面
如:<p>I would like to say: </p>,向其前面加入<b>Hello</b>
则:$("p").before("<b>Hello</b>");
结果:<b>Hello</b><p>I would like to say: </p>
注意:
这里还可以是函数,但是函数必须返回一个html字符串。
3、insertAfter(content) --反追加到后面
如:<p>I would like to say: </p><div id="foo">Hello</div>
则:$("p").insertAfter("#foo");
结果:<div id="foo">Hello</div><p>I would like to say: </p>
4、insertBefore(content) --反追加到前面
如:<div id="foo">Hello</div><p>I would like to say: </p>
则:$("p").insertBefore("#foo");
结果:<p>I would like to say: </p><div id="foo">Hello</div>
如:<p>Hello</p> how are <p>you?</p>,删除p元素
则:$("p").remove();
结果:how are
注意:expr:用于筛选元素的jQuery表达式
如:<p class="hello">Hello</p> how are <p>you?</p>,带有hello类的段落删除
则:$("p").remove(".hello");
结果:how are <p>you?</p>
2、empty() -- 删除内容
如:<p>Hello, <span>Person</span> <a href="#">and person</a></p>,删除p元素的内容
则:$("p").empty();
结果:<p></p>
参数:
第1个:事件是否复制
第2个:子元素是否复制
如:<b>Hello</b><p>, how are you?</p>
则:$("b").clone().prependTo("p");
结果:<b>Hello</b><p><b>Hello</b>, how are you?</p>
如:<p>Hello</p><p>cruel</p><p>World</p>
则:$("<b>Paragraph. </b>").replaceAll("p");
结果:<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
如:<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
则:$("div").siblings()
结果:<p>Hello</p>, <p>And Again</p>
如:
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
则:$("div").siblings(".selected")
结果:<p class="selected">Hello Again</p>
1、元素节点 用过选择器获取
2、属性节点
3、文本节点
4.1 属性节点
4.1.1 一般
获取: attr(name)方法如:<div id="zhangsan"></div>,获取id的值
则:$("div").attr("id");
结果:zhangsan
设置:
1、attr(key,value)方法 --- 设置单个属性值
如:<img/>,为图像设置src属性
则:$("img").attr("src","test.jpg");
结果: <img src= "test.jpg" />
2、attr(properties) 方法 -- 设置多个属性值
如:<img/>,为图像设置src和alt属性
则:$("img").attr({ src: "test.jpg", alt: "Test Image" });
结果:<img src= "test.jpg" alt:="Test Image" />
3、attr(key,fn)方法 -- 函数的返回值作为属性值
如:<img src="test.jpg"/>,把src属性的值设置为title属性的值
则:$("img").attr("title", function() { return this.src });
结果:<img src="test.jpg" title="test.jpg" />
注意:这里的函数可以有两个参数:
index:当前元素的索引值
attr:原先的属性值
移除:removeAttr(name)
如:<img src="test.jpg"/>,图像的src属性删除
则:$("img").removeAttr("src");
结果:<img />
4.1.2 样式
添加1、css() ---- 添加一个
如:$("#mover").css("font-size","30px");
2、addClass(class|fn) ---- 添加多个
如:$("#itcastit").addClass("spanone1")
注意:
1、多个用“逗号“隔开
2、fn:此函数必须返回一个或多个空格分隔的class名
有两个参数
index:索引值,
class:原先的class属性值
移除
removeClass([class|fn])
如:$("#itcastit").removeClass();
注意:
1、class 可以指定需移除的样式名,如果没有指定表示移除所有
2、fn:此函数必须返回一个或多个空格分隔的class名
有两个参数
index:索引值,
class:原先的class属性值
toggleClass(class|fn[,sw]):如果存在(不存在)就删除(添加)一个类。
class:类名
class,sw:
1:要切换的CSS类名.
2:用于决定元素是否包含class的布尔值。
如:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
表示每点击三下加上一次 'highlight' 类
function(index, class,switch)[, switch] :
1:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
2: 一个用来判断样式类添加还是移除的 boolean 值。
如:
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
表示:根据父元素来设置class属性
包含
hasClass() 是否有某样式
如:$("#itcastit").hasClass("spanone1")
4.2 元素节点
4.2.1 获取
使用选择器获取,前面已经讲过,不清楚的朋友请看前面章节,4.2.2 创建
元素内部
1、append(content) ---- 追加到后面如:<p>I would like to say: </p>,向其内部后面加入<b>Hello</b>
则:$("p").append("<b>Hello</b>");
结果:<p>I would like to say: <b>Hello</b></p>
2、prepend(content) ---- 追加到前面
如:<p>I would like to say: </p>,向其内部前面加入<b>Hello</b>
则:$("p"). prepend ("<b>Hello</b>");
结果:<p><b>Hello</b>I would like to say: </p>
3、appendTo(content) ---- 反追加到后面
如:把所有段落追加到ID值为foo的元素中
则:$("p").appendTo("div");
结果:
4、prependTo(content) ---- 反追加到前面
则:$("p").prependTo("#foo");
结果:<div id="foo"><p>I would like to say: </p></div>
元素外部
1、after(content|fn) --- 追加到后面如:<p>I would like to say: </p>,向其后面加入<b>Hello</b>
则:$("p").after("<b>Hello</b>");
结果:<p>I would like to say: </p><b>Hello</b>
注意:
这里还可以是函数,但是函数必须返回一个html字符串。
2、before(content|fn) --- 追加到前面
如:<p>I would like to say: </p>,向其前面加入<b>Hello</b>
则:$("p").before("<b>Hello</b>");
结果:<b>Hello</b><p>I would like to say: </p>
注意:
这里还可以是函数,但是函数必须返回一个html字符串。
3、insertAfter(content) --反追加到后面
如:<p>I would like to say: </p><div id="foo">Hello</div>
则:$("p").insertAfter("#foo");
结果:<div id="foo">Hello</div><p>I would like to say: </p>
4、insertBefore(content) --反追加到前面
如:<div id="foo">Hello</div><p>I would like to say: </p>
则:$("p").insertBefore("#foo");
结果:<p>I would like to say: </p><div id="foo">Hello</div>
4.2.3 移除
1、remove([expr]) --- 删除如:<p>Hello</p> how are <p>you?</p>,删除p元素
则:$("p").remove();
结果:how are
注意:expr:用于筛选元素的jQuery表达式
如:<p class="hello">Hello</p> how are <p>you?</p>,带有hello类的段落删除
则:$("p").remove(".hello");
结果:how are <p>you?</p>
2、empty() -- 删除内容
如:<p>Hello, <span>Person</span> <a href="#">and person</a></p>,删除p元素的内容
则:$("p").empty();
结果:<p></p>
4.2.4 复制
clone([Even[,deepEven]])参数:
第1个:事件是否复制
第2个:子元素是否复制
如:<b>Hello</b><p>, how are you?</p>
则:$("b").clone().prependTo("p");
结果:<b>Hello</b><p><b>Hello</b>, how are you?</p>
4.2.5 替换
replaceAll(selector)如:<p>Hello</p><p>cruel</p><p>World</p>
则:$("<b>Paragraph. </b>").replaceAll("p");
结果:<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
4.2.6 遍历
siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
如:<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
则:$("div").siblings()
结果:<p>Hello</p>, <p>And Again</p>
如:
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
则:$("div").siblings(".selected")
结果:<p class="selected">Hello Again</p>
相关文章推荐
- 第3章 jQuery之选择器
- 第2章 jQuery之基础核心
- jQuery代码优化:事件委托
- 必须学会使用的35个Jquery小技巧
- jQuery和js 获取父级元素、子级元素、兄弟元素方法
- jQuery.extend和jQuery.fn.extend的区别
- jquery append执行script脚本
- jQuery 读取 JSONArray 的方法
- jQuery、PHP上传图片
- jQuery、PHP上传图片
- 10款无限滚动自动翻页jquery插件
- jquery mobile 入门5 (预加载与缓存页面)
- jquery的val()的简单使用(个人总结)
- jquery控制元素的隐藏和显示的几种方法。
- 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题
- jQuery对下拉框Select操作总结
- 在jquery中怎么使用css类名和id来获取元素?
- Syntax error, insert "]" to complete MemberExpression XXX.js (Java Web Project 导入Jquery的文件后报错)
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- jQuery中cookie详解