jquery 选择器

最新推荐文章于 2024-09-05 16:56:18 发布

keliteWang

最新推荐文章于 2024-09-05 16:56:18 发布

阅读量862

点赞数

分类专栏： web前台文章标签： jquery javascript class div function xhtml

本文链接：https://blog.csdn.net/keliteWang/article/details/6083131

版权

web前台专栏收录该内容

24 篇文章 0 订阅

订阅专栏

jquery使用和CSS类似的选择器,jquery必须在获得元素后才能生效。使用jquery选择器不用考虑浏览器的兼容性问题。

一、jquery选择器的优势

1、简洁

Write less，do more！javascript中的getElementById()可以通过$("#id")来代替以选中标签。getElementByTagName()可以通过$("tagName")代替等等。

2、支持CSS1-CSS3的选择器

3、完善的处理机制-可以避免一些错误。

例如：<div>example</div> <mce:script type="text/javascript"></mce:script> //上例代码在运行时会产生错误，因为没有id为nav的标签，为了不保错的 //处理办法如下： <mce:script type = "text/javascript"></mce:script> //jquery的写法： $("#nav").css("color","red"); //虽没有进行检查，在没有nav标签的情况下不会报错 //但，如果需要检查nav的存在与否，jquery中应为： <mce:script type = "text/javascript"></mce:script> //不能为if($("#nav"))的原因是，$("#nav")获取的永远是一个jquery对象，不论它存在或不存在

二、jquery选择器

1、传统javascript的例子

a.为页面中多个<p>对象添加一个onclick事件

b,使用javascript让表格每行变换颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>颜色交替的表格</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #alColorTable{ width:600px; text-shadow:#333333; }</style> <mce:script type="text/javascript"></mce:script> </head> <body> <table id="alColorTable"> <tbody> <tr bgcolor="#003399"> <td>Kelite</td><td>1985</td><td>male</td> </tr> <tr> <td>Kelite</td><td>1985</td><td>male</td> </tr> <tr> <td>Kelite</td><td>1985</td><td>male</td> </tr> <tr> <td>Kelite</td><td>1985</td><td>male</td> </tr> </tbody> </table> </body> </html>

2、使用jquery选择器

Jquery选择器分为基本选择器，层次选择器，过滤选择器和表单选择器

a,基本选择器

最简单的选择器，通过id，class以及标签名来获取DOM元素。应注意的是，在网页中相同的id元素应只有一个，而相同的class元素可以有多个。

选择器: .class 根据给定的class匹配一组元素返回一个class属性的集合 $(".class")

#id 根据给定的Id匹配一个元素返回一个元素 $("#id")

tag 根据给定的标签名匹配一组元素返回一组元素 $("tag")

* 选中页面中所有的标签返回一组元素 $("*")

selector1,selector2... 群组选择器返回一组元素 $("p,div.myClass")--匹配p标签和类为myClass的div

b、层次选择器

如果想要匹配元素的后代元素、子元素或者兄弟元素，则应考虑使用层次选择器

选择器：$("ancestor descendant"),匹配ancestor的descendant后代元素, 返回一个集合元素，$("div span")