1.jQuery选择器和事件

最新推荐文章于 2023-04-23 17:34:04 发布

学习急先锋

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量305

点赞数 1

分类专栏： jquery系统学习

本文链接：https://blog.csdn.net/myvanguard/article/details/53574463

版权

jquery系统学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--1.说明jquery-3.1.1.js是用于测试和开发（未压缩，是可读的代码）-->
        <!--2.说明jQuery-3.1.1.min.js是用于实际的网站中，已被精简和压缩。-->
        <script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
        <!--3.替代方案-->
        <!--如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。-->
        <!--<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>-->
        <!--许多用户在访问其他站点时，已经从百度或微软加载过 jQuery。            
        所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。-->

        <script>
            //jquery选择器
            //1.元素选择器
            $(document).ready(function(){
                $("button").click(function(){
                    $("p").hide();
                });
            });
            //2.id选择器
            $(document).ready(function(){
                $("button").click(function(){
                    $("#test").hide();
                });
            });
            //3.class选择器
            $(document).ready(function(){
                $(".test").click(function(){
                    $(".test").hide();
                });
            });
            //4.选取所有的元素
            $("*")
            //5.选择当前正在单击的HTML元素
            $(this)
            //6.选取class为info的p元素
            $("p:info")
            //7.选取第一个p元素
            $("p:first")
            //8.选取第一个ul的第一个li元素
            $("ul li:first")
            //9.选取每一个ul元素的第一个li元素
            $("ul li:first-child")
            //10选取所有带href属性的元素
            $("[href]")
            //11.所有target属性等于_blank的a元素
            $("a[target='_blank']")
            //12.所有的target属性不等于_blank的a元素
            $("a[target!='_blank']")
            //13选取所有type等于button的input元素和button元素
            $(":button")
            //选取偶数位置的tr元素
            $("tr:even")
            //选取奇数位置的tr元素
            $("tr:odd")
            //*****************************************************//

            //jquery事件
            //鼠标事件:click,dbclick,mouseenter,mouseleave
            //键盘事件:keypress keydown keyup
            //表单事件:submit change focus blur 
            //文本或者窗口事件 load resize scroll unolad

            //jquery事件语法
            //1.先定义触发什么事件
            $("p").click(function(){
                //动作触发后执行的代码
                $(this).hide();
            });

            //常用的jquery事件方法
            //$(document).ready() 方法允许我们在文档加载以后执行函数

            //1.click() 单击时候触发
            $("p").click(function(){
                $(this).hide();
            });

            //2.dbclick 双击时候触发
            $("p").dbclick(function(){
                $(this).hide();
            });

            //3.mouseenter 鼠标指针穿过元素时候触发
            $("#p1").mouseenter(function(){
                alert('你的鼠标移到了id=p1的元素上!');
            });

            //4.mouseleave鼠标指针离开时候触发
            $("#p1").mouseleave(function(){
                alert('再见,你的鼠标离开了该段落');
            });

            //5.mousedown 鼠标移动到元素上面,并按下鼠标按键时候触发
            $("#p1").mousedown(function(){
                alert("鼠标在该段落上按下!")
            });

            //6.mouseup 在某个元素上面松开鼠标按钮时候触发
            $("#p1").mouseup(function(){
                alert("鼠标在该段落上面松开");
            });

            //7.hover模拟鼠标悬停事件
            $("#p1").hover(function(){
                function(){
                    alert("你进入了p1");
                },
                function(){
                    alert("你离开了p1")
                };
            });

            //8.focus 当元素获得焦点时候触发
            $("inoput").focus(function(){
                $(this).css("background-color","#cccccc");
            });

            //9.blur鼠标失去焦点时候发生
            $("input").blur(function(){
                $(this).css("background-color","#ffffff");
            });
        </script>

    </head>
    <body>
        <h2>1.元素选择器</h2>
        <p>这是一个段落</p>
        <p>这是另一个段落</p>
        <button>点我</button>

        <h2>2.id选择器</h2>
        <p>这是一个段落</p>
        <p id="test">这是另外一个段落</p>
        <button>点我</button>

        <h2 class="test">3.class选择器</h2>
        <p class="test">这是一个段落</p>
        <p>这是另外一个选择器</p>

        <p id="p1">这是一个段落</p>

        Name:<input type="text" name="fullname" />
        Email:<input type="text" name="email" />
    </body>
</html>

学习急先锋

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1.jQuery选择器和事件

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title>  <!--2.说明jQuery-3.1.1.min.js是用于实际的网站中，已被精简和压缩。--
复制链接

扫一扫

专栏目录