黑马程序员---jQuery入门 - 飞行的猪哼哼

公告

一：jQuery的引入方式和入口函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入口函数</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        //先将dou=cument转换成jQuery ，然后调用ready方法，方法里面是function函数。

        $(document).ready(function(){
            var $div = $('#div01');
            alert('jquery获取的div' + $div);
        })
        
        //最简洁的写法：
        //符号里面直接写function函数。
        $(function(){
            var $div = $('#div01');
            alert('jquery获取的div' + $div);
        })
    </script>

</head>
<body>
    <div id="div01">我是盒子一</div>
</body>
</html>

二：jQuery的选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
        // 1:标签选择器，选择所有的div标签
        $div = $("div");
        console.log($div.length);

        // 2:类选择器
        $oDiv = $(".div1");
        console.log($oDiv.length);

        // 3:id选择器
        $oDiv2 = $("#div2");
        console.log($oDiv2.length);

        // 4:层级选择器
        $Op = $(".div3 p");
        console.log($Op.length);

        // 5:属性选择器,特殊，都不用加双引号。
        $oText = $("input[name=first]");
        console.log($oText.length);

    });
    </script>
</head>
<body>
    <div>我是div盒子1</div>
    <div class="div1">我是div盒子2</div>
    <div id = "div2">我是div盒子3</div>
    <div class="div3">我是<p>div</p>盒子4</div>
    <div>我是div盒子5</div>

    <input type="text" name="first">
    <input type="rodio" name="secound">
    <input type="text" name="thrid">
</body>
</html>

三：选择集过滤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择集过滤</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
            var $div = $("div")

            console.log($div.length)
            //使用has选择第一个标签
            var $div1 = $div.has("#mytext")

            console.log($div1.length)
            //使用eq选择第二个标签,注意下标一是第二个
            var $div2 = $div.eq(1)
            $div2.css({'background-color':'red'})
        })
    </script>
    
</head>
<body>
    <div>
        这是第一个div
        <input type="text" id="mytext">
    </div>

    <div>
        这是第二个div
        <input type="text">
        <input type="button">
    </div>
</body>
</html>

四：选择集转移；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择集转移</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
            //选出目标的div
            var $div = $("#div01");

            //选择上一个元素
            $div.prev().css({'color':'blue'});
            //选择下一个元素
            $div.next().css({'color':'red'});

            //选择前面所有元素
            $div.prevAll().css({'color':"green"});

            //选择后面所有元素
            $div.nextAll().css({'color':'black'});

            //选择父类元素
            // $div.parent().css({'background-color':'red'});

            //选择同级元素
            $div.siblings().css({'color':'red'});

            //选择所有的孩子
            $div.children().css({'color': 'blue'})

            //选择子类元素的某一个
            $div.find('.sp02').css({'font-size':'50px'});

        })
    </script>
</head>
<body>

    <h2>这是第一个h2标签</h2>
    <p >这是第一个段落</p>
    <div id="div01">这是一个<span>div</span><span class="sp02">第二个span</span></div>
    <h2>这是第二个h2标签</h2>
    <p>这是第二个段落</p>

</body>
</html>

五：获取和设置元素内容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择集转移</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
            //选出目标的div
            var $div = $("#div01");

            //选择上一个元素
            $div.prev().css({'color':'blue'});
            //选择下一个元素
            $div.next().css({'color':'red'});

            //选择前面所有元素
            $div.prevAll().css({'color':"green"});

            //选择后面所有元素
            $div.nextAll().css({'color':'black'});

            //选择父类元素
            // $div.parent().css({'background-color':'red'});

            //选择同级元素
            $div.siblings().css({'color':'red'});

            //选择所有的孩子
            $div.children().css({'color': 'blue'})

            //选择子类元素的某一个
            $div.find('.sp02').css({'font-size':'50px'});

        })
    </script>
</head>
<body>

    <h2>这是第一个h2标签</h2>
    <p >这是第一个段落</p>
    <div id="div01">这是一个<span>div</span><span class="sp02">第二个span</span></div>
    <h2>这是第二个h2标签</h2>
    <p>这是第二个段落</p>

</body>
</html>

六：获取和设置元素属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取设置元素属性</title>
    <style>
        #link01{
            color:red;
            font-size: 30px;
        }
    </style>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){

            
            //1：获取除css之外的属性
            $link = $("#link01");
            console.log($link.prop("id"));
            $input = $("#input01");
            console.log($input.prop("type"));
            console.log($input.prop("id"));
            console.log($input.prop("value"));
            //2:获取value的特殊：
            console.log($input.val());

            //3:获取css属性
            console.log($link.css("color"));
            console.log($link.css("font-size"));

            //4:设置标签的属性
            $link.prop({"href": "http://www.baidu.com"});

            //5:设置标签的值
            $link.val("链接");
            console.log($link.prop("value"));

            //6：修改标签的元素
            $link.val("这是个链接");
            console.log($link.prop("value"));




        })
    </script>
</head>
<body>
    <a id="link01">这是一个链接</a>
    <input type="text" id="input01" value="111111">
</body>
</html>

七：事件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery的事件</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){

            //1：获取所有标签的对象
            var $list = $(".list");
            var $li = $(".list li");
            var $text = $("#text1");
            var $button = $("#button1");
            
            //2:给li设置点击事件，点击后变成红色,没有被点击的设置成黑色。
            //注意siblings是个函数，必须写括号。

            $li.click(function(){
                $(this).css({"color":"red"});
                $(this).siblings().css({"color":"black"});
            });


            //3：让text获取焦点时是蓝色，失去焦点时是红色。
            $text.click(function(){
                $(this).css({"background":"blue"});
            });

            $text.blur(function(){
                $(this).css({"background":"red"});
            });
            //4:设置点击按钮，鼠标经过按钮变成黄色，鼠标离开变成白色
            $button.mouseup(function(){
                $(this).css({"color":"yellow"});
            })

            $button.mouseover(function(){
                $(this).css({"color":"white"});
            })

        });
    </script>
</head>

<body>
    <ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>

    <input type="text" id="text1">
    <input type="button" id="button1" value="点击">
</body>

</html>

八：事件冒泡：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取和设置元素属性</title>
    <style>
    </style>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
            //1:获取对象
            var $a = $("#link01");
            var $oInput = $("#input01");
            //2:获取属性
            console.log($a.prop("id"));
            console.log($oInput.prop("type"));
            console.log($oInput.prop("value"));
            //3：获取值的简写
            console.log($oInput.val());

            //4:重写属性/增加属性
            $a.prop({"href":"http://www.baidu.com","title":"这是去百度的网址"})
            console.log($a.prop("href"));
            $oInput.prop({"value":"2222222222"});
            console.log($oInput.prop("value"))
        });
    </script>
</head>
<body>
    <a id="link01">这是一个链接</a>
    <input type="text" id="input01" value="111111">
</body>
</html>

九：事件代理：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件代理</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <!-- 为啥要用事件代理技术？？ -->
    <!-- 事件代理技术：如果采用之前的选择list下所有li标签的形式，如果增加li的代码在点击事件后面 -->
    <!-- 那么新加入的将不会改变样式。 -->
    <!-- 事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),
    把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，
    提高性能；其次可以让新加入的子元素也可以拥有相同的操作。 -->

    
    <script>
        $(function(){
            $list = $("#list");
            $list.delegate("li","click",function(){
                $(this).css({"color":"red"});
                $(this).siblings().css({"color":"black"});
            })
        });
    </script>
</head>

<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

posted on 2020-08-12 21:02 飞行的猪哼哼阅读(23) 评论(0) 收藏举报

刷新页面返回顶部