Juery1、基本选择器

来源:互联网 发布:未知usb设备 端口重置 编辑:程序博客网 时间:2024/05/21 11:01

1、基本选择器

   (1)、根据id匹配元素        id

   (2)、根据给定的类名匹配元素    class

    (3)、 根据给定的元素名称匹配元素       例如<p></p>

   (4)、*匹配所有的元素(通配符)  

    (5)、集合元素,将每个选择器匹配的元素合并后一起返回。

批量给元素绑定事件

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
    $(document).ready(function(){
        //第一步,找到所有的p元素,jquery中的事件名称没有on
        $("p").click(function(){alert('hello')});
    });
</script>
</head>
<body>
    <p>这是第一个p</p>
    <p>这是第二个p</p>
    <p>这是第三个p</p>
    <p>这是第四个p</p>
    <p>这是第五个p</p>
    <p>这是第六个p</p>
</body>

</html>

jquery实现表格各行换色

<html>
<head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#tab tr:even").css("background","blue");//根据id属性找到table下的tr的偶数行设置css样式背景颜色为:blue。
        });
    </script>
</head>
<body>
    <table id="tab">
        <tr><td>第一行</td><td>第一行</td></tr>
        <tr><td>第二行</td><td>第二行</td></tr>
        <tr><td>第三行</td><td>第三行</td></tr>
        <tr><td>第四行    </td><td>第四行    </td></tr>
        <tr><td>第五行</td><td>第五行</td></tr>
        <tr><td>第六行</td><td>第六行</td></tr>        
    </table>
</body>
    
</html>