$()函数、jquery常用的选择器的用法

您所在的位置:网站首页 jquery中的选择器大致分为 $()函数、jquery常用的选择器的用法

$()函数、jquery常用的选择器的用法

2023-06-29 04:46| 来源: 网络整理| 查看: 265

一、$()函数【jquery()】用途

包装DOM元素,以便于操作(jquery选择器)

作为几个通用的实用工具函数的命名空间前缀,例如,删除字符串前后空格的实用函数,其调用方法如:$.trim(str) ;

文档就绪处理程序:包装文档实例,然后调用ready()方法,当文档为操作准备就绪的时候就执行该函数

创建DOM元素,通过给 $()函数传递包含HTML标记的字符串,可以即时创建相应的DOM元素,例如$("

Hello word

")

二、jquery选择器 基本选择器: 1、ID选择器 例:$(#test) 选取id为test的元素 2、class选择器 例:$(“.test”) 选取所有class为test的元素 3、元素标签选择器 例:$(“p”)选取所有的\

元素。 4、通配符选择器 例:$(“*”)选取所有的元素。 5、群组选择器 例:$(“p a.test”)选取在p元素内 拥有class为test的a元素。 层次选择器:

层次选择器适合于通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素和兄弟元素。

1、后代元素选择器 例: $(“div span”)选取\里的所有的\元素。 2、子元素选择器 例:$(“div>span”)选取\元素下元素名是\的子元素。 3、相邻元素选择器 例:$(“.one+div”)选取class为one的下一个\兄弟元素。 4、兄弟元素选择器 例:$(“#two~div”)选取Id为two的元素后面的所有\兄弟元素。 过滤选择器:

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS 中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。

一、基本过滤选择器: 1、:first 选取第1个元素 例如:$(“div:first”)选取所有\元素中第1个\元素。 2、:last 选取最后一个元素 例如:$(“div:last”)选取所有\元素中最后1个\元素。 3、:not(selector) 去除所有与给定选择器 匹配的元素 例如:$(“input:not(.myClass)”)选取class不是myClass的\元素。 4、:even 选取索引(从0开始)是偶数 的所有元素 如:$(“input:even”)选取索引是偶数的\元素。 5、:odd 选取索引(从0开始)是奇数 的所有元素 如:$(“input:odd”)选取索引是奇数的元素。 6、:eq(index) 选取索引(从0开始)等于 index的元素 如:$(“input:eq(1)”)选取索引等于1的元素。 7、:gt(index) 选取索引(从0开始)大于 index的元素 如:$(“input:gt(1)”)选取索引大于1的\元素。 8、:lt(index) 选取索引(从0开始)小于 index的元素 如:$(“input:lt(1)”)选取索引小于1的\元素。(不包括1) 9、:header 选取所有的标题元素,即 \到\ 如:$(“:header”)选取网页中所有的\,\,\... 10、:animated 选取当前正在执行动画的所有元素 如:$(“div: animated”)选取正在执行动画的\元素。 二、内容过滤选择器 1、:contains(text) $("div:contains('test')")选取含有文本内容为test的\元素 2、:empty 选取不包含子元素或文本的空元素 例:$("div:empty")选取不包含子元素或文本的空\元素 3、:has(selector) 选取含有给定选择器 匹配的元素的元素 例:$("div:has(.myClass)")选取含有class为 myClass的元素的\元素 4、:parent 选取含有子元素或文本的元素 例:$("div:parent")选取含有子元素或文本的\元素 三、可见性过滤选择器 1、:hidden 选取所有不可见的元素 例如:$("div:hidden")选取所有不可见的\元素 2、:visible 选取所有不可见的元素 例如:$("div:visible")选取所有可见的\元素 四、属性过滤选择器 1、[attribute] 选取拥有此属性的元素 例如:$("div[id]")选取拥有属性id的元素 2、[attribute=value] 例如:$("div[title=test]")选取属性 title 为test的\元素 3、[attribute!=value] 例如: 选取属性的值不等于value的元素 4、[attribute^=value] 选取属性的值以value开始的元素 例如:$("div[title^=test]")选取属性 title 以 test 开始的\元素 5、[attribute$=value] 选取属性的值以value结束的元素 例如: $("div[title$=test]")选取属性 title 以 test 结束的\元素 6、[attribute*=value] 选取属性的值含有value的元素 例如:$("div[title*=test]")选取属性 title 含 有 test 的\元素 7、[selector1][selector2]...[selectorN] 选取匹配以上所有属性 选择器的元素 例如:$("div[id][title*=test]")选取拥有属性id, 且属性 title 含有 test 的\元素 五、子元素过滤选择器 1、:nth-child(index/ even/odd/equation) 选取每个父元素下的第index(索引值为奇数/ 索引值为偶数/索引值等于某个表达式)个子元 素,index从1开始 例如:$("div:nth-child(1)")选取每个\中第一个子元素 2、:first-child 选取每个父元素下的第1个子元素 例如:$("div :first-child")选取每个\下第一个子元素 3、:last-child 选取每个父元素下的最后1个子元素 例如:$("div :last-child")选取每个\下最后一个子元素 4、:only-child 选取只有唯一子元素的元素的子元素 例如:$("div :only-child")选择只有一个子元素的\元素 六、表单对象属性过滤选择器 1、:enabled 选取所有可用元素 例如:$("body:enabled")选取页面内所有可用元素 2、:disabled 选取所有不可用元素 例如:$("body:disabled")选取页面内所有不可用元素 3、:checked 选取所有被选中的元素(单选框、复选框) 例如:$("input:checked")选取所有被选中的元素 4、:selected 选取所有被选中的选项元素(下拉列表) 例如:$("select:selected")选取所有被选中的选项元素 表单选择器 1、:input $(“:input”)选取所有,,和元素。 2、:text $(“:text”)选取所有的单行文本框。 3、:password $(“: password”)选取所有的密码框。 4、:radio $(“: radio”)选取所有的单选框。 5、:checkbox $(“:checkbox”)选取所有的复选框。 6、:submit $(“: submit”)选取所有的提交按钮。 7、:image $(“: image”)选取所有的图像按钮。 8、:reset $(“: reset”)选取所有的重置按钮。 9、:button $(“: button”)选取所有的按钮。 10、:file $(“: file”)选取所有的上传域。 11、:hidden $(“: hidden”)选取所有不可见元素。


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3