三,jQuery选择器和事件函数
发布在jQuery基础2014年4月17日view:4544
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

jQuery选择器

在前面的文章《jQuery基本语法》里提到了通过DOM中元素的id和class属性值去获取将要用来处理的对象。其实,jQ的选择器远远不止这样。

jQ选择DOM元素有多种方式。

1.元素选择

$("div") //选择DOM中所有 <div> 元素
$("p")//选择DOM中所有 <p> 元素
$("#id")//选择DOM中所有 id 为“id”的元素
$(".class")//选择DOM中所有 class 为“class”的元素

2.属性选择

$("[src]") //选择DOM中所有带有 src 属性的元素
$("[src='http']")// 选择DOM中所有带有 src 值等于 "http" 的元素
$("[src!='http']")// 选择DOM中所有带有 src 值不等于 "http" 的元素
$("[src$='.jpg']") //选择DOM中所有 src 值以 ".jpg" 结尾的元素

3.表单选择

$(":input")//选择DOM中所有 <input> 元素
$(":text")//选择DOM中所有单行文本框
$(":password")//选择DOM中所有单行密码框

以上3种是最基本选择,但是在实际问题中,DOM的节点十分庞杂,所以jQ的选择器还提供了其它的方法。

$("div#id")//选择DOM中所有 id 为“id”的 <div> 元素
$("p.class")//选择DOM中所有 class 为“class”的 <p> 元素
$("div,p.class")//选择DOM中所有 <div> 元素和 class 为“class”的 <p> 元素(注意中间逗号)
$("div p.class")// 选择DOM中所有 <div> 元素下的 class 为“class”的 <p> 元素(注意中间空格号)
$("div>p.class")// 选择DOM中所有 <div> 元素下class 为“class”的 <p>子元素(被选择的<p>只能是<div>的子元素)

像这样的方法有很多,也很方便!可参考手册


jQuery 事件函数

jQ事件函数是jQ对象处理函数的一种,只不过它不是一载入就开始执行,而是当HTML中发生某些事件时将它激发,使它执行。和js的事件监听差不多。

以click()这个函数为例

DOM为:

<div id="example">点击这儿!</div>

jQ代码:

$("div#example").click(function(){
alert("你果然点击了,哈哈!");
});

结果:弹出窗口“你果然点击了,哈哈!”

*其中function是在click事件中绑定的处理函数

jQ中有一个很重要的事件函数:$(document).ready(function);

可能你在很多场合看到过这个函数,我可以告诉你,只要你看过用jQuery写的文件,都会有它的身影。那它到底有什么用呢?

作用是:当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。

请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。

这个一定要理解!

评论
发表评论
6年前

搭车推荐一篇 10 Things I Learned From the jQuery Source http://www.paulirish.com/2010/10-things-i-learned-from-the-jquery-source/ 视频墙了,youku上有 http://v.youku.com/v_show/id_XMzgxNDUwMDAw.html

WRITTEN BY
wanisan
hello world!
TA的新浪微博
PUBLISHED IN
jQuery基础

欢迎各位大拿来写一些心得总结指导下初学者

我的收藏