zoukankan      html  css  js  c++  java
  • JQuery选择

    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="jquery.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#div1").addClass("class1");  // 使用ID选中DOM元素
            });
        </script>
        <style type="text/css">
            .class1
            {
                color:red;
            }
        </style>
    </head>
    <body>
        <div id="div1">Welcome to JQuery!</div>
    </body>
    </html>
    2. 使用类选择多个DOM元素

    代码2

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function () {
                $(".div_changecolor").addClass("class1"); // 使用类选择多个DOM元素
            });
        </script>
        <style type="text/css">
            .class1
            {
                color:red;
            }
        </style>
    </head>
    <body>
        <div id="div1" class="div_changecolor">Welcome to JQuery!</div>
        <div id="div2" class="div_changecolor">Welcome to JQuery!</div>
        <div id="div3" >Welcome to JQuery!</div>
    </body>
    </html>

    显示结果例如以下图,仅仅有含有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="jquery.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#div3 a").addClass("class2");  // 选择的是DOM元素ID为div3以下的全部a标签
            });
        </script>
        <style type="text/css">
            .class1
            {
                color:red;
            }
    
            .class2
            {
                text-decoration:none;
            }
        </style>
    </head>
    <body>
        <div id="div1" class="div_changecolor">Welcome to JQuery!</div>
        <div id="div2" class="div_changecolor">Welcome to JQuery!</div>
        <div id="div3" ><a href="#">Welcome to JQuery!</a></div>
    </body>
    </html>
    经过这样处理后显示结果例如以下:

    5. 依据位置选择DOM元素

    常常会看到一些报表显示记录的时候奇偶行的底色是相间的,这样看起来让人非常舒服。通过选择器就能够做到

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function () {
                $("tr:odd").css("background-color","#bbffff");
                $("td").addClass("class1");
            });
        </script>
        <style type="text/css">
            .class1
            {
                100px;text-align:center
            }
        </style>
     </head>
    <body>
        <table border="1">
            <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>
    显示效果:



  • 相关阅读:
    Tomcat控制台日志乱码
    springboot中使用poi读取Excel数据,导出数据
    Linux系统下ctrl+z挂起进程后怎么恢复
    JSONObject与String、实体类互相转换
    用xshell连接VMware中的Linux的方法步骤(2种)
    vm虚拟机的安装以及linux系统centos的装载
    mysql的安装
    IDEA中使用debug进行调试的简单介绍
    Springboot整合Mybatis
    java读取txt文件封装成对象批量插入数据库的实例
  • 原文地址:https://www.cnblogs.com/blfshiye/p/5034348.html
Copyright © 2011-2022 走看看