【jQuery】
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高
的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。
一、选择器
事例代码：
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.r{
background-color: #00a2ca;
}
style>
head>
<body>
<script src="jquery-2.2.3.js">script>
<div id="i1">123div>
<div id="i2">456div>
<div class="c1">1div>
<div class="c1">2div>
<div class="c1">3div>
<div class="c1">4div>
<script>
$("#i1").text('test');
$(".c1").addClass('r');
$("div");
script>
body>
html>
【基本选择器】
1. $("#myDiv"); 查找 ID 为"myDiv"的元素。
HTML 代码:
id="notMe"
jQuery 代码:
$("#myDiv");
结果:
[
$("#i1").text('test') //赋值
2. $("div"); 查找一个 DIV 元素
HTML 代码:
SPAN
jQuery 代码:
$("div");
结果:
[
3. $(".myClass"); 查找所有类是 "myClass" 的元素.
HTML 代码:
span class="myClass"
jQuery 代码:
$(".myClass");
结果:
[
4. $("*") 找到每一个元素
HTML 代码:
SPAN
P
jQuery 代码:
$("*")
结果:
[ P
5. $("div,span,p.myClass") 找到匹配任意一个类的元素。
HTML 代码:
p class="myClass"
span
p class="notMyClass"
jQuery 代码:
$("div,span,p.myClass")
结果:
[ p class="myClass"
【层级选择器】
1. $("form input") 找到表单中所有的 input 元素
HTML 代码:
jQuery 代码:
$("form input")
结果:
[ , ]
2. $("form > input"); 匹配表单中所有的子级input元素。
HTML 代码:
jQuery 代码:
$("form > input")
结果:
[ ]
//注：1、2 的区别 一个是查找表单下所有符合的，一个是查找子集中所有符合的。
【基本筛选器】
1. $('li:first')；获取匹配的第一个元素，$('li:last')；获取匹配的最后个元素
HTML 代码:
jQuery 代码:
$('li:first');
$('li:last');
结果:
[
2. $("input:not(:checked)")； 查找所有未选中的 input 元素
HTML 代码:
jQuery 代码:
$("input:not(:checked)")
结果:
[ ]
3. $("tr:eq(1)")；查找第二行
HTML 代码:
Header 1 Value 1 Value 2
jQuery 代码:
$("tr:eq(1)")
结果:
[ Value 1
4. $("tr:gt(0)")；查找第二第三行，即索引值是1和2，也就是比0大
HTML 代码:
Header 1 Value 1 Value 2
jQuery 代码:
$("tr:gt(0)")
结果:
[ Value 1 Value 2
5. $("tr:lt(2)")；查找第一第二行，即索引值是0和1，也就是比2小
HTML 代码:
Header 1 Value 1 Value 2
jQuery 代码:
$("tr:lt(2)")
结果:
[ Header 1 Value 1
【内容选择器】
1. $("div:contains('John')")；查找所有包含 "John" 的 div 元素
HTML 代码:
jQuery 代码: $("div:contains('John')") 结果: [ 2. $("td:empty")；查找所有不包含子元素或者文本的空元素 HTML 代码: jQuery 代码: $("td:empty") 结果: [ 3. $("div:has(p)").addClass("test")；给所有包含 p 元素的 div 元素添加一个 text 类 HTML 代码: Hello jQuery 代码: $("div:has(p)").addClass("test"); 结果: [ Hello 4. $("td:parent")；查找所有含有子元素或者文本的 td 元素 HTML 代码: jQuery 代码: $("td:parent") 结果: [
【属性选择器】 1. 查找所有 name 属性是 newsletter 的 input 元素 HTML 代码: jQuery 代码: $("input[name='newsletter']").attr("checked", true); 结果: [ , ]
2. $("input[name^='news']")；查找所有 name 以 'news' 开始的 input 元素 HTML 代码: jQuery 代码: $("input[name^='news']") 结果: [ , ] 3. $("input[name$='letter']")；查找所有 name 以 'letter' 结尾的 input 元素 HTML 代码: jQuery 代码: $("input[name$='letter']") 结果: [ , ] 4. $("input[name*='man']")；查找所有 name 包含 'man' 的 input 元素 HTML 代码: jQuery 代码: $("input[name*='man']") 结果: [ , , ] 二、筛选器 【筛选】 1. $("li").eq(1)、$("li").eq(-2)；获取匹配的第二个元素和倒数第二个元素 HTML 代码: jQuery 代码: $("li").eq(1) $("li").eq(-2) 结果: [
2. $('li').first()、$('li').last()；获取匹配的第一个元素和最后一个元素 HTML 代码: jQuery 代码: $('li').first() $('li').last() 结果: [ 【查找】 1. $("div").children()、$("div").children(".selected")；查找DIV中的每个子元素，在每个div中 查找 .selected 的类。 HTML 代码: Hello Hello Again And Again Hello Hello Again And Again jQuery 代码: $("div").children() $("div").children(".selected") 结果: [ Hello Again ] [ Hello Again 2. $("p").find("span")；从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。 HTML 代码: Hello,how are you? jQuery 代码: $("p").find("span") 结果: [ Hello ] 3. $("p").next()；找到每个段落的后面紧邻的同辈元素。 HTML 代码: Hello Hello Again And Again jQuery 代码: $("p").next() 结果: [ Hello Again 4. $("div:first").nextAll().addClass("after")；查找当前元素之后所有的同辈元素。 HTML 代码: jQuery 代码: $("div:first").nextAll().addClass("after"); 结果: [ , , ] 5. $("p").parent()；查找每个段落的父元素 HTML 代码: Hello Hello jQuery 代码: $("p").parent() 结果: [ Hello Hello $("p").parent(".selected")；查找段落的父元素中每个类名为selected的父元素。 HTML 代码: Hello Hello Again jQuery 代码: $("p").parent(".selected") 结果: [ Hello Again $("span").parents()；找到每个span元素的所有祖先元素。 $("span").parents("p")；找到每个span的所有是p元素的祖先元素。 6. $("p").prev()；找到每个段落紧邻的前一个同辈元素。 HTML 代码: Hello Hello Again And Again jQuery 代码: $("p").prev() 结果: [ $("p").prev(".selected")；找到每个段落紧邻的前一个同辈元素中类名为selected的元素。 HTML 代码: Hello Hello Again And Again jQuery 代码: $("p").prev(".selected") 结果: [ Hello Again 7. 给最后一个之前的所有div加上一个类 HTML 代码: jQuery 代码: $("div:last").prevAll().addClass("before"); 结果: [ , , ] 8. $("div").siblings()；找到每个div的所有同辈元素。 HTML 代码: Hello And Again jQuery 代码: $("div").siblings() 结果: [ Hello And Again $("div").siblings(".selected")；找到每个div的所有同辈元素中带有类名为selected的元素。 HTML 代码: Hello Hello Again And Again jQuery 代码: $("div").siblings(".selected") 结果: [ Hello Again 三、属性 【属性】 1.attr(name|properties|key,value|fn)；设置或返回被选元素的属性值。
参数name 描述:返回文档中所有图像的src属性值。 jQuery 代码: $("img").attr("src"); 参数properties 描述: 为所有图像设置src和alt属性。 jQuery 代码: $("img").attr({ src: "test.jpg", alt: "Test Image" }); 参数key,value 描述:为所有图像设置src属性。 jQuery 代码: $("img").attr("src","test.jpg"); 参数key,回调函数 描述: 把src属性的值设置为title属性的值。 jQuery 代码: $("img").attr("title", function() { return this.src }); 2. removeAttr(name)；从每一个匹配的元素中删除一个属性
$("img").removeAttr("src")；将文档中图像的src属性删除 HTML 代码: jQuery 代码: $("img").removeAttr("src"); 结果: [ 【CSS 类】 addClass(class|fn)；为每个匹配的元素添加指定的类名，一个或多个要添加到元素中的CSS类名， 请用空格分开
参数class 描述 : 为匹配的元素加上 'selected' 类 jQuery 代码: $("p").addClass("selected"); $("p").addClass("selected1 selected2"); 回调函数 描述 : 给li加上不同的class HTML 代码: jQuery 代码: $('ul li:last').addClass(function() { return 'item-' + $(this).index(); }); 2. removeClass([class|fn])；从所有匹配的元素中删除全部或者指定的类，一个或多个要 删除的CSS类名，请用空格分开。 参数class 描述 : 从匹配的元素中删除 'selected' 类 jQuery 代码: $("p").removeClass("selected"); 参数class 描述 : 删除匹配元素的所有类 jQuery 代码: $("p").removeClass(); 回调函数描述 : 删除最后一个元素上与前面重复的class jQuery 代码: $('li:last').removeClass(function() { return $(this).prev().attr('class'); }); 3. toggleClass(class|fn[,sw])；如果存在（不存在）就删除（添加）一个类。 参数class 描述 : 为匹配的元素切换 'selected' 类 jQuery 代码: $("p").toggleClass("selected"); 参数class,switch 描述 : 每点击三下加上一次 'highlight' 类 HTML 代码: jQuery 代码: jQuery 代码: var count = 0; $("p").click(function(){ $(this).toggleClass("highlight", count++ % 3 == 0); }); 回调函数 描述 : 根据父元素来设置class属性 jQuery 代码: $('div.foo').toggleClass(function() { if ($(this).parent().is('.bar') { return 'happy'; } else { return 'sad'; } }); 四、CSS 【位置】 1.offset([coordinates])； 1. 获取匹配元素在当前视口的相对偏移。 2. 返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素 有效。 无参数描述 : 获取第二段的偏移 HTML 代码: Hello 2nd Paragraph jQuery 代码: var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top ); 结果: Hello left: 0, top: 35 参数coordinates 描述 : 获取第二段的偏移 HTML 代码: Hello 2nd Paragraph jQuery 代码: $("p:last").offset({ top: 10, left: 30 }); 2. position()； 1. 获取匹配元素相对父元素的偏移。 2. 返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、 边框和填充属性上使用像素单位。此方法只对可见元素有效。 描述 : 获取第一段的偏移 HTML 代码: Hello 2nd Paragraph jQuery 代码: var p = $("p:first"); var position = p.position(); $("p:last").html( "left: " + position.left + ", top: " + position.top ); 结果: Hello left: 15, top: 15 3.scrollTop([val])； 1. 获取匹配元素相对滚动条顶部的偏移。 2. 此方法对可见和隐藏元素均有效。 无参数描述 : 获取第一段相对滚动条顶部的偏移 HTML 代码: Hello 2nd Paragraph jQuery 代码: var p = $("p:first"); $("p:last").text( "scrollTop:" + p.scrollTop() ); 结果: Hello scrollTop: 0 参数val 描述 : 设置相对滚动条顶部的偏移 jQuery 代码: $("div.demo").scrollTop(300);
4.scrollLeft([val])； 1. 获取匹配元素相对滚动条左侧的偏移。 2. 此方法对可见和隐藏元素均有效。
无参数描述 : 获取第一段相对滚动条左侧的偏移 HTML 代码: Hello 2nd Paragraph jQuery 代码: var p = $("p:first"); $("p:last").text( "scrollLeft:" + p.scrollLeft() ); 结果: Hello scrollLeft: 0 参数val 描述 : 设置相对滚动条左侧的偏移 jQuery 代码: $("div.demo").scrollLeft(300);
Value 1 Value 2 , ]
Value 1 Value 2 Value 1 , Value 2 ]
]