选择器

利用jQuery查找返回的是jQuery对象，jQuery对象类似于数组，它的每一个元素都是一个引用了DOM节点的对象。返回的jQuery对象如下：

1
2
3

[<div id='abc'>...</div>]
//若不存在则返回[]
//不会返回defined或null

查找同时包含多个class节点的元素

1	var a = $('.red.green');//注意：没有空格！

当属性的值包含空格等特殊字符时，需要用双引号括起来。

查找和过滤

查找

find() 在某个节点的子节点中查找
parent() 从当前节点向上查找
next()
prew()

过滤

filter() 可传入函数，要特别注意，函数内部的this被绑定为DOM对象，不是jQuery对象。
map()把一个jQuery对象包涵的若干DOM节点转化为其他对象

var langs = $('ul.lang li');
var arr = langs.map(function(){
    return this.innerHTML;
}).get();//用get()拿到包含string的Array

first()
last()
slice()

1 2	if(this.type !== "radio" \|\| this.checked)等价于 if(this.type!=='radio'\|\|this.type==='radio'&&this.checked)

操作DOM

修改Text和HTML

注意：jQuery对象的所有方法都返回一个jQuery对象（可能时新的，也可能是自身），这样我们可以进行链式调用，非常方便。

css();获取设置元素css
hasClass();
addClass();
removeClass();
show();修改display属性
hide();

//*浏览器可视窗口大小*
$(window).width();
$(window).height();
//*同理文档大小，window改为document即可。*
//*某个div的大小*
div.width();

attr()
removeAttr()
prop()

attr()和prop()对于属性checked处理有所不同。

1
2
3

radio.attr('checked');//'checked'
radio.prop('checked');//true
radio.is(:checked);//true

is()最佳

操作表单

val()获取和设置对应的value属性。

修改DOM结构

append()
prepend()
after()
before()
remove()删除节点

事件

on方法用来绑定一个事件，

a.on('click',function(){
alert('hello!');
});
//等价于
a.click(function(){
alert('hello!');
});

鼠标事件

click:鼠标单击时触发
dbclick:鼠标双击时触发
mouseenter:鼠标进入时触发
mouseleave:鼠标离开触发
mousemove:鼠标做DOM内部移动时触发
hover:鼠标进入和退出时触发两个函数，相当于mouseenter 和mouseleave

键盘事件

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

keydown:键盘按下时触发
keyup：键盘松开时触发
keypress：按一次键后触发

其他事件

focus:当DOM获得焦点时触发
blur:当DOM失去焦点时触发
change:当<input><select>或<textarea>的内容改编时触发
submit:当<form>提交时触发
ready:当页面被载入并且DOM树完成初始化后触发，仅作用于document

注意：初始化的代码必须放到document对象的ready事件中，保证DOM已完成初始化

事件参数

有些事件会传入Event对象作为参数

$(function(){
    $('#test').mousemove(function(e){
        $('testSpan').text('pageX = '+e.pageX+',pageY='+e.pageY);
    });
});

取消绑定

off(‘click’,function);

事件触发条件

事件的触发总是由用户操作引起的，当用户在文本框中输入时，就会触发change事件，但如果用JS代码去改动，不回触发，若希望触发，可直接调用input.change()==input.trigger(‘change’)

浏览器安全限制

有些JS代码只有在用户触发下才能执行，例如，window.open()
用户可通过单击直接触发，延迟调用则会被浏览器拦截

动画

show()
hide()
toggle()
slideUp()
slideDown()
slideToggle()
fadeIn()
fadeOut()

1
2
3

div.fadeOut('slow',function(){
    $(this).remove();
});

fadeToggle()
animate()

div.animate({
    opacity:0.25;
    width:'256px';
    height:'256px';
},3000,function(){
    console.log('');
    $(this).css('opacity','1.0').css('width',/128px').css('height','128px');});

delay()//暂停

AJAX

ajax(url,settings)需要接收一个url和一个可选的settings对象，常用的选项如下：

async: 是否异步执行AJAX请求，默认为true,千万不要指定为false
method：发送的method，缺省为GET，可指定为POST、PUT等
contentType: 发送POST请求的格式，默认值为application/x-www-form-urlencoded;charset=UTF-8,也可以指定为text/plain,application/json
data: 发送的数据，可以是字符串，数组或object。如果GET请求，data将被转换为query附加到URL上，如果是POST请求，根据contentType把data序列号成合适的格式
headers：发送的额外的HTTP头，必须是一个object
dataType: 接收的数据格式，可以指定为html.xml,json,text等，缺省情况下，根据Content-Type猜测。
get()
post()
getJSON()

扩展

$.fn
$.extend(target,obj1,obj2,…) 越往后优先级别越高

$.fn.highlight = function(options){
var opts=$.extend({},$.fn.highlight.defaults,options);
this.css('backgroundColor',opts.backgroundColor).css('color',opts.color);
    return this;
}
$.fn.highlight.default={
    color:'#d85030',
    backgroundColor:'#fff8de'
}
$.fn.highlight.default.color='#fff';
$.fn.highlight.backgroundColor:'#000';