jquery-$()函数的用法及一些常用的选择器

一、$()函数【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”)选取所有不可见元素。

时间: 2024-11-10 01:11:10

jquery-$()函数的用法及一些常用的选择器的相关文章

嵌入式之---常用模板函数(用法说明函数、参数解析函数)

主要内容:嵌入式常用模板函数(用法说明函数.参数解析函数) /*显示参数列表*/ void usage() {     printf("usage: server [-p:x] [-i:IP] [-o]\n\n");     printf("       -p:x      Port number to listen on\n");     printf("       -i:str    Interface to listen on\n");

C中的时间函数的用法

C中的时间函数的用法    这个类展示了C语言中的时间函数的常用的用法. 源代码: #include <ctime>#include <iostream> using namespace std; class MyTime{public:    MyTime() { mPTime = 0; mStLocalTime = 0; mStGMTTime = 0; }    ~MyTime() {}; //time_t time(time_t * timer) 返回自1970年1月1日00

T-SQL函数及用法--转

转自http://www.cnblogs.com/qixuejia/archive/2010/07/14/1777105.html 1. 聚合函数 (1) AVG 函数功能返回组中值的平均值.空值将被忽略 语法AVG ( [ ALL | DISTINCT ] expression ) (2) MAX 函数功能返回表达式的最大值 语法MAX ( [ ALL | DISTINCT ] expression ) (3) MIN 函数功能返回表达式的最小值 语法MIN ( [ ALL | DISTINC

oracle中的聚合函数count、max、min、sum、avg以及NVL函数的用法

oracle中的聚合函数count.max.min.sum.avg以及NVL函数的用法 分组函数聚合函数对一组行中的某个列执行计算执行计算并返回单一的值.聚合函数忽略空值.聚合函数经常与 SELECT 语句的 GROUP BY 子句一同使用,所以有的时候也把其称之为分组函数.这类函数通常应用于报表统计中,以下展示Oracle常用的聚合函数的应用. 分组函数的介绍 作用于一组数据,并对一组数据返回一个值. 常见的分组函数有: Count 用来计算有效数据的数量 Min 返回一个数字列或计算列的最小

C++中cin、cin.get()、cin.getline()、getline()、gets()等函数的用法

C++中cin.cin.get().cin.getline().getline().gets()等函数的用法 学C++的时候,这几个输入函数弄的有点迷糊:这里做个小结,为了自己复习,也希望对后来者能有所帮助,如果有差错的地方还请各位多多指教(本文所有程序均通过VC 6.0运行) 1.cin 2.cin.get() 3.cin.getline() 4.getline() 5.gets() 6.getchar() 附:cin.ignore();cin.get()//跳过一个字符,例如不想要的回车,空

C语言中sprintf()函数的用法

sprintf函数的用法 1.该函数包含在stdio.h的头文件中. 2.sprintf和平时我们常用的printf函数的功能很相似.sprintf函数打印到字符串中,而printf函数打印输出到屏幕上.sprintf函数在我们完成其他数据类型转换成字符串类型的操作中应用广泛. 3.sprintf函数的格式:int sprintf( char *string_buffer, const char *format_string[, args] ); 除了前两个参数固定外,可选参数可以是任意个.bu

dbms_random.value函数 trunc()函数的用法

一.oracle trunc()函数的用法TRUNC(for dates)精确到天 select trunc(sysdate,'dd') from dual   结果为:2010-9-17精确到月 select trunc(sysdate,'mm') from dual  结果为:2010-9-1精确到年 select trunc(sysdate,'yy') from dual  结果为:2010-1-1 TRUNC(for number)TRUNC函数返回处理后的数值,其工作机制与ROUND函

MYSQL中str_to_date函数的用法

str_to_date(str,format) 函数的用法 str_to_date函数将str转化为日期型的数据,format表示转化后的格式. format参数格式: 常用: %Y  年 %m  月 %d  日 %H  小时 %i  分 %s  秒 大全: %a 缩写星期名 %b 缩写月名 %c 月,数值 %D 带有英文前缀的月中的天 %d 月的天,数值(00-31) %e 月的天,数值(0-31) %f 微秒 %H 小时 (00-23) %h 小时 (01-12) %I 小时 (01-12)

云计算学习路线图素材、课件,mysql中函数的用法

在本篇文章中将给大家讲解下mysql中函数的用法: 今天在处理工单的时候,其中的一个需求是某商品的发货时效(即下单时间和发货时间的时间差),接触到了TIMESTAMPDIFF函数 TIMESTAMPDIFF TIMERSTAMPDIFF语法: TIMERSTAMPDIFF(interval,datetime_expr1,datetime_expr2) 说明: 该函数是返回datetime_expr1和datetime_expr2之间的整数差,其中单位有interval参数决定,interval的