对内容的操作:
捕获:获得内容
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() 从匹配的元素中添加或删除一个类。