来自网络(稍整理):锋利的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元素
|
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'];