《锋利的JQuery》读书笔记

DOM操作

遍历节点

children()方法用于取得匹配元素的子元素集合。注意，该方法只考虑子元素而不考虑其他后代元素。可以直接调用children().length获取子节点的数目
next()方法用于取得匹配元素后面紧邻的同辈元素；
prev()方法用于取得匹配元素前面紧邻的同辈元素；
siblings()方法用于取得匹配元素前后所有的同辈元素；
closest()方法用于取得最近的匹配元素，逐级向上查找匹配选择器的元素，只返回一个元素，如果什么都没找到则返回一个空的jQuery对象。

parent()、parents()、closest()方法对比

parent()方法用于获取集合中每个匹配的父级元素，只返回一个元素节点
parents()方法用于获取集合中每个匹配的祖先元素，返回父级和祖先节点
closest()方法是从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。

CSS-DOM操作

可以直接利用css()方法来获取元素的样式属性，而不管这些属性是外部CSS导入，还是直接拼接在HTML元素里（内联）的。
也可以直接利用css()方法来设置某个元素的单个样式或者多个样式属性。

如果值是数字，将会被自动转化为像素值。

$(“p”).css({“fontSize”:”30px”,”backgroundColor”:”#888888”})
在css()方法中，如果属性值中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法。

如果带上了引号，既可以写成 ”fint-size”，也可以写成 ”fontSize”。

获取元素的位置信息

元素定位有以下几种常见的方法：

扫描二维码关注公众号，回复： 2199032 查看本文章

offenset()方法

他的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left

var offset = $("p").offset();      //获取offset值
var left = offset.left;             
var right = offset.right;

position()方法

获取元素相对于最近一个position样式属性设置为 relative 或者absolute祖父节点的相对偏移,返回的对象也包含两个属性,top和left

var position = $("p").position();      //获取offset值
var left = position.left;               
var right = position.right;

scrollTop()方法和scrollLeft()方法

两个方法分别获取元素的滚动条距顶端的距离和距离左侧的距离

var $p = $("p");
var scrollTop = $p.scrollTop();            //获取元素的滚动条距离顶端的距离
var scrollLeft = $p.scrollLeft();      //获取元素的滚动条距离左侧的距离

这两个方法可以指定一个参数，控制元素的滚动条滚动到指定位置。

$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);

JQuery事件和动画

DOM加载

当页面加载完成之后，浏览器会通过JavaScript为DOM元素添加事件。在常规的JavaScript代码中使用window.onload()方法，在JQuery中使用的是$(document).ready()方法。

window.onload()方法是在网页中所有的元素（包括所有的关联文件，例如图片和js文件）完全加载到浏览器之后才执行。
$(document).ready()方法在DOM完全就绪的时候就可以加载。所以作为补充，JQuery还有一个关于元素加载的方法即load()方法

事件绑定

在文档加载完成以后如果需要对一个元素绑定事件可以使用bind()方法实现。bind()方法的调用格式为：

bind(type[,data],fn);

bind()方法有三个参数，解释说明如下：

第一个参数是事件类型,参数类型包括：
第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象。
第三个参数是用来绑定处理的函数。

JQuery合成事件

JQuery有两个合成事件——hover()方法和toggle()方法。这两个方法都是JQuery的自定义方法。

1、hover()方法 hover()方法的语法结构为：

hover(enter,leave);

2、toggle()方法

toggle(function1,function2.......functionN);//当鼠标点击元素的时候每点击一次就会触发一个函数，依次进行。

Jquery 事件及事件对象

事件捕获和事件冒泡刚好是相反的两个过程，事件捕获是从最顶端向下触发。JQuery不支持事件捕获，并不是所有的浏览器都行支持事件捕获，所以需要事件捕获的时候可以编写原生JavaScript程序来实现。

事件对象的属性:

event.type 事件类型
event.preventDefault
event.stopPropagation
event.target ：获取触发事件的元素
event.relatedTarget：获取发生mouseover和mouseout事件的相关属元素
event.pageX和event.pageY：该方法是用来获取光标相对于页面的x和y坐标
event.which ：该方法是鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘按键
event.metaKey：改方法是用于获取键盘的键

自定义动画法animate()

animate(params,speed,callback);

参数说明：
(1)params:一个包含样式属性以及值得映射，比如：{property1:"value1",property2:"value2",.....}
(2)speed:速度参数，可选
(3)callback:在动画完成之后调用的函数，是可选参数

* 停止元素的动画
当需要停止匹配元素正在发生的动画的时候，可以使用stop()方法实现。

    stop()方法的语法结构如下：
    stop([clearQueue],[gotoEnd]);
    参数clearQueue和gotoEnd都是可选参数，都是Boolean值。clearQueue代表是是否清空未执行完的动画队列，gotoEnd代表是否将正在执行的动画直接跳转到末尾状态。

* 判断元素是否处于动画状态

    alert($("div").is(":animated"));

* 延迟动画:实现动画的延迟效果使用delay()方法就可以实现

模拟操作

1.常用模拟方法trigger(),triggerHandler()方法

2.触发自定义事件

 $('#btn').bind("myClick", function(){
        $('#test').append("<p>我的自定义事件.</p>");
    });
 $("#btn").click("myClick");

3.传递数据

trigger(type,[data])方法有两个参数，第一个参数是要触发的函数类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以传递一个参数给回调函数来区别这次事件是代码触发还是用户触发。

$('#btn').bind("myClick", function(event, message1, message2){
        $('#test').append( "<p>"+message1 + message2 +"</p>");
    });
('#btn').trigger("myClick",["我的自定义","事件"]);

JQuery中一些不熟悉的方法

is(xxx)：根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
end(xxx)：回到最近的一个”破坏性”操作之前。即，将匹配的元素列表变为前一次的状态。
index(xxx)