JQuery DOM操作 元素的属性操作 当属性不存在时，添加属性： <!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><
JQuery DOM操作
元素的属性操作
当属性不存在时，添加属性：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/operation.js" ></script> </head> <body> <p> <input type="button" /> 毫无疑问，库里是当今<a href="http://www.nba.com" >nba</a>但是他当初签下这份低价的合同也实属无奈。由于连续遭遇脚踝受伤，库里在2012-13赛季开始之前被迫签了一份4年4400万美元的合同。 </p> </body></html>//js$(document).ready(function(){ $('input').attr({'value':'按钮'});});//为相同标签设置不同的属性：$(document).ready(function(){ var num=0; $('input').each(function(index){ $(this).attr({'value':num++}); });});$()的一些神奇的用法,创建部分页面内容，并插入页面
function two(){ $('<p>nihao</p>').insertAfter($('p'));}//insertAfter()插入代码到页面，比js的常见元素内容要更加简单移动元素
function three(){ $('p').insertAfter($('h1')); }function four(){ $('<ul id="nodes">this</ul>').insertAfter('h1'); $('p').appendTo('#nodes'); }jQuery 文档操作方法
这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的类名。 |
| after() | 在匹配的元素之后插入内容。 |
| append() | 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 |
| appendTo() | 向目标结尾插入匹配元素集合中的每个元素。 |
| attr() | 设置或返回匹配元素的属性和值。 |
| before() | 在每个匹配的元素之前插入内容。 |
| clone() | 创建匹配元素集合的副本。 |
| detach() | 从 DOM 中移除匹配元素集合。 |
| empty() | 删除匹配的元素集合中所有的子节点。 |
| hasClass() | 检查匹配的元素是否拥有指定的类。 |
| html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
| insertAfter() | 把匹配的元素插入到另一个指定的元素集合的后面。 |
| insertBefore() | 把匹配的元素插入到另一个指定的元素集合的前面。 |
| prepend() | 向匹配元素集合中的每个元素开头插入由参数指定的内容。 |
| prependTo() | 向目标开头插入匹配元素集合中的每个元素。 |
| remove() | 移除所有匹配的元素。 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
| replaceAll() | 用匹配的元素替换所有匹配到的元素。 |
| replaceWith() | 用新内容替换匹配的元素。 |
| text() | 设置或返回匹配元素的内容。 |
| toggleClass() | 从匹配的元素中添加或删除一个类。 |
| unwrap() | 移除并替换指定元素的父元素。 |
| val() | 设置或返回匹配元素的值。 |
| wrap() | 把匹配的元素用指定的内容或元素包裹起来。 |
| wrapAll() | 把所有匹配的元素用指定的内容或元素包裹起来。 |
| wrapinner() | 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。 |
复制元素
function five(){ $('p').clone(true).insertAfter($('h1')); $('button').click(function(){ alert("click btn1"); }); }//clone为true时一些事件也一起复制，不过有一些本身就可以响应
