夜光带你走进Jquery（三）擅长的领域

最新推荐文章于 2020-10-19 10:40:34 发布

GeniusTeam-夜光

最新推荐文章于 2020-10-19 10:40:34 发布

阅读量129

点赞数

分类专栏： Genius-Jquery

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102667322

版权

Genius-Jquery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

夜光序言：

笑一笑凡事没什么大不了，用眼睛看世界

用心去感受生活，乐趣无处不在

正文：

网站包含许多页面

并且我们希望 jQuery 函数易于维护

那么请把我们的 jQuery 函数放到独立的 .js 文件中。

把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
    <script src="jquery-3.4.1.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $(".test").hide();
            });
        });
    </script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>

选取所有元素

$("*")

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
    <script src="jquery-3.4.1.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("*").hide();
            });
        });
    </script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>嗯唔~ 点我</button>
</body>

</html>

$(this)

选取当前 HTML 元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $(this).hide();
            });
        });
    </script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>

</body>
</html>

$("p.intro")

选取 class 为 intro 的 <p> 元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p.intro").hide();
            });
        });
    </script>
</head>
<body>

<h2 class="intro">这是一个标题</h2>
<p class="intro">这是一个段落，点击按钮隐藏。</p>
<p>这是另一个段落，点击按钮不会隐藏。</p>
<button>点我</button>

</body>
</html>

选取第一个 <p> 元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p:first").hide();
            });
        });
    </script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>

</body>
</html>

选取每个 <ul> 元素的第一个 <li> 元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("ul li:first").hide();
            });
        });
    </script>
</head>
<body>

<p>List 1:</p>
<ul>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Tea</li>
</ul>

<button>点我</button>

</body>
</html>

选取带有 href 属性的元素

选取偶数位置的 <tr> 元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("tr:even").css("background-color","yellow");
        });
    </script>
</head>
<body>

<h1>你好~~ 靓仔靓女，欢迎访问我的主页</h1>

<table border="1">
    <tr>
        <th>网站名</th>
        <th>网址</th>
    </tr>
    <tr>
        <td>Google</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>Baidu</td>
        <td>http://www.baidu.com</td>
    </tr>
    <tr>
        <td>csdn</td>
        <td>http://www.csdn.com</td>
    </tr>
    <tr>
        <td>淘宝</td>
        <td>http://www.taobao.com</td>
    </tr>
    <tr>
        <td>Facebook</td>
        <td>http://www.facebook.com</td>
    </tr>
</table>

</body>
</html>

选取奇数位置的 <tr> 元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("tr:odd").css("background-color","yellow");
        });
    </script>
</head>
<body>

<h1>你好~~ 靓仔靓女，欢迎访问我的主页</h1>

<table border="1">
    <tr>
        <th>网站名</th>
        <th>网址</th>
    </tr>
    <tr>
        <td>Google</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>Baidu</td>
        <td>http://www.baidu.com</td>
    </tr>
    <tr>
        <td>csdn</td>
        <td>http://www.csdn.com</td>
    </tr>
    <tr>
        <td>淘宝</td>
        <td>http://www.taobao.com</td>
    </tr>
    <tr>
        <td>Facebook</td>
        <td>http://www.facebook.com</td>
    </tr>
</table>

</body>
</html>