没有合适的资源?快使用搜索试试~ 我知道了~
首页jQuery入门教程:从零到精通
jQuery入门教程:从零到精通
需积分: 5 5 下载量 67 浏览量
更新于2024-07-23
收藏 2.04MB PDF 举报
"本系列文章是'jQuery入门自学教程',专为初学者设计,由作者子秋编撰,旨在引导读者逐步掌握jQuery的基础知识和应用。教程内容涵盖了从零开始学习jQuery的各个阶段,包括但不限于:(一)基础入门,介绍了jQuery的概念,以及如何在Visual Studio环境中配置和使用;(二)至(九)部分深入讲解选择器、元素操作、事件处理、Ajax应用、动画效果、工具函数等核心功能;(十)和(十一)则聚焦于jQuery UI的常用功能实战和表单验证与自动完成提示插件。 作者提到,在撰写过程中,他参考了多篇网络教程,并指出自己对jQuery的理解源于图灵出版社的经典著作《jQuery实战》。他强调了系统化和易理解的教学风格,不同于单纯的学习笔记,目标是帮助读者建立起坚实的基础。尽管作者因为研究jQuery而暂时搁置了另一系列关于ASP.NET MVC的文章,但他承诺会在完成jQuery教程后,如果时间允许,会继续MVC系列的更新。 在整个教程中,jQuery被定义为一款强大的JavaScript脚本库,它简化了DOM操作和事件处理,使得前端开发更加高效。通过一系列实例演示和详细解析,读者不仅能快速上手jQuery,还能从中获取实用的编程技巧和解决实际问题的方法。对于想要深入理解并掌握jQuery的开发者来说,这是一份不容错过的学习资源。"
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/7125695/bg10.jpg)
7.
7.
7.
7. 子元素过滤器 Child
Child
Child
Child Filters
Filters
Filters
Filters
8.
8.
8.
8. 表单选择器 Forms
Forms
Forms
Forms
Filter2][attributeFilterN]
Filter2][attributeFilterN]
Filter2][attributeFilterN]
Filter2][attributeFilterN]
同时满足多个条件时使
用。
name
属性是以
man
结尾的
:
$("input[id][name$='man']")
名称
说明
举例
:nth-
:nth-
:nth-
:nth-
child(index/even/odd/equation)
child(index/even/odd/equation)
child(index/even/odd/equation)
child(index/even/odd/equation)
匹配其父元素下的第 N
个子或奇偶元素
':eq(index)' 只匹配一
个元素, 而这个将为 每
一个父元素匹配子元
素。 :nth-child 从 1 开始
的,而 :eq() 是从 0 算起
的!
可以使用 :
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
在每个
ul
查找第
2
个
li:
$("ul li:nth-child(2)")
:first-child
:first-child
:first-child
:first-child
匹配第一个子元素
':first' 只匹配一个元
素, 而此选择符将为 每
个父元素匹配一个子
元素
在每个
ul
中查找第一个
li:
$("ul li:first-child")
:last-child
:last-child
:last-child
:last-child
匹配最后一个子元素
':last' 只匹配一个元素,
而此选择符将为每个
父元素匹配一个子元
素
在每个
ul
中查找最后一个
li:
$("ul li:last-child")
:only-child
:only-child
:only-child
:only-child
如果某个元素是父元
素中唯一的子元素, 那
将会被匹配
如果父元素中含有其
他元素, 那将不会被 匹
配。
在
ul
中查找是唯一子元素的
li:
$("ul li:only-child")
名称
说明
解释
:input
:input
:input
:input
匹配所有
input, textarea,
select
和
button
元素
查找所有的
input
元素
:
$(":input")
:text
:text
:text
:text
匹配所有的文本框
查找所有文本框
:
$(":text")
:password
:password
:password
:password
匹配所有密码框
查找所有密码框
:
$(":password")
:radio
:radio
:radio
:radio
匹配所有单选按钮
查找所有单选按钮
![](https://csdnimg.cn/release/download_crawler_static/7125695/bg11.jpg)
9.
9.
9.
9. 表单过滤器 Form
Form
Form
Form Filters
Filters
Filters
Filters
六 jQuery
jQuery
jQuery
jQuery 选择器实验室
jQuery 选择器实验室使用的是 "jQuery 实战 " 一书中的代码 , 感觉对于学习选择器很有帮助 .
我们的实验对象是一个拥有很多元素的页面 :
:checkbox
:checkbox
:checkbox
:checkbox
匹配所有复选框
查找所有复选框
:
$(":checkbox")
:submit
:submit
:submit
:submit
匹配所有提交按钮
查找所有提交按钮
:
$(":submit")
:image
:image
:image
:image
匹配所有图像域
匹配所有图像域
:
$(":image")
:reset
:reset
:reset
:reset
匹配所有重置按钮
查找所有重置按钮
:
$(":reset")
:button
:button
:button
:button
匹配所有按钮
查找所有按钮
:
$(":button")
:file
:file
:file
:file
匹配所有文件域
查找所有文件域
:
$(":file")
名称
说明
解释
:enabled
:enabled
:enabled
:enabled
匹配所有可用元素
查找所有可用的
input
元素
:
$("input:enabled")
:disabled
:disabled
:disabled
:disabled
匹配所有不可用元素
查找所有不可用的
input
元素
:
$("input:disabled")
:checked
:checked
:checked
:checked
匹配所有选中的被选中
元素
(
复选框、 单选框等
,
不包括
select
中的
option )
查找所有选中的复选框元素
:
$("input:checked")
:selected
:selected
:selected
:selected
匹配所有选中的
option
元素
查找所有选中的选项元素
:
$("select option:selected")
![](https://csdnimg.cn/release/download_crawler_static/7125695/bg13.jpg)
jQuery 官方 API: http://docs.jquery.com/
中文在线 API: http://jquery.org.cn/visual/cn/index.xml
中文 jQuery 手册下载
:
http://files.cnblogs.com/zhangziqiu/jquery_api.rar
八 .
.
.
. 总结
本章节讲解的 jQuery 依然属于基础支持 , 所以没有太多的应用实例 . 虽然基础但是很难一次 全
部记住 , jQuery 选择器可以说是最考验一个人 jQuery 功力的地方 . 下一章我们讲解如何操作
jQuery 包装集以及动态创建新元素 .
本章代码下载 :
http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy-2.rar
Tag 标签
:
jQuery , jQuery 教程
![](https://csdnimg.cn/release/download_crawler_static/7125695/bg14.jpg)
jQuery
jQuery
jQuery
jQuery (
(
(
( 三
三
三
三 )
)
)
) 管理
管理
管理
管理 jQuery
jQuery
jQuery
jQuery 包装集
包装集
包装集
包装集
一 .
.
.
. 摘要
在使用 jQuery 选择器获取到 jQuery 包装集后 , 我们需要对其进行操作 . 本章首先讲解如何动态
的创建元素 , 接着学习如何管理 jQuery 包装集 , 比如添加 , 删除 , 切片等 .
二 .
.
.
. 前言
本系列的 2,3 篇上面列举了太多的 API 相信大家看着眼晕 . 不过这些基础还必须要讲 , 基础要扎
实 . 其实对于这些列表大家可以跳过 , 等以后用到时再回头看或者查询官方的 API 说明 .
本章内容很少 , 主要讲解动态创建元素和操作 jQuery 包装集的各个函数 .
三 .
.
.
. 动态创建元素
1.
1.
1.
1. 错误的编程方法
我们经常使用 javascript 动态的创建元素 , 有很多程序员通过直接更改某一个容器的 HTML 内
容 . 比如 :
<! DOCTYPE html PUBLIC "-// W 3 C // DTD XHTML 1.0
Transitional // EN " " http :// www . w 3. org / TR / xhtml 1/ DTD / xhtml 1-
transitional . dtd ">
< html xmlns =" http :// www . w 3. org /1999/ xhtml ">
< head >
< title > 动态创建对象 </ title >
</ head >
< body >
< div id =" testDiv "> 测试图层 </ div >
< script type =" text / javascript ">
剩余200页未读,继续阅读
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/7b053f13df4a4193a0c351d11655d1d2_repolaris.jpg!1)
repolaris
- 粉丝: 0
- 资源: 18
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- AirKiss技术详解:无线传递信息与智能家居连接
- Hibernate主键生成策略详解
- 操作系统实验:位示图法管理磁盘空闲空间
- JSON详解:数据交换的主流格式
- Win7安装Ubuntu双系统详细指南
- FPGA内部结构与工作原理探索
- 信用评分模型解析:WOE、IV与ROC
- 使用LVS+Keepalived构建高可用负载均衡集群
- 微信小程序驱动餐饮与服装业创新转型:便捷管理与低成本优势
- 机器学习入门指南:从基础到进阶
- 解决Win7 IIS配置错误500.22与0x80070032
- SQL-DFS:优化HDFS小文件存储的解决方案
- Hadoop、Hbase、Spark环境部署与主机配置详解
- Kisso:加密会话Cookie实现的单点登录SSO
- OpenCV读取与拼接多幅图像教程
- QT实战:轻松生成与解析JSON数据
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)