UI树欲静一、节点操作
1.复制节点
//clone方法用来复制标签，如果没有参数，则只是复制标签的样式和文本，如果有一布尔值的参数true，则会连同事件一起复制
var $button = $(‘#button1’).clone(true);
console.log($button);
//把复制后的标签加载进body标签
$button.appendTo(‘body’);
2.删除节点,remove()方法返回值是被删除的节点，如果在未来需要把删除的节点添加回来，则需要保存这个返回值
//var $p = $(‘p’).remove();
//把节点添加回来
//$p.appendTo(‘body’);
3.empty()清空选择标签下的所有子标签
//点击清空按钮清空购物车
$(‘#clear’).click(function () {
$(‘#car’).empty();
});
二、事件绑定
1..bind()方法给标签绑定事件(3.0中放弃该方法)bind的底层就是on事件实现的
//第一个参数要出发的事件，第二个参数传递的值，第三个参数事件触发后调动的函数
$(‘#box’).bind(‘click’, function () {
alert();
});
//bind添加的必须用unbind()方法移除
$(‘#box’).unbind(‘click’);
2.addEventListener可以给标签添加多个相同的事件，事件不会覆盖。addEventListener不支持IE
3.on()官方推荐使用的绑定事件方法,可以给一个标签添加多个相同事件
$(‘#box’).on(‘click’, function () {
alert(“db”);
});
$(‘#box’).on(‘click’, function () {
alert(“ddbb”);
});
//on添加的事件要用off去移除事件
$(“#box”).off(‘click’);
4.one()通过这个方法绑定的事件只能触发一次，on绑定的事件函数不受影响
$(‘#box’).one(‘click’, function () {
alert(“once”);
});
三、事件简写
1.简写事件(事件简写):把on方法绑定的事件名以及函数直接用点语法的形式绑定给标签
2.我们可以通过简写事件来给同样的事件添加不同的执行函数，js中是不行的，会覆盖
$(‘div’).click(function () {
alert(“1”)
});
$(‘div’).click(function () {
alert(“2”)
});
3.除了鼠标点击，按下tab键也能获取到焦点
$(‘input’).focus(function () {
$(this).css(“background”, “red”);
});
//失去焦点
$(‘input’).blur(function () {
$(this).css(“background”, “white”);
});
focusin和focusout配对
4.onmouseover是鼠标移动就会触发，nomouseenter鼠标从外移入一次就触发一次
5.unload触发的情况：
点击某个离开页面的链接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器
重新加载页面
使用情况：当用户关闭或者离开当前页面，需要做数据保存等工作，就在unload事件中执行
6.change()事件:input标签输入文本，文本值发生变化且光标移除激活该事件
$(“input”).change(function () {
alert(“change”);
});
四、复合事件
1.复合事件:hover(fn1,fn2)当鼠标移入时触发fn1,当鼠标移除时触发fn2,对应的两个鼠标事件mouseenter、mouseleave
$(‘div’).hover(function () {
$(this).css(“background”,”yellow”);
}, function () {
$(this).css(“background”,”blue”);
});
五、事件对象
1.type属性：获取的是用户当前触发的事件类型
$(‘div’).click(function (event) {
console.log(event.type);
});
2.target:表示当前点击的标签
$(‘div’).click(function (event) {
console.log(event.target);
});
把事件绑定到了文档身上，还能获取div对象是因为事件冒泡（事件一层层往外传）
3.currentTarget:保存的是事件绑定的对象
$(‘div’).click(function (event) {
console.log(event.currentTarget);
});
4.clientX\clientY是参照于浏览器可视区域的左上角为坐标原点，page系列的坐标是参照页面的左上角为坐标原点
$(document).click(function (event) {
console.log(event.pageX);
console.log(event.clientX);
console.log(event.pageY);
console.log(event.clientY);
});
5.图片加载失败，用其他图片替换
<img src=”img/mouse.png” >
<script type=”text/javascript”>
$(‘img’).on(‘error’,function(){
$(this).attr(‘src’,’img/1.png’);
})
</script>
六、事件冒泡
1.事件冒泡:触发子标签中的某一个事件，引擎会把这个事件传递到父级标签，一直传到document，如果这个传递链中某一级标签也有相同的事件，则会触发该事件。我们可以利用这个特征实现“事件委托”
2.取消事件冒泡:阻止事件从被触发的节点身上向上级传递,jQ中用event.stopPropagation()方法，可以阻止事件冒泡，把当前事件截留在当前标签上而不是向外层传递
$(document).ready(function(){
$(‘#div1’).click(function(){
alert(‘1’);
});
$(‘#div2’).click(function(){
alert(‘2’);
});
$(‘#div3’).click(function(event){
alert(‘3’);
event.stopPropagation();
console.log(event);
});
}
七、事件默认行为
1.取消标签的默认事件：jq中使用event.preventDefault();
取消掉标签的默认事件
$(‘a’).click(function(event){
alert(‘12345’);
event.preventDefault();
});
八、事件模拟
1.事件模拟：不通过用户触发事件，让事件自己触发起来
//trigger、triggerHandler都可以模拟某个事件执行，triggerHandler不会触发默认事件
$(‘div’).trigger(‘click’);
$(‘div’).triggerHandler(‘click’);
//submit是表单事件不是input事件
$(‘form’).trigger(‘submit’);//触发默认事件，页面跳转
$(‘form’).triggerHandler(‘submit’);//不会执行跳转行为
2.链式语法jq中有，js中没有。通过点的形式把一组？？连接起来，也可通过链式语法实现事件模拟，但只能执行系统里的函数，自定义事件不能执行
$(‘div’).click(function () {
alert(“这是一个大坑”);
}).click();
九、命名空间
1.命名空间：我们可以在事件名后给它添加一个新名字，使用.分割，这样就能通过后缀把相同事件添加的不同方法区分开，方便了我们对事件方法的管理；解绑事件时就可以通过命名空间添加的新名字来区分开。命名空间只有jq中有，js中没有
$(‘div’).on(‘click.tel’, function(){
alert(‘wu小姐：13478654832’);
});
$(‘div’).on(‘click’, function(){
$(this).css(‘background’, ‘red’);
});
$(‘div’).off(‘click.tel’);
十、事件委托
1.事件委托：把本应该添加在某个节点上的事件添加在另一个节点上，就叫做事件委托，只能把子标签事件委托给父标签，因为委托事件利用的就是事件冒泡
2.把应该添加在Li标签身上的click事件添加在ul身上，使用on给ul绑定事件时，多传入一个选择器，这个选择器选中的是本应该处理该事件的标签。当用户点击了某一个li后，会把这个事件转发到ul身上，ul拿到这个事件后，会寻找选择器所对应的标签，通过event.target属性得到触发事件的元素，最终由这个元素来执行click事件，
$(‘ul’).on(‘click’, ‘li’, function (event) {
console.log(event.type);
console.log(event.target);
});
十一、自定义事件
1.js引擎不能调用自定义事件，要想调用自定义事件，只能用事件模拟。trigger、triggerHandler
$(‘div’).on(‘hello’, function(){
alert(‘12345’);
});
$(‘div’).triggerHandler(‘hello’);
