4.2.2对元素值操作
方法说明val()用于获取第一个匹配元素的当前值，返回值可能是一个字符串，也可能是也个数组val(val)用于设置所有元素的值val(arrval)用于check select 和radio 等元素设置值，参数为字符串例
<body> <select name="like" size="3" multiple="multiple" id="like"> <option>列表项1</option> <option selected="selected">列表项2</option> <option selected="selected">列表项3</option> </select> <script type="text/jscript"> $(document).ready(function(){ $("select").val(['列表项1','列表项2']); alert($("select").val()); }); </script>4.3.1创建节点 1.创建元素节点 使用工厂函数
$(html)首先，创建两个
元素
var $p_1=$ ("<p></p>") var $p_2=$ ("<p></p>")创建文本节点
<div></div> <script type="text/javascript"> $(document).ready(function(){ var $p_1=$("<p id='b'>明日图书</p>"); //就近原则 ""有 '' var $p_2=$("<p>编程词典</p>"); $div =$("div"); $div.append($p_1); $p_2.appendTo($div); $("#b").after("<p>a</p>"); //after 方法 在每个匹配内容的元素之后插入内容/ }); </script>4.3.3插入节点 1.在元素内部插入的方法就是象一个元素中加子元素和内容。
方法说明append(content)为所有匹配的元素内部追加内容appendTo(content)将所有匹配元素添加到另一个元素的集合中prepend(content)为所有匹配的元素的内部前置内容prependTo(content)将所有匹配的元素前置到另一个元素的元素集合中例
<script type="text/javascript"> $(document).ready(function(){ var $p_1=$("<p id='b'>明日图书</p>"); //就近原则 ""有 '' var $p_2=$("<p>编程词典</p>"); $div =$("div"); $div.append($p_1); $p_2.appendTo($div); $("#b").after("<p>a</p>"); //after 方法 在每个匹配内容的元素之后插入内容/ }); </script>2 、在元素外部插入 在元素外部插入就是将要添加的内容添加到元素之前或元素之后。
方法说明after()content在每个匹配的元素之后插入内容insertAfter(content)将所有匹配的元素到另一个指定的元素的元素集合中before(content)在每个匹配的元素之前插入内容insertBefore(content)把所有匹配的元素插入到另一个指定元素的元素集合的前面4.3.4删除、复制和替换节点 删除节点 提供了三种方法，分别是remove() detach()和empty()。 remove()方法 remove()方法用于从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。 例
<body> <div> <p title="a">明日科技</p> <p title="b">明日图书</p> </div> <script type="text/javascript"> $(document).ready(function (){ $("div p").remove("p[ title !=a ]"); }); </script>detach()方法用于从DOM中删除所有匹配的元素
该方法不会把匹配的元素从jQuery对象中删除，所以仍然可以使用这些匹配元素。
与remove()方法不同的是：所有绑定的事件或附加的数据都会保留下来
$("div p").click(function(){ alert($(this).text()); }); var $p_2=$("div p:eq(1)").detach(); //删除元素 $p_2.appendTo("div");复制节点 clone()方法复制节点有两种形式，一种是不带参数，用于克隆匹配的DOM元素并且选中这些克隆的副本；另一种是带一个布尔型的参数，当参数为true时，表示克隆匹配的元素以及其所有的事件处理并且选中这些克隆的副本，当参数为false时，表示不复制元素的事件处理。、 例
<div> <p title="明日科技">明日科技</p> <p title="明日图书">明日图书</p> </div> <script> $(document).ready(function(){ $("div p:eq(1)").bind("click",function(){ //为按钮绑定单击事件 $(this).clone().insertAfter(this); //复制自己但不复制事件处理 }); }); </script>替换节点 两种替换节点的方法：replaceAll(selector) 和replaceWith(content) replaceAll(selector)方法用于使用匹配的元素替换掉所有的selector匹配到的元素；replaceWith(content)方法用于将所有的匹配的元素替换成指定的HTML或DOM元素。这两种方法的功能相同，只是二者的表现形式不同 例
div1 <div id="div1"></div> div2 <div id="div2"></div> <script type="text/javascript"> $(document).ready(function(){ //替换id为div1的<div>元素 $("#div1").replaceWith("<div>replaceWith()方法的替换结果</div>"); //替换id为div2的<div>元素 $("<div>replaceAll()方法的替换结果</div>").replaceAll("#div2"); }); </script>遍历节点 可以直接使用each()方法来遍历元素
each(callback)callback是一个函数，该函数可以接受一个形参index，这个形参是遍历元素的序号，序号从0开始。 例
<img height="60" src="../images/01.jpg" width="80" /> <img height="60" src="../images/02.jpg" width="80" /> <img height="60" src="../images/03.jpg" width="80" /> <img height="60" src="../images/04.jpg" width="80" /> <img height="60" src="../images/05.jpg" width="80" /> <script> $(document).ready(function(){ $("img").each(function(index){ $(this).attr("title","第"+(index+1)+"张照片"); }); }); </script>