接着上一节,介绍几个常用的jQuery的DOM操作方法
<body> <div> <p title="title"><b>test</b></p> <h3><b>h3</b></h3> <div> <input type="text" name="textInput" value="hello">input <input type="radio" name="radioInput" value="1">radio1 <input type="radio" name="radioInput" value="2" checked="checked">radio2 </div> </div> </body>
1、html():获取或者修改指定元素的html内容,类似于js原生的innerHTML属性
alert($("p").html());//获取p标签的html内容并输出<b>test</b> $("p").html("<strong>title</strong>");//修改p标签的html内容 p标签变为: <p title="title"><strong>title</strong></p>
2、text():获取或者修改指定元素的文本内容,类似于js原生的innerText属性
alert($("p").text());//获取p标签的文本内容并输出test $("p").text("update title");//修改p标签的文本内容 p标签变为: <p title="title"><b>update title</b></p>
3、val():获取指定文本框、下拉框、复选框、单选框等的value值,类似于js原生的value属性
var value = $(":input[name=textInput]").val();//获取文本框的value alert(value);//输出value值hello $(":input[name=textInput]").val("文本框");//设置文本框的value 变为:<input type="text" name="textInput" value="文本框">input var radioValue = $(":input[name=radioInput]:checked").val();//获取单选框选中的value alert(radioValue);//输出radioValue值2 $(":input[name=radioInput]").val(["1"]);//选中值为1的单选框,注意是用数组的方式
1、children():获取指定元素的一级子节点集合,不包括一级子节点下面的子节点
alert($("body").children().length);//输出1 alert($("div").children().length);//输出6 alert($("div:first").children().length);//输出3 alert($("p").children().length);//输出1 或者遍历指定元素的指定一级子节点 $("div").children("input").length;//输出3
2、next():获取指定元素后面紧邻的同辈元素(紧邻的第一个)
nextAll():获取指定元素后面紧邻的所有同辈元素
var pnext = $('p').next(); pnext为:(可以新建一个div并append(pnext)检验) <div> <input type="text" name="textInput" value="hello">input <input type="radio" name="radioInput" value="1">radio1 <input type="radio" name="radioInput" value="2" checked>radio2 </div>
prevAll():获取指定元素前面所有的同辈元素
var divprev = $("div:eq(1)").prev(); divprev为:(可以新建一个div并append(pnext)检验) <p title="title"><b>test</b></p>
4、siblings():获取指定元素前后的所有同辈元素
var h3_siblings = $("h3").siblings(); h3_siblings为:(可以新建一个div并append(pnext)检验) <p title="title"><b>test</b></p> <div> <input type="text" name="textInput" value="hello">input <input type="radio" name="radioInput" value="1">radio1 <input type="radio" name="radioInput" value="2" checked>radio2 </div>
$(document).click(function(e){ var closest = $(e.target).closest("h3"); $("div:last").append(closest.clone()); }) 当我们点击document文档时就可以发现点击h3标签才会append,点击其他标签不会
1、css():获取或者设置直到元素的样式,获取到的值带单位px
//设置h3标签的字体大小为2.0em $("h3").css("font-size","28px"); //输出h3标签的字体大小样式 alert($("h3").css("font-size"));//输出28px
如果要同时设置多个样式,则可以将参数写成键值对的样式
//同时设置h3标签的字体大小、样式、颜色 $("h3").css({"font-size":"28px","color":"#ada","font-style":"italic"});
var h3_offset = $("h3").offset(); var offset_top = h3_offset.top; var offset_left = h3_offset.left; alert("top:"+offset_top+",left:"+offset_left);
3、position():获取指定元素相对于最近的一个position为relative、absolute的祖父节点的相对偏移,返回一个对象{top:mm,left:nn}
var h3_position = $("h3").position(); var position_top = h3_position.top; var position_left = h3_position.left; alert("top:"+position_top+",left:"+position_left);
4、scrollTop()、scrollLeft():分别获取指定元素的滚动条距离顶部、左侧的距离
var scroll_top = $("h3").scrollTop(); var scroll_left = $("h3").scrollLeft(); alert("scroll--top:"+scroll_top+",left:"+scroll_left);