Day-6 JQuery的使用(1)[选择器篇]

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);之后，就变成:

---