锋利的jQuery学习笔记-write less do more-基本选择器

最新推荐文章于 2021-09-24 20:13:54 发布

FightingITPanda

最新推荐文章于 2021-09-24 20:13:54 发布

阅读量205

点赞数

分类专栏： JavaScript 文章标签： jquery 基本选择器 id选择器 class选择器元素标签名选择器

本文链接：https://blog.csdn.net/FightingITPanda/article/details/80263262

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

传统javascript写法

1.给表格偶数行添加背景色

<table id = panda>
        <tbody>
            <tr><td> 第一行第一列</td><td>第一行第二列</td></tr>
            <tr><td> 第er行第一列</td><td>第er行第二列</td></tr>
            <tr><td> 第san行第一列</td><td>第san行第二列</td></tr>
            <tr><td> 第si行第一列</td><td>第si行第二列</td></tr>
            <tr><td> 第wu行第一列</td><td>第wu行第二列</td></tr>
            <tr><td> 第liu行第一列</td><td>第liu行第二列</td></tr>
        </tbody>
</table>
function panda(){
        var item = document.getElementById("panda");//根据id获取table
        var tbody = item.getElementsByTagName("tbody")[0];//获取表格第一个tbody元素
        var trs = tbody.getElementsByTagName("tr");//获取tbody下所有tr元素
        for(var i =0;i<=trs.length;i++){//循环行
            if(i%2==0){
                trs[i].style.backgroundColor = "darkgreen";//给偶数行添加背景色深绿色
            }
        }
    }

2.jQuery基本选择器

id选择器、class选择器、标签名称（元素）选择器。。

页面代码
<head>
        <script src = "jquery.js"></script>
        <script src = "test.js"></script>
        <style>
            span{
                width:140px;
                height:140px;
                margin:5px;
                background:orchid;
                border:#000 1px solid;
                float :left;
                font-size :17px;
                font-family :verdana;
            }
            div.min {
                width:55px;
                height:55px;
                background-color: #aaa;
                font-size:12px;
            }
            div.hide {
                display:none;
            }
            .one{
                width:140px;
                height:140px;
                margin:5px;
                background:greenyellow;
                border:royalblue 5px solid;
                float :left;
                font-size :17px;
                font-family :verdana;
            }
            .min{
                width:140px;
                height:140px;
                margin:5px;
                background:#aaa;
                border:#000 2px solid;
                float :left;
                font-size :17px;
                font-family :verdana;
            }
        </style>
    </head>
<body>

    <div class= one id = one >
        id为one、class为one的div
        <div class =min>class 为min的div</div>
    </div>
    <div class = one id = two title = test>
        id为two class为one title为test的div
        <div class = min title=other>class为min title为other的div</div>
        <div class = min title = test>class 为min title为test的div</div>
    </div>
    <div class =one >
        <div class = min>class 为min的div</div>
        <div class = min>class为min的div</div>
        <div class = min>class 为min的div</div>
        <div class = min></div>
    </div>
    <div class =one >
        <div class = min>class 为min的div</div>
        <div class = min>class为min的div</div>
        <div class = min>class 为min的div</div>
        <div class = min title=test> class为min title为test的div</div>
    </div>
    <div style = "display :none;" class = none>
        style的display为none的div
    </div>
    <div class = hide>class 为hide的div</div>
    <div>
        包含input的type为hideen的div<input type =hidden size=8/>

    </div>
    <span id = mover>正在执行动画的span元素</span>
    <button onclick="panda3()">点我 点我</button>

</body>

这里写图片描述

js代码 一个个尝试哦~
function panda3(){
        //$("#one").css("background","green");//id选择器-获取一个元素
        //$(".min").css("background","yellow");//类（class）选择器 获取一堆元素
        //$("div").css("background",'#AAAAAA');//元素选择器 获取所有div元素
        //$("*").css("background","antiquewhite");//匹配所有元素
        $("span,#two").css("background","aqua");//组合选择器，获取所有id为two和span 元素
    }