jQuery系列之基本语法以及选择器(一)

最新推荐文章于 2024-03-11 09:35:50 发布

JM_杰

最新推荐文章于 2024-03-11 09:35:50 发布

阅读量545

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/dapyandxpy/article/details/73274314

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入jQuery的js文件,然后就可以使用jq的语法了-->
    <script src="jquery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">

        //在这个script标签中,书写我们自己的代码
        //jQuery封装了js代码,暴露出jq风格的函数
        // 我们使用jq的函数,本质上也是在使用js的代码



        //jq的基本语法
        //$(selector).actions()
        //selector:选择器,可以是标签选择器,类选择器,id选择器
        //actions():要对选择器找到的标签做什么事,一系列操作
        //当文档加载完毕后,再执行jq代码,
        //这样可以防止在body没加载完毕,去使用一个未被创建的元素

        //两种写法
        //(一)
        $(function () {
            $("p").click(function () {
                alert("hello js");
            });
        });


       //(二)
         //callback 回调
        $(document).ready(function(){
            //执行这个函数时,文档已经加载完毕
            // 在这里写代码

            //标签选择器
             //click监听p的点击事件
             //将函数传入click(这里),当p被点击时,就会执行这个函数
             $("p").click(function(){
                 //这个this能找到p 执行hide函数,将p隐藏
                $(this).hide();
             });

             //类选择器
             $(".hide").click(function(){
                $(this).hide();
             });
             //id选择器
             $("#showP").click(function(){
                 //当点击了id为showP的元素 就会执行这个函数,在这个函数中,
                 // 又写了一个选择器,找到p元素,将他显示
               $("p").show();
             });




        });


    </script>


</head>
<body>
<p>点我点我</p>
 <p class="hide">哈哈哈</p>
 <button id="showP">我们都有一个家名字叫中国</button>
</body>
</html>

JM_杰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery系列之基本语法以及选择器(一)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <script src="jquery-3.2.1.js" type="text/javascript"></script>
复制链接

扫一扫