jquery教程(一)详细讲解jquery选择器的使用

一．什么是jquery？

一款免费且开放源代码的Javascript代码库

流行的js框架:Dojo ,jquery ,extJs

 二. 了解jquery

1. 在网上下载相应的jquery版本

将下载到的压缩包进行解压，发现里面有两个文件

Jquery-1.4.4.js ：这个文件是jquery完整的内容，但包括制表符，空格等字符，所以这个文件体积略大，一般可以用于个人学习使用。

Jquery-1.4.4.min.js ：在这个文件中，去除了原有的不必要的空格、换行、制表符等字符，这样会使这个文件体积变小，有利于客户端的下载一般在项目开发或布署时

2.怎么使用？？？

选出你想使用的js文件，将其复制到我们的项目，然后在其它程序中包含进来，这样即可引入jquery程序库：

三. 选择器

选择器就是在网页程序中匹配或定位某些元素的方式。

document.getElementById(‘div1’).innerHTML=’内容’;

document.getElementsByName

document.getElementsByTagName

document.frm.text1

对象.属性=值

Jquery的选择器分类：基本，层级，简单，内容，可见性，属性，子元素，表单，表单对象属性选择器 9大选择器：

3.1 基本选择器

• #id ：通过id属性匹配某些元素    

Document.getElementById(); （js方式）

• Element ：通过标记名匹配某些元素

Document.getElementsByTagName();

• selector1,selector2 ：匹配所有指定的元素
• .class ：匹配使用指定类选择器的元素

 3.2 层级 选择器

• ancetor descendant ：匹配祖先元素的第一个后代元素
• parent > child ：匹配父元素下的所有子元素
• prev + next ：匹配prev元素的next元素
• prev~siblings ：匹配prev元素的平辈元素

3.3简单 选择器  对基本选择器和层级选取进一步的精确定位

• :first ：匹配第一个元素
• :last ：匹配最后一个元素
• :even ：匹配索引为偶数的元素   索引从0开始计算
• :odd ：匹配索引为奇数的元素
• :eq(index) ：匹配指定索引的元素
• :gt(index) ：匹配大于指定索引的元素
• :lt(index) ：匹配小于指定索引的元素
• :not(selector) ：排除某个元素

#p#jquery教程-选择器使用详细教程#e#

jquery选择器详细教程

3.4 内容 选择器  对基本选择器和层级选取进一步的精确定位

• :contains(text) ：匹配包含指定内容的元素
• :empty ：匹配内容为空的元素
• :has(selector) ：匹配包含某个选择器的元素
• :parent ：匹配内容不为空的元素

3.5可见性 选择器  对基本选择器和层级选取进一步的精确定位

• :hidden ：匹配所有隐藏的元素
• :visible ：匹配所有显示的元素

3.6 属性 选择器  对基本选择器和层级选取进一步的精确定位

• [attribute] ：匹配具有指定属性的元素
• [attribute=value] ：匹配属性等于指定值的元素
• [attribute!=value] ：匹配属性不等指定值的元素
• [attribute^=value] ：匹配以指定的属性值开头的元素
• [attribute$=value] ：匹配以指定的属性值结尾的元素
• [attribute*=value] ：匹配指定的属性出现过指定的属性值的元素
• [selector1][selector2][selectorN] ：匹配所有指定条件的元素

3.7 子元素 选择器 对基本选择器和层级选取进一步的精确定位

• :nth-child(index/even/odd) ：匹配指定索引的子元素 索引从1算起 
• :first-child ：匹配第一个子元素
• :last-child ：匹配最后一个子元素
• :only-child ：如果当前子元素是父元素的唯一元素，则匹配

3.8 表单 选择器 只针对表单

• :input ：匹配所有input元素
• :text  ：匹配所有文本框元素
• :password ：匹配所有密码框元素
• :radio ；匹配单选按钮元素
• :checkbox ：匹配所有复选框元素
• :submit ：匹配提交按钮元素
• :reset ：匹配重置按钮元素
• :image ：匹配image按钮
• :button ：匹配所有button按钮
• :file ：匹配所有文件框 
• :hidden ：匹配所有隐藏域

其余用法相同：

3.9表单对象属性 

• :enabled ：匹配状态激活的元素
• :disabled ：匹配状态禁用的元素
• :checked ：匹配被选中项的元素  checkbox、radio
• :selected ：匹配下拉列表中选中项的元素    select

#p#jquery教程-属性详细教程#e#

属性，css 的使用

四．属性 属性

• css
• html
• 文本
• 值

4.1 基本 属性

• attr(name)

获取属性值

Name：属性名

• attr(key,value)

设置属性值

Key：属性名

Value：属性值

• attr(properties)

同时设置多个属性值

properties：要求是一个json格式的数据

• attr(key,fn)

用一个函数的返回值做为指定属性的属性值

Key：属性名

fn：函数名

• removeAttr(name)

移除某个属性

Name：要删除的属性名

4.2 Css (addClass/removeClass/toggle) 属性

• addClass(class) 为指定的元素添加css类
• removeClass(class) 移除元素的某个css类
• toggleClass(class)  css类的切换 （如果使用了指定的类，则删除，如果没使用，则使用）
• hasClass(class) 判断元素是否使用了某个css类