Jquery基础教程（非常全面）

使用的一些疼处

让我们用一段代码来解释下使用的一些疼处：

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                padding: 0;
                margin: 0;
            }
            div{
                width: 100%;
                height: 200px;
                display: none;
                background-color: red;
                margin: 10px 0px 0px 0px;
            }
        </style>
    </head>
    <body>
        <button id=\"btn\">展示</button>
        <div></div>
        <div></div>
        <div></div>
    </body>
    <  type=\"text/ \">
        var btn = document.getElementById(\'btn\');
        console.log(btn)
        var divs = document.getElementsByTagName(\'div\');
        console.log(divs)
        
        window.  = function(){
            btn.  = function(){
                for (var i=0;i<divs.length;i++) {
                    divs[i].style.display = \'block\';
                    divs[i].innerHTML = \'div展示了\'
                }
            }
        }

    </ >
</html>

当我们点击按钮的时候盒子都出现了

在这段代码中，我们不免发现：

书写js繁琐代码量大仅仅1个动作就写了10多行代码
代码显的比较复杂尤其是在定义DOM元素的时候
动画的效果我们需要开启定时器，还要小心定时器的清楚操作还有各种操作和处理事件
浏览器的兼容性

但是jquery就解决了上面的问题,让我们来看下代码：

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                padding: 0;
                margin: 0;
            }
            div{
                width: 100%;
                height: 200px;
                display: none;
                background-color: red;
                margin: 10px 0px 0px 0px;
            }
        </style>
    </head>
    <body>
        <button id=\"btn\">展示</button>
        <div></div>
        <div></div>
        <div></div>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        /*var btn = document.getElementById(\'btn\');
        console.log(btn)
        var divs = document.getElementsByTagName(\'div\');
        console.log(divs)
        
        window.  = function(){
            btn.  = function(){
                for (var i=0;i<divs.length;i++) {
                    divs[i].style.display = \'block\';
                    divs[i].innerHTML = \'div展示了\'
                }
            }
        }*/
        
        //1.首先要在js前引入jquery,引入了之后我们就可以写jquery代码了
        $(function(){
            $(\'#btn\').click(function(){
                $(\'div\').css(\'display\',\'block\');
                $(\'div\').html(\'div展示了\')
            })
        })
        
    </ >
</html>

效果是和之前的效果是一样的。

jquery的引入

和jquery的区别

是一门编程语言，我们用它来编写客户端浏览器脚本
jquery是的一个库，包含多个可重用的函数，用来辅助我们简化的开发
jquery能做到的都能做到，而能做的事情，jquery不一定能做到

注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象。如果是构造函数，那么就使用new关键字来创建对象，如果是对象那么就直接调用它的属性和方法。

DOM文档加载的步骤

解析HTML结构
加载外部脚本和样式表文件 CSS
解析并执行脚本代码 windos. 外面的脚本
DOM树构建完毕
加载图片等外部文件
页面加载不同

从而，js和jq有三方面的不同:

执行时间不同

window. 必须要等待页面内包括图片的所有元素加载完毕后才能执行

$(document).ready()是DOM结构回值完毕后就执行，不必等到加载完毕

# js代码最后解析的原因：如果没有获取完DOM树的话，那么解析js脚本就会得到null
<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <  type=\"text/ \">
            window.  = function(){
                var box = document.getElementById(\'box\')
                console.log(box)
            }
        </ >
    </head>
    <body>
        <div id=\"box\">
            
        </div>
    </body>
</html>

编写个数不同

window. 不能同时编写多个，如果有多个windos. 方法，那么只会执行一个

$(document).ready()可以同时编写多个，并且都能得到执行

简化写法不同

windos. 没有简化写法

$(document).ready()可以简化成$(function(){})

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        //$(document)取到文本元素   然后交给后面的回调函数function(){}执行
        $(document).ready(function(){
            
        })
    </ >
</html>

jquery选择器的用法

jquery的基本选择器

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
        <ul>
            <li id=\"brother\" class=\"item\">泰然城1</li>
            <li >泰然城2</li>
            <li class=\"item\">泰然城3</li>
            <li>泰然城4</li>
            <li class=\"item\">泰然城5</li>
            <li>泰然城6</li>
            <li class=\"item\">泰然城7</li>
            <a href=\"#\">百度一下</a>
        </ul>
        <div id=\"duanzi\">
            <p>天王盖地虎</p>
            <p><h1>小鸡炖蘑菇</h1></p>
            <p>宝塔镇河妖</p>
            <p>蘑菇放辣椒</p>
        </div>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        //1.ID选择器  ：选中ID为brither的文本元素 并将元素修改成red
        $(function(){
            $(\'#brother\').css(\'color\',\'red\')
        })
        
        //2.标签选择器    选中标签为a的文本元素 并将该元素下划线取消 颜色修改为yello
        $(function(){
            $(\'a\').css({\'text-decoration\':\'none\',\'color\':\'yellow\'})
        })
        
        //3.类选择器   选中类为item的文本元素 并将字体修改为20px
        $(function(){
            $(\'.item\').css({\'font-size\':\'20px\'})
        })
        
        //4.通配符选择器*  选中所有文本元素 然后清空所有内容  这个不经常用
//      $(\'*\').html(\' \')
    </ >
</html>

jquery的层级选择器

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
        <ul>
            <li id=\"brother\" class=\"item\">泰然城1</li>
            <li >泰然城2</li>
            <li class=\"item\">泰然城3</li>
            <li>泰然城4</li>
            <li class=\"item\">泰然城5</li>
            <li>泰然城6</li>
            <li class=\"item\">泰然城7</li>
            <a href=\"#\">百度一下</a>
        </ul>
        <div id=\"duanzi\">
            <p>天王盖地虎</p>
            <p><h1>小鸡炖蘑菇</h1></p>
            <p>宝塔镇河妖</p>
            <p>蘑菇放辣椒</p>
        </div>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">

        //1.后代选择器  选中div的后代为p的文本元素  让颜色变成红色  注意：如果P标签里包含了其他元素，那么就不会生效
        $(function(){
            $(\'div p\').css(\'color\',\'red\')
        })
        
        
        //2.子代选择器  选中div的子代为p的文本元素 让其背景颜色变成#333     注意： p标签中包含了其他元素，那么就不会生效
        $(function(){
            $(\'div>p\').css(\'background\',\'#333\')
        })
        
        
        //3.毗邻选择器  选中以id为brother的邻居 li 然后将li标签的样式去掉
        $(function(){
            $(\'#brother+li\').css(\'list-style\',\'none\')
        })
        
        
        //4.兄弟选择器  选中自己的兄弟的同级标签 然后修改颜色为red   注意：不包括自己
        $(function(){
            $(\'#brother~li\').css(\'color\',\'red\')
        })
        
        //5.  :first    选中所有Li标签中的第一个li标签文本元素 然后修改文字大小为30px
        $(function(){
            $(\'li:first\').css(\'font-size\',\'30px\')
        })
        
        //6. :last   选中所有Li标签的最后一个Li标签文本元素 然后修改text属性
        $(function(){
            $(\'li:last\').html(\'修改了\')
        })
    </ >
</html>

jquery基本过滤选择器

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
        <ul>
            <li>哈哈哈，基本过滤选择器</li>
            <li>嘿嘿嘿</li>
            <li>天王盖地虎</li>
            <li>小鸡炖蘑菇</li>
        </ul>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        //1. ：first  获取第一个元素
        //2. :last   获取最后一个元素
        
        //3.odd()  选中所有为基数的元素 第一个元素为0
        $(function(){
            $(\'li:odd\').css(\'color\',\'red\')
        })
        
        //4.even()  选中所有为偶数的元素  第一个元素为0
        $(function(){
            $(\'li:even\').css(\'color\',\'green\')
        })
        
        
        //5.eq(index)  选中所有第二个li标签 修改文本大小   注意：第一个元素为0
        $(function(){
            $(\'li:eq(2)\').css(\'font-size\',\'20px\')
        })
        
        //6.gt(num)  选中给定大于num的标签   对其背景机型修改
        $(function(){
            $(\'li:gt(1)\').css(\'background\',\'#333\')
        })
        
        //7.lt(num)  选中给定小于num的表亲啊 对其文本大小进行修改
        $(function(){
            $(\'li:lt(1)\').css(\'font-size\',\'12px\')
        })
    </ >
</html>

jquery的属性选择器

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
    <div id=\"box\">
        <h2 class=\" \">属性元素器</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>
            <input name=\"username1111\" type=\'text\' value=\"1\"></input>
            <input name=\"username2222\" type=\'text\' value=\"1\"></input>
            <input name=\"username3333\" type=\'text\' value=\"1\"></input>
            <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>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        
        //1.标签名[属性名] 查找所有含有id属性的该标签名的元素
        $(function(){
            $(\'li[id]\').css(\'color\',\'red\')
        })
        
        //2.给定标签中的某个属性是否等于某个值 如果等于则将字体修改为20px
        $(function(){
            $(\'li[class=what]\').css(\'font-size\',\'20px\')
        })
        
        //3. 给定标签的某个属性不等于某个值的时候  将背景修改为#333
        $(function(){
            $(\'li[class!=what]\').css(\'background\',\'#333\')
        })
        
        //4. 给定标签的某个属性 以 xxx开头  修改背景颜色为绿色
        
        $(function(){
            $(\'input[name^=username]\').css(\'background\',\'green\')
        })
        
        //5.给定标签的某个属性 以xxx结尾  修改背景颜色
        $(function(){
            $(\'input[name$=name]\').css(\'background\',\'#333\')
        })
        
        //6. 给定标签 如果某个属性的值中包含xxx   那么就将背景颜色修改
        $(function(){
            $(\"button[class*=\'btn\']\").css(\'background\',\'#0000FF\')
        })
        
    </ >
</html>

jquery的筛选选择器

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </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>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        
        //1.将所有span标签的中的 第1个标签修改文字大小
        $(function(){
            $(\'span\').eq(0).css(\'font-size\',\'30px\')
        })
        
        //2.first()获取第一个元素
        //3.last()获取最后一个元素
        
        //4. 将span标签的父级元素 .p1 的css样式表修改为：
        $(function(){
            $(\'span\').parent(\'.p1\').css({\'width\':\'300px\',\"height\":\'300px\',\'background\':\'yellow\'})
        })
        
        
        //5.选中类为list的标签的同级兄弟标签 修改CSS   注意：不包含自己
        $(function(){
            $(\'.list\').siblings(\'li\').css(\'color\',\'red\')
        })
        
        //6.find()  查找所有后代的元素  
        $(function(){
            $(\'div\').find(\'button\').css(\'background\',\'#333\')
        })
    </ >
</html>

的DOM对象和jquery对象的转换

DOM对象转换称为jquery对象

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button>隐藏</button>
        <div id=\"box\">
            
        </div>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        //DOM对象转换称为jquery对象
        var box = document.getElementById(\'box\');
        var btn = document.getElementsByTagName(\'button\')[0];
        
        $(btn).click(function(){
            $(box).css(\'display\',\'none\')
        })
        
        
        
        
    </ >
    
</html>

点击按钮，盒子就会隐藏

jquery对象转换成DOM对象

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button>隐藏</button>
        <div id=\"box\">
            
        </div>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">

        //jquery对象转换称为DOM对象
        //第一种方式
        console.log($(\'button\')[0])
        
        //第二种方式
        console.log($(\'button\').get(0))
        
        var isShow = true;
        $(\'button\').get(0).  = function(){
            if (isShow) {
                $(\'#box\').css(\'display\',\'none\')
                $(\'button\')[0].innerText = \'显示\';
                isShow = false;
            } else{
                $(\'#box\').css(\'display\',\'block\')
                $(\'button\')[0].innerText = \'隐藏\';
                isShow = true;
                
            }
        }
        
        
        
        
        
    </ >
    
</html>

效果就是，点击了隐藏的按钮后，div盒子变没了，按钮上的字变成了显示，反之亦然。

jquery效果

jquery显示和隐藏效果

show

概念:显示隐藏的匹配元素语法：show(speed,callback) 参数：

speed：三种预定速度之一的字符串(\'slow\',\'normal\',\'fast\')或表示动画时长的毫秒值（如：1000毫秒==1秒）
callback:在动画完成时执行的函数，每个元素执行一次

hide

hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。

可以通过show（）和hide（）方法，来动态控制元素的显示隐藏

toggle

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

# 使用hide和show方法实现的
<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                
            }
            div{
                height: 200px;
                width: 200px;
                border: 1px solid black;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button>点我隐藏</button>
        <div id=\"box\">
            
        </div>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        var isShow = true;
        $(function(){
            $(\'button\').click(function(){
                if (isShow) {
                    $(\'#box\').hide(\'normal\',function(){
                        $(\'button\').html(\'点我开启\')
                        isShow = false
                    })
                } else{
                    $(\'#box\').show(\'normal\',function(){
                        $(\'button\').html(\'点我隐藏\')
                        isShow = true
                    })
                }
            })
        })
        
    </ >
</html>

# 使用toggle方法实现
<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                
            }
            div{
                height: 200px;
                width: 200px;
                border: 1px solid black;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button>点我隐藏</button>
        <div id=\"box\">
            
        </div>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        $(function(){
            $(\'button\').click(function(){
                $(\'#box\').toggle(3000,function(){
                    alert(\'成功\')
                })
            })
        })
    </ >
</html>

使用toggle有淡入淡出的效果

jquery效果2-slide

slideDown

概念：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数

用法和参数跟上面类似

slideUp

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

用法和参数跟上面类似

slideToggle

概念:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

跟toggle用法类似

# 使用slideUp 和 slideDown 实现的隐藏和开启

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            div{
                width: 200px;
                height: 200px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id=\"box\">
            
        </div>
        <button id=\"btn\">点我隐藏</button>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        $(function(){
            var isShow = true;
            $(\'#btn\').click(function(){
                if (isShow) {
                    $(\'#box\').slideUp(\'3000\')
                    $(\'#btn\').html(\'点我开启\')
                    isShow = false
                } else{
                    $(\'#box\').slideDown(\'3000\')
                    $(\'#btn\').html(\'点我隐藏\')
                    isShow = true
                }
            })
        })
    </ >
</html>

# 使用slideToggle实现

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        
        < ></ >
        <style type=\"text/css\">
            div{
                width: 200px;
                height: 200px;
                background-color: red;
            }   
        </style>
    </head>
    <body>
        <div id=\"box\">
            
        </div>
        <button id=\"btn\">点我</button>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        $(function(){
            $(\'#btn\').click(function(){
                $(\'#box\').slideToggle(\'3000\')
            })
        })
    </ >
</html>

jquery效果3 淡入淡出

fadeIn

概念：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化

fadeOut

概念：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeTo

概念：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeToggle

概念：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

实现淡入淡出的效果就是使用此方法

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            div{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id=\"box\"></div>
        <button id=\"btn\">淡出</button>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        
        
        //第一种方法
        /*$(function(){
            var isShow = true;
            $(\'#btn\').click(function(){
                if (isShow) {
                    $(\'#box\').fadeOut(\'3000\')
                    $(\'#btn\').html(\'淡入\')
                    isShow = false
                } else{
                    $(\'#box\').fadeIn(\'3000\')
                    $(\'#btn\').html(\'淡出\')
                    isShow = true
                }

            })
        })*/
        
        //第二种方法
        $(function(){
            $(\'#btn\').click(function(){
                $(\'#box\').fadeToggle(\'3000\')
            })
        })
        
    </ >
</html>

jquery的动画效果

animate

概念：用于创建自定义动画的函数

语法：animate(params,[speed],[fn])

参数：

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每个元素执行一次。

stop

概念：停止所有在指定元素上正在运行的动画

语法：stop([clearQueue],[jumpToEnd])

参数：

clearQueue:如果设置成true，则清空队列。可以立即结束动画。如果不加true，那么只停止当前元素的动画，不会影响到当前元素的下一个动画

gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等

delay

概念：用来做延迟的操作

语法：delay(1000)，一秒之后做后面的操作

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <button id=\"btn\">点我</button>
        <button id=\"stop\">停止</button>
        <div id=\"box\">
            
        </div>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        
        //当点击按钮后直接进行操作
        /*$(function(){
            $(\'#btn\').click(function(){
                $(\'#box\').animate({
                    width:\'200px\',
                    height:\'300px\'
                })
            })
        })*/
        
        //当点击时按照我们给定的路线走
        /*$(function(){
            $(\'#btn\').click(function(){
                $(\'#box\').animate({
                    left:\"200px\",
                    top:\"300px\"
                },2000).animate({
                    top:\'100px\'
                })
            })
        })*/
        
        //同时我们还可以让运动一次后 等待几秒再运行  deady()
        /*$(function(){
            $(\'#btn\').click(function(){
                $(\'#box\').animate({
                    left:\'200px\',
                    top:\'300px\'
                },1000).delay(1000).animate({
                    top:\'100px\'
                })
            })
        })*/
        
        $(function(){
            $(\'#btn\').click(function(){
                $(\'#box\').animate({
                    top:\'200px\',
                    left:\'200px\'
                },2000).delay(2000).animate({
                    top:\'300px\'
                })
            })
            $(\'#stop\').click(function(){
                $(\'#box\').stop();
            })
            
            $(\'#stop\').click(function(){
                $(\'#box\').stop(true);
            })
        })
    </ >
</html>

jquery右下角弹出广告

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                width: 300px;height: 200px;
                position: absolute;
                bottom: 0;
                right: 0;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id=\"box\">
            <img src=\'../02.jpg\'/>
        </div>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        $(function(){
            $(\'#box\').slideDown(1000).slideUp(\'fast\').fadeIn(1000).click(function(){
                $(\'#box\').fadeOut(2000)
            })
        })
    </ >
</html>

jquery的属性操作

jquery有自己的属性和方法，我们先研究一下jquery的属性操作

jquery的属性操作模块分为四个部分：

html属性操作
DOM属性操作
类样式操作
值操作

HTML属性操作和DOM属性操作

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
        <div id=\"box\">
            <p>泰然城</p>
        </div>
        <button>获取</button>
        
        <ul>
            <li class=\"tairan1\">泰然城1</li>
            <li class=\"tairan2\">泰然城2</li>
            <li class=\"tairan3\">泰然城3</li>
            <li class=\"tairan4\">泰然城4</li>
        </ul>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        //1.获取div盒子的ID jquery属性    html属性 attr() 如果有一个参数表示获取属性值   有两个参数代表设置值
        $(function(){
            $(\'button\').click(function(){
                $(\'#box\').text($(\'#box\').attr(\'id\'))
                
                //设置一个属性
                $(\'#box\').attr(\'class\',\'foo\')
                
                //设置多个属性 需要用到对象存储的方法 
                $(\'#box\').attr({\'class2\':\'foo\',\'name\':\'xiaoyafei\'})
                
                
                //2.removeAttr() 删除一个属性
                $(\'#box\').removeAttr(\'class\')
                
                //删除多个属性 中间加空格
                $(\'#box\').removeAttr(\'class2 name\')
            })
        })
        
        //2.jquery DOM属性
        $(function(){
            //1.获取匹配元素数组中的第一个元素的属性值
            console.log($(\'li\').prop(\'class\'))
            
            //给DOM对象设置属性
            $(\'li\').eq(0).prop({\'name\':\'app\',\'name2\':\'app2\'})
            console.log($(\'li\').eq(0))
            
            //移除由prop方法设置的属性
            $(\'li\').removeProp(\'name\')
            $(\'li\').removeProp(\'name2\')
            
        })
        
    </ >
</html>

class操作和值操作

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            p.active{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id=\"box\">
            <p>泰然城</p>
        </div>
        <button>获取</button>
        
        <ul>
            <li class=\"tairan\">泰然城1</li>
            <li class=\"tairan2\">泰然城2</li>
            <li class=\"tairan3\">泰然城3</li>
            <li class=\"tairan4\">泰然城4</li>
        </ul>
        
        <span id=\"span1\">路飞</span>
        <div id=\"box2\">
            哈哈
            <p>我是一个段落</p>
            <input type=\"text\" name=\"\" id=\"\" value=\"nihao\" />
            <button id=\"btn3\">GET</button>
        </div>
    </body>
        <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
        <  type=\"text/ \">
            $(function(){
                //3.class属性操作  首先我们在style里写上了类的样式
                //addClass()
                $(\'p\').addClass(\'active\')
                
                //removeClass()  删除掉属性
                $(\'p\').removeClass(\'active\')
                
                
                //4.值属性操作  html() text() val()
                //获取
                console.log($(\'input\').val())
                
                //设置
                $(\'input\').val(\'嘿嘿嘿你个大头鬼\')
                
                //监听事件
                $(\'input\').change(function(){
                    console.log($(this).val())
                })
                
            })
        </ >
</html>

jquery获取input的值操作

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <  charset=\"UTF-8\">
    < > </ >
</head>
<body>
    <form action=\"\">
        <input type=\"radio\" name=\"sex\"  value=\"112\" />男
        <input type=\"radio\" name=\"sex\"  value=\"11\" checked=\"\" />女
        <input type=\"radio\" name=\"sex\"  value=\"114\" />gay

        <input type=\"checkbox\" value=\"a\" checked=\"\"/>吃饭
        <input type=\"checkbox\" value=\"b\" checked=\"\"/>睡觉
        <input type=\"checkbox\" value=\"c\" checked=\"\"/>打豆豆

        <select name=\"timespan\" id=\"timespan\" class=\"Wdate\"   >  
            <option value=\"1\">8:00-8:30</option>  
            <option value=\"2\" selected=\"\">8:30-9:00</option>  
            <option value=\"3\">9:00-9:30</option>  
        </select>  
        <input type=\"text\" name=\"\" id=\"\" value=\"111\" />
    </form>
</body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">

        $(function(){
            //1.获取单选框被选中的value值
            console.log($(\'input[type=radio]:checked\').val())
            
            //2.复选框被选中的value获取到的第一个被选中的值
            console.log($(\'input[type=checkbox]:checked\').val())
            
            //3.获取下拉列表被选中的值
            console.log($(\'#timespan option:checked\').val())
            
            //4.设置单选框的值
            $(\'input[type=radio]:checked\').val(\'1100\')
            
            //5.设置复选框的值  这里需要使用select
            $(\'select\').val([\'3\']);
            
            //6.设置文本框的值
            $(\'input[type=text]\').val(\'123\')
            
        })
    </ >
</html>

jquery文档操作

插入操作

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
        <span>哈哈哈</span>
        <ul>
            
        </ul>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">

        $(function(){
            //1.append()   父元素添加一个新的子元素 按照从上到下的顺序添加
            $(\'ul\').append(\'<li>你在干嘛呢</li>\')
            $(\'ul\').append(\'<li>你在干嘛呢？</li>\')
            
            //2.appendTo()  子元素添加到父元素中  紧接着进行插入
            $(\'<li>我是哈哈哈</li>\').appendTo(\'ul\')
            $(\'<li>我是哈哈哈2</li>\').appendTo(\'ul\')
            
            //3.prepend()  添加一个子元素放在第一位
            $(\'ul\').prepend(\'这是一个prepend的方法\')
            //4.prependTo()  添加一个子元素放在最前面
            $(\'<li>添加一个子元素到最后一位</li>\').prependTo(\'ul\')
            
            //5.after()  在匹配的元素之后插入内容   兄弟关系
            $(\'ul\').after(\'<h2>我是一个耳机标题</h2>\')
            
            //insertAfter()  在匹配的元素后插入内容
            $(\'<h3>我是一个三级标题</h3>\').insertAfter(\'ul\')
            
            
            //6.before()  在匹配的元素之前插入内容
            $(\'ul\').before(\'<h1>我是一个一级标题</h1>\')
            $(\'ul\').before(\'<h1 style=\"color: red;\">我是一个一级标题</h1>\')
            
            
        })
    </ >
</html>

克隆操作

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
        <span>哈哈哈</span>
        <ul>
            
        </ul>
        <button>点我快点我</button>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">

        $(function(){
            //clone操作 当点击按钮时 再克隆一个新的按钮
            $(\'button\').click(function(){
//              $(this).clone().insertAfter(this);
                
                //如果cloen()的参数未true，那么  就将这个元素以及所有的事件处理进行克隆
                $(this).clone(true).insertAfter(this);
                
            })
        })
    </ >
</html>

替换操作

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
        <span>哈哈哈</span>
        <ul>
            
        </ul>
        <button>点击替换</button>
        
        <h4>我是一个四级标题</h4>
        <h4>我是一个四级标题</h4>
        <h4>我是一个四级标题</h4>
        <h4>我是一个四级标题</h4>
        <h5>我是一个五级标题</h5>
        <h5>我是一个五级标题</h5>
        <h5>我是一个五级标题</h5>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">

        $(function(){
            $(\'button\').click(function(){
                
                //replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素
                $(\'h5\').replaceWith(\'<a>我要去百度</a>\')
                
                //replaceAll() 用匹配的元素替换掉所有匹配到的元素
                $(\'<a>你好</a>\').replaceAll(\'h4\');
            })
        })
    </ >
</html>

删除操作

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
        <span>哈哈哈</span>
        <ul id=\"ul_1\">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul id=\"ul_2\">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <button>点击替换</button>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">

        $(function(){
            //1.删除一个节点 remove()
//          $(\'#ul_1\').remove();
            
//          2.删除节点后,事件会保留
            var val = $(\'#ul_2\').detach()
            $(\'#ul_1\').append($(val))
            //3.empty清空元素中的所有后代节点
            //例如 清空ul中的子元素 保留ul
            $(\'ul\').empty()
        })
    </ >
</html>

jquery的位置属性

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                position: relative;
                width: 200px;
                height: 200px;
                border: 1px solid red;
                padding: 10px 5px;
            }
            p{
                position: absolute;
                left: 30px;
                top: 30px;
            }
        </style>
    </head>
    <body>
        <div id=\"box\">
            <p>我是一个段落标签</p>
        </div>
        <button id=\"btn\">动画吧</button>
        <div id=\"\" style=\"width: 200px;height: 200px;margin: 100px auto;border: 1px solid deepskyblue\">
            
        </div>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        $(function(){
            //1.获取匹配元素相对于父元素的偏移量   也就是子元素相对于父元素的top和left值
            console.log($(\'p\').position().left)
            console.log($(\'p\').position().top)
            
            //2.offset 获取匹配元素在当前视口的相对偏移   也就是子元素到浏览器左上角的值
            console.log($(\'p\').offset().top)
            console.log($(\'p\').offset().left)
            
            //3.scrollTop scroolLeft  获取当前元素相对滚动条顶部的偏移   当浏览器的滚动条向下 或者向右移动时就会显示
            console.log($(document).scrollLeft())
            console.log($(document).scrollTop())
            
            //监听滚动条   当滑动滚动条会立马显示
            $(document).scroll(function(){
                console.log($(document).scrollLeft())
                console.log($(document).scrollTop())
            })
            
            
            //4.innerHeight  innerWeight  获取第一个匹配元素的内部区域高度和宽度  不包含margin 和 border
            console.log($(\'#box\').innerHeight())
            console.log($(\'#box\').innerWidth())
            
            //5.outerHeight outerWidth  获取第一个匹配元素的外部区域高度和宽度   包含margin 和 border
            console.log($(\'#box\').outerHeight())
            console.log($(\'#box\').outerWidth())
            
            //6.width height 获取匹配元素的宽度和高度   
            console.log($(\'p\').width())
            console.log($(\'p\').height())

        })
    </ >
</html>

jquery的筛选方法

前面学到了选择器的筛选方法，现在来看下jquery常用的筛选方法

children()方法和hasClass()方法

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            li.active{
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class=\"denger\">1</li>
            <li>2</li>
            <li class=\"denger\"><a href=\"\">3</a></li>
            <li>4</li>
            <a href=\"#\" id=\"anchor\">百度</a>
            <a href=\"#\" id=\"anchor1\">百度</a>
        </ul>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        $(function(){
            //1.当class是denger的  那么就让它的颜色变成红色
            $(\'ul\').children().each(function(index,ele){
                console.log(index)
                console.log(ele)
                
                var denger = $(this).hasClass(\'denger\');
                if (denger) {
                    $(this).css(\'color\',\'red\')
                } else{
                    $(this).css(\'font-size\',\'20px\')
                }
            })
        })
    </ >
</html>

parent() 获取当前元素的唯一父元素

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            li.active{
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class=\"denger\">1</li>
            <li>2</li>
            <li class=\"denger\"><a href=\"\" id=\"myA\">3</a></li>
            <li>4</li>
            <a href=\"#\" id=\"anchor\">百度</a>
            <a href=\"#\" id=\"anchor1\">百度</a>
        </ul>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        $(function(){
            //2.parent() 获取到匹配元素的父元素
            console.log($(\'#myA\').parent());
        })
    </ >
</html>

prev() 和 prevAll()

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            li.active{
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class=\"denger\">1</li>
            <li>2</li>
            <li class=\"denger\"><a href=\"\" id=\"myA\">3</a></li>
            <li>4</li>
            <a href=\"#\" id=\"anchor\">百度</a>
            <a href=\"#\" id=\"anchor1\">百度</a>
            <p>我是一个段落标签</p>
        </ul>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        $(function(){
            //3.prev()  获取当前匹配元素的前一个兄弟元素
            $(\'p\').last().prev().css(\'background-color\',\'red\')
            
            //4.prevAll()  获取当前匹配元素的所有兄弟元素
            $(\'p\').prevAll().css(\'font-size\',\'40px\')
        })
    </ >
</html>

siblings() 获得匹配集合中每个元素的同胞

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            li.active{
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class=\"denger\">1</li>
            <li>2</li>
            <li class=\"denger\"><a href=\"\" id=\"myA\">3</a></li>
            <li>4</li>
            <a href=\"#\" id=\"anchor\">百度</a>
            <a href=\"#\" id=\"anchor1\">百度</a>
            <p>我是一个段落标签</p>
        </ul>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        $(function(){
            //5.siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
            console.log($(\'li\').siblings(\'li\'))
            
            $(\'li\').hover(function(){
                $(this).addClass(\'active\').siblings(\'li\').removeClass(\'active\')
            })
        })
    </ >
</html>

jquery案例

仿淘宝搜索栏

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100%;
            }
            div img{
                width: 100%;
            }
            #nav{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id=\"top\">
            <img src=\"../images/top.jpg\"/>
        </div>
        <div id=\"nav\">
            <img src=\"../images/nav.jpg\"/>
        </div>
        <div id=\"taobao\">
            <img src=\"../images/taobao1.png\"/>
        </div>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">

        $(function(){
            //1.获取top的height
            var h = $(\'#top\').height();
            console.log(h)
            
            //2.对滚动条进行监听 当滚动栏进行监听  当h小于scrollTP的时候 就让他展示出来
            $(document).scroll(function(){
                var scrollTp = $(document).scrollTop();
                if (h < scrollTp ) {
                    $(\'#nav\').css({display:\'block\',position:\'fixed\',top:0})
                } else{
                    $(\'#nav\').css({display:\'none\',position:\'static\',top:0})
                    
                }
            })
        })
    </ >
</html>

小米官网案例

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                padding: 0;
                margin: 0;
            }           
            ul{list-style: none;}
            .wrap{width: 980px;height: 612px;margin: 20px auto 0px;background: #f4f3f4;border: 1px solid gray;}
        
            ul li{float: left;margin-left: 10px;position: relative;overflow: hidden;width: 233px;height: 300px;}

        
            ul li p{    
                width: 233px;
                height: 100px;
                background: rgba(245,102,51,.7);
                position: absolute;
                bottom: -100px;
                text-align: center;
                color: white;
                line-height: 100px;
                
            }
        </style>
    </head>
    <body>
        <div class=\"wrap\">
            <ul>
                <li><a href=\"#\"><img src=\"../images/xiaomi_01.png\"/></a><p>百度一下，你就知道</p></li>
                <li><a href=\"#\"><img src=\"../images/xiaomi_02.png\"/></a><p>百度一下，你就知道</p></li>
                
                <li><a href=\"#\"><img src=\"../images/xiaomi_03.png\"/></a><p>百度一下，你就知道</p></li>
                <li><a href=\"#\"><img src=\"../images/xiaomi_04.png\"/></a><p>百度一下，你就知道</p></li>
                <li><a href=\"#\"><img src=\"../images/xiaomi_05.png\"/></a><p>百度一下，你就知道</p></li>
                <li><a href=\"#\"><img src=\"../images/xiaomi_07.png\"/></a><p>百度一下，你就知道</p></li>
                <li><a href=\"#\"><img src=\"../images/xiaomi_08.png\"/></a><p>百度一下，你就知道</p></li>
                <li><a href=\"#\"><img src=\"../images/xiaomi_09.png\"/></a><p>百度一下，你就知道</p></span></li>
            </ul>
        </div>
    </body>
    <  src=\"../jquery-3.2.1.js\" type=\"text/ \" charset=\"utf-8\"></ >
    <  type=\"text/ \">
        $(function(){
            //当鼠标滑过li标签的时候
            $(\'li\').hover(function(){
                $(this).children(\'p\').stop().animate({bottom:0},300)
            },function(){
                $(this).children(\'p\').stop().animate({bottom:-100},300)
            })
        })
    </ >
</html>

大致的效果就是这样，当鼠标经过时就从底部弹出东西：

焦点式轮播图

大致的结果就是点我点击下面的li标签时图片也会跟着动

jquery中的事件

事件的概念

HTML和交互是通过事件驱动来实现的，例如按钮点击事件，页面的滚动等等，可以向文档或者文档中添加事件侦听器来监听事件。想要知道这些事件是什么时候发生的，需要了解下什么是事件流。

事件流

事件流描述的是从页面中接收事件的顺序。

1.DOM事件流

DMO2级事件规定的事件流包括3个阶段

事件捕获阶段
处于目标阶段
事件冒泡阶段

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <  charset=\"UTF-8\">
    < >事件流</ >
    < >

    window.  = function(){

        var oBtn = document.getElementById(\'btn\');

        oBtn.addEventListener(\'click\',function(){
            console.log(\'btn处于事件捕获阶段\');
        }, true);
        oBtn.addEventListener(\'click\',function(){
            console.log(\'btn处于事件冒泡阶段\');
        }, false);

        document.addEventListener(\'click\',function(){
            console.log(\'document处于事件捕获阶段\');
        }, true);
        document.addEventListener(\'click\',function(){
            console.log(\'document处于事件冒泡阶段\');
        }, false);

        document.documentElement.addEventListener(\'click\',function(){
            console.log(\'html处于事件捕获阶段\');
        }, true);
        document.documentElement.addEventListener(\'click\',function(){
            console.log(\'html处于事件冒泡阶段\');
        }, false);

        document.body.addEventListener(\'click\',function(){
            console.log(\'body处于事件捕获阶段\');
        }, true);
        document.body.addEventListener(\'click\',function(){
            console.log(\'body处于事件冒泡阶段\');
        }, false);

    };

    </ >
</head>
<body>
    <a href=\" :;\" id=\"btn\">按钮</a>
</body>
</html>

点我们点击btn的时候，看看这个页面都输出了什么：

在解释输出结果为什么是这样之前，还有几个知识点需要了解一下：

1.addEventListener

addEventListener是DOM2级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件

Jquery基础教程（非常全面）

浏览：1648 2026-04-29

使用 的一些疼处

jquery的引入

和jquery的区别

DOM文档加载的步骤

执行时间不同

编写个数不同

简化写法不同

jquery选择器的用法

jquery的基本选择器

jquery的层级选择器

jquery基本过滤选择器

jquery的属性选择器

jquery的筛选选择器

的DOM对象和jquery对象的转换

DOM对象转换称为jquery对象

jquery对象转换成DOM对象

jquery效果

jquery显示和隐藏效果

jquery效果2-slide

jquery效果3 淡入淡出

jquery的动画效果

jquery右下角弹出广告

jquery的属性操作

jquery文档操作

插入操作

克隆操作

替换操作

删除操作

jquery的位置属性

jquery的筛选方法

jquery案例

仿淘宝搜索栏

小米官网案例

焦点式轮播图

jquery中的事件

事件的概念

事件流

继续阅读与本文标签相同的文章

2026-05-18栏目： 教程

2026-05-18栏目： 教程

2026-05-18栏目： 教程

2026-05-18栏目： 教程

2026-05-18栏目： 教程

2026-04-23栏目： 教程

2026-04-23栏目： 教程

2026-04-23栏目： 教程

2026-04-23栏目： 教程

2026-04-24栏目： 教程

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

相关文章

使用的一些疼处

2026-05-18栏目：教程

2026-05-18栏目：教程

2026-05-18栏目：教程

2026-05-18栏目：教程

2026-05-18栏目：教程

2026-04-23栏目：教程

2026-04-23栏目：教程

2026-04-23栏目：教程

2026-04-23栏目：教程

2026-04-24栏目：教程

特别推荐 2026年05月18日星期一