Java相关课程系列笔记之十二jQuery学习笔记建议用WPS打开.docx

none;">hellojava

step2：

jQuery代码

functionf1（）{$（'div:

hidden'）.css（'display','block'）;//或$（'div:

hidden'）.show（'slow'）;

$（'div:

hidden'）.show（500）;//毫秒}

functionf2（）{$（'div:

visible'）.hide（800）;}

2.7属性过滤选择器

1）[attribute]：

有某个属性的元素。

例如：

$（'div[id]'）.css（'font-size','60px'）;//div中有id属性的元素，编号1变

2）[attribute=value]：

某个属性的值与指定的值相同的元素。

例如：

$（'div[id=d1]'）.css（'font-size','60px'）;//编号1变

3）[attribute!

=value]：

某个属性的值与指定的值不相同的元素。

例如：

$（'div[id!

=d1]'）.css（'font-size','60px'）;//编号2变

4）案例：

helljQuery

--1-->

--2-->

2.8子元素过滤选择器

1）:

nth-child（index/even/odd）：

对符合条件的每个节点的子节点作相同操作。

例如：

$（'ulli:

nth-child

（2）'）.css（'font-size','60px'）;//item2和item22一起变

2）案例：

• item1
• item2
• item3

• item11
• item22
• item33

◆注意事项：

v子元素过滤器中index从1开始。

v基本过滤器中eq的index从0开始，如上例中：

$（'ulli:

eq

（1）'）.css（'font-size','60px'）;则为item2变化。

2.9表单对象属性过滤选择器

1）:

enabled：

没有被禁用。

例如：

$（'#form1input:

enabled'）.attr（'disabled',true）;//设置属性，可见元素为不可见

2）:

disabled：

被禁用。

例如：

$（'#form1input:

disabled'）.css（'border','1pxdottedred'）;//设置不可见元素的样式

$（'#form1input:

disabled'）.attr（'disabled',false）;//设置属性，不可见元素为可见

3）:

checked：

单选框、多选框中被选中的选项。

例如：

alert（$（'#form2input:

checked'）.val（））;//把值输出，类似于value属性

4）:

selected：

下拉列表中被选中的选项。

例如：

alert（$（'#form3option:

selected'）.val（））;

5）案例：

username:

name:

爱好：

做饭

钓鱼

足球

北京

长沙

武汉

2.10表单选择器

1）:

input：

input元素。

2）:

text：

文本框。

3）:

pasword：

密码框。

4）:

radio：

单选。

5）:

checkbox：

多选。

6）:

submit：

提交按钮。

7）:

image：

图片。

8）:

reset：

重置按钮。

9）:

button：

普通按钮。

10）:

file：

文件。

11）:

hidden：

隐藏域。

3、

DOM操作

3.1查询

利用选择器找到要操作的节点之后，获得节点的值、属性值、文本以及html内容。

1）html（）：

html内容，如：

alert（$（'#d1'）.html（）），相当于innerHTML属性，下例中也会把span输出（输出标记中的所有内容），即hellojQuery。

2）text（）：

文本，如：

alert（$（'#d1'）.text（）），相当于innerText属性，由于有兼容性问题，所以没讲。

只输出文本内容hellojQuery（标记中的文本内容）。

3）val（）：

节点的值，如：

alert（$（'#username'）.val（）），结果为文本框中输入的值。

4）attr（）：

属性值，如：

alert（$（'#d1'）.attr（'id'）），结果为d1。

◆注意事项：

此外，这几个方法也可以用来修改节点的内容、值、文本内容、属性值。

如：

$（'#d1'）.html（'hellojava'）;$（'#username'）.val（'chang'）;

$（'#d1'）.attr（'style','color:

red;font-size:

50px;'）;

5）案例：

hellojQuery

username：

3.2创建

$（html）;//直接写html语句即可，如：

var$obj=$（'

3.3插入节点

1）append（）：

向每个匹配的元素内部最后追加内容（添加的元素作为最后一个孩子）

例如：

var$obj=$（'

2）prepend（）：

向每个匹配的元素内部最前添加内容（添加的元素作为第一个孩子）

例如：

var$obj=$（'

3）after（）：

向每个匹配的元素之后插入内容（在该元素之后添加兄弟节点）

例如：

$（'ul'）.after（'

hello

4）before（）：

向每个匹配的元素之前插入内容（在该元素之前添加兄弟节点）

例如：

$（'ul'）.before（'

hello

◆注意事项：

都可以简

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

Java 相关 课程 系列 笔记 十二 jQuery 学习 建议 WPS 打开

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。