当前位置: 首页 > 工具软件 > jQuery.resBg > 使用案例 >

javascript_JQuery

岳昊空
2023-12-01

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 [ h r e f ('a[href (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选取被选中的 元素
 类似资料:

相关阅读

相关文章

相关问答