jQuery-基本选择器

来源：互联网发布：win7 内存优化编辑：程序博客网时间：2024/06/15 16:09

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id，class和标签名等来查找DOM元素。在网页中，每个ID名称只能使用一次，class允许重复使用。

效果描述：一个简单的HTML示例，通过基本选择器来匹配刚才HTML代码中的<div>,<span>等元素并进行操作（改背景色）

代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>基本选择器</title>    <script src="../libs/jquery.js"></script>    <style type="text/css">        div,span,p {            width: 140px;            height: 140px;            margin: 5px;            background: #aaa;            border: #000 1px solid;            float: left;            font-size: 17px;            font-family: Verdana;        }        div.mini {            width: 55px;            height: 55px;            background-color: #aaaaaa;            font-size: 12px;        }        div.hide{            display: none;        }    </style></head><body><div class="one" id="one">    id is one,class also is one    <div class="mini">class name is mini</div></div><div class="one" id="two" title="test">    id is two, class is one, title is test    <div class="mini" title="other">class is mini,title is other</div>    <div class="mini" title="test">class is mini, title is test</div></div><div class="one">    <div class="mini">class is mini</div>    <div class="mini">class is mini</div>    <div class="mini">class is mini</div>    <div class="mini"></div></div><div class="one">    <div class="mini">class is mini</div>    <div class="mini">class is mini</div>    <div class="mini">class is mini</div>    <div class="mini" title="test">class is mini, title is test</div></div><div style="display: none" class="none">    style的display为“none”的div</div><div class="hide"> class is hide</div><div>    包含input的type为“hidden”的div    <input type="hidden" size="8"></div><span id="mover">正在执行动画的sapn元素</span><script>   /* $("#one")       //改变ID为one的元素的背景色            .css("background","#000099");    $(".mini")      //改变class为mini的所有元素的背景色            .css("background","#330000");    $("div")        //改变元素名是div的所有元素的背景色            .css("background","#666699");    $("*")            .css("background","#bbffaa");*/    $("span,#two")      //改变所有的span元素的ID为two的元素背景色            .css("background","#999966");</script></body></html>

阅读全文

0 0