文档处理------06

目录

一: 插入操作——内部插入....标签内部插入内容 ****追加值在后面**** 

二: 插入操作——外部插入....插入标签 ****类似节点增加****

三: 删除操作

四: 复制（克隆）操作通过克隆可以实现添加购物车

五: 替换操作

六: 包裹操作

七: 查找操作

八: each方法

---

一: 插入操作——内部插入....标签内部插入内容 ****追加值在后面**** 

<1> append(content) ：将content内容插入到元素的尾部

eg: $('td').eq(5).append('11');//将值11(可以带标签元素的)插入到td值的后面

<2> appendTo(content) ：将匹配到的元素插入到content元素尾部

eg: $('span').appendTo($('td:eq(5)')); //将span标签插入到td值的后面

<3> prepend(content) ：将content内容插入到元素的头部

<4> prependTo(content) ：将匹配到内容插入到content元素的头部

 

二: 插入操作——外部插入....插入标签 ****类似节点增加****

<1>after(content) ：在元素的尾部插入content内容

eg: $('tr:eq(2)').after("<tr><td>7</td><td>8</td></tr>");

<2>before(content) ：在元素的头部插入content内容

<3>insertAfter(content) ：将匹配到的内容插入到content元素的尾部

eg:$('span').insertAfter($('tr:eq(2)'));//把span标签插入到最后一行

<4>insertBefore(content) ：将匹配到的内容插入到content元素的头部

 

三: 删除操作

<1> empty() ：清空元素内容（但不清楚元素本身）

eg: $('span').empty();//清空span标签的值,span标签还在

<2> remove() ：清空整个元素（包括元素及内容）

eg: $('tr:eq(1)').remove(); //清空整个元素,值和标签都没有了

 

四: 复制（克隆）操作通过克隆可以实现添加购物车

 

<1>clone() ：克隆元素（但不包含事件）

<2>clone(true) ：克隆元素（包含元素本身绑定的事件）

eg:

var new_tr=$('tr:eq(2)').clone();//克隆新行

//把克隆的行添加到tr后

$('tr:eq(2)').after(new_tr);

 

五: 替换操作

<1> html()：实现对元素的内容替换

<2> replaceWith() ：实现对元素本身进行替换

 

六: 包裹操作

<strong><span>文本信息</span></strong>

<1> wrap() ：对每个元素进行包裹

<2> wrapAll() ：对整个匹配元素进行统一包裹操作

<3> wrapInner() ：对元素的内容进行包裹

 

七: 查找操作

<1> index(): 获取对象的索引下标，从0开始............................

<2> eq(index) ：通过元素的索引匹配元素，默认索引从0开始...............

eg: alert($('a').eq(2).html()); //联系我们

<3> siblings(同级元素): 获取所有的同级元素..........................

<4> filter(expr) ：通过class进行元素过滤匹配元素

eg: alert($('li').filter('.li').html()); //过滤 <a href="">首页</a>

<5> not(expr) ：匹配不是指定选择器元素

<6> parent([expr]) ：查找当前元素的父元素............................

eg: $('span').parent().css('backgroundColor','red');//从儿子找到父亲 ,父亲只有一个,然后加样式

<7> children([expr]) ：匹配所有子元素，里面可以加标识(子元素)..........

eg: $('.li').children('span').html('找到span标签,li的第二个儿子'); //从父元素找到子元素,儿子有多个,要精确查找

<8> find(expr) ：通过后代选择器查找元素(后代元素)......................

eg: $('.li').find('span').html('这是li的第三个儿子');//直接通过find方法找后代,更简单,推荐使用

<9> next([expr]) ：查找下一个元素（相邻的）

<10> prev([expr]) ：查找上一个元素（相邻的）

 

案例:折叠菜单

 

八: each方法

遍历对象的三种方法: for..in for循环 each方法

eg:

回顾for循环 DOM对象和jquery都可以使用

for (var i=0; i < img.length; i++) {

alert($('img')[1].attr('src'));

}

 

=>功能：用于遍历jQuery对象

基本语法：

jQuery对象.each(callback)：该函数只有一个参数，要求是一个callback函数，函数的格式如下：

function callback(i,item){}

参数说明：

jQuery对象中拥有多少个元素，那么我们的callback函数就会自动执行多少次。

i：遍历时，系统会自动将当前元素的索引下标放入变量i中，默认从0开始

item:系统会自动将当前元素的本身放入变量item中，其就是当前的dom对象

语法:

对象.each(function(i,item){

alert(i);//0 1 2 3 对象的索引

alert($(item).attr(属性)); //每个被遍历出来的DOM对象

});