JQuery快速学一(强悍的选择器)

JQuery简介

   Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。

   JQuery拥有优雅简洁的语法，强大的Dom处理能力，方便快捷的事件处理，跨浏览器的Ajax操作等等让我们开发人员快速方便的实现网页处理 ,

jQuery2.0及后续版本将不再支持IE6/7/8浏览器，这里主要使用JQuery1.10.1版本进行学习。

---

教程结构：

1：强悍的选择器    

2：DOM操作

3：事件和动画

4：Ajax应用

5：常用插件使用和插件编写

本教程如有不正确之处，请各位大虾多多指正。

 

JQuery选择器简介：

---

在这里选择器是用来获取目标元素的，在对目标元素进行操作的时候，必须要先获取目标的元素，然后才能对目标元素进行操作。在传统的JavaScript中也提供了选择器，但使用不方便，对一些元素的操作不够方便，不够灵活。只提供了ID选择器:document.getElementById(“id”);标签选择器：document.getElementsByTagName(“input”),名称选择器：document.getElementByName(“name”),而JQuery是对原有的JavaScript进行了简化和封装，对此Jquery提供了强悍的选择器：基本选择器，层级选择器，简单选择器，内容选择器，可见性选择器，属性选择器，子元素选择器，表单选择器，表单属性选择器,还可以自定义选择器，下面我们就来学习一下选择器的使用。

温馨提示：

---

    “$”符号是JQuery的简写， $(function(){})类似于传统的JavaScript中的window.onload方法，不过又有所区别这里将会在第三章详细说明。

使用JQuery前需要下载JQuery库，这里使用JQuery1.10.1(下载地址：http://code.jquery.com/jquery-1.10.1.min.js)。

使用前在页面head里进行引入，示例：

    以下的代码都写到$(function(){这里写代码})

基本选择器：

---

默认代码：

html:

    <div id="selectId" class="selectClass" style="width:100px;height:100px;background:#000;"></div>

 

默认效果：

    

代码	效果
$('#selectId').css('background-color','#ccc');//ID选择器
$('.selectClass').css('background-color','blue');//类选择器
$('div').css('background-color','yellow');//标签选择器

 

 

层级选择器：

---

默认代码：

html:

 

<form style="border:1px solid #ccc;padding:5px;">

    <label>lable内容</label>

    <div>

        div内容

    </div>

    <label>lable内容2</label>

    <span>

        <div>Div内容2</div>

    </span>

    <label>lable内容3</label>

</form>

 

默认效果：

    

代码	效果
$('form div').css('color','red');//空格代表所有后代元素， 这里的意思为：获取form下面的所有div元素，并设置css的color样式为红色
$('form>div').css('color','red');//>大于号代表下一级元素， 这里的意思为：获取form下面第一层div元素，并设置css的color样式为红色
$('div+label').css('color','red');//+加号代表紧跟在后的元素， 这里的意思为：获取紧跟在div后面的label，并设置css的color样式为红色
$('div~label').css('color','red');//~波浪线代表之后的元素, 这里的意思为：获取在div后面的所有label元素，并设置css的color样式为红色

基本筛选选择器：

---

默认代码：

html:

 

<ul>

        <li>内容一</li>

        <li>内容二</li>

        <li>内容三</li>

        <li>内容四</li>

    </ul>

<h2>h2内容</h2>

<h3>h3内容</h3>

 

默认效果：

    

代码	效果
$('ul li:eq(0)').css('color','red');//eq代表等于， 获取ul下的li的索引等于0的元素(即第一个li)，设置css样式
$('ul li').first().css('color','red');//first代表第一个元素， 获取第一个li，并设置样式。(另一种写法：$('ul li:first').css('color','red');)	效果同上
$('ul li').last().css('color','red');//last代表最后一个元素， 获取最后一个li并设置样式(另一种写法：$('ul li:last').css('color','red');)
$('ul li:even').css('color','red');//even代表偶数, 获取li索引为偶数的元素(索引从0开始)
$('ul li:odd).css('color','red');//odd代表奇数, 获取li索引为奇数的元素(索引从0开始)
$('ul li:gt').css('color','red');//gt代表大于, 获取索引大于1的li(索引从0开始)
$('ul li:lt').css('color','red');//lt代表小于, 获取索引小于1的li(索引从0开始)
$(':header').css('color','red');//header代表标题元素， 获取所有的标题元素(h1,h2,h3...)

属性选择器：

---

默认代码：

html:         

    <input type="text" class="txtClass" name="txt"/>

    <input type="text" id="txtId" class="txtClass2" name="txt"/>

 

 

默认效果：

    

代码	效果
$('input[id]').css('background-color','red');//[]代表含有， 获取input中含有id属性的元素，并设置css背景色为红色
$('input[class=txtClass]').css('background-color','red');//[属性=值]， 获取input中class属性等于txtClass1的元素，设置样式
$('input[class*=txtClass]').css('background-color','red');//[属性*=值]属性值中包含字符 ，获取class属性中包含txtClass的元素，设置样式
$('input[name$=xt]').css('background-color','red');//[属性$=值]属性值以什么结尾的元素 获取input中name属性以xt结尾的元素，并设置样式
$('input[id][name=txt]').css('background-color','red');//[id][]代表并且, 获取input属性含有id的元素，并且name属性的值要等于txt

 

这里只介绍比较常用到的，属性选择器还有：[属性!=值]，[属性~=值]，[属性^=值]，[属性|=值],有兴趣请自行了解。

 

其它选择器：

---

其它选择器还包括“内容筛选”，“子元素筛选”，“表单选择器”，在这里不详细说明，留给各位课后练习，如有不懂，可以留言。

 

 源码下载：http://download.csdn.net/detail/shiyuan17/5523207