首页 > 代码库 > JQuery选择器

JQuery选择器

2024-07-18 23:50:30   232人阅读

JQuery选择器顾名思义就是通过选择器选中相应的DOM元素执行需要的操作，JQuery选择器的强大之处还在于它支持连缀，也就是说一条语句可以连续使用多个选择器执行多次操作，这样保证了代码的简洁性，更提高了代码的使用效率。

1. 使用ID选中DOM元素

代码1

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src=http://www.mamicode.com/"jquery.js"></script>>2. 使用类选择多个DOM元素
代码2
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src=http://www.mamicode.com/"jquery.js"></script>>
显示结果如下图，只有含有class的div才会显示红色
3. 根据DOM元素类型选择元素
只需修改代码2中的部分代码为下面的代码即可
$("div").addClass("class1");

显示结果如下图，全部div元素的内容都显示红色

4. 根据层级选择元素
在div元素中包含有超链接a元素，默认的超链接元素是有下划线的，如下图
现在希望通过选择器定位到a元素然后将其下划线显示去掉
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src=http://www.mamicode.com/"jquery.js"></script>>经过这样处理后显示结果如下：
5. 根据位置选择DOM元素
经常会看到一些报表显示记录的时候奇偶行的底色是相间的，这样看起来让人很舒服，通过选择器就可以做到
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src=http://www.mamicode.com/"jquery.js"></script>>显示效果：


JQuery选择器


联系
我们