jQuery快速入门第二课

最新推荐文章于 2024-07-26 20:46:33 发布

oldhelps

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量98

点赞数 3

分类专栏： WEB前端文章标签： jquery javascript ecmascript

本文链接：https://blog.csdn.net/m0_70023466/article/details/125170100

版权

WEB前端专栏收录该内容

18 篇文章 2 订阅

订阅专栏

jQuery快速入门第二课

上节课，我们讲解了jQuery的下载以及ID、类、元素选择器，这次，我们继续学习。

2.1属性选择器

此功能在原生JavaScript中做不到。

在jQuery中需要：

$("tag[属性]")

例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="js/jquery-1.11.2.js"></script>
</head>
<body>
<a href="#">123</a>
<a name="aaa">ddd</a>
    <script>
    $(function(){    //相当于window.οnlοad=function（）{}
    $("a[href]").click(function(){
    $(this).hide()//隐藏
    });
    })
    </script>
</body>
</html>

运行以上代码，网页上会出现一个链接，点击它，它会消失，还有一个锚点，也是a标签，但点击它它不会消失。

2.2祖先后代选择器

此功能在原生JavaScript中做不到。
而在jQuery中，只需

$(祖先 后代)//中间有空格。

例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>jQuery</title>
   <script src="js/jquery-1.11.2.js"></script>
</head>
<body>
<p id="aaa">123</p>
   <script>
   $(function(){    //相当于window.οnlοad=function（）{}
   $("body p").click(function(){
   $("this").hide()//隐藏
   });
   })
   </script>
</body>
</html>