write less，do more（写的更少，做的更多）–jQuery官方
jQuery第三天
十一.jQ的scrollTop方法
作用：该方法可以用来获取和设置当前滚动条滚动的位置
（此处省略设置一个带文本的滚动框）
$(".scroll//文本框的的类名").scrollTop();
//用scrollTop方法获取滚动条的当前位置
$(".scroll//文本框的的类名").scrollTop(300//接收一个数字);
//用scrollTop方法设置滚动条的当前位置
注意：当我们需要获取网页的偏移位（就是网页的滚动条滚了多少）时，我们要考虑浏览器的兼容问题
$("body").scrollTop()+$("html").scrollTop();
//用scrollTop方法获取网页的当前位置
$("body，html").scrollTop(300//接收一个数字);
//用scrollTop方法设置网页的当前位置
十二.jQ的事件绑定的两种方式
1.eventName(fn);
$("button").click(function(){//事件名（函数）
alert("HELLO LNJ");
});
2.on(eventName,fn);
$("button").on("click",function(){
alert("HELLO LNJ1");
});
3.两种方式的区别
（1）eventName(fn)：这种方式在写eventName时会有提示，编码效率较高，但是仅限于jQ库中已经帮你实现的方法，有局限性。
（2）on(eventName,fn)：这种方式在写eventName时会不提示，编码效率较低，但是不限于仅适用jQ库中帮你实现的方法，作用范围广。
两种方法的优点：可以添加相同的或不同类型的事件且不被覆盖。
十三.jQ事件解绑
off（）方法
$("button").off();
//如果不传参，就会解绑该标签的所有类型的所有事件
$("button").off("click");
//如果传一个参，就会解绑该标签的指定类型的事件
$("button").off("click",test1);
//如果传两个参，就会解绑该标签的指定类型的指定事件
十四.jQ事件冒泡和默认行为
1.什么是事件冒泡？
原因：当父级元素和子级元素重叠，并且二者具有相同类型的事件。当点击子级元素时行为就会想上传递，这种现象称为事件冒泡。
2.如何阻止事件冒泡？
$(".son").click(function(event){
alert(" son");
return false;//（1）让子标签回调函数中返回false
event.stopPropagation();//（2）禁止父级触发事件冒泡
});
$(".father").click(function(){
alert(" father");
});
3.什么是默认行为？
原因：该标签正常流程下应该执行的默认事件，例：跳转
4.如何阻止默认行为？
<body>
<a href=" http://www.baidu.com">注册</a>
<form action=" http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
$("a").click(functon(event){
alert("注册表 ");
return false;//（1）让子标签回调函数中返回false
event.preventDefault();//（2）禁止父级触发事件冒泡
});
$("input[type='submit']").click(function(){
alert("跳转");
return false;//（1）让子标签回调函数中返回false
event.preventDefault();//（2）禁止父级触发事件冒泡
})；
十五.jQ事件自动触发
作用：无需手动触发
<form action=" http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
$("input[type='submit']").trigger("click");
//如果利用trigger方法触发会触发默认行为
$("input[type='submit']").triggerHandler("click");
//如果利用triggerHandler方法触发不会触发默认行为
*面试题：
a标签的默认行为与其他标签不同，如果你只使用trigger()方法来触发，也是不会触发到默认行为的。
想要触发默认行为，必须修改代码。
<a href=" http://www.baidu.com"><span>注册</span></a>
$("span").click(function(){
alert("a");
});
$("span").trigger("click");
十六.jQ事件自定义事件
1.自定义事件：
jQ库中没有的事件，并让该事件能响应
2.要求：
（1）事件必须通过on绑定
（2）事件不能被手动触发
十七.jQ事件命名空间
原因：在工作中，多人协作完成代码，会发生两个人往同一个标签中添加了相同类型的不同事件
前提条件：
（1）该技术只能运用于通过on绑定的事件
（2）通过自动触发来触发事件
$(".son").on("click.zs//.zs就是该事件的命名空间",function(){
alert("click1");
});
$(".son").on("click.ls//.ls就是该事件的命名空间",function(){
alert("click2");
});
*面试题
<div class="father">
<div class="son">
</div>
</div>
$(".father").on("click.zs",function(){
alert("1");
});
$(".father").on("click",function(){
alert("2");
});
$(".son").on("click.zs",function(){
alert("3");
});
$(".son").trigger("click.zs");
// 利用trigger触发子元素的事件命名空间的事件，
那么父元素带相同事件命名空间的事件也会被触发，
而没有相同事件命名空间的事件不会被触发。
$(".son").trigger("click");
// 利用trigger触发子元素的不带事件命名空间的事件，
子元素所有同类型事件会被触发
那么父元素带相同事件命名空间的事件也会被触发，
而没有相同事件命名空间的事件也被触发。
十八.jQ事件委托
1.什么是事件委托？
就是请他人帮忙，结果反馈给我们
<body>
<ul>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
</ul>
<button>新增li</button>
</body>
$("button").click(function(){
$("ul").append("<li>新增li</li>");//新增的li无法响应click事件，因为在所有dom元素加载完后网页中只有3个li，第二个click事件就只给这三个li添加了click事件，所以新增的li无法响应click事件
});
$("ul>li").click(function(){
console.log($(this).html());
});
//新增的li无法响应click事件，
因为在所有dom元素加载完后网页中只有3个li，
第二个click事件就只给这三个li添加了click事件，
所以新增的li无法响应click事件
$("ul").delegate("li","click",function(){
//把原本应该给li的click事件给ul监听，
所以最后是ul来响应事件，而不是li
但是最后反馈出来的是li
console.log($(this).html());
});
2.解决方案
找那些在入口函数执行之前就有的元素，来监听你动态添加的元素上的某些事件
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
