jquery （对内容，元素，属性，class的操作）

对内容的操作：

捕获：获得内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值。

设置：设置内容

添加新内容：

text("新内容") - 设置所选元素的文本内容
html("新内容") - 设置所选元素的内容（包括 HTML 标记）
val("新内容") - 设置表单字段的值

添加新内容的同时，通过回调函数，拿到旧的内容和当前元素的下标：

<body>
<p>baidu.com.cn</p>
<p>baidu.com.cn</p>
<p>baidu.com.cn</p>
<button>添加新内容</button>
</body>
</html>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").html(function(i,origValue){
        //回调函数中i是当前被选元素的下标，origValue是原来的文本
        return i+","+origValue + "/news"; 
    });
  }); 
});
</script>

对元素的操作：

添加元素：添加新的 HTML 内容

1.append() - 在被选元素的内部结尾插入内容

2.prepend() - 在被选元素的内部开头插入内容

3.after() - 在被选元素外部之后插入内容

4.before() - 在被选元素外部之前插入内容

删除元素：

1.remove() - 删除被选元素（及其子元素）

2.empty() - 从被选元素中删除其子元素

属性操作：

获取属性：attr() 方法用于获取属性值。

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

设置属性：

attr("属性名","属性值") 方法也用于设置属性值。

多个属性：

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.baidu.com",
        "title" : "百度"
    });
});

添加新属性的同时，通过回调函数，拿到旧的属性和当前元素的下边：

<body>
<p><a href="http://www.baidu.com.cn" class="baidu">baidu.com.cn</a></p>
<p><a href="http://www.baidu.com.cn" class="baidu">baidu.com.cn</a></p>
<p><a href="http://www.baidu.com.cn" class="baidu">baidu.com.cn</a></p>
<button>改变 href 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</body>
</html>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".baidu").html(function(i,origValue){
        //回调函数中i是当前被选元素的下标，origValue是原来的文本
        return i+","+origValue + "/images"; 
    });
  }); 
});
</script>

删除属性：removeAttr() 从所有匹配的元素中移除指定的属性。

class类的操作：

addClass()     向匹配的元素添加指定的类名。
hasClass()     检查匹配的元素是否拥有指定的类。

removeClass()     从所有匹配的元素中删除全部或者指定的类。
toggleClass()     从匹配的元素中添加或删除一个类。

jquery （对内容，元素，属性，class的操作）

猜你喜欢