收藏

下载资源 加入VIP,免费下载

JQuery基础用法.docx

上传人：b****5 文档编号：6347830 上传时间：2023-01-05 格式：DOCX 页数：77 大小：53.45KB

下载 相关 举报

第1页 / 共77页

第2页 / 共77页

第3页 / 共77页

第4页 / 共77页

第5页 / 共77页

点击查看更多>>

下载资源

资源描述

JQuery基础用法.docx

《JQuery基础用法.docx》由会员分享，可在线阅读，更多相关《JQuery基础用法.docx（77页珍藏版）》请在冰豆网上搜索。

JQuery基础用法

jQuery使用

一、选择器

基本

1、#id

根据给定的ID匹配一个元素

实例:

testID

$（“#testID”）.html（）;

2、Element

根据给定的元素名匹配所有元素

实例：

div1

div2

$（“div”）;

3、.class

根据给定的类属性匹配一个元素

实例：

testClass

$（“.testClass”）;

层级关系

1、ancestordescendant

在给定的祖先元素下匹配所有的后代元素

实例：

Name:

Newsletter:

$（"forminput"）

结果：

[,]

2、parent>child

在给定的父元素下匹配所有的子元素（注意与后代元素的区别）

实例：

name:

newsletter:

Jquery代码：

$（“form>input”）;

结果：

[]

3、prev+next

匹配紧跟在prev元素后的next元素

实例：

name:

newsletter:

Jquery代码：

$（“label>input”）;

结果：

[，]

4、prev~siblings

匹配prev元素后的所有的siblings元素

实例：

name:

newsletter:

Jquery代码：

$（“form~input”）;

结果：

[]

基本

1、first（）:

first

获取匹配得第一个元素

实例：

• listitem1
• listitem2
• listitem3

Jquery代码：

$（“li”）.first（）;

或者

$（“li:

first”）;

结果：

[

listitem1

]

2、last（）:

last

获取匹配的最后一个元素

实例：

• listitem1
• listitem2
• listitem3

Jquery代码：

$（“li”）.last（）;

$（“li:

last”）;

结果：

[

listitem3

]

3、:

not,not（）

去除所有与给定选择器匹配的元素

实例：

Jquery代码：

$（“input:

not（:

checked）”）;

或者

alert（$（"input"）.not（$（"input:

checked"））.val（））;

4、:

even

匹配所有索引值为偶数的元素，从0开始计数

实例

Header1

Value1

Value2

jQuery代码：

alert（$（“tr:

even”）.eq

（1）.text（））;

结果：

Value2

5、:

odd

匹配所有索引值为奇数的元素，从0开始计数（0是偶数）

实例

Header1

Value1

Value2

jQuery代码：

alert（$（“tr:

odd”）.eq（0）.text（））;

结果：

Value1

6、:

eq（index），eq（index）

匹配一个给定索引值的元素

实例

Header1

Value1

Value2

jQuery代码：

alert（$（“tr:

odd”）.eq（0）.text（））;

alert（$（“tr:

odd:

eq（0）”）.text（））;

结果：

value1

7、:

gt（index）

匹配所有大于给定索引值的元素

实例

Header1

Value1

Value2

jQuery代码：

alert（$（“tr:

gt

（1）”）.text（））;

结果：

value2

8、:

lt（index）

匹配所有小于给定索引值的元素

Header1

Value1

Value2

jQuery代码：

alert（$（“tr:

lt

（1）”）.text（））;

结果：

Header1

9、:

header

匹配如h1，h2，h3之类的标题元素

实例：

Header1

Contents1

Header2

Contents2

$（":

header"）.css（"background","#EEE"）;

10、animate（）和:

animated

只有对不在执行动画效果的元素执行一个动画特效

Run

$（"#run"）.click（function（）{

$（"div:

not（:

animated）"）.animate（{left:

"+=20"},1000）;

}）;

内容

1、:

contains（）

匹配包含给定文本的元素

实例：

JohnResig

GeorgeMartin

MalcomJohnSinclair

jQuery代码

alert（$（"div:

contains（'John'）"）.eq

（1）.html（））;

结果：

MalcomJohnSinclair

2、:

empty

匹配所有不包含子元素或者文本的空元素

实例：

Value1
Value2

Jquery代码：

$（"td:

empty"）

结果：

[,]

3、:

has（）

匹配含有选择器所匹配的元素的元素

实例：

Hello

Helloagain!

$（"div:

has（p）"）.css（"background","#EEE"）

4、:

parent

匹配含有子元素或者文本的元素

实例：

Value1
Value2

Jquery代码：

alert（$（"td:

parent"）.eq

（1）.html（））;

结果：

Value2

可见性

1、:

hidden

匹配所有不可见元素，或者type为hidden的元素

实例：

none">

Value1

Value2

Jquery代码

alert（$（"tr:

hidden"）.text（））;

alert（$（"input:

hidden"）.val（））;

结果：

Value1

hidden

2、:

visible

匹配所有的可见的元素

none">

Value1

Value2

Jquery代码

alert（$（"tr:

visible"）.eq（0）.text（））;

结果：

Value1

属性

1、[attribute]

匹配包含给定属性的元素

实例：

Hello!

hasId

Jquery代码

alert（$（"div[id]"）.text（））

结果：

hasId

2、[attribute=value]

匹配给定的属性是某个特定值的元素

实例：

button

Jquery代码

alert（$（"div[name='div']"）.text（））;

结果：

button

3、[attribute!

=value]

匹配所有不含有指定的属性，或者属性不等于特定值的元素

实例：

Jquery代码：

$（"input[name!

='newsletter']"）.attr（"checked",true）;

结果：

第三个被选中

4、[attribute^=value]

匹配给定的属性是以某些值开始的元素

实例：

Jquery代码：

alert（$（"input[name^='app']"）.val（））;

结果：

apple

5、[attribute$=value]

匹配给定的属性是以某些值结尾的元素

Jquery代码：

alert（$（"input[name$='ple']"）.val（））;

结果：

apple

6、[attribute*=value]

匹配给定的属性是以包含某些值的元素

Jquery代码：

alert（$（"input[name*='ppl']"）.val（））;

结果：

apple

7、[selector1][selector2][selectorN]

复合属性选择器，需要同时满足多个条件时使用。

实例：

Jquery代码：

alert（$（"input[name^='app'][value][id='apple']"）.val（））;

子元素

1、:

nth-child（index）

匹配其父元素下的第N个子或奇偶元素（从1开始计数）

实例：

• listitem1
• listitem2
• listitem3

Jquery代码：

alert（$（"ulli:

nth-child

（2）"）.text（））;

结果：

listitem2

2、:

first-child

匹配第一个子元素

实例：

• listitem1
• listitem2
• listitem3

Jquery代码：

alert（$（"ulli:

first-child"）.text（））;

结果：

listitem1

3、:

last-child

匹配最后一个子元素

实例：

• listitem1
• listitem2
• listitem3

Jquery代码：

alert（$（"ulli:

last-child"）.text（））;

结果：

listitem3

4、:

only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

• listitem1
• listitem2
• listitem3

• onlylistitem1

Jquery代码：

alert（$（"ulli:

only-child"）.text（））;

结果:

onlylistitem1

表单

1、:

input

匹配所有input,textarea,select和button元素

实例：

查找所有的input元素，下面这些元素都会被匹配到。

alert（$（":

inputoption:

only-child"）.text（））;

结果：

option

2、:

text

匹配所有单行文本框

实例：

Jquery代码：

alert（$（":

text[id='text'][name='text']"）.val（））;

结果：

text

3、:

password

匹配所有密码框

实例：

Jquery代码：

alert（$（":

password[id='text'][name='text']"）.val（））;

结果：

text

4、:

radio

匹配所有单选按钮（用法同上）

5、:

checkbox

匹配所有复选框（用法同上）

6、:

submit

匹配所有提交按钮（用法同上）

7、:

image

匹配所有图像域（用法同上）

8、:

reset

匹配所有重置按钮（用法同上）

9、:

button

匹配所有按钮（用法同上）

10、:

file

匹配所有文件域（用法同上）

11、:

hidden

匹配所有不可见元素，或者type为hidden的元素（上边存在不在举例说明）

表单对象属性

1、:

enabled

匹配所有可用元素

实例：

Jquery代码：

alert（$（"input:

enabled"）.val（））;

结果：

enabled

2、:

disabled

匹配所有不可用元素

实例：

Jquery代码：

alert（$（"input:

disabled"）.val（））;

结果：

disabled

3、:

checked

匹配所有选中的被选中元素（复选框、单选框等，不包括select中的option）

实例：

Jquery代码：

alert（$（"input:

checked"）.eq（0）.val（））;

alert（$（":

checkbox:

checked"）.eq（0）.val（））;

结果：

Daily、Daily

4、:

selected

匹配所有选中的option元素

实例：

Flowers

Gardens

Trees

Jquery代码：

alert（$（“selectoption:

selected”）.text（））;

结果：

GardensOption

二、属性

属性

1、attr（name）

取得第一个匹配元素的属性的值

实例：

jQuery代码：

$（“img”）.attr（“src”）

结果：

test.jsp

2、attr（properties）

将一个“名/值”形式的对象设置为所有匹配元素的属性。

实例：

jQuery代码：

$（"img"）.attr（{src:

"test.jpg",alt:

"TestImage"}）;

结果：

显示相应的图片

3、attr（key,value）

为所有匹配的元素设置一个属性值

实例：

jQuery代码：

$（"img"）.attr（“src”:

"test.jpg"）;

结果：

显示相应的图片

4、attr（key,function（index,attr））

为所有匹配的元素设置一个计算的属性值

不提供值，而是提供一个函数，由这个函数计算的值作为属性值

实例：

Jquery代码：

$（"img"）.attr（"src",function（）{return$（"#text"）.attr（"src"）;}）;

结果：

显示test.jpg

5、removeAttr（name）

从每一个匹配的元素中删除一个属性

实例：

Jquery代码：

$（"img"）.removeAttr（"src"）;

结果：

图片不能显示

css类

1、addClass（class）

2、addClass（function（index,class））

3、removeClass（[class]）

4、removeClass（function（index,class））

5、toggleClass（class）

6、toggleClass（class,switch）

7、toggleClass（function（index,class）,[switch]）

HTML代码

1、html（）

得到匹配元素的html内容

实例：

aaaaaaa

Jquer

• 登录
• 首页
• 资源分类
• 升级会员
• 通知公告
• 帮助中心