jQuery基本使用及选择器
2012-12-05 10:02
357 查看
来自网络（稍整理）：锋利的jQuery
一、使用JQUERY
JQUERY不需要配置，只需要下载以.js结尾的库就行了，然后把它放在html文档中的<head></head>中即可。
具体实现：<script src="此处放jquery文件"type="text/javascript"></script>。
二、$是jquery的简写。
$.Ajax是Jquery.Ajax的简写。
三、如果统一编码风格对日后的维护是很方便的。
①对同一个对象不操过三个操作时，可以直接写一行。
如：$("li").show().unbind("click");
②对于同一个对象较多操作，最好每个写一行。
$(this).removeClass("mouseout").
.addClass("mouseover")
.stop()
.fadeTo("fast",0.6)
.fadeTo("fast",0.6)
.unbind("cllick")
.click(function(){//此处写自己的代码});
③对于多个对象的少量操作涉及，可以每个对象写一行，如果子元素，可以考虑适当缩进。
$(this).addClass("highlight").
.children("li").show().end()
siblings().removeClass("highlight")
.children("li").hide();
四、为代码添加注释：
//(这是代码的注释)
五、Jquery和DOM对象要区分开。
jquery对象是jquery独有的。如果一个对象是jquery对象，那么使用jquery里面的方法，如：$("#ss").html();
这段代码等同于：document.getElementById("as").innerHTML;在JQUERY中无法使用DOM中的方法。
用#id取得的jquery对象并非dom对象。两者并非等价。
六、变量定义
jquery变量定义：var $vr=jquery
对象
DOM变量的定义方式：var vr=DOM
对象；
如果JQUERY没有封装想要的方法，那就不得不将jquery转换成DOM对象了。处理方式:
(1)jquery对象转换成DOM对象，JQUERY对象是一个数组对象。
即[index]和get[index],代码：
var $cc=("#cc");//jquery对象，
var cc =$cc[0]; //dom对象
alert(cc.checked);//检测checked是否被选中。
(2)jquery本身提供的对象，通过get[index]方法得到相应DOM对象。
var $cc=("#cc");//jquery对象
var cc =$cc.get(0); //dom对象
alert(cc.checked);//检测checked是否被选中。
将DOM转换成jquery对象。用$()把DOM对象包起来就可以获得一个JQUERY对象了,方式为：$(DOM对象)。
var cr=document.getElementById("cc");
var $cr=cr();
转换后就任意使用JQUERY了。（注意：平时使用的jQUERY对象都是$()函数制造出来的，$()函数是Jquery的制造工厂。）
七、Jquery选择器：
jquery选择器完全继承了CSS的风格。无需担心浏览器的兼容问题(必须注意：JQERY的行为规则都必须在获得元素之后生效)
1、Jquery基本选择器：
#id-------根据给定id匹配元素--------单个元素---------$("#test")选取id为test的元素。
.class----根据给定类名匹配元素------集合元素---------$(.test)选取所有class为test的元素。
element---给定元素名匹配------------集合元素---------$("p")选取所有<p>元素
*---------匹配所有元素--------------集合元素---------$("*")选取所有元素
select1,select2...-----------------集合元素---------$("div,p,span.Myclass")选取所有div,p,及拥有class为Myclass的span的元素。
2、层次选择器：
$("ancestor descendant")-------选取ancestor元素里的所有后代元素--------集合元素-------$(div
span)选取div里面所有的span元素
$("parent > child")-------选取parent元素下child(子)元素，与$("ancestordescendant")有区别，$("ancestor
descendant")选择的是后代元素。
------集合元素----$("div > span")选取div下元素名是span的元素。
$("prev+next")选取紧接在prev元素后的next元素------集合元素------$(".one+div")选取class为one的下一个div元素。
$("prev～siblings")选取prev元素后所有siblings元素-----集合元素-------$("#one～h3")选取id为one的元素后面所有h3元素。
3、过滤选择器
1）、基本过滤选择器：
：first------选取第一个元素-----$("div:first")选取所有div元素中第1个div元素
：last-------选取最后一个元素---$("div:last")选取所有div元素中最后一个div元素
：not(select)--------去除所有与给定选择器匹配的元素----$("input:not(myclass)")选取class不是myclass的<input>元素
：even------选取索引是偶数的所有元素，索引从0开始--------$("input:even")选取索引是偶数的<input>元素
：odd-----选取索引是奇数的所有元素，索引从0开始----$("input:odd")选取索引是奇数的<input>元素
：eq(index)-----选取索引等于index的元素(从0开始)----$("input:eq(1)")选取索引等于1的<input>元素
：gt(index)-----选取索引大于index的元素(从0开始)----$("input:gt(1)")选取索引大于1的<input>元素
：lt(index)-----选取索引小于index的元素---$("input:lt(index)")选取索引小于1的<input>元素(注：小于1但不包括1)
：header--------选取所有标题元素，例如h1,h2,h3等等----$(":hader")选取网页中所有的h1,h2,h3
：animated-------选取当前正在执行动画的所有元素--$("div:animated")选取正在执行动画的div元素
：focus------选取当前获取焦点的元素---$(‘:focus’)选取当前获取焦点的元素
2）、内容过滤选择器
：contains(text)--选取含有文本内容为“text”的元素---$("div:contains('ni')")选取含有文本‘ni’的div元素
：empty-------选取不包含子元素或者文本的空元素---$("div:empty")选取不包含子元素的空元素
：has(select)---选取含有选择器所匹配的元素的元素---$("div:has(p)")选取含有p元素的div元素
：parent----选取含有子元素或者文本元素的文本---$("div:parent")选取拥有子元素(包括文本元素)的div元素
3）、可见性过滤选择器：
：hidden---选择所有不可见元素---$(":hidden")选取所有不可见元素。包括<input="hidden"/>,<divstyle="display:none;">和
<divstyle="visiblity: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元素
[attriute*=value]--选取属性的值含有value的元素--$("div[title*=test]")选取属性title含有“test”的div元素
[attriute|=value]—选取属性等于给定字符串或以该字符串为前缀的元素----$(‘div[title|=”en”]’)选取属性title等于en或以en为前缀的的div元素
[select1][select2][selectN]--用属性选择器合成一个复合属性选择器，满足多个条件。每个选择一次缩小一次范围--$("div[id][title$='test']")选取拥有属性id并且属性title以"test"结尾的div元素
5）、子元素过滤选择器：
：nth-child(index/even/odd/equation)----选取每个父元素下的第index个子元素或者奇偶元素.(index从1算起)--:eq(index)只匹配一个元素，而：nth-child将为每一个父元素匹配子元素，并且：nth-child(index)的index
是从1开始，而eq(index)是从0开始
:first-child--选去每个父元素的第一个子元素--:frist只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素。如:$("ul
li:first-child");选取每个<ul>中第一个<li>元素。
:last-child--选取每个父元素的最后一个子元素--同样，:last只返回单个单个元素，而：last-child选择符将为每个父元素匹配最后一个子元素。如:$("ul
li:last-child");选取每个<ul>中最后一个<li>元素。
:only-child--如果某个元素是他的父元素中唯一一个子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配。$("ulli:only-child")<ul>中选取是唯一一个子元素的<li>元素。
6）、表单对象属性过滤器：
:enabled--选取所有可用元素--$("#form1:enabled");选取id为"form1"的表单内的所有可用元素
:disabled--选取所有不可用元素--$("#form2:disabled")
选取id为"form2"的表单元素内的所有不可用元素
:checked--选取所有被选择的元素(单选框，复选框)--$("input:checked");选取所有被选中的<input>元素
:selected--选取所遇被选中的选项元素(下拉列表)--$("select:selected");选取所有被选中的选项元素
4、表单选择器：
:input--选取所有的<input>、<textarea>、<select>和<button>元素--$(":input")选取所有<input>、<textarea>...的元素
:text---选取所有单行文本框--$(":text")选取所有单行文本框
:password--选取所有密码框--$(":password")选取所有密码框
:radio--选取所有单选框--$(":radio")选取所有单选框
:checkbox--选取所有多选框--$(":checkbox")选取所有复选框
:submit--选取所有提交按钮--$(":submit")选取所有提交按钮
:image--选取所有图像按钮--$(":image")选取所有图像按钮
:reset--选取所有重置按钮--$(":reset")选取所有重置按钮
:button--选取所有按钮--$(":button")选取所有按钮
:file--选取所有上传域--$(":file")选取素有上传域
:hidden--选取所有不可见元素--$(":file")选取所有不可见元素
八、属性选择器中的一些注意事项：
1、选择器中含有特殊符号：
属性选择器的属性值中是不能含有特殊字符的，但在实际项目中偶尔会遇到表达式中含有"#"和"."等特殊字符，按照普通方式去处理的话就会出错。解决方法是使用转义字符。例如:$("#i#d");$("#d[1]");该代码正确写法：
$("#i\\#d")//转义特殊字符 $("#id\\[1\\]")//转义特殊字符"[]"
2、属性选择器引号问题:$('div[@title="test'];
一、使用JQUERY
JQUERY不需要配置，只需要下载以.js结尾的库就行了，然后把它放在html文档中的<head></head>中即可。
具体实现：<script src="此处放jquery文件"type="text/javascript"></script>。
二、$是jquery的简写。
$.Ajax是Jquery.Ajax的简写。
三、如果统一编码风格对日后的维护是很方便的。
①对同一个对象不操过三个操作时，可以直接写一行。
如：$("li").show().unbind("click");
②对于同一个对象较多操作，最好每个写一行。
$(this).removeClass("mouseout").
.addClass("mouseover")
.stop()
.fadeTo("fast",0.6)
.fadeTo("fast",0.6)
.unbind("cllick")
.click(function(){//此处写自己的代码});
③对于多个对象的少量操作涉及，可以每个对象写一行，如果子元素，可以考虑适当缩进。
$(this).addClass("highlight").
.children("li").show().end()
siblings().removeClass("highlight")
.children("li").hide();
四、为代码添加注释：
//(这是代码的注释)
五、Jquery和DOM对象要区分开。
jquery对象是jquery独有的。如果一个对象是jquery对象，那么使用jquery里面的方法，如：$("#ss").html();
这段代码等同于：document.getElementById("as").innerHTML;在JQUERY中无法使用DOM中的方法。
用#id取得的jquery对象并非dom对象。两者并非等价。
六、变量定义
jquery变量定义：var $vr=jquery
对象
DOM变量的定义方式：var vr=DOM
对象；
如果JQUERY没有封装想要的方法，那就不得不将jquery转换成DOM对象了。处理方式:
(1)jquery对象转换成DOM对象，JQUERY对象是一个数组对象。
即[index]和get[index],代码：
var $cc=("#cc");//jquery对象，
var cc =$cc[0]; //dom对象
alert(cc.checked);//检测checked是否被选中。
(2)jquery本身提供的对象，通过get[index]方法得到相应DOM对象。
var $cc=("#cc");//jquery对象
var cc =$cc.get(0); //dom对象
alert(cc.checked);//检测checked是否被选中。
将DOM转换成jquery对象。用$()把DOM对象包起来就可以获得一个JQUERY对象了,方式为：$(DOM对象)。
var cr=document.getElementById("cc");
var $cr=cr();
转换后就任意使用JQUERY了。（注意：平时使用的jQUERY对象都是$()函数制造出来的，$()函数是Jquery的制造工厂。）
七、Jquery选择器：
jquery选择器完全继承了CSS的风格。无需担心浏览器的兼容问题(必须注意：JQERY的行为规则都必须在获得元素之后生效)
1、Jquery基本选择器：
#id-------根据给定id匹配元素--------单个元素---------$("#test")选取id为test的元素。
.class----根据给定类名匹配元素------集合元素---------$(.test)选取所有class为test的元素。
element---给定元素名匹配------------集合元素---------$("p")选取所有<p>元素
*---------匹配所有元素--------------集合元素---------$("*")选取所有元素
select1,select2...-----------------集合元素---------$("div,p,span.Myclass")选取所有div,p,及拥有class为Myclass的span的元素。
2、层次选择器：
$("ancestor descendant")-------选取ancestor元素里的所有后代元素--------集合元素-------$(div
span)选取div里面所有的span元素
$("parent > child")-------选取parent元素下child(子)元素，与$("ancestordescendant")有区别，$("ancestor
descendant")选择的是后代元素。
------集合元素----$("div > span")选取div下元素名是span的元素。
$("prev+next")选取紧接在prev元素后的next元素------集合元素------$(".one+div")选取class为one的下一个div元素。
$("prev～siblings")选取prev元素后所有siblings元素-----集合元素-------$("#one～h3")选取id为one的元素后面所有h3元素。
3、过滤选择器
1）、基本过滤选择器：
：first------选取第一个元素-----$("div:first")选取所有div元素中第1个div元素
：last-------选取最后一个元素---$("div:last")选取所有div元素中最后一个div元素
：not(select)--------去除所有与给定选择器匹配的元素----$("input:not(myclass)")选取class不是myclass的<input>元素
：even------选取索引是偶数的所有元素，索引从0开始--------$("input:even")选取索引是偶数的<input>元素
：odd-----选取索引是奇数的所有元素，索引从0开始----$("input:odd")选取索引是奇数的<input>元素
：eq(index)-----选取索引等于index的元素(从0开始)----$("input:eq(1)")选取索引等于1的<input>元素
：gt(index)-----选取索引大于index的元素(从0开始)----$("input:gt(1)")选取索引大于1的<input>元素
：lt(index)-----选取索引小于index的元素---$("input:lt(index)")选取索引小于1的<input>元素(注：小于1但不包括1)
：header--------选取所有标题元素，例如h1,h2,h3等等----$(":hader")选取网页中所有的h1,h2,h3
：animated-------选取当前正在执行动画的所有元素--$("div:animated")选取正在执行动画的div元素
：focus------选取当前获取焦点的元素---$(‘:focus’)选取当前获取焦点的元素
2）、内容过滤选择器
：contains(text)--选取含有文本内容为“text”的元素---$("div:contains('ni')")选取含有文本‘ni’的div元素
：empty-------选取不包含子元素或者文本的空元素---$("div:empty")选取不包含子元素的空元素
：has(select)---选取含有选择器所匹配的元素的元素---$("div:has(p)")选取含有p元素的div元素
：parent----选取含有子元素或者文本元素的文本---$("div:parent")选取拥有子元素(包括文本元素)的div元素
3）、可见性过滤选择器：
：hidden---选择所有不可见元素---$(":hidden")选取所有不可见元素。包括<input="hidden"/>,<divstyle="display:none;">和
<divstyle="visiblity: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元素
[attriute*=value]--选取属性的值含有value的元素--$("div[title*=test]")选取属性title含有“test”的div元素
[attriute|=value]—选取属性等于给定字符串或以该字符串为前缀的元素----$(‘div[title|=”en”]’)选取属性title等于en或以en为前缀的的div元素
| |
5）、子元素过滤选择器：
：nth-child(index/even/odd/equation)----选取每个父元素下的第index个子元素或者奇偶元素.(index从1算起)--:eq(index)只匹配一个元素，而：nth-child将为每一个父元素匹配子元素，并且：nth-child(index)的index
是从1开始，而eq(index)是从0开始
:first-child--选去每个父元素的第一个子元素--:frist只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素。如:$("ul
li:first-child");选取每个<ul>中第一个<li>元素。
:last-child--选取每个父元素的最后一个子元素--同样，:last只返回单个单个元素，而：last-child选择符将为每个父元素匹配最后一个子元素。如:$("ul
li:last-child");选取每个<ul>中最后一个<li>元素。
:only-child--如果某个元素是他的父元素中唯一一个子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配。$("ulli:only-child")<ul>中选取是唯一一个子元素的<li>元素。
6）、表单对象属性过滤器：
:enabled--选取所有可用元素--$("#form1:enabled");选取id为"form1"的表单内的所有可用元素
:disabled--选取所有不可用元素--$("#form2:disabled")
选取id为"form2"的表单元素内的所有不可用元素
:checked--选取所有被选择的元素(单选框，复选框)--$("input:checked");选取所有被选中的<input>元素
:selected--选取所遇被选中的选项元素(下拉列表)--$("select:selected");选取所有被选中的选项元素
4、表单选择器：
:input--选取所有的<input>、<textarea>、<select>和<button>元素--$(":input")选取所有<input>、<textarea>...的元素
:text---选取所有单行文本框--$(":text")选取所有单行文本框
:password--选取所有密码框--$(":password")选取所有密码框
:radio--选取所有单选框--$(":radio")选取所有单选框
:checkbox--选取所有多选框--$(":checkbox")选取所有复选框
:submit--选取所有提交按钮--$(":submit")选取所有提交按钮
:image--选取所有图像按钮--$(":image")选取所有图像按钮
:reset--选取所有重置按钮--$(":reset")选取所有重置按钮
:button--选取所有按钮--$(":button")选取所有按钮
:file--选取所有上传域--$(":file")选取素有上传域
:hidden--选取所有不可见元素--$(":file")选取所有不可见元素
八、属性选择器中的一些注意事项：
1、选择器中含有特殊符号：
属性选择器的属性值中是不能含有特殊字符的，但在实际项目中偶尔会遇到表达式中含有"#"和"."等特殊字符，按照普通方式去处理的话就会出错。解决方法是使用转义字符。例如:$("#i#d");$("#d[1]");该代码正确写法：
$("#i\\#d")//转义特殊字符 $("#id\\[1\\]")//转义特殊字符"[]"
2、属性选择器引号问题:$('div[@title="test'];
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery基本选择器 层次选择器 过滤选择器 表单选择器使用示例 带注释
- jQuery-Selectors(选择器)的使用(一、基本篇)
- jQuery基本过滤选择器使用介绍
- 使用jQuery基本选择器选择元素
- 使用jQuery基本过滤选择器
- jquery基本选择器的使用
- jQuery-Selectors(选择器)的使用(一、基本篇)
- 使用jQuery基本过滤选择器
- jQuery选择器的基本使用
- jquery 基本选择器的使用
- 使用Jquery基本选择器
- jQuery基本过滤选择器使用介绍
- JQuery的基本选择器使用总结以及过滤，文本，可见度的选择代码
- jQuery基本选择器的使用
- Jquery基本选择器 层次选择器 过滤选择器 表单选择器使用示例 带注释
- 使用Jquery基本过滤选择器
- jquery基本选择器和层次选择器的使用
- jQuery基本选择器和层次选择器学习使用
- Jquery基本选择器 层次选择器 过滤选择器 表单选择器使用示例 带注释
- jQuery-Selectors(选择器)的使用(一、基本篇)