没有合适的资源?快使用搜索试试~ 我知道了~
jquery入门手册及API(打印经典)
需积分: 9 7 下载量 84 浏览量
2011-10-29
22:32:49
上传
评论
收藏 119KB DOC 举报
温馨提示
试读
16页
jquery入门手册及API(打印经典)jquery入门手册及API(打印经典)jquery入门手册及API(打印经典)
资源推荐
资源详情
资源评论
Jquery
<scriptlanguage="javascript"type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
alert("Helloworld!");
});
});
<script>
上边的效果是点击文档中所有 a 标签时将弹出对话框,
$("a") 是一个 jQuery 选择器,$本身表示一个 jQuery 类,所有$()是构造一个 jQuery 对
象,click()是这个对象的方法,同 理$(document)也是一个 jQuery 对象,ready(fn)是
$(document)的方法,表示当 document 全部下载完毕时执行函 数。
在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有 p 标
签(<p></p>)的元 素,$("#p")表示取 id 为"p"(<span id="p"></span>)的元素.
注意 get 和 eq 的区别,eq 返回的是 jQuery 对象,get 返回的是所匹配的 dom 对
象, 所有取$("p").eq(1)对象的内容用 jQuery 方法 html(),而取$("p").get(1)的
内容用 innerHTML
Jquery 选择器是最基本的操作、
1. 基本
我们知道 jquery 最常用的就是选择器了,我们看一下 jqueryAPI 中的 选择器—基本中
有 5 种情况 class ,id ,element, *,还有一个多选择器,这里我们想一下 css 样式的写法
css 样式也有几种情况:1.类样式 2.id 样式 3.标签样式,
1. 如果有一个 aa 的类 ,那么我们
定义 aa 的样式就要写成 .aa{}
2. 如果有一个 bb 的 id,那么我们
定义 bb 的样式就要写成 #bb{}
3. 如果有标签<div></div>,那么
我们定义的样式就写成 div{}
4. 如果我们要定义所有的标签样式,
那我们就写成 *{} (当然这样简
写不太好)
5. 如果我们要定义多个标签之类的
就用分号来分开 比如
.aa,#bb,div{} 就定义了 class
为 aa,id 为 bb,标签为 div 的
样式了。
我们看到上面 5 个如果 ,在和 jquery 的 5 个基本的选择器对比一下
1. 如果我们要选择一个 aa 的类
jQuery 对象就写成 $(“.aa”)
2. 如果我们要选择一个 bb 的 id 就
写成$(“#bb”)
3. 如果我们要选择 div 的标签就写
成$(“div”)
4. 如果我们要选择所有就写成 $
(“*”)
5. 如果我们要选择多个对象就写成
$ (“.aa,#bb,div”)
对比一下,发现基本的选择器完全是按在 css 的语法在操作,是不是很容易呢
2
层次
我们现在知道了上面 5 个选择器的写法之后,现在我们来考虑如果对层次做选择器,
先想一下什么是层次,其实说的就是 HTML 的 DOM 结构 一层一层的,或者说 XML 的结
构层次
那我们就打开 jquery 的 Api ,发现有 4 个关于层次的选择器。
归纳一下就是 a 空格 b,a>b ,a+b,a~b 当然我这里只是为了少打几个字而已,
比如有如下的一个结构
<div>
<div class="bb">
<span>1<span><span>2<span>
</div>
<span>3<span>
<div class=”cc” ></div>
<span>4<span>
</div>
1. 我们现在想选择 id 为 aa 节点下
所有的 span 节点 ,就用 $
(“#aa span”)
2. 我们现在想选择 id 为 aa 节点下
第一层的 span 就是 span 中文
本为 3,4 的两个,就用 $(“#aa
>span”)
3. 我们现在想得到跟在 class 为 bb
后的那个 span 就是 span 中文
本为 3 的那个,就用$
(“.bb+span”)
4. 现在我们想得到 class 为 bb 后所
有的 span 就用$(“.bb~span”)
总结一下: 用空格表示节点下的元素
用>来表示子节点,和空格不同的是它只作用在第一层
第三个第四个都是用来表示跟随节点,只不过不同的是用+号表示紧接着的用~表
示所有跟随的 我们是需要记住 (空格 > + ~ )四个符号就可以了
3
简单
我们知道了基本的选择器和层次的选择器,有时候我们选择出的是多个比如
<ul>
<li id=’aa’>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
我们想得到 ul li 的第一个(@rst) ,最后一个(last),基数行(odd),偶数行
(even)匹配第三个(eq(2)),匹配大于 2 行(gt(1)),匹配小于第三行
(lt(2)),这里说了 7 个那么我们要怎么来写这个选择器呢,比如匹配第一个$(“ul
li:@rst”) ,匹配第三个$(“ul li:eq(2)”) ,其他的就不写了
这里我们想一下 css 中 a 链接的几种样式的的写法 a:hover a:link ……是不是一样呢
好了 这里我们看了 7 种,在看看 api 还有 3 种是什么呢,
1 :not 去除所有与给定选择器匹配的元素 语法一样 $(“ul li:not(#aa)”) 意思是去掉在 ul
li 里面的含有 id 为 aa 的元素元素 我们用$(“ul li”)能够得到 4 个 li 用 $(“ul
li:not(#aa)”)就去掉了第一个 li 只得到了三个
2:header 只是用来选择 h1 h2 h3 ……这样的标题
3:animated 匹配执行动画的元素
还是总结一下,上面的这几个其实就是对已经选择出来的在一次的做筛选。建立在基础和
层次上面。
4 文本 可见性
继续往下看 api,文本中有 4 个函数,当然功能还是对已经选择出来的内容做再次的筛选
上面是对节点的筛选,现在我们要对内容筛选
1 <div><a>xxiu</a> </div>
2 <div>xxiu zhang </div>
3 <div>zhang </div>
4 <div></div>
5
1. 包含指定文本 $
("div:contains(xxiu)") 我们希
望我们所选择的 div 的文本中含
有 xxiu 这个字符串
2. 匹配空文本 $("div:empty") 第
四个 div 节点下什么都没有,就
匹配它了
3. 匹配含有某个节点的元素 匹配含
有 a 节点的 div $(“div:has(a)”)
4. 匹配不为空文本的和 2 刚好相反
$(“div:parent”) 就匹配了前三
个 div
总结一下 文本匹配主要是做了 文本(1)和节点匹配(3) ,和匹配无文本或节点(2)
匹配有文本节点(4),两句话:有没有文本或节点,有什么文本和节点
然后我们在看一下可见性,可见性很容易理解就两种情况 可见:hidden 选择可见节点
或不可见:visible 选择不可见节点,没什么好说的
5 属性选择器
我们先看看最基本的属性选择器
剩余15页未读,继续阅读
资源评论
qqzy168
- 粉丝: 6
- 资源: 39
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- mmqrcode1714153659780.png
- Screenshot_2024-04-27-06-08-58-486_com.baidu.xin.aiqicha.jpg
- 基于Javaweb+Tomcat+MySQL的大学生公寓管理系统+sql文件.zip
- 实训作业基于javaweb的订单管理系统源码+数据库+实训报告.zip
- 多机调度问题贪心算法基于最小堆和贪心算法求解多机调度问题.zip
- 基于同态加密技术的匿名电子投票系统源码.zip
- Pyqt5项目框架-PyQt项目开发实践
- 基于C通过MQTT的智能农业大棚管理系统(本科毕业设计)
- python+CNN的网络入侵检测算法源码.zip
- js 实现记住密码功能 js.cookie.min.js
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功