jQuery

选取元素

和css选择器几乎一样
$(''),引号里面加入CSS选择器语法就可以

• 找孩子

$node.children()
$node.children('.children1')

• 找祖先

//可以查找祖先的某个元素
$node.parents([selector])

• 选取类数组对象的第某个
  .eq()

$('li').eq(0).html()
$('li').eq(1).html()

.first() .last()

$('li').first().html()
$('li').last().html()

• 按条件查找元素
  .find()

<ul>
    <li class='active'>1</li>
    <li>2</li>
    <li>3</li>
</ul>
$('ul').find('.active').html()

• 排除某个选项

$('.xxx').not('.xx').on('click',function(){})

添加，删除元素

$ct.prepend($node); // 在容器开头添加
$ct.append($node); // 在容器末尾添加
$node.remove();  // 删除元素

获取元素内容

.html() .text()

$('div').html()
$('div').text()

操作CSS

.css()

$('.active').css('display','none')
$('.active').css({
  display:'none'
})

添加，删除class

.addClass() .removeClass()

$('.div1').addClass()
$('.div1').removeClass()

操作属性

$('img').attr('src') // 获取
$('img').attr('src','xxx') //设置
$node.attr('data-src','logo.png'); //添加自定义属性

获取设置元素宽高

$node.width(); $node.width(200)
$node.height(); $node.height(200)
$node.innerWidth() 包括内边距
$node.outerWidth() 包括内边距包括边框
$node.outerWidth(true) 包括内边距包括边框包括外边距

获取元素坐标

$node.offset().left
$node.offset().top

获取元素索引

$node.index() //node在同辈元素中的索引位置
$('li').index($node) //node在li元素中的索引位置

事件

• 事件代理

//给ul下面所有的li绑定事件
<ul>
   <li class='active'>1</li>
   <li>2</li>
   <li>3</li>
</ul>
$('ul').on('click','li',function(e){
    console.log(this)
    console.log(e.target.innerText)
})

动画

.animate( properties [, duration ] [, easing ] [, complete ] )

$('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });

遍历

$(selector).each()
通常用来遍历JQ的DOM对象

$( "li" ).each(function( index,value) {  value是原生DOM对象，this也是原生DOM对象
  console.log( index + ": " + $(this).text() );
});    

jQuery.each(collection,callback(index,value))
通常用来遍历普通数组或者对象

var obj = {
  "flammable": "inflammable",
  "duh": "no duh"
};
$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

表单元素

$('input').eq(0).val //获取输入值
$('input').eq(0).attr('checked',false) 
$('input').eq(0).attr('checked',true) // 设置为选中或不选中

extend方法

用法一：
var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};
$.extend(object1, object2);  //把object2合并到object1，并修改object2，浅拷贝,返回值是object1

用法二：
var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};
$.extend(true, object1, object2);//把object2合并到object1，并修改object2，深拷贝,返回值是object1

用法三：
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend({}, defaults, options);
//把options和defaults合并到{}，通过setting引用合并后返回的对象不会修改defaults,和options