文章目录

• 15、DOM对象的增删改
• 16、jQuery-css样式操作
• 17、jQuery动画
• 18、jQuery事件

15、DOM对象的增删改

增

内部插入：

• appendTo()
• prependTo()

a.appendTo(b) :
把a插入到b子元素的末尾，成为最后一个子元素a.prependTo(b):
把a插入到b所有子元素的前面，成为第一个子元素

//appendTo后面也可以传选择器$("
标题
").appendTo("div");
$("
标题
").prependTo("div");

外部插入：

• insertAfter()
• insertBefore()

a.insertAfter(b)  得到ba,兄弟元素
a.insertBefore(b) 得到ab,兄弟元素

改

a.replaceWith(b) 用b替换a
a.replaceAll(b)  用a替换掉所有的b

删

a.remove() 删除a标签
a.empty()  清空a标签里的内容

举例：

Name
Email
Salary
Operation
Tom
tom@tom.com
5000
Delete
Jeer
Jeer@jeer.com
6000
Delete
Bob
Bob@bob.com
6000
Delete
添加新员工
name:
name:
name:
Submit

注意：
补绑那里，可以优化成一个用于复用删除的function函数：

var deleteFun = function(){
...
}

16、jQuery-css样式操作

• addClass() 添加样式
• removeClass() 删除样式
• toggleClass() 有则删除，无则添加样式
• offset() 获取和设置元素的坐标

//获取：
$divEle = $("#div001");
//新增样式
$divEle.addClass('div.buleBorder');var pos = $divEle.offset();
//打印到控制台看看，分别是左上顶点到页面上边界、左边界的距离
console.log(pos);//设置
$divEle.offset({top:100,left:50
});

17、jQuery动画

基本动画

• show()
  将隐藏的元素显示

• hide()
  将可见的元素隐藏

• toggle()
  可见就隐藏，隐藏就可见

举例：

$(function(){$("#btn1").click(function(){$("#div1").show();});
});

以上动画方法都可以添加参数：

• 参数一：动画执行的时长，以ms为单位

$("#div1").show(5000);
//即慢动作5秒内显示

• 参数二：动画的回调函数，即动画完成后自动调用的函数

$("#div1").show(5000,function(){alert("show动画完成！");
});

//想要一直有隐藏出现的效果，可以用递归的思想实现：

var abc = function(){$("#div1").toggle(1000,abc);
}

淡入淡出动画

• fadeln() 淡入（慢慢的可见）
• fadeOut() 淡出（慢慢的消失）
• fadeTo() 在指定时长内慢慢的将透明度修改到指定值
• fadeToggle() 淡入、淡出互相切换

和基本动画一样，这里的函数也有两个参数，即时长和回调函数。

$(function(){$("#btn2").click(function(){$("#div1").fadeIn();});
});

//透明度，0不可见，1完全可见，0.5半透明...
$("#btn2").click(function(){$("#div1").fadeTo(2000,0.5);
});

动画练习—品牌展示

佳能(30400)
索尼(27220)
三星(20808)
尼康(17821)
松下(12289)
卡西欧(8242)
富士(14894)
柯达(9520)
宾得(2195)
理光(4114)
奥林巴斯(12205)
明基(1466)
爱国者(3091)
其他品牌相机(7275)
显示全部品牌

运行效果：

18、jQuery事件

jQuery中，表示”页面加载完成之后“执行：

$(function(){});

原生Js中则是：

window.οnlοad=function(){}

🍁二者的触发时机：

• jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行
• 原生JS的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。

所谓”等标签显示时需要的内容加载完成"，比如img标签显示需要src中的图片加载完成，比如iframe标签中的src页面加载完成。

可以看到，两个内容加载完成以后（加载失败也属于加载完成），JS页面加载完成之后的代码就紧跟着执行了。

🍁由此：二者的触发顺序是：

• jQuery页面加载完成之后先执行
• 原生JS的页面加载完成之后的代码后执行

🍁有多个“页面加载完成之后”的代码块时，关于执行次数：

• 原生JS的页面加载完成之后，只会执行最后一次的赋值函数
• jQuery的页面加载完成之后，是全部把注册的function函数，依次顺序全部执行
  

在jQuery中，表示DOM加载完成时运行的代码：

$(document).ready(function(){
//code
});

• click()单击事件

• mouseover()鼠标移入事件

• mouseout()鼠标移出事件

• bind()可以给元素一次性绑定一个或者多个事件

• one()使用上跟bind一样，但one方法绑定的事件只响应一次

• unbind()跟bind事件相反的操作，解除事件的绑定

• live()可以用来绑定选择器匹配的所有元素的事件，哪怕这个元素是后面动态创建出来的也有效

❀❀❀❀小练习：

jQuery事件
鼠标移动事件
one事件
按钮
本来的div

运行效果：

🍁事件的冒泡

事件的冒泡，即父子元素同时监听同一个事件，当触发子元素事件的时候，同一个事件也被传递到了父元素的事件里去响应。

在子元素事件的函数体中，使用return false；可以阻止事件的冒泡传递

🍁事件对象

事件对象，即封装有触发的事件信息的一个javaScript对象。

在给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，这个参数名，常取event，event就是传递事件处理函数的事件对象

• 原生js获取事件对象

window.onload = function(){document.getElementById("001h").onclick = function(event){console.log(event);}
}

• jQuery事件对象的获取

$("#001h").click(function(event){console.log(event);
});

参考之前的bind:

$("h5").bind("click mouseover mouseout",function(){console.log("一次给元素h5绑定多个事件，空格隔开");
});

对三个事件，执行的代码块都一样，要想实现不同的事件执行不同的代码块，则要依靠event：

$("h5").bind("click mouseover mouseout",function(event){console.log("event");
});

根据这个type值，实现：

$("h5").bind("click mouseover mouseout",function(event){if(event.type == "mouseover"){console.log("移入");}else if(event.type == "mouseout"){console.log("移出");}else{console.log("点击");}
});

🍺🍺🍺🍺练习—图片跟随

在这里插入代码片

运行效果：