javascript_JQuery

jquery的基本功能

1. 访问和操作DOM元素
2. 对页面事件处理
3. 可以使用插件
4. 与ajax技术结合
5. 提高开发效率

$(document).ready(function(){}); 可以简写成 $();
表示页面框架下载完毕后执行

选择器-基本选择器

选择器	返回值
#id	返回单个元素
.class	返回所有的class元素
element	根据给定的标签返回所有元素
*	返回所有元素，包括html和body
selector1,selector2,···,selectorN	返回所有满足条件的元素（这里是并集）

例如

$("#div").click(
	$(this).css("color","red");
);

选择器-过滤选择器

过滤选择器附加在所有选择器的后面，并且以:开头，如：$("li:first")表示所有li标签的第一个

选择器-过滤选择器-基本过滤选择器

选择器	示例	解释
:first()或:first	$(“li:first”).text(123);	向第一个li中修改文本
:last()或:last	$(“li:last”).text(123);	向最后一个li中修改文本
:not(selector)	$(“li:not(.title)”);	获得class不是title的li元素
:even/:odd	$(“li:even”);	获取所有下标为偶数的li
:eq(index)	$(“li:eq(2)”);	获取下标为2的li元素
:gt(index)/:lt(index)	$(“li:gt(2)”);	获取所有下标大于2的li元素
:header	$(":header");	获取所有h1~h6的元素
:animated	$(":animated");	获取正在执行动画的元素

选择器-过滤选择器-内容过滤选择器

选择器	示例	解释
:contains(text)	$(“li:contains(abc)”).text(123);	把li中包含abc的文本替换成123
:empty	$(“li:empty”).text(123);	把空li的文本换成123
:has(selector)		获取含有selector的元素集合
:parent		获得含有后代元素或者文本的非空元素

选择器-过滤选择器-可见性过滤选择器

选择器	示例	解释
:hidden/:visible		选择可见或者不可见元素

不可见元素包括：css样式中display属性为none的元素、type属性为hidden的<input>元素以及宽高为0的元素。

选择器-过滤选择器-属性过滤选择器

选择器	示例和解释
[attribute]	获取拥有该属性的所有元素，如 $(‘li[title]’) 表示获取所有包含title 属性的 <li> 元素
[attribute=value]	获取某属性值为 value 的所有元素，如 $(‘li[title=test2]’) 表示获取所有包含 title 属性且属性值等于 test2 的 <li> 元素
[attribute!=value]	获取某属性值不等于 value 的所有元素，如 $(‘li[title!=test2]’) 表示获取所有包含 title 属性且属性值不等于 test2 的 <li> 元素
[attribute^=value]	选取属性值以 value 开头的所有元素，如 $(‘a[href^=“mailto:”]’) 表示获取所有包含 href 属性，且属性值以 mailto: 开头的 <a> 元素
[attribute$=value]	选取属性值以 value 结束的所有元素，如 $('a[href$=".zip"]’) 表示获取所有包含 href 属性，且属性值以 .zip 结尾的 <a> 元素
[attribute*=value]	选 取 属 性 值 中 包 含 value 的 所 有 元 素， 如 $(‘a[href*=“jquery.com”]’) 表示获取所有包含 href 属性且属性值中包含 jquery.com的 <a> 元素
[selector1][selector2]…[selectorN]	合并多个选择器，满足多个条件，每选择一次将缩小一次范围，如 $(‘li[id][title^=test]’) 选取所有拥有属性 id 且属性 title 以 test开头的 <li> 元素

选择器-过滤选择器-层次过滤选择器

名称	语法	功能	返回值
后代选择器	selector1 selector2	从 selector1 的后代元素里选取 selector2	元素集合，如 $(“#nav span”) 表示选取 #nav下所有的<span>元素
子选择器	selector1>selector2	从 selector1 的子元素里选取 selector2	元素集合，如("#nav>span")表示选取 #nav 的子元素<span>
相邻元素选择器	selector1+selector2	从 selector1 后面的第一个兄弟元素里选取 selector2	元素集合，如 $(“h2+dl”) 表示选取紧邻<h2>元素之后的同辈元素 <dl>
同辈元素选择器	selector1~selector2	从 selector1 后面的所有兄弟元素里选取 selector2	元 素 集 合， 如 $(“h2~dl”) 表 示 选 取<h2> 元素之后所有的同辈元素<dl>

• selector1 selector2 与 selector1>selector2 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系
• selector1+selector2 可以使用 jQuery 对象的 next() 方法代替
• selector1~selector2 从 selector1 后面的所有兄弟元素里选取 selector2，不能获取前面部分，可以使用nextAll() 方法代替。而 siblings() 方法获取全部的相邻元素，不分前后
• selector1 selector2与 selector1:has(selector2) 虽然这两个选择器都要求 selector2 是 selector1 的后代元素，但是前者最终选取的是后代元素，后者最终选取的是拥有这些后代元素的元素

选择器-过滤选择器-表单过滤选择器

名称	功能	返回值
:input	获取 元素	元素集合
:text	获取符合 [type=text] 的 元素	元素集合
:password	获取符合 [type=password] 的 元素	元素集合
:radio	获取符合 [type=radio] 的 元素	元素集合
:checkbox	获取符合 [type=checkbox] 的 元素	元素集合
:image	获取符合 [type=image] 的 元素	元素集合
:file	获取符合 [type=file] 的 元素	元素集合
:hidden	参考“可见性过滤选择器”	元素集合
:button	获取 元素和符合 [type=button] 的 元素	元素集合
:submit	获取符合 [type=submit] 的 元素	元素集合
:reset	获取符合 [type=reset] 的 元素	元素集合

表单对象属性过滤选择器

选择器	功能
:enabled	选取可用的表单元素
:disabled	选取不可用的表单元素
:checked	选取被选中的 元素
:selected	选取被选中的 元素