前端笔记之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() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

 

语法：

$(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，然后引用插件。

官方：http://jqueryui.com/

• 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

下载地址：http://plugins.jquery.com/mousewheel/

下载完毕后，就可以用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的属性值

---