第二章 jQuery基本操作
DOM操作分类
jQuery中的DOM操作
设置和获取样式值
- 使用
css()
为指定的元素设置样式值或获取样式值
css(name,value) ; //设置单个属性
或
css({name:value, name:value,name:value…}) ; //同时设置多个属性
css(name) //获取属性值
$(this).css("border","5px solid #f5f5f5");
或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"}); //opacity:设置透明度
追加和移除样式
- 追加样式
$(selector).addClass(class);
或
$(selector).addClass(class1 class2 … classN);
示例:
//css
.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }
//js
$("h2").mouSEOver(function() {
$("p").addClass("content border");
});
- 移除样式
$(selector).removeClass("class") ;
或
$(selector).removeClass("class1 class2 … classN ") ;
示例:
$("h2").mouSEOut(function() {
$("p").removeClass("text content");
});
切换样式
toggleClass()
- 模拟了addClass()与removeClass()实现样式切换的过程
$(selector).toggleClass(class);
示例:
$("h2").click(function() {
$("p").toggleClass("content border");
});
判断是否含指定的样式
hasClass( )
方法来判断是否包含指定的样式
$(selector). hasClass(class);
示例
$("h2").mouSEOver(function() {
if(!$("p").hasClass("content")){
$("p").addClass("content");
}
});
$("h2").mouSEOut(function() {
if($("p").hasClass("content")) {
$("p").removeClass("content");
}
});
内容操作
HTML代码操作
html()
可以对HTML代码进行操作,类似于JS中的innerHTML
$("div.left").html(); //获取元素中的HTML代码
或
$("div.left").html("<div class='content'>…</div>"); //设置元素中的HTML代码
标签内容操作
$("div.left").text(); //获取元素中的文本内容
或
$("div.left").text("<div class='content'>…</div>"); //设置元素中的文本内容
html( ) 和text( )方法的区别
语法格式 | 参数说明 | 功能描述 |
---|---|---|
html( ) | 无参数 | 用于获取第一个匹配元素的HTML内容或文本内容 |
html (content) | content为元素的HTML内容 | 用于设置所有匹配元素的HTML内容或文本内容 |
text( ) | 无参数 | 用于获取所有匹配元素的文本内容 |
text (content) | content为元素的文本内容 | 用于设置所有匹配元素的文本内容 |
属性值操作
$(this).val(); //获取元素的value属性值
或
$(this).val(value); //设置元素的value属性值
节点操作
- jQuery中节点操作
- 查找节点
- 创建节点
- 插入节点
- 删除节点
- 替换节点
- 复制节点
创建节点元素
var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了!</li>");
插入节点
- 元素内部插入子节点
语法 | 功能 |
---|---|
after(content) | ( A ) . a f t e r ( B ) 表示将 B 插入到 A 之后如: (A).after (B)表示将B插入到A之后 如: (A).after(B)表示将B插入到A之后如:(“ul”).after($newNode1); |
insertAfter(content) | ( A ) . i n s e r t A f t e r ( B ) 表示将 A 插入到 B 之后如: (A). insertAfter (B)表示将A插入到B之后 如: (A).insertAfter(B)表示将A插入到B之后如:newNode1.insertAfter(“ul”); |
before(content) | ( A ) . b e f o r e ( B ) 表示将 B 插入至 A 之前如: (A). before (B)表示将B插入至A之前 如: (A).before(B)表示将B插入至A之前如:(“ul”).before($newNode1); |
insertBefore(content) | ( A ) . i n s e r t B e f o r e ( B ) 表示将 A 插入到 B 之前如: (A). insertBefore (B)表示将A插入到B之前 如: (A).insertBefore(B)表示将A插入到B之前如:newNode1.insertBefore(“ul”); |
删除节点
替换节点
- replaceWith()和replaceAll()用于替换某个节点
var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");
//两者的关系类似于append()和appendTo()
复制节点
- clone()用于复制某个节点
$(selector).clone([includeEvents]); //参数ture或flase, true复制事件处理,flase时反之
示例:
$(".gameList li:eq(1)").click(function(){
$(this).clone(true).appendTo(".gameList");
})
$(".gameList li:eq(2)").click(function(){
$(this).clone(false).appendTo(".gameList");
})
属性操作
获取与设置元素属性
$(selector).attr([name]); //获取属性值
或
$(selector).attr({[name1:value1]…[nameN:valueN]}); //设置多个属性的值
示例:
$(".contain img").attr({width:"200",height:"80"});
删除元素属性
$(selector).removeAttr(name);
示例:
$(".contain img").removeAttr("alt"); //删除元素的alt属性
节点遍历
- 遍历子元素
- 遍历同辈元素
- 遍历前辈元素
- 其他遍历方法
遍历子元素
$(selector).children([expr]);
示例:
var $section =$("section").children(); //获取<section>的子元素,但不包含子元素的子元素
alert($section.length);
遍历同辈元素
- jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
语法 | 功能 |
---|---|
next([expr]) | 用于获取紧邻匹配元素之后的元素 $(“li:eq(1)”).next().addClass(“orange”); |
prev([expr]) | 用于获取紧邻匹配元素之前的元素 $(“li:eq(1)”).prev().addClass(“orange”); |
slibings([expr]) | 用于获取位于匹配元素前面和后面的所有同辈元素 $(“li:eq(1)”).siblings().addClass(“orange”); |
遍历同辈元素
$("li:eq(1)").parent().addClass("orange");
$("li:eq(1)").parents().addClass("orange");
其他遍历方法
- each( ) :规定为每个匹配元素规定运行的函数
$(selector).each(function(index,element)); //选择器的位置,当前的元素
示例:
$("img").click(function(){
$("li").each(function(){
var str=$(this).text()+"<br>";
$("section").append(str);
})
});
- end( ):结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态
$(".contain:header").css({"background":"#2a65ba","color":"#ffffff"});
$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");
$(".gameList li:last").css("border","none");
css-DOM操作
语法 | 功能 |
---|---|
css() | 设置或返回匹配元素的样式属性 |
height([value]) | 设置或返回匹配元素的高度 |
width([value]) | 设置或返回匹配元素的宽度 |
offset([value]) | 返回以像素为单位的top和left坐标。仅对可见元素有效 |
offsetParent( ) | 返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素 |
position( ) | 返回第一个匹配元素相对于父元素的位置 |
scrollLeft([position]) | 参数可选。设置或返回匹配元素相对滚动条左侧的偏移 |
scrollTop([position]) | 参数可选。设置或返回匹配元素相对滚动条顶 |
原文地址:https://www.jb51.cc/wenti/3286360.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。