【jQuery】
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高
的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。
一、选择器
事例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.r{
background-color: #00a2ca;
}
</style>
</head>
<body>
<script src="jquery-2.2.3.js"></script>
<div id="i1">123</div>
<div id="i2">456</div>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<script>
$("#i1").text('test');
$(".c1").addClass('r');
$("div");
</script>
</body>
</html>【基本选择器】
1. $("#myDiv"); 查找 ID 为"myDiv"的元素。
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代码:
$("#myDiv");
结果:
[ <div id="myDiv">id="myDiv"</div> ]
$("#i1").text('test') //赋值
2. $("div"); 查找一个 DIV 元素
HTML 代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery 代码:
$("div");
结果:
[ <div>DIV1</div>, <div>DIV2</div> ]
3. $(".myClass"); 查找所有类是 "myClass" 的元素.
HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代码:
$(".myClass");
结果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
4. $("*") 找到每一个元素
HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery 代码:
$("*")
结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
5. $("div,span,p.myClass") 找到匹配任意一个类的元素。
HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery 代码:
$("div,span,p.myClass")
结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
【层级选择器】
1. $("form input") 找到表单中所有的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
2. $("form > input"); 匹配表单中所有的子级input元素。
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]
//注：1、2 的区别 一个是查找表单下所有符合的，一个是查找子集中所有符合的。
【基本筛选器】
1. $('li:first')；获取匹配的第一个元素，$('li:last')；获取匹配的最后个元素
HTML 代码:
<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>
jQuery 代码:
$('li:first');
$('li:last');
结果:
[ <li>list item 1</li> ] [ <li>list item 5</li> ]
2. $("input:not(:checked)")； 查找所有未选中的 input 元素
HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" />
jQuery 代码:
$("input:not(:checked)")
结果:
[ <input name="apple" /> ]
3. $("tr:eq(1)")；查找第二行
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:eq(1)")
结果:
[ <tr><td>Value 1</td></tr> ]
4. $("tr:gt(0)")；查找第二第三行，即索引值是1和2，也就是比0大
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:gt(0)")
结果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
5. $("tr:lt(2)")；查找第一第二行，即索引值是0和1，也就是比2小
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:lt(2)")
结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
【内容选择器】
1. $("div:contains('John')")；查找所有包含 "John" 的 div 元素
HTML 代码:
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
jQuery 代码:
$("div:contains('John')")
结果:
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
2. $("td:empty")；查找所有不包含子元素或者文本的空元素
HTML 代码:
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
jQuery 代码:
$("td:empty")
结果:
[ <td></td>, <td></td> ]
3. $("div:has(p)").addClass("test")；给所有包含 p 元素的 div 元素添加一个 text 类
HTML 代码:
<div><p>Hello</p></div>
<div>Hello again!</div>
jQuery 代码:
$("div:has(p)").addClass("test");
结果:
[ <div class="test"><p>Hello</p></div> ]
4. $("td:parent")；查找所有含有子元素或者文本的 td 元素
HTML 代码:
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
jQuery 代码:
$("td:parent")
结果:
[ <td>Value 1</td>, <td>Value 2</td> ]
【属性选择器】
1. 查找所有 name 属性是 newsletter 的 input 元素
HTML 代码:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("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" /> ]
2. $("input[name^='news']")；查找所有 name 以 'news' 开始的 input 元素
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery 代码:
$("input[name^='news']")
结果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
3. $("input[name$='letter']")；查找所有 name 以 'letter' 结尾的 input 元素
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
jQuery 代码:
$("input[name$='letter']")
结果:
[ <input name="newsletter" />, <input name="jobletter" /> ]
4. $("input[name*='man']")；查找所有 name 包含 'man' 的 input 元素
HTML 代码:
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
jQuery 代码:
$("input[name*='man']")
结果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
二、筛选器
【筛选】
1. $("li").eq(1)、$("li").eq(-2)；获取匹配的第二个元素和倒数第二个元素
HTML 代码:
<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>
jQuery 代码:
$("li").eq(1)
$("li").eq(-2)
结果:
[ <li>list item 2</li> ] [ <li>list item 4</li> ]
2. $('li').first()、$('li').last()；获取匹配的第一个元素和最后一个元素
HTML 代码:
<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>
jQuery 代码:
$('li').first()
$('li').last()
结果:
[ <li>list item 1</li> ] [ <li>list item 5</li> ]
【查找】
1. $("div").children()、$("div").children(".selected")；查找DIV中的每个子元素，在每个div中
查找 .selected 的类。
HTML 代码:
<p>Hello</p>
<div>
<span >Hello Again</span>
</div>
<p>And Again</p>
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<p>And Again</p>
</div>
jQuery 代码:
$("div").children()
$("div").children(".selected")
结果:
[ <span>Hello Again</span> ] [ <p class="selected">Hello Again</p> ]
2. $("p").find("span")；从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
HTML 代码:
<p>
<span>Hello</span>,how are you?
</p>
jQuery 代码:
$("p").find("span")
结果:
[ <span>Hello</span> ]
3. $("p").next()；找到每个段落的后面紧邻的同辈元素。
HTML 代码:
<p>Hello</p>
<p>Hello Again</p>
<div>
<span>And Again</span>
</div>
jQuery 代码:
$("p").next()
结果:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
4. $("div:first").nextAll().addClass("after")；查找当前元素之后所有的同辈元素。
HTML 代码:
<div></div><div></div><div></div><div></div>
jQuery 代码:
$("div:first").nextAll().addClass("after");
结果:
[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]
5. $("p").parent()；查找每个段落的父元素
HTML 代码:
<div>
<p>Hello</p>
<p>Hello</p>
</div>
jQuery 代码:
$("p").parent()
结果:
[ <div><p>Hello</p><p>Hello</p></div>]
$("p").parent(".selected")；查找段落的父元素中每个类名为selected的父元素。
HTML 代码:
<div>
<p>Hello</p>
</div>
<div class="selected">
<p>Hello Again</p>
</div>
jQuery 代码:
$("p").parent(".selected")
结果:
[ <div class="selected"><p>Hello Again</p></div> ]
$("span").parents()；找到每个span元素的所有祖先元素。
$("span").parents("p")；找到每个span的所有是p元素的祖先元素。
6. $("p").prev()；找到每个段落紧邻的前一个同辈元素。
HTML 代码:
<p>Hello</p>
<div>
<span>Hello Again</span>
</div>
<p>And Again</p>
jQuery 代码:
$("p").prev()
结果:
[ <div><span>Hello Again</span></div> ]
$("p").prev(".selected")；找到每个段落紧邻的前一个同辈元素中类名为selected的元素。
HTML 代码:
<div>
<span>Hello</span>
</div>
<p class="selected">Hello Again</p>
<p>And Again</p>
jQuery 代码:
$("p").prev(".selected")
结果:
[ <p class="selected">Hello Again</p> ]
7. 给最后一个之前的所有div加上一个类
HTML 代码:
<div></div><div></div><div></div><div></div>
jQuery 代码:
$("div:last").prevAll().addClass("before");
结果:
[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]
8. $("div").siblings()；找到每个div的所有同辈元素。
HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代码:
$("div").siblings()
结果:
[ <p>Hello</p>, <p>And Again</p> ]
$("div").siblings(".selected")；找到每个div的所有同辈元素中带有类名为selected的元素。
HTML 代码:
<div>
<span>Hello</span>
</div>
<p class="selected">Hello Again</p>
<p>And Again</p>
jQuery 代码:
$("div").siblings(".selected")
结果:
[ <p class="selected">Hello Again</p> ]
三、属性
【属性】
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 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").removeAttr("src");
结果:
[ <img /> ]
【CSS 类】
addClass(class|fn)；为每个匹配的元素添加指定的类名，一个或多个要添加到元素中的CSS类名，
请用空格分开
参数class 描述 : 为匹配的元素加上 'selected' 类
jQuery 代码:
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
回调函数 描述 : 给li加上不同的class
HTML 代码:
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
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 代码:
<strong>jQuery 代码:</strong>
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 代码:
<p>Hello</p>
<p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
结果:
<p>Hello</p>
<p>left: 0, top: 35</p>
参数coordinates 描述 : 获取第二段的偏移
HTML 代码:
<p>Hello</p>
<p>2nd Paragraph</p>
jQuery 代码:
$("p:last").offset({ top: 10, left: 30 });
2. position()；
1. 获取匹配元素相对父元素的偏移。
2. 返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、
边框和填充属性上使用像素单位。此方法只对可见元素有效。
描述 : 获取第一段的偏移
HTML 代码:
<p>Hello</p>
<p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
结果:
<p>Hello</p>
<p>left: 15, top: 15</p>
3.scrollTop([val])；
1. 获取匹配元素相对滚动条顶部的偏移。
2. 此方法对可见和隐藏元素均有效。
无参数描述 : 获取第一段相对滚动条顶部的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
结果:
<p>Hello</p><p>scrollTop: 0</p>
参数val 描述 : 设置相对滚动条顶部的偏移
jQuery 代码:
$("div.demo").scrollTop(300);
4.scrollLeft([val])；
1. 获取匹配元素相对滚动条左侧的偏移。
2. 此方法对可见和隐藏元素均有效。
无参数描述 : 获取第一段相对滚动条左侧的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
结果:
<p>Hello</p><p>scrollLeft: 0</p>
参数val 描述 : 设置相对滚动条左侧的偏移
jQuery 代码:
$("div.demo").scrollLeft(300);