jQuery的使用(1)[选择器篇]
一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)
jQuery的文件
1.jquery2.1.min.js
2.jquery1.8.3_20121129.chm
导入jQuery的方法
<script src="文件路径" ></script>
文档加载完成执行方法
1.ready();
$(document).ready(function(){
alert("文档已加载完成");
});
2.$();
$(function() {
alert("文档已记载完成");
});
3.jQuery();
jQuery(function(){
alert("文档加载完成了。");
});
当文档加载完成,执行function方法。
选择器
1.id选择器
$("#div"); //相当于 document.getElementById("div");
<div id="div"></div>
2.类选择器
$(".div"); //相当于 document.getElementsByClassName("div");
<div class="div"></div>
3.标签选择器
$("div"); //相当于 document.getElementsByTagName("div");
<div></div>
4.混合选择器
$("div,span,p.myClass");
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
出id选择器外,其余选择器,都要以数组[下标]的方式获取每个元素;
遍历方法
each()
可使用each()方法来遍历数组;
var arr = $("div,span,p.myClass");
$(arr).each(function(){
//this:当前遍历的那一个
alert($(this).html());
});
结合上面的混合选择器的例子的遍历方法。
each()方法相当于:
for(var i=0;i<arr.length;i++){
alert(arr[i].value);
}
使用for语句就非常好理解了。
注1:this:就是指当前变量,再上述中指arr。
注2:html() 方法的作用获取文本.相当于innerHTML,但一个是属性,一个是方法,不能弄混。
各种我说不出名字的选择器
JS代码
var arr = $("form > input"); //只显示b
var arr = $("label + input"); //先显示b,再显示a
var arr = $("form ~ input"); //显示c
$(arr).each(function(){
alert($(this).val());
});
HTML代码
<form>
<label>Name:</label>
<input name="name" value="b" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="a" />
</fieldset>
</form>
<input name="none" value="c" />
1.parent > child
在给定的父元素下匹配所有的子元素。
只获取到了<input name="name" value="b" />
2.prev + next
匹配所有紧接在 prev 元素后的 next 元素
获取到了<input name="name" value="b" />
和<input name="newsletter" value="a" />
3.prev ~ siblings
匹配 prev 元素之后的所有 siblings 元素
获取到了<input name="none" value="c" />
跟在选择器后面的方法
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
1.:first
获取第一个元素;
$("li:first").html();
获取第一个li元素。加上html方法,所以取的值为0。
2.:last
获取最后一个元素;
$("li:last").html();
获取最后一个li元素。加上html方法,所以取的值为5。
3.:even
匹配所有索引值为偶数的元素,从 0 开始计数
$("li:even").each(function(){
$(this).html()
});
取值为:0,2,4
4.:odd
匹配所有索引值为奇数的元素,从 0 开始计数
$("li:odd").each(function(){
$(this).html()
});
取值:1,3,4
5.eq(index)
匹配一个给定索引值的元素
$("li:eq(2)").html();
取li的索引为2的元素,即 2;
6.gt(index)
匹配所有大于给定索引值的元素
$("li:gt(2)").each(function(){
$(this).html();
})
获取大于索引的元素,取值为3,4,5
7.lt(index)
匹配所有小于给定索引值的元素
$("li:lt(2)").each(function(){
$(this).html();
})
获取小于索引的元素,取值0,1
HTML代码
<input type="checkbox" name="chex" value="135"/>
<input type="checkbox" checked="checked" name="chex" value="246"/>
<input type="checkbox" value="369"/>
8.:not(:checked)
查找所有未选中的元素
$("input:not(:checked)").val();
默认获取第一个元素。即135;
但是返回的是数组,可以遍历元素;
$("input:not(:checked)").each(function() {
$(this).val();
}
则取值为:135,369
9.attr
获取或改变某个对象的属性值
$("input[name='ckd']").attr("checked",true);
讲解一波。
前半部分:获取input标签中name为ckd的元素。
后半部分:给获取到的元素添加checked属性。
原图:
添加$("input[name='ckd']").attr("checked",true);
之后,就变成:
当然,给本来有的消除属性也可以。
添加$("input[name='ckd']").attr("checked",false);
之后,就变成: