jQuery
jQuery入门
jQuery快速入门。
jQuery介绍
- 1. jQuery是一个轻量级的、兼容多浏览器的Javascript库。
- 2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
jQuery选择
- 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
jQuery 引入
jQuery官网：https://jquery.com/
版本选择：jquery-3.2.1.min.js
可下载下来通过script标签导入 或者不下载直接引入CDN的文件：
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。例如：
$(“#i1”).html();
意思是：获取id值为i1的元素的html代码。其中html()是jQuery里的方法。
相当于：
document.getElementById("i1").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。
约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $xxx = jQuery对象
$xxx[0] //jQuery对象转成DOM对象，通过索引
var xxx = DOM对象
$(xxx) //DOM对象转成jQuery对象 通过$()
通过上面的转换后，可使用彼此的方法：
$("#i1").html(); // jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML; // DOM对象使用DOM的方法
jQuery包含以下内容：
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档处理
- 事件
- 动画效果
- 插件
- each、data、Ajax
下载链接：jQuery官网
jQuery基础语法
$(selector).action()
选择器
基本选择器
id选择器：
|
1
|
$("#id")
|
标签选择器：
|
1
|
$("tagName")
|
class选择器：
|
1
|
$(".className")
|
所有元素选择器：
|
1
|
$("*")
|
组合选择器：
|
1
|
$("#id, .className, tagName")
|
层级选择器
x和y可以为任意选择器
|
1
2
3
4
|
$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
|
属性选择器：
[attribute] [attribute=value] // 属性等于 [attribute!=value] // 属性不等于 // 示例 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']"); // 取到checkbox类型的input标签 $("input[type!='text']"); // 取到类型不是text的input标签
// 查找所有含有 id 属性的 div 元素 <div> <p>Hello!</p> </div> <div id="test2"></div> $("div[id]") // [ <div id="test2"></div> ]
// 查找所有 name 属性是 newsletter 的 input 元素 <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> $("input[name='newsletter']").attr("checked", true); // [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
// 查找所有 name 属性不是 newsletter 的 input 元素 <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> $("input[name!='newsletter']").attr("checked", true); // [ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
// 查找所有 name 以 'news' 开始的 input 元素 <input name="newsletter" /> <input name="milkman" /> <input name="newsboy" /> $("input[name^='news']") // [ <input name="newsletter" />, <input name="newsboy" /> ]
// 查找所有 name 以 'letter' 结尾的 input 元素 <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> $("input[name$='letter']") // [ <input name="newsletter" />, <input name="jobletter" /> ]
// 查找所有 name 包含 'man' 的 input 元素 <input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" /> $("input[name*='man']") // [ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
// 复合属性选择器，需要同时满足多个条件时使用。 // 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 <input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" /> $("input[id][name$='man']") // [ <input id="letterman" name="new-letterman" /> ]
筛选器
基本筛选器
:first // 第一个
:eq(index) // 索引等于index的那个元素
:last // 最后一个
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 所有小于给定索引值的元素
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> $('li:first'); // [ <li>list item 1</li> ] $('li:last') // [ <li>list item 5</li> ]
// 匹配一个给定索引值的元素,从0开始计数 <table> <tr><td>Header 0</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> $("tr:eq(1)") // [ <tr><td>Value 1</td></tr> ]
// 查找表格的1、3、5...行（即索引值0、2、4...） <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> $("tr:even") // [ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
// 查找表格的2、4、6行（即索引值1、3、5...） <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> $("tr:odd") // [ <tr><td>Value 1</td></tr> ]
// 查找第二第三行，即索引值是1和2，也就是比0大 <table> <tr><td>Header 0</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> $("tr:gt(0)") // [ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
// 查找所有未选中的 input 元素 <input name="apple" /> <input name="flower" checked="checked" /> $("input:not(:checked)") // [ <input name="apple" /> ]
// 给所有包含 p 元素的 div 元素添加一个 text 类 <div><p>Hello</p></div> <div>Hello again!</div> $("div:has(p)").addClass("test"); // [ <div class="test"><p>Hello</p></div> ]
表单筛选：
|
1
2
3
4
5
6
7
8
9
10
|
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
|
// 查找所有的input元素，下面这些元素都会被匹配到。 <form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option</option></select> <textarea></textarea> <button>Button</button> </form> $(":input")
// 查找所有文本框 <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> $(":text") // [ <input type="text" /> ]
// 查找所有按钮. <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>option<option/></select> <textarea></textarea> <button></button> </form> $(":button") // [ <input type="button" />,<button></button> ]
表单对象属性:
|
1
2
3
4
|
:enabled
:disabled
:checked
:selected
|
// 查找所有可用的input元素 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // [ <input name="id" /> ]
// 查找所有不可用的input元素 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:disabled") // [ <input name="email" disabled="disabled" /> ]
// 查找所有选中的复选框元素 <form> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> </form> $("input:checked") // [ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]
// 查找所有选中的选项元素 <select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3">Trees</option> </select> $("select option:selected") // [ <option value="2" selected="selected">Gardens</option> ]
下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
// 找到每个段落的后面紧邻的同辈元素。 <p>Hello</p> <p>Hello Again</p> <div> <span>And Again</span> </div> $("p").next() // [ <p>Hello Again</p>, <div><span>And Again</span></div> ] // 找到每个段落的后面紧邻的同辈元素中类名为selected的元素。 <p>Hello</p> <p class="selected">Hello Again</p> <div> <span>And Again</span> </div> $("p").next(".selected") // [ <p class="selected">Hello Again</p> ]
// 查找当前元素之后所有的同辈元素。 // 给第一个div之后的所有元素加个类 <div></div> <div></div> <div></div> <div></div> $("div:first").nextAll().addClass("after"); <!-- [ <div class="after"></div> , <div class="after"></div> , <div class="after"></div> ] -->
// 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
// 给#term-2后面直到dt前的元素加上红色背景
$('#term-2').nextUntil('dt').css('background-color', 'red');
上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
// 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 // 找到每个段落紧邻的前一个同辈元素。 <p>Hello</p> <div><span>Hello Again</span></div> <p>And Again</p> $("p").prev() // [ <div><span>Hello Again</span></div> ]
// 查找当前元素之前所有的同辈元素 // 给最后一个之前的所有div加上一个类 <div></div> <div></div> <div></div> <div></div> $("div:last").prevAll().addClass("before"); [ <div class="before"></div> , <div class="before"></div> , <div class="before"></div> ]
// 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
// 给#term-2前面直到dt前的元素加上红色背景
$('#term-2').prevUntil('dt').css('background-color', 'red');
父亲元素：
$("#id").parent()
$("#id").parents()
$("#id").parentsUntil()
// 取得一个包含着所有匹配元素的唯一父元素的元素集合。 // 查找每个段落的父元素 <div><p>Hello</p><p>Hello</p></div> $("p").parent() // [ <div><p>Hello</p><p>Hello</p></div>]
// 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）
// 找到每个span元素的所有祖先元素。
$("span").parents()
// 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。 // 查找item-a的祖先，但不包括level-1,背景色变红。 <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul> $('li.item-a').parentsUntil('.level-1').css('background-color', 'red');
儿子和兄弟元素：
$("#id").children(); // 儿子们
$("#id").siblings(); // 兄弟们
// 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 // 查找DIV中的每个子元素。 <p>Hello</p> <div> <span>Hello Again</span> </div> <p>And Again</p> $("div").children() // [ <span>Hello Again</span> ]
// 找到每个div的所有同辈元素。 <p>Hello</p> <div> <span>Hello Again</span> </div> <p>And Again</p> $("div").siblings() // [ <p>Hello</p>, <p>And Again</p> ]
查找元素：
$("id").find() // 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
// 从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。 <p><span>Hello</span>, how are you?</p> $("p").find("span") // [ <span>Hello</span> ]
补充：
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
两种用法
$("my-checkbox input:not(:checked)");
$("my-checkbox input").not("checked");
$("lable:has('input')");
$("lable").has("input");
注：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧菜单示例</title> <style> .hide { display: none; } .menu { width: 100px; height: 600px; border: 1px solid black; } .title { background-color: #4949ff; height: 36px; line-height: 36px; } </style> </head> <body> <div class="menu"> <div class="title" onclick="showBody(this);">菜单一</div> <div class="body hide"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> <div class="title" onclick="showBody(this);">菜单二</div> <div class="body hide"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> <div class="title" onclick="showBody(this);">菜单三</div> <div class="body hide"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> function showBody(ths) { $(ths).next().removeClass("hide").siblings(".body").addClass("hide"); } </script> </body> </html>
属性操作
1、基本属性操作（attr、prop）
$("img").attr("src"); // 返回文档中所有图像的src属性值
$("img").attr("src","test.jpg"); // 设置所有图像的src属性
$("img").removeAttr("src"); // 将文档中图像的src属性删除
$("input[type='checkbox']").prop("checked", true); // 选中复选框
$("input[type='checkbox']").prop("checked", false); // 取消复选框
$("img").removeProp("src"); // 删除img的src属性
// attr与prop区别
// attr可以找到自定义的属性、prop只能找到固有的属性
2、class操作
$("p").addClass("test"); // 为p元素加上 'test' 类
$("p").removeClass("test"); // 从p元素中删除 'test' 类
$("p").toggleClass("test"); // 如果存在就删除,否则就添加
$("p").hasClass("test"); // 判断有没有 'test' 类,返回布尔值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式类操作示例</title> <style> .c1 { background-color: yellow; } </style> </head> <body> <div id="d1" class="c1 c2">111</div> <button onclick="mySwitch();">关下灯！我要睡了！谢谢！</button> <div id="deng" style="width: 100px;height: 100px;border-radius: 50%" class="c1"></div> <script src="jquery-3.2.1.min.js"></script> <script> function mySwitch() { $("#deng").toggleClass("c1"); } </script> </body> </html>
3、标签文本text/html
$('p').html(); // 返回第一个p元素的html内容 $("p").html("Hello <b>test</b>!"); // 设置所有p元素的html内容 $('p').text(); // 返回p元素的文本内容 $("p").text("test"); // 设置p元素的文本内容 $("input").val(); // 获取文本框中的值 $("input").val("test"); // 设置文本框中的内容
CSS操作
1、样式
$("p").css("color"); // 访问查看p元素的color属性
$("p").css("color","red"); // 设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" });
// 设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）
2、位置
$('p').offset() // 元素在当前视口（浏览器）的相对偏移
$(".c2").offset({top:'100',left:'200'}); // 设置元素在当前视口（浏览器）的相对偏移
$('p').offset().top
$('p').offset().left
$("p").position() // 元素相对已定位了的父元素的偏移，没有定位了的父亲就找当前视口。
$(window).scrollTop() // 获取滚轮滑的高度
$(window).scrollLeft() // 获取滚轮滑的宽度
$(window).scrollTop('100') // 设置滚轮滑的高度为100
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>位置相关示例</title> <style> *{margin: 0;padding: 0;} .c1,.c2{ height: 100px; width: 100px; } .c1{ background-color: aqua; } .c2{ background-color: blueviolet; } </style> </head> <body> <div class="c1">c1</div> <div class="c3"> <div class="c2">c2</div> </div> <script src="jquery-3.2.1.min.js"></script> </body> </html>
.offset()与.position()的另一个区别是.offset()可以设置偏移量，而.position()不能
3、尺寸
$("p").height(); // 获取p元素的高度
$("p").width(); // 获取p元素的宽度
$("p:first").innerHeight() // 获取第一个匹配元素内部区域高度(包括内边距、不包括边框)
$("p:first").innerWidth() // 获取第一个匹配元素内部区域宽度(包括内边距、不包括边框)
$("p:first").outerHeight() // 匹配元素外部高度(默认包括内边距和边框)
$("p:first").outerWidth() // 匹配元素外部宽度(默认包括内边距和边框)
$("p:first").outerHeight(true)// 为true时包括外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>尺寸示例</title> <style> * { margin: 0; padding: 0 } .c1 { width: 50px; height: 100px; border: 10px solid red; padding: 5px; margin: 10px; } </style> </head> <body> <div class="c1"></div> <div> <p>width: 50px;</p> <p>height: 100px;</p> <p>border: 10px solid red;</p> <p>padding: 5px;</p> <p>margin: 10px;</p> </div> <script src="jquery-3.2.1.min.js"></script> </body> </html>
文档处理
1、内部插入
$("p").append("<b>Hello</b>"); // 向每个匹配的元素内部追加内容。
$("<b>Hello</b>").appendTo("p"); // 把所有匹配的元素追加到另一个指定的元素元素集合中。
$("p").prepend("<b>Hello</b>"); // 向每个匹配的元素内部前置内容
$("<b>Hello</b>").prependTo("p"); // 把所有匹配的元素前置到另一个、指定的元素元素集合中。
append(content|fn) 描述: 向所有段落中追加一些HTML标记。 HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").append("<b>Hello</b>"); 结果: [ <p>I would like to say: <b>Hello</b></p> ] appendTo(content) 描述: 把所有段落追加到ID值为foo的元素中。 HTML 代码: <p>I would like to say: </p> <div></div><div></div> jQuery 代码: $("p").appendTo("div"); 结果: <div><p>I would like to say: </p></div> <div><p>I would like to say: </p></div> prepend(content) 描述: 向所有段落中前置一些HTML标记代码。 HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").prepend("<b>Hello</b>"); 结果: [ <p><b>Hello</b>I would like to say: </p> ] prependTo(content) 描述: 把所有段落追加到ID值为foo的元素中。 HTML 代码: <p>I would like to say: </p><div id="foo"></div> jQuery 代码: $("p").prependTo("#foo"); 结果: <div id="foo"><p>I would like to say: </p></div>
2、外部插入
$("p").after("<b>Hello</b>"); // 在每个匹配的元素之后插入内容。
$("p").before("<b>Hello</b>"); // 在每个匹配的元素之前插入内容。
$("p").insertAfter("#foo"); // 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
$("p").insertBefore("#foo"); // 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
after(content|fn) 描述: 在所有段落之后插入一些HTML标记代码。 HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").after("<b>Hello</b>"); 结果: <p>I would like to say: </p><b>Hello</b> before(content|fn) 描述: 在所有段落之前插入一些HTML标记代码。 HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").before("<b>Hello</b>"); 结果: [ <b>Hello</b><p>I would like to say: </p> ] insertAfter(content) 描述: 把所有段落插入到一个元素之后。与 $("#foo").after("p")相同 HTML 代码: <p>I would like to say: </p><div id="foo">Hello</div> jQuery 代码: $("p").insertAfter("#foo"); 结果: <div id="foo">Hello</div><p>I would like to say: </p> insertBefore(content) 描述: 把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。 HTML 代码: <div id="foo">Hello</div><p>I would like to say: </p> jQuery 代码: $("p").insertBefore("#foo"); 结果: <p>I would like to say: </p><div id="foo">Hello</div>
3、替换
$("p").replaceWith("<b>Paragraph. </b>"); // 将所有匹配的元素替换成指定的HTML或DOM元素。
<p>Hello</p><p>cruel</p><p>World</p> // 用匹配的元素替换掉所有后面匹配到的元素。
replaceWith(content|fn) 描述: 把所有的段落标记替换成加粗的标记。 HTML 代码: <p>Hello</p><p>cruel</p><p>World</p> jQuery 代码: $("p").replaceWith("<b>Paragraph. </b>"); 结果: <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b> 描述: 用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。 HTML 代码: <div class="container"> <div class="inner first">Hello</div> <div class="inner second">And</div> <div class="inner third">Goodbye</div> </div> jQuery 代码: $('.third').replaceWith($('.first')); 结果: <div class="container"> <div class="inner second">And</div> <div class="inner first">Hello</div> </div> replaceAll(selector) 描述: 把所有的段落标记替换成加粗标记 HTML 代码: <p>Hello</p><p>cruel</p><p>World</p> jQuery 代码: $("<b>Paragraph. </b>").replaceAll("p"); 结果: <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
样式操作
样式类
|
1
2
3
4
|
addClass(); // 添加指定的CSS类名。
removeClass(); // 移除指定的CSS类名。
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
|
示例：开关灯和模态框
CSS
|
1
|
css("color", "red") //DOM操作：tag.style.color="red"
|
位置：
|
1
2
3
4
|
offset()
position()
scrollTop()
scrollLeft()
|
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和.position()的差别在于：.position()是相对于父级元素的位移。
尺寸：
|
1
2
3
4
5
6
|
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
|
注：
文本操作
HTML代码：
|
1
|
html()
|
文本值：
|
1
|
text()
|
值：
|
1
|
val() // 针对input标签
|
属性操作
用于自定义属性：
|
1
2
|
attr()
removeAttr()
|
用于checkbox和radio
|
1
2
|
prop()
removeProp()
|
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。
示例：全选、反选、取消
文档处理
添加到指定元素内部的后面
|
1
2
|
$(A).append(B) // 把B追加到A
$(A).appendTo(B) // 把A追加到B
|
添加到指定元素内部的前面
|
1
2
|
$(A).prepend(B) // 把B前置到A
$(A).prependTo(B) // 把A前置到B
|
添加到指定元素外部的后面
|
1
2
|
$(A).after(B) // 把B放到A的后面
$(A).insertAfter(B) // 把A放到B的后面
|
添加到指定元素外部的前面
|
1
2
|
$(A).before(B) // 把B放到A的前面
$(A).insertBefore(B) // 把A放到B的前面
|
移除和清空元素
|
1
2
|
remove() // 从DOM中删除所有匹配的元素。
empty() // 删除匹配的元素集合中所有的子节点。
|
替换
|
1
2
|
replaceWith()
replaceAll()
|
克隆
|
1
|
clone() // 参数
|
示例：
点击按钮复制。
事件
常用事件
|
1
2
3
4
5
6
|
click(function(){...})
mouseout(function(){...})
mouseover(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
|
事件绑定
|
1
|
.on( events [, selector ] [, data ], handler(eventObject) )
|
- events： 事件
- selector: 选择器（可选的）
- data: 数据（可选的）
- handler: 事件处理函数或特殊值false
移除事件
|
1
|
.off( events [, selector ] [, handler(eventObject) ] )
|
off() 方法移除用.on()绑定的事件处理程序。
- events： 事件
- selector: 选择器（可选的）
- handler: 事件处理函数或特殊值false
阻止后续事件执行
|
1
|
return false; // 常见阻止表单提交等
|
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
|
1
2
3
|
$(document).read(function(){
// 在这里写你的JS代码...
})
|
简写：
|
1
2
3
|
$(function(){
// 你在这里写你的代码
})
|
事件委托
事件委托是通过事件冒泡的原理，利用父标签去触发子标签的事件。
示例：
表格中每一行的编辑和删除按钮。
补充
each
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
|
1
2
3
4
|
li = [10, 20, 30, 40]
$.each(li, function(i, v){
console.log(i, v); //index是索引，ele是每次循环的具体元素。
})
|
输出：
|
1
2
3
4
|
0 10
1 20
2 30
3 40
|
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
|
1
2
3
4
|
// 为每一个li标签添加foo
$( "li" ).each(function() {
$(this).addClass( "foo" );
});
|
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的.each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
|
1
|
$("li").addClass("foo");
|
注意：
在遍历过程中可以使用return false提前结束each循环。
终止each循环
|
1
|
return false；
|
伏笔…
.data()
在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
|
1
|
$("div").data("k", 100); //给所有div标签都保存一个名为k，值为100
|
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过.data(name, value)或HTML5 data-*属性设置。
|
1
|
$("div").data("k"); //返回第一个div标签中保存的"k"的值
|
示例：
模态框编辑的数据回填表格
插件
jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
示例：
|
1
2
3
4
5
6
7
8
9
|
<script>
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5
</script>
|
jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script>
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
// jQuery对象可以使用新添加的check()方法了。
$( "input[type='checkbox']" ).check();
</script>
|
单独写在文件中的扩展：
|
1
2
3
4
5
6
7
|
(function(jq){
jq.extend({
funcName: function(){
...
},
});
})(jQuery);
|
课后习题：
- 登录+验证
- 左侧菜单
- 表格-增、删、改、查
