jquery-$()函数的用法及一些常用的选择器
(1)包装DOM元素,以便于操作(jquery选择器)
(2)作为几个通用的实用工具函数的命名空间前缀,例如,删除字符串前后空格的实用函数,其调用方法如下所示:
$.trim(str) ;
(3) 文档就绪处理程序:包装文档实例,然后调用ready()方法,当文档为操作准备就绪的时候就执行该函数
(4) 创建DOM元素,通过给$()函数传递包含HTML标记的字符串,可以即时创建相应的DOM元素,例如$("<p>Hello word</p>")
二、jquery选择器
基本选择器:
1、ID选择器 例:$(#test) 选取id为test的元素
2、class选择器 例:$(“.test”) 选取所有class为test的元素
3、元素标签选择器 例:$(“p”)选取所有的<p>元素。
4、通配符选择器 例:$(“*”)选取所有的元素。
5、群组选择器 例:$(“p a.test”)选取在p元素内 拥有class为test的a元素。
层次选择器 :
层次选择器适合于通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相 邻元素和兄弟元素。
1、后代元素选择器 例: $(“div span”)选取<div>里的所有的<span>元素。
2、子元素选择器 例:$(“div>span”)选取<div>元素下元素名是<span>的子元素。
3、相邻元素选择器 例:$(“.one+div”)选取class为one的下一个<div>兄弟元素。
4、兄弟元素选择器 例:$(“#two~div”)选取Id为two的元素后面的所有<div>兄弟元素。
过滤选择器:
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS 中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。
一、基本过滤选择器:
1、:first 选取第1个元素 例如:$(“div:first”)选取所有<div>元素中第1个<div>元素。
2、:last 选取最后一个元素 例如:$(“div:last”)选取所有<div>元素中最后1个<div>元素。
3、:not(selector) 去除所有与给定选择器 匹配的元素 例如:$(“input:not(.myClass)”)选取class不是myClass的<input>元素。
4、:even 选取索引(从0开始)是偶数 的所有元素 例如:$(“input:even”)选取索引是偶数的<input>元素。
5、:odd 选取索引(从0开始)是奇数 的所有元素 例如:$(“input:odd”)选取索引是奇数的<input>元素。
6、:eq(index) 选取索引(从0开始)等于 index的元素 例如:$(“input:eq(1)”)选取索引等于1的<input>元素。
7、:gt(index) 选取索引(从0开始)大于 index的元素 例如:$(“input:gt(1)”)选取索引大于1的<input>元素。
8、:lt(index) 选取索引(从0开始)小于 index的元素 例如:$(“input:lt(1)”)选取索引小于1的<input>元素。(不包括1)
9、:header 选取所有的标题元素,即 <h1>到<h6> 例如:$(“:header”)选取网页中所有的<h1>,<h2>,<h3>...
10、:animated 选取当前正在执行动画的 所有元素 例如:$(“div: animated”)选取正在执行动画的<div>元素。
二、内容过滤选择器
1、:contains(text) $("div:contains('test')")选取含有文本内容为test的<div>元素
2、:empty 选取不包含子元素或文本的空元素 例:$("div:empty")选取不包含子元素或文本的空<div>元素
3、:has(selector) 选取含有给定选择器 匹配的元素的元素 例:$("div:has(.myClass)")选取含有class为 myClass的元素的<div>元素
4、:parent 选取含有子元素或文本的元素 例:$("div:parent")选取含有子元素或文本的<div>元素
三、可见性过滤选择器
1、:hidden 选取所有不可见的元素 例如:$("div:hidden")选取所有不可见的<div>元素
2、:visible 选取所有不可见的元素 例如:$("div:visible")选取所有可见的<div>元素
四、属性过滤选择器
1、[attribute] 选取拥有此属性的元素 例如:$("div[id]")选取拥有属性id的元素
2、[attribute=value] 例如:$("div[title=test]")选取属性 title 为test的<div>元素
3、[attribute!=value] 例如: 选取属性的值不等于value的元素
4、[attribute^=value] 选取属性的值以value开始的元素 例如:$("div[title^=test]")选取属性 title 以 test 开始的<div>元素
5、[attribute$=value] 选取属性的值以value结束的元素 例如: $("div[title$=test]")选取属性 title 以 test 结束的<div>元素
6、[attribute*=value] 选取属性的值含有value的元素 例如:$("div[title*=test]")选取属性 title 含 有 test 的<div>元素
7、[selector1][selector2]...[selectorN] 选取匹配以上所有属性 选择器的元素 例如:$("div[id][title*=test]")选取拥有属性id, 且属性 title 含有 test 的<div>元素
五、子元素过滤选择器
1、:nth-child(index/ even/odd/equation) 选取每个父元素下的第index(索引值为奇数/ 索引值为偶数/索引值等于某个表达式)个子元 素,index从1开始
例如:$("div:nth-child(1)")选取每个<div>中第一个子元素
2、:first-child 选取每个父元素下的第1个子元素 例如:$("div :first-child")选取每个<div>下第一个子元素
3、:last-child 选取每个父元素下的最后1个子元素 例如:$("div :last-child")选取每个<div>下最后一个子元素
4、:only-child 选取只有唯一子元素的元素的子元素 例如:$("div :only-child")选择只有一个子元素的<div>元素
六、表单对象属性过滤选择器
1、:enabled 选取所有可用元素 例如:$("body:enabled")选取页面内所有可用元素
2、:disabled 选取所有不可用元素 例如:$("body:disabled")选取页面内所有不可用元素
3、:checked 选取所有被选中的元素(单选框、复选框) 例如:$("input:checked")选取所有被选中的<input>元素
4、:selected 选取所有被选中的选项元素(下拉列表) 例如:$("select:selected")选取所有被选中的选项元素
表单选择器
1、:input $(“:input”)选取所有<input>,<textarea>,<select>和<button>元素。
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”)选取所有不可见元素。
转载于:https://www.cnblogs.com/lucifer-shun/p/5852469.html
jquery-$()函数的用法及一些常用的选择器相关推荐
- python常用函数的用法_python中常用函数整理
1.map map是python内置的高阶函数,它接收一个函数和一个列表,函数依次作用在列表的每个元素上,返回一个可迭代map对象. class map(object):""&qu ...
- MapInfo中常用查询函数及用法
MapInfo中常用查询函数及用法: 函数用途 语法 备注 图层中选点 Str$(obj)="point": Str(String)表示字符串:point表示点: 图层中选线 St ...
- python常用函数-python常用函数与用法示例
本文实例讲述了python常用函数与用法.分享给大家供大家参考,具体如下: 自定义函数实例 # 定义一个函数 def printme( str ): "打印任何传入的字符串" pr ...
- r语言的runmed函数_R实战 第五篇:常用函数的用法
Basic包是R语言预装的开发包,包含了常用的数据处理函数,可以对数据进行简单地清理和转换,也可以在使用其他转换函数之前,对数据进行预处理,必须熟练掌握常用的数据处理函数. 一,合并向量 函数appe ...
- C++中有关queue常用函数的用法及其注意要项
11:C++中有关queue常用函数的用法及其注意要项 #include<bits/stdc++.h> using namespace std; int main(){queue < ...
- Matlab——常用函数的用法总结(部分直接摘自mathwork,持续更新)
Matlab--常用函数的用法总结(部分直接摘自mathwork,持续更新) 文章目录 Matlab--常用函数的用法总结(部分直接摘自mathwork,持续更新) 一.绘图篇 1.图像显示形式 ①f ...
- web报表工具FineReport常用函数的用法总结(日期和时间函数)
web报表工具FineReport常用函数的用法总结(日期和时间函数) 说明:凡函数中以日期作为参数因子的,其中日期的形式都必须是yy/mm/dd.而且必须用英文环境下双引号(" " ...
- python常用函数大全-python常用函数与用法示例
本文实例讲述了python常用函数与用法.分享给大家供大家参考,具体如下: 自定义函数实例 # 定义一个函数 def printme( str ): "打印任何传入的字符串" pr ...
- c语言中各种函数的作用,C语言常用函数用法大全
C语言是当中广泛的计算机编程语言,是所有计算机编程语言的祖先,其他计算机编程语言包括当前流行的Java语言,都是用C语言实现的,C语言是编程效率高的计算机语言,既能完成上层应用开发,也能完成底层硬件驱 ...
最新文章
- service数据保存_「数据架构」数据流程图与实例-客户服务系统
- 大数据:Hive和Hbase的区别于优势
- vm无法删除干净老版本,新版本无法安装解决
- Web安全学习 Week1
- 计算机数据库基础知识笔记,计算机基础及技巧(我的电脑笔记,适合新手!包含使用电脑最基本的知识及DOS、网络及数据库等。)...
- Spring Roo 简介
- python生成树状图_python 生成 树状结构
- Mybatis整合spring
- 什么意思中文翻译_os常见意思介绍
- matlab 梁代码,方舟生存进化梁龙鞍怎么做 梁龙鞍代码材料一览
- 电源管理允许此设备唤醒计算机怎么关掉,电脑如何设置电源管理允许鼠标唤醒计算机...
- 基本知识 100052
- PowerVR SDK 2020 Release 2发布:多处更新优化,性能更强大
- 内存 显存,cpu,GPU,显卡
- 技术人员如何创业:打造超强执行力团队
- 大数据应用型产品设计方法及行业案例介绍(附110页PPT)
- 《速度与激情》男主演保罗沃克车祸身亡,再见速度再见难续的激情
- docker容器下载及配置
- PG系列3-客户端工具使用
- 用户体验为什么重要?如何提升产品的用户体验?(写给产品小白)