#external_links 用于检索 id 为 external_links 的元素。a 后的空格表示 jQuery 需要检索 external_links 元素中的所有 <a> 元素

最新推荐文章于 2023-12-21 18:50:10 发布

Hustudent20080101

最新推荐文章于 2023-12-21 18:50:10 发布

阅读量435

点赞数

分类专栏： jquery javascript

javascript 同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

jquery

21 篇文章 0 订阅

订阅专栏

            $(document).ready(function(){
                 $('#external_links a').click(
     function()
       {
        return confirm('You are going to visit: ' + this.href);
       }
     );
            });

</script>

</head>
<body>

<div id="external_links">
<a href="http://www.baidu.com">baidu</a><br>
<a href="www.google.com">google</a><br>
</div>

理解这一代码的工作原理可能会有一点复杂。首先，我们使用了 $() 函数 —— jQuery 中功能最强大的函数。通常，我们都是使用这个函数从文档中选择元素。在本例中，一个包含有一些层叠样式表（Cascading Style Sheet，CSS）语法的字符串被传递给函数，然后 jQuery 尽可能高效地把这些元素找出来。
如果您具备 CSS 选择器的基本知识，那么应该很熟悉这些语法。在清单 2 中，#external_links 用于检索 id 为 external_links 的元素。a 后的空格表示 jQuery 需要检索 external_links 元素中的所有 <a> 元素。用英语说起来非常绕口，甚至在 DOM 脚本中也是这样，但是在 CSS 中这再简单不过了

            $(document).ready(function(){
                 $('.external_links a').click(
     function()
       {
        return confirm('You are going to visit: ' + this.href);
       }
     );
            });

</script>

</head>
<body>

<div class="external_links">
<a href="http://www.baidu.com">baidu</a><br>
<a href="www.google.com">google</a><br>
</div>

            $(document).ready(function(){
                 $('.external_links').click(
     function()
       {
        return confirm('You are going to visit: ' + this.href);
       }
     );
            });

</script>

</head>
<body>

<div >
<a class="external_links" href="http://www.baidu.com">baidu</a><br>
<a class="external_links" href="www.google.com">google</a><br>
</div>