1.jQuery遍历DOM

以一个jQuery对象为基准，查找DOM元素

    //返回被选元素的直接父元素
    parent();

    //返回被选元素的所有祖先元素
    parents();

    //返回介于两个给定元素之间的所有祖先元素
    parentsUntil();

    //返回被选元素的所有直接子元素
    children();

    //在所有子节点中查找
    find();

    //返回被选元素的所有同胞元素
    siblings();

    //返回被选元素的下一个同胞元素
    next();

    //返回被选元素的所有跟随的同胞元素
    nextAll();

    //返回介于两个给定参数（有先后顺序）之间的所有跟随的同胞元素
    nextUntil();

    //返回被选元素的上一个同胞元素
    prev();

    //返回被选元素的所有DOM树上面的同胞元素
    prevAll();

    //返回介于两个给定参数（有先后顺序）之间的所有跟随的同胞元素
    prevUntil()

2.jQuery 遍历 - 过滤

//过滤，返回匹配的元素
filter();

//返回不匹配标准的所有元素
not();

//返回被选元素的首个元素
first();

//返回被选元素的最后一个元素
last();

//返回被选元素中带有指定索引号的元素
eq();

3.DOM操作

class 属性

addClass();
removeClass0；
hasClass();
toggleClass();

复制元素

clone();

插入节点内

append()

//append() 方法在被选元素的结尾（仍然在内部）插入指定内容，可以传入DOM对象，函数对象，html，jQuery对象
//如果DOM节点已经存在于HTML文档中，会移动节点，不会新增
$(".h2").append($('.p1'));

// 添加函数对象eg:
ul.append(function (index, html) {
    return '<li><span>Language - ' + index + '</span></li>';
});

appendTo()

append()和appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同。

text()

text() 方法设置或返回被选元素的文本内容

html()

html() 方法设置或返回被选元素内的原始的html

插入节点外

after(): 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
.before(): 在匹配元素的前面插入内容
insertAfter(): 在目标元素后面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)

DOM删除

//删除元素
remove();

//删除元素，但是保留元素绑定的事件及与该元素相关的jQuery数据
detach();

//清空元素内容
empty();

//将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
unwrap();

DOM替换

//传入要被替换目标，
repalceAll();

//用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
replaceWith();

通用属性操作

.attr()和.prop()用于获得第一个匹配元素的属性的值

区别：对于属性selected，checked处理有所不同

//attr()和prop()对于属性checked处理有所不同：
var radio = $('#test-radio');
radio.attr('checked'); // 'checked'，值为初始状态，不会改变
radio.prop('checked'); // true，值会随着状态改变

//用is()方法判断更好
radio.is(':checked');

removeProp
使用.prop()来设置属性设置为false代替removeProp(),因为用此方法来删除原生的属性（ property ），将完全移除该属性，一旦移除，不能再次被添加到元素上。
removeAttr()
removeAttr()方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。
注意: Internet Explorer 6， 7 ，或8中，使用.removeAttr()删除一个内联onclick 事件处理程序没有实现，为了避免潜在的问题，使用 .prop()代替.

val()方法主要用于获取表单元素的值,对于 <select multiple="multiple"> 元素, .val()方法返回一个选中项的数组,如果没有选项被选中，返回null

css操作

css()方法将作用于DOM节点的style属性
height().css(‘height’) 和 .height()之间的区别是后者返回一个没有单位的数值,.height()总是返回内容宽度。

截至jQuery 1.8，这可能需要检索的CSS的宽度加加上box-sizing的属性，
然后当元素有 box-sizing: border-box时候，减去个元素上任何潜在border和padding值。
为了避免这种问题，使用.css( "width" )而非.width()

width()注意.width()总是返回内容宽度,不管CSS box-sizing属性值。box-sizing
innerHeight()返回元素高度，包括padding，这个方法不适用于window and document对象
innerWidth()返回元素宽度，包括padding，这个方法不适用于window and document对象
outerHeight( [includeMargin ] )返回元素高度，包括padding和border(margin可选)，这个方法不适用于window and document对象。
outerWidth( [includeMargin ] )
offset()在匹配的元素集合中，获取的第一个元素相对于documet的当前坐标
position()方法可以取得元素相对于父元素的偏移位置
scrollLeft() scrollTop()获得和设置水平/垂直滚动条的位置

4jQuery事件

on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数
通过off(‘click’, function)解除绑定的事件，这种形式无法解绑匿名函数
可以使用off(‘click’)一次性移除已绑定的click事件的所有处理函数
无参数调用off()一次性移除已绑定的所有类型的事件处理函数
eg.

/* HTML: * * <a id="test-link" href="#0">点我试试</a> * */

// 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
    alert('Hello!');
});

jQuery能够绑定的事件主要包括：

鼠标事件

click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；

mousemove事件是当鼠标指针移动时触发的，即使是一个像素。这意味着多个事件在短时间内被触发。如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题。因此，优化mousemove处理程序尽可能，这一点很重要，当不再需要他们时应尽快解除绑定。

mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
mousedown:鼠标在元素上并按下鼠标键触发;
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件

键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。

keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。
其他事件

focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。
`` **事件参数`**

jQuery学习笔记[2]