JS之jQuery使用入门到吃饭

爱被打了一巴掌 2021-12-24 10:15 192阅读 0赞

### 1、什么是jQuery？ ###

jQuery是一个快速，小巧，功能丰富的JavaScript **库**。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。具有多功能性和可扩展性的结合。jQuery封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。就是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。

**jquery核心：write less,do more**

关于jQuery的相关资料：  
　　官网：http://jquery.com/  
　　官网API文档：http://api.jquery.com/  
　　汉化API文档：http://www.css88.com/jqapi-1.9/

###    2、为什么使用jQuery ###

知道jQuery肯定会写js代码，但是在工作中，老板相比于你的技术，更加注重你的效率，jQuery不仅能帮你提高效率，还能解决一些这样那样的问题：

*  window.onload 事件有事件覆盖的问题，因此只能写一个事件。
 *  代码容错性差。
 *  浏览器兼容性问题。
 *  书写很繁琐，代码量多。
 *  代码很乱，各个页面到处都是。
 *  动画效果很难实现。

### 3、jQ的特点 ###

*  链式编程：比如`.show()`和`.html()`可以连写成`.show().html()`。
 *  隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

### 4、引入jQ ###

首先，想用jQ库，你得下载一下吧？不下载就想用？哪来那种好事情。

先访问官网：[https://jquery.com/][https_jquery.com] 或者是访问 www.bootcdn.cn

在这里我打开了 www.bootcdn.cn，然后找到它。

![1644107-20190606202403604-1696397219.png][]

我们只需要看这两个内容就可。

生产环境的模块大小比开发环境的模块小很多，减少资源占用。

![1644107-20190606202551587-97229562.png][]

将链接复制，在一个新的网页上打开，就可以看到其中封装的全部内容。

![1644107-20190606202941004-1673962916.png][]

最后，在你的项目目录下创建一个js文件或文件夹，将网页上的内容全部复制进js文件，之后就可以在HTML页面通过如下代码将其引用并使用。

### 5、jq对象和js对象的互相转换 ###

#### jq转为js： ####

jq中封装了大量的js方法，方便了我们的调用，但是得到的是一个伪数组，有数组的长度属性，可以利用索引获得其中的内容。

<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="box" class="box" >小马过河</div>
        <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
        <script type="text/javascript">
            console.log($('.box'));
            console.log($('#box')[0]);
    　　　　 console.log($('.box')[0]);

</script> </body> </html> 
    
    $('.box') #jquery对象 
    $('#box')[0] #jquery对象转换为js对象，通过id选择器获取
    $('.box')[0] #jquery对象转换为js对象，通过类选择器获取

#### js转为jq： ####

jquery只是封装了一部分js的api，有些没有封装的时候就要转换为js对象，用js来写jquery没有封装的模块

<div id="box" class="box" >小马过河</div>
        <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
        <script type="text/javascript">
           // 通过 id 获取到 js 对象
            var  box=document.getElementById('box')
            console.log($(box));
            console.log(box);
        </script>
    
    $(box)  jquery对象
    box　　　　js对象

###  6、选择器 ###

它提供了一组方法，让我们更加方便的获取到页面中的元素。

####  基础选择器： ####

![1644107-20190608141325934-810209212.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div></div>
        <div id="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div></div>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
        <script type="text/javascript">
            //入口函数
            $(function(){
                //三种方式获取jquery对象
                var jqBox1 = $("#box");　　　　// id 选择器
                var jqBox2 = $(".box");　　　　// 类选择器
                var jqBox3 = $('div');　　　　 // 标签选择器
    
                //操作标签选择器
                jqBox3.css('width', '100');
                jqBox3.css('height', 100);
                jqBox3.css('background-color', 'red');
                jqBox3.css('margin-top', 10);
    
    
                //操作类选择器(隐式迭代，不用一个一个设置)
                jqBox2.css("background", "green");
                jqBox2.text('哈哈哈')
    
                //操作id选择器
                jqBox1.css("background", "yellow");
                       
            })
        </script>
        
    </body>
    </html>

#### 高级选择器： ####

#### ![1644107-20190608141732308-474912519.png][] ####

重点是 口袋选择器 和 子代选择器。

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-3.3.1.js"></script>
        <script>
            $(function () {
                //获取ul中的li设置为粉色
                //后代：儿孙重孙曾孙玄孙....
                var jqLi = $("ul li");
                jqLi.css("margin", 5);
                jqLi.css("background", "pink");
    
                //子代：亲儿子
                var jqOtherLi = $("ul>li");
                jqOtherLi.css("background", "red");
            });
        </script>
    </head>
    <body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <ol>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ol>
    </ul>
    </body>
    </html>

####  基本的过滤选择： ####

![1644107-20190608141823269-577614896.png][]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>基本过滤选择器</title>
        </head>
        <body>
            <ul>
                <li>哈哈哈哈，基本过滤选择器</li>
                <li>嘿嘿嘿</li>
                <li>天王盖地虎</li>
                <li>小鸡炖蘑菇</li>
                
            </ul>
        </body>
        <script src="jquery-3.3.1.js"></script>
        <script type="text/javascript">
            
            $(function(){
                //获取第一个 :first ,获取最后一个 :last
                
                //奇数
                $('li:odd').css('color','red');
                //偶数
                $('li:even').css('color','green');
                
                //选中索引值为1的元素 *
                $('li:eq(1)').css('font-size','30px');
                
                //大于索引值1
                $('li:gt(1)').css('font-size','50px');
                
                //小于索引值1
                $('li:lt(1)').css('font-size','12px');
            })
        </script>
    </html>

#### 属性选择器： ####

![1644107-20190608142231727-217730790.png][]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
             <div id="box">
                <h2 class="title">属性元素器</h2>
                
                <ul>
                    <li id="li1">分手应该体面</li>
                    <li class="what" id="li2">分手应该体面</li>
                    <li class="what">分手应该体面</li>
                    <li class="heihei">分手应该体面</li>
    
                </ul>
    
                <form action="" method="post">
    
                    <input name="username" type='text' value="1" checked="checked" />
                    <input name="username1111" type='text' value="1" />
                    <input name="username2222" type='text' value="1" />
                    <input name="username3333" type='text' value="1" />
                    <button class="btn-default">按钮1</button>
                    <button class="btn-info">按钮1</button>
                    <button class="btn-success">按钮1</button>
                    <button class="btn-danger">按钮1</button>
    
    
                </form>
            </div>
        </body>
        <script src="jquery-3.2.1.js"></script>
        <script type="text/javascript">
            
            $(function(){
                //标签名[属性名] 查找所有含有id属性的该标签名的元素
                $('li[id]').css('color','red');
                
                //匹配给定的属性是what值得元素
                $('li[class=what]').css('font-size','30px');
                //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
                $('li[class!=what]').css('font-size','50px');
                
                //匹配给定的属性是以某些值开始的元素
                $('input[name^=username]').css('background','gray');
                //匹配给定的属性是以某些值结尾的元素
                $('input[name$=222]').css('background','greenyellow');
                
                //匹配给定的属性是以包含某些值的元素
                $('button[class*=btn]').css('background','red')
            })
        </script>
    </html>

#### 筛选选择器：【对象调用方法】 ####

![1644107-20190608142322311-1538178113.png][]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
             <div id="box">
                <p class="p1">
                    <span>我是第一个span标签</span>
                    <span>我是第二个span标签</span>
                    <span>我是第三个span标签</span>
                </p>
                <button>按钮</button>
            </div>
            <ul>
                <li class="list">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </body>
        <script src="jquery-3.2.1.js"></script>
        <script type="text/javascript">
            
            //获取第n个元素 数值从0开始
            $('span').eq(1).css('color','#FF0000');
            
            //获取第一个元素 :first :last    点语法  ：get方法 和set方法
            $('span').last().css('color','greenyellow');
            $('span').first().css('color','greenyellow');
            
            //查找span标签的父元素（亲的）
            $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
            
            //选择所有的兄弟元素（不包括自己）
                      $('.list').siblings('li').css('color','red');
    
                      
                    //查找所有的后代元素
                       $('div').find('button').css('background','yellow');
    
    //不写参数代表获取所有子元素。
                       $('ul').children().css("background", "green");
                       $('ul').children("li").css("margin-top", 10);
        </script>
    </html>

###  7、简单的动画效果 ###

显示和隐藏：

// 方式一：通过show（时间，回调函数） 显示，hide（时间，回掉函数）  隐藏。
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                #box{
                    width: 200px;
                    height: 200px;
                    background-color: red;
                    display: none;
                }
            </style>
        </head>
        <body>
            <button id="btn">显示</button>
            <div id="box"></div>
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                $('#btn').click(function(){
                    if($(this).text() === '显示'){
                        $('#box').show(1000,function(){
                            $('#btn').text('隐藏');
                        });
    
                    }else{
    
                        $('#box').hide(1000,function(){
                            $('#btn').text('显示');
                        });
                    }
                })
            </script>
        </body>
    </html>
    ----------------------------------------------------
    //方式二：开关式显示隐藏动画 toggle
    //通过 toggle(2000)  进行切换操作
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                #box{
                    width: 200px;
                    height: 200px;
                    background-color: red;
                    display: none;
                }
            </style>
        </head>
        <body>
            <button id="btn">显示</button>
            <div id="box"></div>
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                $('#btn').click(function(){
                    $('#box').stop().toggle(2000);
                 })
            </script>
        </body>
    </html>

滑入滑出：

滑入动画效果：
        下拉动画
        $(selector).slideDown(speed, 回调函数);
    滑出动画效果：
        上拉动画
        $(selector).slideUp(speed, 回调函数);
    滑入滑出切换动画效果：
    $(selector).slideToggle(speed, 回调函数);
    
    ------------------------------------------------
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                width: 300px;
                height: 300px;
                display: none;
                background-color: green;
            }
        </style>
    
        <script src="jquery-3.3.1.js"></script>
        <script>
            $(function () {
                //点击按钮后产生动画
                $("button:eq(0)").click(function () {
    
                    //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);
                    $("div").slideDown(2000, function () {
                        alert("动画执行完毕！");
                    });
                })
    
                //滑出动画
                $("button:eq(1)").click(function () {
    
                    //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
                    $("div").slideUp(2000, function () {
                        alert("动画执行完毕！");
                    });
                })
    
                $("button:eq(2)").click(function () {
                    //滑入滑出切换（同样有四种用法）
                    $("div").slideToggle(1000);
                })
    
            })
        </script>
    </head>
    <body>
    <button>滑入</button>
    <button>滑出</button>
    <button>切换</button>
    <div></div>
    
    </body>
    </html>

淡入淡出：

淡入动画效果：
    $(selector).fadeIn(speed, callback);
    淡出动画效果：
    $(selector).fadeOut(1000);
    淡入淡出切换动画效果：
    $(selector).fadeToggle('fast', callback);
    -----------------------------------------------
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                width: 300px;
                height: 300px;
                display: none;
                /*透明度*/
                opacity: 0.5;
                background-color: red;
            }
        </style>
    
        <script src="jquery-3.3.1.js"></script>
        <script>
            $(function () {
                //点击按钮后产生动画
                $("button:eq(0)").click(function () {
    
    //                //淡入动画用法1:   fadeIn();   不加参数
                    $("div").fadeIn();
    
    //                //淡入动画用法2:   fadeIn(2000);   毫秒值
    //                $("div").fadeIn(2000);
    //                //通过控制  透明度和display
    
                    //淡入动画用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
    //                $("div").fadeIn("slow");
    //                $("div").fadeIn("fast");
    //                $("div").fadeIn("normal");
    
                    //淡入动画用法4:   fadeIn(毫秒值，回调函数[显示完毕执行什么]);
    //                $("div").fadeIn(5000,function () {
         
    //                    alert("动画执行完毕！");
    //                });
                })
    
                //滑出动画
                $("button:eq(1)").click(function () {
    //                //滑出动画用法1:   fadeOut();   不加参数
                   $("div").fadeOut();
    
    //                //滑出动画用法2:   fadeOut(2000);   毫秒值
    //                $("div").fadeOut(2000);  //通过这个方法实现的：display: none;
    //                //通过控制  透明度和display
    
                    //滑出动画用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
    //                $("div").fadeOut("slow");
    //                $("div").fadeOut("fast");
    //                $("div").fadeOut("normal");
    
                    //滑出动画用法1:   fadeOut(毫秒值，回调函数[显示完毕执行什么]);
    //                $("div").fadeOut(2000,function () {
         
    //                    alert("动画执行完毕！");
    //                });
                })
    
                $("button:eq(2)").click(function () {
                    //滑入滑出切换
                    //同样有四种用法
                    $("div").fadeToggle(1000);
                })
    
                $("button:eq(3)").click(function () {
                    //改透明度
                    //同样有四种用法
                    $("div").fadeTo(1000, 0.5, function () {
                        alert(1);
                    });
                })
            })
        </script>
    </head>
    <body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>改透明度为0.5</button>
    <div></div>
    
    </body>
    </html>

自定义动画：

语法：

$(selector).animate({params}, speed, callback);

作用：执行一组CSS属性的自定义动画。

*  第一个参数表示：要执行动画的CSS属性（必选）
 *  第二个参数表示：执行动画时长（可选）
 *  第三个参数表示：动画执行完后，立即执行的回调函数（可选）

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                position: absolute;
                left: 20px;
                top: 30px;
                width: 100px;
                height: 100px;
                background-color: green;
            }
        </style>
        <script src="jquery-3.3.1.js"></script>
        <script>
            jQuery(function () {
                $("button").click(function () {
                    var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                    var json2 = {
                        "width": 100,
                        "height": 100,
                        "left": 100,
                        "top": 100,
                        "border-radius": 100,
                        "background-color": "red"
                    };
    
                    //自定义动画
                    $("div").animate(json, 1000, function () {
                        $("div").animate(json2, 1000, function () {
                            alert("动画执行完毕！");
                        });
                    });
    
                })
            })
        </script>
    </head>
    <body>
    <button>自定义动画</button>
    <div></div>
    </body>
    </html>

### 8、jq 对属性的操作 ###

attr()  添加

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                            // $(function(){}) 此段代码中，将 jq 引入以及其代码放在了 head 中，默认情况
    下，代码从上到下进行执行，这样会存在问题，而这段代码就是解决这个问题，意思是 等待body中的文档全部加载完成后再
    加载这个函数中的内容
                $(function(){
                                    // attr 给 p 标签添加一个属性
                    $('p').attr('title','mjj');
                                    // attr 给 p 标签添加多个属性 
                    $('p').attr({'a':1,'b':2});
                                    // 获取 p 标签中的id值
                    console.log($('p').attr('id'));

</script> 
    　　</head> 
    　　<body> 
    　　　　<p id="box">mjj</p> 
    　　</body> 
    </html>

removeAttr()   删除

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                $(function(){
                                    // attr 给 p 标签添加一个属性
                    $('p').attr('title','mjj');
                                    // attr 给 p 标签添加多个属性 
                    $('p').attr({'a':1,'b':2});
                                   //  removeAttr 删除一个标签
                    $('p').removeAttr('title');
                                   //  removeAttr 删除多个标签
                    $('p').removeAttr('title id a');
                })
            </script>
        </head>
        <body>
            <p id="box">mjj</p></body>
    </html>

\-----------------------------------------------------------------------------------

prop 获取当前节点对象的属性，和attr相比，在使用 checked【默认】时，prop 能显示出当前的默认值，而attr不能：【prop 能看到所有的属性，attr 查看的属性是对象的本身属性时，有时查看有问题】

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                $(function(){
         
                    // 获取到的 chcked 的值为 chcked
                    console.log($('input[type=radio]').eq(0).attr('checked'));  
                    // 获取当前对象的所有属性
                    console.log($('input[type=radio]').eq(0));
                    // 通过 prop 查看checked 的属性值为 true 
                    console.log($('input[type=radio]').eq(0).prop('checked'));
                    console.log($('input[type=radio]').eq(0).prop('formAction'));
                    console.log($('input[type=radio]').eq(0).attr('type'));
                    $('input[type=radio]').eq(0).attr('a',1);
                    console.log($('input[type=radio]').eq(0));
                })
            </script>
        </head>
        <body>
            <input type="radio" name='sex' checked='checked'>男
            <input type="radio" name='sex'>女
        </body>
    </html>

###  9、文档的操作 ###

#### 增： ####

语法一：父元素.append(子元素)——————后置追加

子元素可以是标签，也可以是文本、js节点对象

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <div id="box">
                <h4>太白</h4>
            </div>
            <button id="btn">按钮</button>
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                $(function(){
                                    // 插入文本
                    $('#box').append('mjj');
                                    // 插入标签
                    $('#box').append('<h2>wusir</h2>');
                                    // 插入js 节点对象【需要先创建对象】
                    var oH3 = document.createElement('h3');
                    oH3.innerText = '女神';
                    $('#box').append(oH3);
                                    // 插入jq 对象，append 方法插入 jq 对象，相当于移动操作，会把jq对象移动到插入的地方，比如创建一个对象 <h4>太白</h4> 放在最前面，使用 append 会将其放在 女神下面
                    $('#box').append($('h4'));
    --------------------------------------------------------------------------
                    // 对追加的内容添加 css 样式时，需要再写一句：
                    $('h2').css('color','red');
    
                })
            </script>
        </body>
    </html>

语法二：子元素.appendTo(父元素) ——————后置追加

子元素可以是标签，也可以是文本、js节点对象

前置追加：父.prepend(子)

子元素可以是标签，也可以是文本、js节点对象

$('#box').prepend('<p>hello world</p>');

插入：

兄弟元素.after(要插入的兄弟元素)；
    要插入的兄弟元素.inserAfter(兄弟元素)；

$('ul').after('<h4>我是一个h3标题</h4>')
    $('<h5>我是一个h2标题</h5>').insertAfter('ul')

兄弟元素.before(要插入的兄弟元素)；
    要插入的兄弟元素.inserBefore(兄弟元素)；

$('h2').before('mjj2');
    $('<h3>女神</h3>').insertBefore('h2');

#### 替换： ####

$(要被替换的元素).replaceWith(新的元素);

$('h3').replaceWith('000000');

#### 删： ####

$(selector).remove();  删除节点后，事件也会删除（简言之，删除了整个标签）

// 点击button 按钮，则触发这个事件：
    $('#btn').click(function(){
                 // 点击事件触发，就有弹窗提示
                 alert(1);
                 // 移除这个按钮，且有返回值
                 $(this).remove();
                 // 获取到删除的内容的返回值
                 console.log($(this).remove());
    ---------------------------------------------
                // 验证事件也随之删除：将按钮删除后，再次插入，再点击时，不会有弹窗1 的出现
                $('#box').after($(this).remove());

$(selector).detach();   删除节点后，事件会保留

// 点击button 按钮，则触发这个事件：
    $('#btn').click(function(){
                 // 点击事件触发，就有弹窗提示
                 alert(1);
                 // 移除这个按钮，
                $(this).detach();
    ---------------------------------------------
                // 验证事件不删除：将按钮删除后，再次插入，再点击时，会有弹窗1 的出现
                $('#box').after($(this).detach());

$(selector).empty();  清空选中元素中的所有后代节点

// 点击button 按钮，则触发这个事件：
    $('#btn').click(function(){
                 // 点击事件触发，就有弹窗提示
                 alert(1);
                 // 清空这个标签中的所有内容
                $('#box').html(' ');
                 //  清空这个标签中的所有内容
                 $('#box').empty();

### 10、事件 ###

事件有传播性，从父级别传播到子级别

![1644107-20190608225028842-1669313482.png][]

#### 鼠标事件： ####

#####  鼠标移动： #####

.mouseover【移入】鼠标穿过父级元素和子元素都会调用方法

.mouseout【移出】

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                #box{
                    width: 100px;
                    height: 40px;
                    background-color: red;
                    position: relative;
                }
                #child{
                    width: 400px;
                    height: 100px;
                    background-color: #000;
                    position: absolute;
                    top: 40px;
                    display: none;
                }
            </style>
        </head>
        <body>
            <div id="box">
                <div id="child"></div>
            </div>
            <input type="text">
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        
            <script type="text/javascript">
                            $('#box').mouseover(function(){
                    console.log('移入进来了');
                    
                    $('#child').slideDown(1000);  // 显示子元素
                })
                $('#box').mouseout(function(){
                    console.log('移除了');
                    
                    $('#child').slideUp(1000);    // 隐藏子元素
                })
            </script>
        </body>
    </html>

.mouseenter  移入鼠标穿过父级元素才会调用方法

.mouseleave  移出

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                #box{
                    width: 100px;
                    height: 40px;
                    background-color: red;
                    position: relative;
                }
                #child{
                    width: 400px;
                    height: 100px;
                    background-color: #000;
                    position: absolute;
                    top: 40px;
                    display: none;
                }
            </style>
        </head>
        <body>
            <div id="box">
                <div id="child"></div>
            </div>
            <input type="text">
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        
            <script type="text/javascript">
                            $('#box').mouseenter(function(){
                    console.log('进来了');
                    
                    $('#child').stop().slideDown(1000);
                })
                $('#box').mouseleave(function(){
                    console.log('离开了');
                    
                    $('#child').stop().slideUp(1000);
                })
            </script>
        </body>
    </html>

jq 中的 hover：

$().hover(function()\{\},function()\{\})　　　　需要两个回掉函数，第一个是显示，第二个是隐藏

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                #box{
                    width: 100px;
                    height: 40px;
                    background-color: red;
                    position: relative;
                }
                #child{
                    width: 400px;
                    height: 100px;
                    background-color: #000;
                    position: absolute;
                    top: 40px;
                    display: none;
                }
            </style>
        </head>
        <body>
            <div id="box">
                <div id="child"></div>
            </div>
            <input type="text">
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        
            <script type="text/javascript">
                $('#box').hover(function(){
                    $('#child').stop().slideDown(1000);
                },function(){
                    $('#child').stop().slideUp(1000);
                })
            </script>
        </body>
    </html>

##### 鼠标点击： #####

聚焦和失焦：

$('input[type=text]').focus(function(){})　　　　聚焦

$('input[type=text]').blur(function(){})        失焦

//默认加载页面聚焦行为
    $('input[type=text]').focus();

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                #box{
                    width: 100px;
                    height: 40px;
                    background-color: red;
                    position: relative;
                }
                #child{
                    width: 400px;
                    height: 100px;
                    background-color: #000;
                    position: absolute;
                    top: 40px;
                    display: none;
                }
            </style>
        </head>
        <body>
            <div id="box">
                <div id="child"></div>
            </div>
            <input type="text">
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        
            <script type="text/javascript">
                $('input[type=text]').focus(function(){
                    //聚焦
                    console.log('聚焦了');
                })
                $('input[type=text]').blur(function(){
                    //聚焦
                    console.log('失去焦点了');
                })
            </script>
        </body>
    </html>

##### 键盘操作 #####

键盘按下和弹起：

在这里，介绍一个方法，输入的字符转为 ascii 码，这样能做判断，在按下回车时，提交 input 中的内容。

e.keyCode

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                #box{
                    width: 100px;
                    height: 40px;
                    background-color: red;
                    position: relative;
                }
                #child{
                    width: 400px;
                    height: 100px;
                    background-color: #000;
                    position: absolute;
                    top: 40px;
                    display: none;
                }
            </style>
        </head>
        <body>
            <div id="box">
                <div id="child"></div>
            </div>
            <input type="text">
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        
            <script type="text/javascript">
                $('input[type=text]').keydown(function(e){
                    console.log(e.keyCode);
                    switch (e.keyCode){
                        case 8:
                            $(this).val(' ')
                            break;
                        default:
                            break;
                    }    
                })
            </script>
        </body>
    </html>

#### 表单功能： ####

![1644107-20190608231346614-146895300.png][]

阻止当前 from 表单的默认行为：

<from action = "javascript:void(0);">
    ------------------------------------
    jq中有一个阻止方法，是
    $('from')(function(e){
        
          e.preventDefault();
    })

阻止a标签的默认跳转：

<a href="javascript:void(0);">百度游戏啊</a>

<a href="javascript:;">百度游戏啊</a>

### 11、ajax ###

[https://www.cnblogs.com/machangwei-8/p/10990290.html\#\_label0][https_www.cnblogs.com_machangwei-8_p_10990290.html_label0]

#### 什么是ajax： ####

AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）

简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

#### 示例： ####

参数如下：

**url:** 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

**success：**

要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

(1)由服务器返回，并根据dataType参数进行处理后的数据。

(2)描述状态的字符串。 function(data, textStatus)\{ //data可能是xmlDoc、jsonObj、html、text等等

**error:** 要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown)\{ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 \}

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <div id="box">
                
            </div>
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                $(function(){
                    // 获取首页的数据
                    $.ajax({
                        url:'https://api.apeland.cn/api/banner/',
                        methods:'get',
                        success:function(res){
                            console.log(res);
                            if(res.code === 0){
                                var cover = res.data[0].cover;
                                var name = res.data[0].name;
                                console.log(cover);
                                $('#box').append(`<img src=${cover} alt=${name}>`)
                            }
                        },
                        error:function(err){
                            console.log(err);
                        }
                    })
                })
            </script>
        </body>
    </html>

转载于:https://www.cnblogs.com/langcainiao/p/10986780.html

[https_jquery.com]: https://jquery.com/
[1644107-20190606202403604-1696397219.png]: /images/20211224/18934c248139433488bf16bd37a14661.png
[1644107-20190606202551587-97229562.png]: /images/20211224/c3f4b98ecfc346258562ae3b5c230bee.png
[1644107-20190606202941004-1673962916.png]: /images/20211224/587822d582e64a62a0070593669d5e38.png
[1644107-20190608141325934-810209212.png]: /images/20211224/037cc703ca1b4db99a3dd916403c2e6f.png
[1644107-20190608141732308-474912519.png]: /images/20211224/fcdd5a7363bf4376989e642204f14d06.png
[1644107-20190608141823269-577614896.png]: /images/20211224/58746a8a0d5d448383c0d9f4b192290a.png
[1644107-20190608142231727-217730790.png]: https://img2018.cnblogs.com/blog/1644107/201906/1644107-20190608142231727-217730790.png
[1644107-20190608142322311-1538178113.png]: https://img2018.cnblogs.com/blog/1644107/201906/1644107-20190608142322311-1538178113.png
[1644107-20190608225028842-1669313482.png]: https://img2018.cnblogs.com/blog/1644107/201906/1644107-20190608225028842-1669313482.png
[1644107-20190608231346614-146895300.png]: https://img2018.cnblogs.com/blog/1644107/201906/1644107-20190608231346614-146895300.png
[https_www.cnblogs.com_machangwei-8_p_10990290.html_label0]: https://www.cnblogs.com/machangwei-8/p/10990290.html#_label0