黑马程序员---jQuery入门

忘是亡心i 2022-11-27 00:51 319阅读 0赞

一：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>
        <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>
        
        
        
        
    
        
        <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>