前端笔记知识点整合之jQuery（下）事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON
一、监听事件大全
1.1 javascript事件
onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfocus 元素获得焦点 onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开 onload 某个页面或图像被完成加载 onmousedown 某个鼠标按键被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 onmouseover 鼠标被移到某元素之上 onmouseup 某个鼠标按键被松开 onreset 重置按钮被点击 onresize 窗口或框架被调整尺寸 onselect 文本被选定 onsubmit 提交按钮被点击 onunload 用户退出页面 onscroll 元素滚动时执行
javascript事件使用示例：
odiv.onclick = function(){
}
1.2 jquery事件
blur() 触发、或将函数绑定到指定元素的 blur 事件 change() 触发、或将函数绑定到指定元素的 change 事件 click() 触发、或将函数绑定到指定元素的 click 事件 dblclick() 触发、或将函数绑定到指定元素的 double click 事件 error() 触发、或将函数绑定到指定元素的 error 事件 focus() 触发、或将函数绑定到指定元素的 focus 事件 keydown() 触发、或将函数绑定到指定元素的 key down 事件 keypress() 触发、或将函数绑定到指定元素的 key press 事件 keyup() 触发、或将函数绑定到指定元素的 key up 事件 load() 触发、或将函数绑定到指定元素的 load 事件 mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件 mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件 mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件 mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件 mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件 mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件 mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件 ready() 文档就绪事件（当 html 文档就绪可用时） resize() 触发、或将函数绑定到指定元素的 resize 事件 scroll() 触发、或将函数绑定到指定元素的 scroll 事件 select() 触发、或将函数绑定到指定元素的 select 事件 submit() 触发、或将函数绑定到指定元素的 submit 事件 toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。 unload() 触发、或将函数绑定到指定元素的 unload 事件
jquery事件使用示例：
$(‘div’).click(function(){
});
1.3 on()事件方法
定义和用法
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jquery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 api 带来很多便利，我们推荐使用该方法，它简化了 jquery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 方法。
提示：如需添加只运行一次的事件然后移除，请使用 方法。
语法：
$(selector).on(event,childselector,data,function{
});
添加多个事件处理函数：
$('p').on('click mouseenter mouseleave',function(){
});
off()方法移除事件：
$('p').on('click mouseenter mouseleave',function(){
$(this).off('mouseleave click'); //移除mouseleave和click事件
});
使用map参数添加多个事件处理函数：
$('p').on({
click:function(){ $(this).css('background','red'); },
mouseenter:function(){ $(this).css('background','green');},
mouseleave:function(){ $(this).css('background','blue'); }
});
向未来元素添加事件（通过js节点方法添加的新元素默认没有事件，所以要通过以下方法绑定事件，普通事件方法绑定不上）
$('div').on('click','p',function(){
alert(1);
})
二、jquery设置和获取内容方法
3个使用的dom操作的方法
|
text() 设置或返回所选的文本内容 html() 设置或返回所选的标签内容（包括html标签） val() 设置返回表单的value值 |
三、jquery尺寸
jquery提供多个处理尺寸的重要方法：
以下方法返回的值都是number类型
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。 innerwidth() 方法返回元素的宽度（包括内边距）。 innerheight() 方法返回元素的高度（包括内边距）。 outerwidth() 方法返回元素的宽度（包括内边距和边框）。 outerheight() 方法返回元素的高度（包括内边距和边框）。 outerwidth(true) 方法返回元素的宽度（包括内边距、边框、外边距）。 outerheight(true) 方法返回元素的高度（包括内边距、边框、外边距）。
还可以获取html文档和浏览器窗口的宽高：
$(window).width() //获取当前浏览器窗口的宽度 $(window).height() //获取当前浏览器窗口的高度 $(document).width() //获取html文档（body）的宽度 $(document).height() //获取html文档（body）的高度
四、jquery节点操作
4.1添加节点
【添加内部子节点方法】：内部节点就是儿子节点
append() 在被选元素内部的结尾插入内容 appendto() 将指定内容插入到被选标签内部的结尾 prepend() 在被选元素内部的开头插入内容 prependto() 将指定内容插入到被选标签内部的开头
//添加在结尾的
$('ul').append('<li>苹果</li>'); //在ul标签内部的结尾插入li内容
$('ul').append(function(){return '<li>苹果-函数的</li>'}); //功能同上
$('<li>苹果222</li>').appendto('ul'); //将指定li内容添加到ul标签内部的结尾
//添加在开头的
$('ul').prepend('<li>苹果</li>'); //在ul标签内部的开头插入li内容
$('ul').prepend(function(){return '<li>苹果-函数的</li>'}); //功能同上
$('<li>苹果222</li>').prependto('ul'); //将指定li内容添加到ul标签内部的开头
【添加同级节点方法】：同级就是兄弟关系
after() 在被选元素同级的后面插入内容 insertafter() 将指定内容添加到被选标签同级的后面 before() 在被选元素同级的前面插入内容 insertbefore() 将指定内容添加到被选标签同级的前面
注意：以上方法作用相同。差异在于语法：内容和选择器的位置。
添加在同级的后面
$('ul').after('<p>以上水果都好吃</p>'); //在ul标签同级的后面插入p标签内容
$('ul').after(function(){return '<p>以上水果都好吃</p>'}); //功能同上
$('<p>以上水果都好吃</p>').insertafter('ul'); //将指定p标签内容添加到ul标签同级的后面
添加在同级的开头
$('ul').before('<p>以下水果都不好吃</p>'); //在ul标签同级的开头插入p标签内容
$('ul').before(function(){return '<p>以下水果都不好吃</p>'}); //功能同上
$('<p>以下水果都不好吃</p>').insertbefore('ul'); //将指定p标签内容添加到ul标签同级的开头
4.2删除节点
|
remove() 删除被选元素（及其子元素） empty() 从被选元素中删除子元素 |
$('ul li').eq(1).empty(); //删除li的内容
var $li = $('ul li').eq(2).remove(); //删除整个li（包括子节点）
$('ul').append($li); //将删除的li添加在ul内部的后面
4.3克隆节点
|
clone(true) 方法生成被选元素的副本，包含子节点、文本和属性。 |
参数：可选。布尔值。规定是否复制元素的所有事件处理。默认false。
$('button').click(function(){
var $p = $('p').clone(true); //克隆p标签，true表示把子元素和事件也一起克隆
$('ul').after($p); //将克隆的p标签插入到ul后面
});
4.4替换节点
|
replacewith() 将指定的内容替换被选元素 replaceall()
$(selector).replacewith(content) $(content).replaceall(selector) |
注意：replacewith() 能够使用函数进行替换，replaceall则不能。
$('p').replacewith('<p>你好，请问下面水果你喜欢吗？</p>');
$('p').replacewith(function(){return '<p>你好，请问下面水果你喜欢吗？</p>'});
$('<p>你好，请问下面水果你喜欢吗？</p>').replaceall('p');
4.5包裹节点
|
wrap() 把匹配的元素用指定的内容或元素包裹起来。 wrapall() 把所有匹配的元素用指定的内容或元素包裹起来。 wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。 |
|
$('button').click(function(){ $('span').wrap('<div></div>'); //用div标签分别包裹每个span标签 $('span').wrapall('<div></div>'); //用div标签一起包裹所有span标签 $('span').wrapinner('<b></b>'); //在span标签内部用b标签包裹内容 }); |
五、jquery净位置
|
$('.xiaoming').offset().top $('.xiaoming').offset().top |
六、jquery拖拽
需要使用jquery插件，有个jquery官方插件，叫做jqueryui，负责实现元素的被拖拽、被拖放、改变尺寸、可圈选、可排序。
所谓的插件，就是增强jquery功能，给jquery添加一些必须的功能，先引用jquery，然后引用插件。
官方：
- draggable 拖拽
- droppable 拖放
- resizable 改变尺寸
- selectable 可选择
- sortable 可排序
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$('img').draggable();
</script>
用json来配置拖拽：
$('img').draggable({
//限制元素的移动区域
'containment':'.box',
//限制轴方法
//'axis':'y',
//限制咯噔
'grid':[50,100]
});
如果在拖拽的时候，要使用坐标，此时要添加drag属性，值是一个函数，这个函数有两个参数，第一个参数：event没用，第二个参数是ui参数，有一个属性ui.position，这个属性又有两个值left、top值：
$('img').draggable({
//限制元素的移动区域
'containment':'.box',
//限制轴方法
//'axis':'y',
//限制咯噔
//'grid':[50,100],
'drag':function(event,ui){
var x = ui.position.left;
var y = ui.position.top;
$('h1').html('当前位置：' + x +'-' + y);
}
});
七、jquery鼠标滚轮事件
jquery天生不能监听滚动事件，需要用插件，jquery.mousewheel.js
下载地址：
下载完毕后，就可以用mousewheel()事件来监听滚轮了。
$('.news').mousewheel(function(event,direction){
//direction 鼠标滚轮下滚 -1
//direction 鼠标滚轮上滚 1
console.log(direction);
});
八、页面卷动值
jquery中屏蔽了一切浏览器兼容性问题，并且把所有属性和方法都换成了window对象的属性和方法，不用document和body了。
|
$(window).scrolltop(); //获取页面卷动的值 $(window).scroll(function(){}); //页面卷动事件 |
|
$(window).scroll(function(){ //滚动条滚动执行的事件 console.log($(window).scrolltop()); //页面滚动了多少 }); |
这个是固定语法，是html和body元素进行动画，不是window对象，改变的是固定属性'scrolltop属性
|
$('button').click(function(){ $('html,body').animate({'scrolltop':3000},1000,function(){ console.log($(window).scrolltop()); //获取页面滚动了多少 }); }); |
原生js中，如果想让页面卷动：
document.getelementbyid('btn').onclick = function(){
document.documentelement.scrolltop = document.body.scrolltop = 3000;
}
九、jquery遍历json方法
$.each(city,function(key,value){
console.log(key,value)
});
$.each(json对象,function(key,value){
console.log(key,value)
});
key就是json的属性名，value是json的属性值