jq获取元素内容和属性
获取内容和设置内容
假设原标签为
<p>This <span>spandisplay both the beginning </span> influence</p>
- text() - 设置或返回所选元素的文本内容 返回的是：This spandisplay both the beginning influence（没有了
span标签） - html() - 设置或返回所选元素的内容（包括 HTML 标记）返回的是：
This <span>spandisplay both the beginning </span> influence - val() - 设置或返回表单字段的值 对于表单返回表单的输入值
demo
html:
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
js:
alter($("#test2").html()):这个出来的是：这是一个段落。
$("#test2").html("<b>Hello world!</b>");：这个将内容设置成了<b>Hello world!</b>
获取属性，设置属性
jQuery attr() 方法用于获取属性值
源码是：
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
js是：
alert($("#runoob").attr("href"));
结果会弹出 http://www.runoob.com 字符串
直接设置属性
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
用回调函数的方式设置属性，第一个参数是当前元素下标，第二个是原始值
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
添加元素
- append() - 在被选元素的结尾插入内容，是在元素的内部增加
- prepend() - 在被选元素的开头插入内容，是在元素内部增加
- after() - 在被选元素之后插入内容 ，在元素外部了
- before() - 在被选元素之前插入内容，也是外部了
demo
具体的参考如下链接
删除元素
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
还可以过滤被删除的元素
$("#div1").remove();
$("#div1").empty();
$("p").remove(".italic");
遍历dom树
向上遍历
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
demo
$(document).ready(function(){
$("span").parent();
});
$(document).ready(function(){
$("span").parents();
});
$(document).ready(function(){
$("span").parents("ul");
});
$(document).ready(function(){
$("span").parentsUntil("div");
});
向下遍历
children() 方法返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
demo
$(document).ready(function(){
$("div").children();
});
下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
$(document).ready(function(){
$("div").children("p.1");
});
下面的例子返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
$("div").find("span");
});
下面的例子返回 <div> 的所有后代：
$(document).ready(function(){
$("div").find("*");
});
过滤
三个最基本的过滤方法是：
- first(), first() 方法返回被选元素的首个元素。
- last() last() 方法返回被选元素的最后一个子元素。
- eq()，eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：
demo
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：
$(document).ready(function(){
$("div p").first();
});
注意div和p元素都是首个
选择最后一个 <div> 元素中的最后一个 <p> 元素
$(document).ready(function(){
$("div p").last();
})
注意 div和p都是最后一个
$(document).ready(function(){
$("p").eq(1);
});
