目录
一: 插入操作——内部插入....标签内部插入内容 ****追加值在后面****
二: 插入操作——外部插入....插入标签 ****类似节点增加****
一: 插入操作——内部插入....标签内部插入内容 ****追加值在后面****
<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对象
});