jQuery元素操作

jQuery元素操作#

主要是遍历、创建、添加、删除元素操作。

遍历元素#

jQuery隐式迭代是对同一类元素做了同样的操作。若想要给同一类元素做不同的操作，就需要用到遍历。

语法1：#

                    
jQuery
                    $('div').each(function(index,domEle){xxx;})
                

1. each()方法遍历匹配的每一个元素，主要用DOM处理。each每一个
2. 里面的1回调函数有两个参数：index是每个元素的索引号；domEle是每个 DOM元素对象，不是jQuery对象
3. 要想使用jQuery方法，需要给这个DOM元素转换为jQuery对象$(domEle)

1

2

3

语法2：#

                    
jQuery
                    $.each(object,function(index,element){xxx;})
                

1. $.each()方法可以用于遍历任何对象，主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数：index是每个1元素的索引号，element遍历内容
3. 要想使用jQuery方法，需要给这个DOM元素转换为jQuery对象$(domEle)

创建元素#

语法：#

                    
jQuery
                    $("<li></li>")
                

动态的创建了一个li

添加元素#

内部添加#

                    
jQuery
                    element.append("内容")
                    element.prepend("内容")
                

append把内容放入匹配元素内部最 后面 ，类似原生appendChild。prepend放到最前面

外部添加#

                    
jQuery
                    element.after("content"); // 把内容放入目标元素后面
                    element.before("content"); // 把内容放入目标元素前面
                

1. 内部添加元素，生成之后是父子关系
2. 外部添加元素，生成之后是兄弟关系

原来的

删除元素#

                
jQuery
                element.remove(); // 删除匹配的元素（本身）
                element.empty(); // 删除匹配的元素集合中所有的子节点
                element.html(""); // 清空匹配的元素内容