什么是Jquery：是一个javascript库（主旨-用更少的代码实现更多的功能）
1、中文API在线查阅 http://t.mb5u.com/jquery/
英文API在线查询 ：http://api.jquery.com/
一、
1、代码风格：不管是内置函数还是页面元素都是以美元符号$开头，$是jquery的一个重要对象，也是jquery的缩写；
alert（$）返回jquery内部方法；
alert（$()）返回jquery对象；
$("#box").css('color','red');整体也返回jquery对象。连缀功能
Document.getElementById(“”);返回原生DOM对象，也可以通过jquery实现：$(‘#box’).get(0)
2、加载模式
$()括号的原因是要等到加载完所有的页面元素之后才执行javascript代码；
window.ready对象：要等到页面所有元素加载完才执行而$(document).load()只需加载完DOM结构，即到body结束即可执行，所以效率更高
3、对象互换
从原生对象到jquery对象、从jquery对象到原生对象的互换
4、多个库之间的冲突
5、常规选择器
（1）简单选择器
A、元素名称：$(function(){$('div').css('color','red'); }) //返回所有的DOM对象
B、ID ：$(function(){$("#box").css('color','red');}) // 返回单一DOM对象 注意：一个页面应只有一个ID
C、class ：$(function(){$('.box').css('color','red');}); //返回所有的DOM对象
（2）进阶选择器
A、群组悬着器：获取多个选择器的DOM对象
$(function(){
$('div,p,strong').css('color','red'); //或者$('#div,.p,strong').css('color','red');
})
B、后代选择器：
$(function(){
$('ul li a').css('color','red'); //层层追溯
}) //ul 标签下的li标签下的a标签
C、通配选择器
在全局范围使用通配符会极大消耗资源，常用于局部范围内
$('ul li*').css('color','red');
D、可以在ID 、class选择器前加元素名：
<divclass="box">div</div>
<p class="box">p</p>
$('div.box').css('color','red');
一个元素多个选择器的情况：<div class="box pox">div</div> 精确的指定样式：$('.box.pox').css('color','red');
（3）高级选择器
A、层次选择器
a: 后代选择器: $('#box p').css('color','red'); box下的所有p均有效 //也可以$('#box').find('p').css('color','red');
b: 子选择器:孙子失效
$('#box >p').css('color','red'); //box下的第一代p有效
也可以用：$('#box').children('p').css('color','red');
c: next选择器：同级的下一个元素：$('#box + p').css('color','red'); //box与p同级
也可以$('#box').next('p').css('color','red');
$('#box ~p').css('color','red'); //同级box下的所有p均有效 ，中间可以出现其他的
也可以 $('#box').nextAll('p').css('color','red');
注意：next()不传参，则默认传递*
$('#box').prevAll('p').css('color','red'); 与next 相反
$('#box').prev('p').css('color','red');
$('#box').siblings('p').css('color','red'); //上下同级所有的p
$('#box').nextUntil('p').css('color','red');//同级box下非p的元素，直到遇到p结束
$('#box').prevUntil('p').css('color','red');
B、属性选择器
(4)过滤选择器
A、基本过滤器：以（:）号开头
1）：first 获取匹配的第一个元素 $('li:first'); 当然：last相反
2）：not(selector) 查找所有未选中的 input 元素
3）:even 匹配所有索引值为偶数的元素，从 0 开始计数；当然 :odd相反
……………………………………………………
B、内容过滤器
1）:contain(text) 匹配包含给定文本的元素
$("div:contains('John')") : 查找所有包含 "John" 的 div 元素
2):empty $("td:empty") 查找所有不包含子元素或者文本的空元素
3):has(selector) 匹配含有选择器所匹配的元素的元素
4):parent 匹配含有子元素或者文本的元素 $("td:parent")
C、可见性过滤器
1）:hidden 匹配所有不可见元素，或者type为hidden的元素、style="display:none"
2):visible 匹配所有的可见元素
D、子元素过滤器：
1）:first-child 匹配第一个子元素
':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
2): last-child 匹配最后一个子元素
':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
3) :only-child如果某个元素是父元素中唯一的子元素，那将会被匹配
如果父元素中含有其他元素，那将不会被匹配。
4) :nth-child(n) 匹配其父元素下的第N个子或奇偶元素
6、DOM基本操作和CSS操作
A、设置元素及内容
1) html() 、html(value) ：获取元素的html内容 //value用于替换html内容
2)text() 、 text(value) : 获取元素中的文本内容 //value用于替换文本内容
3)val()、val(value) 获取表单文本内容，对于下拉列表、复选框可以通过数组传值选定。
B、元素属性操作
1）attr(key) 如$("img").attr("src"); 以src为key获取值
2）attr(key,value)，设置值
3）attr(key,function) $("img").attr("title",function() { return this.src });
4)removeAttr(key)删除以key为键的属性值
C、元素样式操作：
1）.css(): $("p").css("color"); 获取p元素的color属性值
$("p").css({color: "#ff0011", background: "blue" }); 设置相应值
$(“p”).css(‘width’,function(){}),通过匿名函数传值
2）$('div').each(function(index,element){
alert(index + ":" +element);
}); //获取原生态对象数组
3）.addClass() 添加元素class样式 如：
$('ulli:last').addClass(function() {
return 'item-' + $(this).index();
}); //添加了 class=”item-0”
与之相反的是removeClass
4) .toggleClass("selected") class两个样式之间的切换（默认样式和指定样式），点击切换
$("p").click(function(){
$(this).toggleClass("highlight",count++ % 3 == 0);
});
D、CSS方法：
1）.width() $(document).width()
$('ul').width('200px') //设置值
$('li').width(function(index,width){
return width - 500 + 'px';
})
2）innerWidth()、innerHeigth()、outerHeigth()……
7、DOM节点操作：节点模型也就是DOM中的M
A、创建节点
var box = $('<div id="box">节点</div>') //创建节点
$('body').append(box); //插入节点
B、插入节点
(1)内部插入
* append(content) $('div').append("<strong>DOM</strong>");
*append(function(){})
$('div').append(function(index){
return "<strong>DOM</strong>";
})
*appendTo(content) $('strong').appendTo('div');移入到，不需要创建节点
*prepend(content) $('div').prepend('<strong>yes</strong>') 在div下创建一个节点，该节点在其他节点之前
* $('strong').prependTo('div');一到后面
（2）外部插入
*after(content) $('div').after('<strong>df</strong>');
*before(content)
*inserBefore(content)
*inserAfter(content)
C、包裹节点
*wrap(html) $('div').wrap('<strong></strong>');包裹外层
*wrap(function(index){return ‘<strong></strong>’})
*unwrap() $('div').unwrap();一层层移除
*wrapAll() $('div').wrapAll('<strong></strong>');所有div被一层strong 包裹
*wrapInner() $('div').wrapInner('<strong></strong>');内部包裹
D、节点操作
*clone(true|false) 节点复制，true 事件也复制
*remove(selector) 删除不保留事件
*detach(selector) 删除后保留事件
*replaceWith(content) 替代节点
7、表单选择器
A、常规选择器
* $('input').val() //默认选择第一个
* $('input').eq(1).val() //选择第二个
* $('input[name=user]').val() //语义稍微清晰
B、表单选择器 ：返回的都是元素集合
* :input //匹配所有 input, textarea, select 和 button 元素
$(":input").length // 匹配所有 input, textarea, select 和button 元素
$(‘input’).length //匹配input的值
$(":input[name=password]").val()
* :password //匹配所有密码框
$(":password[name=password]").val()
…………………………
C、表单过滤器：
*:enable $("form:enabled").length //当前可用
*:disable $("form:disabled").length //当前不可用
*:checked
*:selected