jq获取元素内容和属性

获取内容和设置内容

假设原标签为
This spandisplay both the beginning influence

text() - 设置或返回所选元素的文本内容返回的是：This spandisplay both the beginning influence（没有了span标签）
html() - 设置或返回所选元素的内容（包括 HTML 标记）返回的是：This spandisplay both the beginning 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。下面的例子选取第二个 元素（索引号 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);
});