简介
- 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 Code
before（在每个匹配的元素之前插入内容）
View Code
3.删除
1. empty（删除匹配的元素集合中内容不删除标签）
View Code
2.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 Code
3.尺寸
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() ????//用户离开页面时5.jQuery
原文地址：https://www.cnblogs.com/Anderson-An/p/9977160.html