jQuery之DOM操作二

接着上一节,介绍几个常用的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>

一、获取、修改HTML

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>

3、prev():获取指定元素前面紧邻的同辈元素(紧邻的第一个)

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>

5、closest():获取离指定位置最近的匹配元素。这个方法会首先检查当前元素,如果匹配则返回元素本身,否则向上查找父元素,直到找到匹配的元素并返回;如果没有匹配到则返回一个空的jQuery对象

$(document).click(function(e){
	var closest = $(e.target).closest("h3");
	$("div:last").append(closest.clone());
})
当我们点击document文档时就可以发现点击h3标签才会append,点击其他标签不会


三、CSS常用的DOM操作

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"});

2、offset():获取指定元素在当前窗口的相对偏移,返回一个对象{top:mm,left:nn},该方法只对可见元素有效

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);






你可能感兴趣的:(js,jquery,dom,遍历)