jQuery基本使用及选择器

来源：互联网发布：网络信息安全龙头股票编辑：程序博客网时间：2024/04/27 17:33

来自网络（稍整理）：锋利的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)

.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'];