爱站程序员基地jQuery 元素操作
jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。
1、遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
语法1
$(\'div\').each(function (index, domEle) { xxx; })
注释
1.each() 方法遍历匹配的每一个元素，主要用DOM处理，each每一个
2.里面的回调函数有2个参数：index是每个元素的索引号，可以修改索引号名称，即修改index为其它名称；domEle是每个DOM元素对象，不是jQuery对象，也可以自己命名
3.此方法用于遍历 jQuery 对象中的每一项，所以想使用jQuery方法，需要给这个dom元素转换为jQuery对象：$(domEle)
示例
<body><div>1</div><div>2</div><div>3</div><script>$(function () {// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）var sum = 0;// each() 方法遍历元素var arr = [\"red\", \"green\", \"blue\"];$(\"div\").each(function (i, s) {// 回调函数第一个参数一定是索引号，可以自己指定索引号号名称；回调函数第二个参数一定是dom元素对象，也可以自己命名$(s).css(\"color\", arr[i]);sum += parseInt($(s).text());})// 遍历的索引号之和：0+1+2+3=6console.log(sum);})</script></body>
语法2
$.each(object, function (index, element) { xxx; })
注释
1.
$.each()
方法可用于遍历任何对象，主要用于数据处理，比如数组、对象
2.里面的函数有2个参数：
index
是每个元素的索引号，可以修改索引号名称，即修改
index
为其它名称;
element
遍历内容，也可以自己命名
3.此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。
示例
<body><div>1</div><div>2</div><div>3</div><div>4</div><script>$(function () {// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）、// each() 方法遍历元素var arr = [\"red\", \"green\", \"blue\", \'orange\'];$.each($(\'div\'), function (i, s) {console.log(i);console.log(s);$(s).css(\"color\", arr[i]);})$.each({name: \'andy\',age: 18}, function (i, s) {console.log(i); //输出的是 name age 属性名console.log(s); // 输出的是 andy 18 的属性值})})</script></body>
2、创建、添加、删除
创建
语法
$(\'<li></li>\'); // 动态的创建一个<li>
内部添加
内部添加元素，生成之后，它们是父子关系
语法
element.append(\'内容\'); // 把内容放入匹配元素内部最后面，类似原生 appendChildelement.prepend(\'内容\'); // 把内容放入匹配元素内部最前面
外部添加
外部添加元素，生成之后，它们是兄弟关系
语法
element.after(\'内容\'); // 把内容放入目标元素后面element.before(\'内容\'); // 把内容放入目标元素前面
删除元素
语法
element.remove(); // 删除匹配的元素(本身)element.empty(); // 删除匹配的元素集合中所有的子节点element.html(\'\'); // 清空匹配的元素内容// empty()和html(\'\')作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容
其他方法请参详API
示例
<body><ul><li>原先的li</li></ul><script>$(function () {// 创建元素var li = $(\'<li>添加的li</li>\');// 内部添加// 内部添加元素，生成之后，它们是父子关系$(\'ul\').append(li); // 图1$(\'ul\').prepend(li); // 图2// 外部添加// 外部添加元素，生成之后，它们是兄弟关系$(\'ul\').after(li); // 图3$(\'ul\').before(li); // 图4})</script></body>
图一
图二
图三
图三
