- jQuery是一个快速、简洁的JavaScript框架，jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
- 引用方法：
<scriptsrc="jquery-1.12.4.js"></script>
基本选择器
1.id选择器
<div id="i1">111</div> $(‘#i1‘)
jQuery.fn.init [div#i1, context: document, selector: "#i1"]
$(‘#i1‘)[0]
<div id="i1">111</div>
2.clss选择器
<div class="c1">222</div> $(‘.c1‘) jQuery.fn.init [div.c1, prevObject: jQuery.fn.init(1), context: document, selector: ".c1"] $(‘.c1‘)[0] <div class="c1">222</div>
3.标签选择器
查找所有的a标签
<div class="c1">
<a>111</a>
<a>222</a>
<a>333</a>
</div>
$(‘a‘)
4.一次查多个
<div id="i1">111</div>
<div class="c1">
<a>111</a>
<a>222</a>
<a>333</a>
</div>
$(‘#id.c1,a‘)
层级选择器
1. ancestor descendant(查找包含的所有-子子孙孙)
<div id="i1" class="c1">
<div>
<a>a</a>
</div>
<div>
<a>b</a>
<a>c</a>
</div>
</div>
$(‘#i1 a‘)
2.parent > child(只查找下一级所有-儿子)
<div id="i1" class="c1">
<div>
<a>a</a>
</div>
<a>b</a>
<a>c</a>
</div>
$(‘#i1 > a‘)
<a>b</a>
<a>c</a>
3.prev + next(查找同级相邻的一个)
<div id="i1" class="c1">
<div>
<input name="name"/>
<a>a</a>
</div>
<a>b</a>
<input name="name"/>
<a>c</a>
<a>d</a>
</div>
$(‘input + a‘)
[<a>?a?</a>?, <a>?c?</a>?]
4.prev ~ siblings(查找同级下面所有)
<div id="i1" class="c1">
<div>
<input name="name"/>
<a>a</a>
</div>
<a>b</a>
<input name="name"/>
<a>c</a>
<a>d</a>
</div>
$(‘input ~ a‘)
[<a>?a?</a>?, <a>?c?</a>?, <a>?d?</a>?]
基本筛选器
$(‘li:first‘) //第一个元素
$(‘li:last‘) //最后一个元素
$("tr:even") //索引为偶数的元素，从 0 开始
$("tr:odd") //索引为奇数的元素，从 0 开始
$("tr:eq(1)") //给定索引值的元素
$("tr:gt(0)") //大于给定索引值的元素
$("tr:lt(2)") //小于给定索引值的元素
$(":focus") //当前获取焦点的元素
$(":animated") //正在执行动画效果的元素
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
1.:first（获取匹配的第一个元素）
$(‘ul li:first‘) <li>111</li>
2.:last（获取匹配的最后一个元素）
$(‘ul li:last‘) <li>555</li>
3.:eq（匹配一个给定索引值的元素）
$(‘ul li:eq(2)‘) <li>333</li>
4.gt（匹配所有大于给定索引值的元素）
$(‘ul li:gt(2)‘) <li>444</li> <li>555</li>
5.:lt （匹配所有小于给定索引值的元素）
$(‘ul li:lt(2)‘) <li>111</li> <li>222</li>
others属性选择器
1. [ ]（匹配包含给定属性的元素）
<div class="c1">
<div name="derek"> derek</div>
<div name="jack"> jack</div>
</div>
$(‘div[name]‘)
<div name="derek"> derek</div>
<div name="jack"> jack</div>
2.[a="b"]（匹配给定的属性是某个特定值的元素）
<div class="c1">
<div name="derek"> derek</div>
<div name="jack"> jack</div>
</div>
$(‘div[name="derek"]‘)
<div name="derek"> derek</div>
others表单选择器
<form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form>
用：input,:text ,:password,:radio,:checkbox........
$(‘:text‘) [<input type=?"text">?] $(‘:password‘) [<input type=?"password">?]
表单对象属性
1.:enabled（匹配所有可编辑元素）
<form> <input name="email" disabled="disabled" /> <input name="id" /> </form>
$("input:enabled")
[<input name="id" />]
2.:disabled（匹配所有不可编辑元素）
$("input:disabled")
[<input name="email" disabled="disabled" />]
3.:checked（匹配所有选中的被选中元素）
<form> 篮球：<input type="checkbox" name="favor" value="1" /> 足球：<input type="checkbox" name="favor" value="2" /> 台球：<input type="checkbox" name="favor" value="3" checked="checked" /> </form>
$("input:checked")
<input type="checkbox" name="favor" value="3" checked="checked">
4.:selected（匹配所有选中的option元素）
<select> <option value="1">篮球</option> <option value="2" selected="selected">足球</option> <option value="3">台球</option> </select>
$("select option:selected")
<option value="2" selected="selected">足球</option>
筛选器
$("div").children() //div中的每个子元素,第一层
$("div").find("span") //div中的包含的所有span元素,子子孙孙
$("p").next() //紧邻p元素后的一个同辈元素
$("p").nextAll() //p元素之后所有的同辈元素
$("#test").nextUntil("#test2") //id为"#test"元素之后到id为‘#test2‘之间所有的同辈元素,掐头去尾
$("p").prev() //紧邻p元素前的一个同辈元素
$("p").prevAll() //p元素之前所有的同辈元素
$("#test").prevUntil("#test2") //id为"#test"元素之前到id为‘#test2‘之间所有的同辈元素,掐头去尾
$("p").parent() //每个p元素的父元素
$("p").parents() //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2") //id为"#test"元素到id为‘#test2‘之间所有的父级元素,掐头去尾
$("div").siblings() //所有的同辈元素,不包括自己
1.next（紧邻的同级下一个元素）
<p>11</p> <span>22</span> <div>33</div>
$("p").next()
<span>22</span>
2.prev（紧邻的同级上一个元素）
$("span").prev()
<p>11</p>
3. parent（匹配元素的唯一父元素）
<div>
<span>111</span>
<div>
<p>222</p>
<div>
<a>333</a>
</div>
</div>
</div>
$("a").parent()
<div>
<a>333</a>
</div>
4.children（匹配元素所有子元素的元素集合）
<div>
<p>111</p>
<span>
<p>222</p>
</span>
</div>
$("div").children()
[<p>111?</p>?, <span>?<p>?222?</p>?</span>?]
5.siblings（匹配元素所有同级元素的元素集合）
<div>
<p>111</p>
<span>222</span>
<p>333</p>
</div>
$("span").siblings()
[<p>?111?</p>?, <p>333?</p>?]
6.find（搜索所有与指定表达式匹配的元素）
<div>
<p>111</p>
<span>222</span>
<p>333</p>
</div>
$("div").find(‘p‘)
<p>111</p> <p>333</p>
others查找 过滤属性
$(‘p‘).html(); //返回p元素的html内容
$("p").html("Hello <b>nick</b>!"); //设置p元素的html内容
$(‘p‘).text(); //返回p元素的文本内容
$("p").text("nick"); //设置p元素的文本内容
$("input").val(); //获取文本框中的值
$("input").val("nick"); //设置文本框中的内容
1.html（获取和设置匹配元素的内容）
<div>
<p>111</p>
<span>222</span>
<p>333</p>
</div>
获取
$(‘span‘).html()
"222"
修改
$(‘span‘).html("<span>444</span>")
2.text（获取和设置匹配元素的内容）
$(‘span‘).text() "222" 修改 $(‘span‘).text(<span>444</span>) $(‘span‘).text() "<span>444</span>" 修改后变成了字符串而不再是标签了
3.val（获取和设置input、select框中的内容）
<input type="text" value="默认值"/>
$(‘input‘).val() "默认值" 修改value的值 $(‘input‘).val(‘请输入关键字‘) $(‘input‘).val() "请输入关键字"
CSS
1.addClass（为每个匹配的元素添加指定的类名）
<div>
<span>111</span>
</div>
$(‘span‘).addClass(‘c1‘)
2.removeClass（从所有匹配的元素中删除全部或者指定的类）
<div>
<span class="c1">111</span>
</div>
$(‘span‘).removeClass(‘c1‘)
3. toggleClass（如果存在就删除、不存在就添加）
$(‘span‘).toggleClass(‘c1‘)
属性
1.attr（设置或返回自定义属性值）
<input id="i1" type="button" value="开关" />
获取值 $(‘#i1‘).attr(‘type‘) "button" $(‘#i1‘).attr(‘value‘) "开关" $(‘#i1‘).attr(‘id‘) "i1" 设置值 $(‘#i1‘).attr(‘name‘,‘derek‘) <input id="i1" type="button" value="开关" name="derek"/>
2.removeAttr（删除自定义属性）
$(‘#i1‘).removeAttr(‘name‘)
3.prop（专门用于checkbox，radio）
<input id="i1" type="checkbox" checked="checked" /> # 判断 > (‘input:checkbox‘).prop(‘checked‘) < true # 设置 > $(‘input:checkbox‘).prop(‘checked‘,false) < [<input id=?"i1" type=?"checkbox" checked=?"checked">?] > $(‘input:checkbox‘).prop(‘checked‘) < false # 禁用 > $(‘input:checkbox‘).prop(‘disabled‘) < false > $(‘input:checkbox‘).prop(‘disabled‘,true) < [<input id=?"i1" type=?"checkbox" checked=?"checked" disabled>?]
4.removeProp（用来删除由.prop()方法设置的属性集）
<input id="i1" type="checkbox" checked="checked" /> > $(‘input:checkbox‘).prop(‘disabled‘,true) < [<input id=?"i1" type=?"checkbox" checked=?"checked" disabled>?] > $(‘input:checkbox‘).removeProp(‘disabled‘) < [<input id=?"i1" type=?"checkbox" checked=?"checked">?]
文档处理
1.内部添加
（1）append（向每个匹配的元素内部追加内容）
<div class="d1">
<p>第一行</p>
</div>
$("div").append("<p>第二行</p>")
（2）prepend（向每个匹配的元素内部前置内容）
$("div").prepend("<p>第零行</p>")
第零行 第一行 第二行
2.外部添加
after（在每个匹配的元素之后插入内容）
View Codebefore（在每个匹配的元素之前插入内容）
View Code3.删除
1. empty（删除匹配的元素集合中内容不删除标签）
View Code2.remove（删除匹配的元素集合包括标签）
View Code jQuery CSS
1.CSS
css（获取和设置匹配元素的样式属性）
<span style="color:red">111</span>
$(‘span‘).css(‘color‘) -->获取
$(‘span‘).css(‘color‘,‘black‘) -->设置
$(‘span‘).css({‘color‘:‘#dddddd‘,‘background‘:‘blue‘}) -->设置多个
2.位置
View Code（1）offset（获取和设置匹配元素在整个html的相对坐标）
$(‘#i1‘).offset()
（2）position（获取匹配元素相对父元素的坐标）
$(‘#i1‘).position()
（3）scrollTop（获取和设置滚动条到顶部的坐标）
View Code（4）scrollLeft（获取和设置滚动条到左侧的坐标）
View Code3.尺寸
height 取得匹配元素当前计算的高度值（px） innerHeight 获取第一个匹配元素内部区域高度（包括补白、不包括边框） outerHeight 获取第一个匹配元素外部高度（默认包括补白和边框） width 取得第一个匹配元素当前计算的宽度值（px） innerWidth 获取第一个匹配元素内部区域宽度（包括补白、不包括边框） outerWidth 获取第一个匹配元素外部宽度（默认包括补白和边框）
事件
$("p").click(); //单击事件
$("p").dblclick(); //双击事件
$("input[type=text]").focus() //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur() //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup() //元素上放松鼠标按钮时触发事件
$("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover() //当鼠标指针位于元素上方时触发事件
$("p").mouseout() //当鼠标指针从元素上移开时触发事件
$(window).keydown() //当键盘或按钮被按下时触发事件
$(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup() //当按钮被松开时触发事件
$(window).scroll() //当用户滚动时触发事件
$(window).resize() //当调整浏览器窗口的大小时触发事件
$("input[type=‘text‘]").change() //当元素的值发生改变时触发事件
$("input").select() //当input 元素中的文本被选择时触发事件
$("form").submit() //当提交表单时触发事件
$(window).unload() //用户离开页面时
