JQuery学习笔记1
1. JQuery选择器
JQuery和纯JavaScript代码不同的一点在于:JQuery选择器是在查找到元素后添加行为(这里包含添加函数),从而使实现和HTML代码分开.而JavaScript往往把实现和HTML代码混合在一起.如下所示:
<!DOCTYPE >
<html>
<head>
<title>this is a test</title>
</head>
<script src="./scripts/jquery-2.1.3.js"></script>
<script type="text/javascript">
function demo() {
alert("JavaScript demo!");
}
</script>
<body>
<!-- 通过onclick事件,来调用函数demo-->
<p onclick="demo()">click me using JavaScript</p>
<!-- 1.通过class来标志demo
2.通过$(".demo")取得此元素
3.添加click响应函数
-->
<p class="demo">click me using JQuery</p>
<script type="text/javascript">
$(".demo").click(function(){
alert("JQuery demo!");
});
</script>
</body>
</html>
浏览器可正确的响应这两个click操作.
以下设计一个简单的界面,通过JQuery选择器来匹配元素并且调整它们的样式.界面代码如下:
<!-- 测试的元素 --> <div class="one" id="one" > id为one,class为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test" > id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none"> style的display为"none"的div </div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"/> </div> <span id="mover">正在执行动画的span元素.</span>通过其CSS样式:
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
} 浏览器界面大概如下:
1. 基本选择器
| 选择器 |
描述 |
返回 |
示例 |
| #id |
根据给定的id匹配一个元素 |
单个元素 |
$("#test")选取id为test的元素 |
| .class |
根据给定的类名匹配元素 |
集合元素 |
$(".test")选取所有class为test的元素 |
| element |
根据给定的元素名匹配元素 |
集合元素 |
$("p")选取所有的<p>元素 |
| * |
匹配所有元素 |
集合元素 |
$("*")选取所有的元素 |
| selector1,selector2,...,selectorN |
将每一个选择器匹配到的元素合并后一起返回 |
集合元素 |
$("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素 |
1. 改变id为one的元素的背景色
<input type="button" value="click me" id="btn" />然后编写JQuery响应代码:
<script type="text/javascript">
$(document).ready(function(){
//在btn按钮被单击后,选取id为one的元素,更改其背景色
$("#btn").click(function() {
$("#one").css("background", "#bbffaa");
});
});
</script> 界面效果如下:
2. 更改class为mini的所有元素的背景色
<script type="text/javascript">
$(document).ready(function(){
//在btn按钮被单击后,选取class为mini的元素,更改其背景色
$("#btn").click(function() {
$(".mini").css("background", "#bbffaa");
});
});
</script> 界面效果如下:
3. 改变元素名是<div>的所有元素的背景色
<script type="text/javascript">
$(document).ready(function(){
//在btn按钮被单击后,选取元素名为div的元素,更改其背景色
$("#btn").click(function() {
$("div").css("background", "#bbffaa");
});
});
</script> 界面效果如下:
4. 改变所有元素的背景色
$("*").css("background", "#bbffaa"); 界面效果如下:
5. 改变所有的<span>元素和id为two的元素的背景色
$("span, #two").css("background", "#bbffaa"); 界面效果如下:
2. 层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素和同辈元素等,那么层次选择器是一个非常好的选择.
| 选择器 |
描述 |
返回 |
示例 |
| $("ancestor descendant") |
选取ancestor元素里的所有descendant(后代)元素 |
集合元素 |
$("div span")选取<div>里的所有的<span>元素 |
| $("parent>child") |
选取parent元素下的child(子)元素 |
集合元素 |
$("div>span")选取<div>元素下元素名是<span>的子元素 |
| $("prev+next") |
选取紧接在prev元素后的next元素 |
集合元素 |
$(".one+div")选取class为one的下一个<div>同辈元素 |
| $("prev~sliblings") |
选取prev元素之后的所有sliblings元素 |
集合元素 |
$("#two~div")选取id为two的元素后面的所有<div>同辈元素 |
1. 改变<body>内所有<div>的背景色
$("body div").css("background", "#bbffaa"); 浏览器显示如下:
2. 改变<body>内子<div>元素的背景色
$("body>div").css("background", "#bbffaa"); 浏览器显示如下:
3. 改变id为one的下一个<div>同辈元素背景色
$("#one+div").css("background", "#bbffaa"); 浏览器显示如下:
4. 改变id为two的元素后面的所有<div>同辈元素的背景色
$("#two~div").css("background", "#bbffaa"); 浏览器显示如下:
2. 过滤选择器
通过过滤规则来筛选出所需的DOM元素,以冒号(:)开头
1. 基本过滤选择器
| 选择器 |
描述 |
返回 |
示例 |
| :first |
选取第一个元素 |
单个元素 |
$("div:first")选取所有<div>元素中第一个<div>元素下元素 |
| :last |
选取最后一个元素 |
单个元素 |
$("div:last")选取所有<div>元素中最后一个<div>元素 |
| :not(selector) |
去除所有与给定选择器匹配的元素 |
集合元素 |
$("input.not(.myClass)"选取class不是myClass的<input>元素) |
| :even |
选取索引是偶数的所有元素,索引从0开始 |
集合元素 |
$("input:even")选取索引是偶数的<input>元素 |
| :odd |
选取索引是奇数的所有元素,索引从0开始 |
集合元素 |
$(input:odd)选取索引是奇数的<input>元素 |
| :eq(index) |
选取索引等于index的元素 |
单个元素 |
$("input:eq(1)")选取索引等于1的<input>元素 |
| :gt(index) |
选取索引大于index的元素 |
集合元素 |
$("input:gt(1)")选取索引大于1的<input>元素 |
| :lt(index) |
选取索引小于index的元素 |
集合元素 |
$("input:lt(1)")选取索引小于1的<input>元素 |
| :header |
选取所有的标题元素,例如h1,h2,h3等等 |
集合元素 |
$(":header")选取网页中所有的<h1>,<h2>,<h3>... |
| :animated |
选取当前正在执行动画的所有元素 |
集合元素 |
$("div:animated")选取正在执行动画的<div>元素 |
| :focus |
选取当前获取焦点的元素 |
集合元素 |
$(":focus")选取当前获取焦点的元素 |
1. 改变第一个<div>元素的背景色
$("div:first").css("background", "#bbffaa");
2. 改变最后一个<div>元素的背景色
$("div:last").css("background", "#bbffaa"); 浏览器显示如下:
3. 改变class不为one的<div>元素的背景色
$("div:not(.one)").css("background", "#bbffaa"); 浏览器显示如下:
4. 改变索引值为偶数的<div>元素的背景色
$("div:even").css("background", "#bbffaa"); 浏览器显示如下:
5. 改变索引值为奇数的<div>元素的背景色
$("div:odd").css("background", "#bbffaa"); 浏览器显示如下:
6. 改变索引值等于3的<div>元素的背景色
$("div:eq(3)").css("background", "#bbffaa"); 浏览器显示如下:
7. 改变索引值大于3的<div>元素的背景色
$("div:gt(3)").css("background", "#bbffaa"); 浏览器显示如下:
8. 改变索引值小于3的<div>元素的背景色
$("div:lt(3)").css("background", "#bbffaa"); 浏览器显示如下:
9. 改变所有标题的背景色
$(":header").css("background", "#bbffaa"); 浏览器显示如下:
10. 改变当前获取焦点元素的背景色
$(":focus").css("background", "#bbffaa"); 浏览器显示如下:
2. 内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上.
| 选择器 |
描述 |
返回 |
示例 |
| :contains(text) |
选取含有文本内容为"text"的元素 |
集合元素 |
$("div:contains('我')")选取含有文本"我"的<div>元素 |
| :empty |
选取不包含字元素或者文本的空元素 |
集合元素 |
$("div:empty")选取不包含子元素(包括文本元素)的<div>空元素 |
| :has(selector) |
选取含有选择器所匹配的元素的元素 |
集合元素 |
$("div:has(p)")选取含有<p>元素的<div>元素 |
| :parent |
选取含有子元素或者文本的元素 |
集合元素 |
$("div:parent")选取拥有子元素(包括文本元素)的<div>元素 |
1. 改变含有文本"di"的<div>元素的背景色
$("div:contains('di')").css("background", "#bbffaa"); 浏览器显示如下:
2. 改变不包含子元素(包括文本元素)的<div>空元素的背景色
$("div:empty").css("background", "#bbffaa"); 浏览器显示如下:
3. 改变含有class为mini元素的<div>元素的背景色
$("div:has(.mini)").css("background", "#bbffaa"); 浏览器显示如下:
4. 改变含有子元素(包括文本元素)的<div>元素的背景色
$("div:parent").css("background", "#bbffaa"); 浏览器显示如下:
3. 可见性过滤选择器
根据元素的可见和不可见状态来选择相应的元素
| 选择器 |
描述 |
返回 |
示例 |
| :hidden |
选取所有不可见的元素 |
集合元素 |
$(":hidden")选取所有不可见的元素.包括<input type="hidden" />,<div style="display:none;">和<div style="visibility:hidden;">等元素.如果只想要选取<input>元素,可以使用$("input:hidden") |
| :visible |
选取所有可见的元素 |
集合元素 |
$("div:visible")选取所有可见的<div>元素 |
4. 属性过滤选择器
通过元素的属性来获取相应的元素.
| 选择器 |
描述 |
返回 |
示例 |
| [attribute] |
选取拥有此属性的元素 |
集合元素 |
$("div[id]")选取拥有属性id的元素 |
| [attribute=value] |
选取属性的值为value的元素 |
集合元素 |
$("div[title=test]")选取属性title为"test"的<div>元素 |
| [attribute!=value] |
选取属性的值不等于value的元素 |
集合元素 |
$("div[title!=test]")选取属性title不等于test的<div>元素(注意:没有属性title的<div>也会被选取) |
| [attribute^=value] |
选取属性的值以value开始的元素 |
集合元素 |
$("div[title^=test]")选取属性title以test开头的<div>元素 |
| [attribute$=value] |
选取属性的值以value结束的元素 |
集合元素 |
$("div[title$=test]")选取属性title以test结尾的<div>元素 |
| [attribute*=value] |
选取属性的值含有value的元素 |
集合元素 |
$("div[title*=test]")选取属性title包含test的<div>元素 |
| [attribute|=value] |
选取属性的值等于value或者以value开头的元素 |
集合元素 |
$("div[title|=test]")选取属性title以test开头或等于test的<div>元素 |
| [attribute~=value] |
选取属性使用空格分隔的值中包含一个给定值的元素 |
集合元素 |
$("div[title~=test]")选取属性title用空格分隔的值中包含test的<div>元素 |
| [attribute1][attribute2][attributeN] |
用属性选择器合并成一个符合属性选择器,满足多个条件.每选择一次,缩小一次范围 |
集合元素 |
$("div[id][title$='test']")选取拥有属性id并且属性title以"test"结束的<div>元素 |
5. 子元素过滤选择器
| 选择器 |
描述 |
返回 |
示例 |
| :nth-child(index/even/odd/equation) |
选取每个父元素下的第index个子元素或者奇偶元素 |
集合元素 |
:eq(index)只匹配一个元素,而:nth-child将为每个父元素匹配子元素,并且:nth-child中的index是从1开始的,而:eq(index)是从0开始的. |
| :first-child |
选取每个父元素的第一个子元素 |
集合元素 |
:first只返回单个元素,而:first-child选择符将为每个父元素匹配第一个子元素 |
| :last-child |
选取每个父元素下的最后一个子元素 |
集合元素 |
:last只返回单个元素,而:last-child选择将为每个父元素匹配最后一个子元素 |
| :only-child |
如果某个元素是它父元素中唯一的子元素,那么将会匹配.如果父元素中含有其他元素,则不会被匹配 |
集合元素 |
$("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素 |