26jQuery

Posted 2020-12-02 zhongchao666

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了26jQuery相关的知识，希望对你有一定的参考价值。

一. jQuery简介

(一) jQuery是什么：

是一个javascript代码仓库
是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。

(二) jQuery优势

体积小，使用灵巧(只需引入一个js文件)
方便的选择页面元素(模仿CSS选择器更精确、灵活)
动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
控制响应事件(动态添加响应事件)
提供基本网页特效(提供已封装的网页特效方法)
快速实现通信(ajax)
易扩展、插件丰富

(三) 如何下载JQuery
官方网站：http://jquery.com/

(四) 如何引入JQuery包
引入本地的Jquery
使用Google提供的API导入

写第一个JQUery案例

(1) 在JQuery库中，==$是JQuery的别名，$()等效于就jQuery()==.

(2) $是jQuery别名。如$()也可jQuery()这样写,相当于页面初始化函数，当页面加载完毕，会执行jQuery()。

(3) 原生转jQuery: 加$()
jQuery转原生： [] .get()

==window.onload == $(function(){})==

window.onload = function(){} : ++页面加载、（图片、音频、视频等等）一个页面中只能有一个window.onload++

$(function(){}) : ++文档加载，速度更快一个页面可以有无限个$(function(){})++

二. jQuery选择器的使用

jQuery选择器分为：
==基本选择器== ；
==层级选择器== ；
==常用伪类选择器==:可以看作是一种特殊的类选择符;

jQuery基本选择器

(1) 包括ID选择器，标签选择器，类选择器，通配选择器和组选择器5种
a) ID选择器：$(“#id”)
b) 标签选择器：$(“element”)
c) 类选择器：$(“.className”)
d) 通配选择器：$(“*”)匹配指定上下文中所有元素
e) 组选择器：$(“selector1,selector2,selectorN”)特点：无数量限制，以逗号分隔（逐个匹配，结果全部返回）

例题:

.css({"属性":"属性值","属性":"属性值"})
或.css("属性","属性值")

<body>
        <div id="main">孔子</div>
        <h4>论语</h4>
        <div class="one">子在川上曰：</div>
        <p>"逝者如斯夫！</p>
        <p>不舍昼夜。"</p>
        <!--a)  找到.one改变他的字体颜色
        b)  找到#main给他增加border：1px solid red
        c)  找到p标签元素给他添加边框border:1px solid green
        d)  找到全部元素改变字体28px
        e)  找到ID与ClassName 添加background:red-->
    
    <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
    <script type="text/javascript">
        $(‘.one‘).css(‘color‘,‘red‘);
        $(‘#main‘).css(‘border‘,"1px solid red");
        $(‘p‘).css(‘border‘,"1px solid green");
        $(‘*‘).css(‘fontSize‘,‘28px‘);
        $(‘#main,.one‘).css(‘background‘,‘red‘);
    </script>
    </body>

效果图:
技术分享图片

层级选择器：通过DOM的嵌套关系匹配元素

jQuery层级选择器：包含==选择器、子选择器、相邻选择器、兄弟选择器== 4 种
a) ==包含选择器：$(“a b”)在==给定的祖先元素下匹配所有后代元素（不受层级限制）
b) ==子选择器：$(“parent>child”)在==给定的父元素下匹配所有子元素。
c) ==相邻选择器：$(“prev + next”)匹==配所有紧接在prev元素后的next元素。一个
d) ==兄弟选择器：$(“prev ~ siblings”)匹==配prev元素之后的所有sibling元素。所有同级元素sibling

案例

<body>
        <div class="main">
            <span>1<img src="img/1.jpg"/></span>
            2<img src="img/1.jpg"/>
        </div>
        3<img src="img/1.jpg">
        4<img src="img/1.jpg">
        <div>
            5<img src="img/1.jpg">
        </div>
//      1..main里所有的img设置border: 5px solid red
//      2..main里的子元素img设置border: 5px solid green
//      3..main的相邻元素img设置border:5px solid blue
//      4. .main的所有兄弟元素img设置border:5px solid yellow
        <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
        <script type="text/javascript">
//          $(‘.main img‘).css(‘border‘,‘5px solid red‘);
//          $(‘.main>img‘).css(‘border‘,‘5px solid green‘);
//          $(‘.main+img‘).css(‘border‘,‘5px solid blue‘);
            $(‘.main~img‘).css(‘border‘,‘5px solid yellow‘);
        </script>
    </body>

常用伪类选择器：可以看作是一种特殊的类选择符

选择器          说明
:first          匹配找到的第1个元素
:last           匹配找到的最后一个元素
:eq             匹配一个给定索引值的元素
:even           匹配所有索引值(下标)为偶数的元素
:odd            匹配所有索引值(下标)为奇数的元素
:gt(index)      匹配所有大于给定索引值的元素
:lt(index)      匹配所有小于给定索引值的元素
:not            去除所有与给定选择器匹配的元素

案例:

<body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
        <script type="text/javascript">
            /*
             * :first               匹配找到的第1个元素
                :last               匹配找到的最后一个元素
                :eq             匹配一个给定索引值的元素
                :even               匹配所有索引值为偶数的元素
                :odd                匹配所有索引值为奇数的元素
                :gt(index)      匹配所有大于给定索引值的元素
                :lt(index)      匹配所有小于给定索引值的元素
                :not                去除所有与给定选择器匹配的元素

             */
//          $(‘ul li:first‘).css(‘background‘,"red");
//          $(‘ul li:last‘).css(‘background‘,"red");
//          $(‘ul li:eq(3)‘).css(‘background‘,"red");
//          $(‘ul li:even‘).css(‘background‘,"red");
//          $(‘ul li:odd‘).css(‘background‘,"green");
//          $(‘ul li:gt(3)‘).css(‘background‘,"red");
//          $(‘ul li:lt(3)‘).css(‘background‘,"red");
            $(‘ul li:not(:eq(6))‘).css(‘background‘,"red");
        </script>
    </body>

三. jQuery属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box" title="pox" width="100px" height="100px" border=‘1px solid black‘ >
            
        </div>
        <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
        <script type="text/javascript">
            var $div = $(‘#box‘);
            
//          $div.attr(‘id‘,‘boxid‘);
//          alert($div.attr(‘class‘));
//设置属性和值,只有属性时返回属性值


//addClass(class|fn)
//为每个匹配的元素添加指定的类名。

//removeClass([class|fn])
//从所有匹配的元素中删除全部或者指定的类。





            $div.click(function(){
//              $div.toggleClass(‘ddddd‘);
// 如果存在就删除一个类, 如果不存在就添加一个类。


//html() ===  innerHTML,取得第一个匹配元素的html内容。传参设置,不传是获取.
//              $(this).html(‘<strong>中国</strong>‘);
//              alert($(this).html())


//text() === innerText ,取得所有匹配元素的内容(不包括解析的标签),传参写入,不传参获取
                $(this).text(‘<strong>中国</strong>‘);
                alert($(this).text());
            })
        </script>
    </body>
</html>

四. jQuery动画

(一) 显隐动画

==show():显示
hide():隐藏==
原理：hide()通过改变元素的高度宽度和不透明度，直到这三个属性值到0；
show()从上到下增加元素的高度，从左到右增加元素宽度，从0到1增加透明度，直至内容完全可见。
参数：
show()
==show(speed,callback)==
++speed++:字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
++callback++:动画完成时执行的方法

(二) 显隐切换
==toggle():切换元素的可见状态==
原理：匹配元素的宽度、高度以及不透明度，同时进行动画，隐藏动画后将display设置为none
参数：
==toggle(speed)
toggle(speed,callback)
toggle(boolean)==
++speed++:字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
++easing++:使用哪个缓冲函数来过渡的字符串（linear/swing）
++callback++:动画完成时执行的方法
++boolean++:true为显示 false为隐藏

(三) 滑动

1. 显隐滑动效果

slideDown():滑动隐藏
slideUp():滑动显示
参数：
slideDown(speed,callback)
slideUp(speed,callback)

2. 显隐切换滑动

slideToggle():显隐滑动切换
参数：
slideToggle(speed,callback)

(四) 渐变：通过改变不透明度

1. 淡入淡出

fadeIn()
fadeOut()
参数：
fadeIn(speed,callback)
fadeOut(speed,callback)

2. 设置淡出透明效果

fadeTo():以渐进的方式调整到指定透明度
参数：
fadeTo(speed,opacity,callback)

3. 渐变切换：结合fadeIn和fadeOut

fadeToggle()
参数：
fadeOut(speed,callback)

(五) 自定义动画：animate()

用animate模拟show():
show:表示由透明到不透明
toggle:切换
hide:表示由显示到隐藏

.animate({属性:属性值,属性:属性值},运动时间,fn)

例题:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <input type="button" name="btn" id="btn" value="效果" />
        <div id="box">
            
        </div>
        <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
        <script type="text/javascript">
            $(‘#btn‘).click(function(){
//              $(‘#box‘).hide(5000,function(){
////                    $(this).show(5000)
//      
//              });
//              $(‘#box‘).toggle(5000);
//              $(‘#box‘).slideUp(5000,function(){
//                  alert(‘hehe‘)
//                  $(this).slideDown(5000);
//              })
//              $(‘#box‘).slideToggle(4000);
//              $(‘#box‘).fadeOut(5000,function(){
//                  $(this).fadeIn(5000,function(){
//                      $(this).fadeTo(3000,0.3);
//                  })
//              })
//              $(‘#box‘).fadeToggle(3000)
                $(‘#box‘).animate({left:800},30,function(){
                    $(this).animate({top:600},30,function(){
                        $(this).animate({left : 0},30,function(){
                            $(this).animate({top : 100},30)
                        })
                    })
                })
            })
        </script>
    </body>
</html>

jQuery进阶

一、遍历

each(callback)

$(‘ul li‘).each(function(){}) 对象方法
$.each(obj,function(index,value){}) 工具方法

//each(function(){})    对象方法
//$.each(obj,function(){}) 工具方法
//          $(‘ul li‘).click(function(){
//              $(this).css(‘background‘,‘red‘);
//          })
            let $lis = $(‘ul li‘);
//          $lis.each(function(index,value){
////                $(value).click(function(){
////                    alert($(this).text());
////                })
//              $(value).hover(function(){
//                  $(this).css(‘background‘,‘red‘);
//              },function(){
//                  $(this).css(‘background‘,"");
//              })
//          })

            $.each($lis,function(index,value){
                $(value).mouseenter(function(){
                    $(this).css(‘background‘,‘red‘);
                })
                $(value).mouseleave(function(){
                    $(this).css(‘background‘,‘‘);
                })
            })

二、Ajax

(一) .load()方法

1. .load三个参数

（1）参数一：url必选(url,参数类型字符串)
（2）参数二：data可选，发送key:value数据，参数类型为object
（3）参数三：callback可选，回调函数，参数类型为函数Function（function可传（response,status,xhr））
response获取所返回的结果，可对其进行数据的操作
status当前我们获取数据的状态success成功error失败
xhr:把前面两个参数的功能全部实现，他本身就是一个对象，前两个对象相当于他的属性
（4）
技术分享图片

技术分享图片

案例一：本地.html文件
案例二：服务器文件.php文件（获取方式get和post）

(二)

.get():以get方式发送数据、处理静态页
.post():以post方式发送数据
.getScript():专业处理js文件
.getJSON():专业处理JSON文件

//.get()
            $(‘#btn‘).click(function(){
//              $.get(‘php/index.php?name=小罗&age=30&t=‘ + new Date().getTime(),function(data){
//                  $(‘#box‘).text(data);
//              })
//              $.get(‘php/index.php?t=‘ + new Date().getTime(),"name=小罗&age=30",function(data){
//                  $(‘#box‘).text(data);
//              })
                $.get(‘php/index.php?t=‘ + new Date().getTime(),{name:"小罗",age:30},function(data){
                    $(‘#box‘).text(data);
                })
            })
            
//.post()
            $(‘#btn‘).click(function(){
//              $.post(‘php/index.php‘,"name=小王&age=17",function(data){
//                  $(‘#box‘).text(data);
//              })
                $.post(‘php/index.php‘,{name:"小王",age:17},function(data){
                    $(‘#box‘).text(data);
                })
            })

//.getScript()          
            $(‘#btn‘).click(function(){
                $.getScript(‘js/index.js‘,function(){});
            })

//.getJSON()            
            $("#btn").click(function(){
                $.getJSON("index.json",function(data){
                    var str = ‘‘;
                    $(data).each(function(index,value){
                        str = `用户名:<strong>${value.name}</strong><em>${value.age}</em><br>`;
                        $(‘#box‘).append(str);
                    })
                    
                })
            })

1. 三个参数

(1) 参数一：url:必选（url参数类型字符串）

(2) 参数二：data：可选，发送key:value数据，参数类型为object(带?,字符串,对象)

(3) 参数三：callback：可选，回调函数，参数类型为函数Function

(4) type可选，字符串，主要设置返回文件的类型($.getScript和.getJSON无此参数)

2. $.get和$.post方式之间的区别：

(1) $.get是以$_GET方式接受数据$.post是以$_POST方式接受数据

(2) $.get可以带?方式来传参，$.post不能以?方式传参

(三) $.ajax():(底层方法讲解)

url:外部文件地址
type:提交文件方式，GET和POST
data:传参方式（字符串，对象）
success:回调函数 Function(response,status,xhr){}
dateType:返回数据类型

            $.ajax({
                type:"get",
                url:"index.php?name=张三&age=18",
                async:true,
                success : function(data){
                    alert(data);
                }
            });

三、DOM操作

(一) 创建元素节点

1. $(html):创建节点

如：$(“<div title = ‘盒子’>dom</div>”);

(二) 创建文本

var $div = $(“<div>我是DOM</div>”)
$(“body”).append($div);

(三) 设置属性

var $div = $("<div title=‘div盒子’>我是DOM</div>")
$("body").append($div);

(四) DOM插入

1. 内部插入：(子集)

(1) append():向元素内部增加内容（末尾）

(2) appendTo():将要增加的内容增加到元素中

(3) prepend():向元素内部增加内容（前置）

(4) prependTo():将要增加的内容增加到元素中

2. 外部插入：（同级）

(1) after():在元素后面插入内容

(2) insertAfter():将内容插入元素后面

(3) before():在元素前面插入内容

(4) insertBefore():将内容插入元素前面

(五) 删除

1. remove():删除匹配元素

2. empty():清空子节点内容

            $(‘#btn‘).click(function(){
                $(‘h3‘).remove();
            })
            $("#btn1").click(function(){
                $(‘h4‘).empty();
            })

(六) 克隆：创建指定节点的副本

1. clone()

            $(‘h3‘).click(function(){
                //true: 包含事件
                $(this).clone(true).appendTo($(‘body‘));
            })

true:表示复制属性、样式和事件

(七) 替换：

1. replaceWith():将指定元素替换成匹配元素

2. replaceAll():用匹配元素替换成指定元素

            var $a = $(‘a‘);
            $a.each(function(){
                $(this).click(function(){
//                  $(this).replaceWith("<input type=‘button‘ value=‘" + $(this).text() + "‘>" );
                    $("<input type=‘button‘ value=‘" + $(this).text() + "‘>").replaceAll($(this));
                })
            })
            
            
            
            
            //注：
            $(document).onclick(function(evt){
                
                //阻止默认行为
                evt.preventDefault();
                //阻止事件冒泡
                evt.stopPropagation();
                //既阻止默认行为也阻止事件冒泡
                return false;
            })

四、图片翻转

<doctype html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery实现图片翻牌旋转特效</title>
        <style>
            *{margin:0px;padding:0px;}
            li{list-style:none;}
            #brand{
                width:330px;
                height:400px;
                border:1px solid #dddddd;
                box-shadow:0px 0px 5px #dddddd;
                margin:30px auto;
            }
            #brand .title{
                width:100%;
                height:35px;
                line-height:35px;
                font-size:16px;
                margin-top:4px;
                border-bottom:2px solid #33261c;
                text-align:center;
                color:#33261c;
            }
            #brand .bd-box{
                width:284px;
                height:358px;
                overflow:hidden;
                padding:0px 24px;
            }
            #brand .bd-box li{
                float:left;
                width:122px;
                height:77px;
                overflow:hidden;
                position:relative;
                margin:10px 10px 0px 10px;
            }
            #brand .bd-box li img{
                width:120px;
                height:75px;
                border:1px solid #e9e8e8;
                position:absolute;
                left:0px;
                top:0px;
                z-index:2;
                overflow:hidden;
            }
            #brand .bd-box li span{
                width:120px;
                height:0px;
                border:1px solid #e9e8e8;
                position:absolute;
                left:0px;
                top:38px;
                z-index:1;
                text-align:center;
                line-height:75px;
                font-size:14px;
                color:#FFF;
                background:#ffa340;
                font-weight:bold;
                overflow:hidden;
                display:none;
            }
            #brand .bd-box li a{
                width:120px;
                height:75px;
                position:absolute;
                left:0px;
                top:0px;
                z-index:3;
            }
        </style>
        <script type="text/javascript" src="jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function(){
                const $lis = $(‘#brand .bd-box li‘);
                $lis.each(function(){
                    $(this).hover(function(){
                        var $img = $(this).find(‘img‘);
                        var $span = $(this).children(‘span‘);
                        $span.stop();
                        $img.animate({height : 0,top : 37},500,function(){
                            $img.hide();
                            $span.show().animate({height : 75,top : 0},500)
                        })
                    },function(){
                        var $img = $(this).find(‘img‘);
                        var $span = $(this).children(‘span‘);
                        $img.stop();
                        $span.animate({height : 0,top : 37},500,function(){
                            $span.hide();
                            $img.show().animate({height : 75,top : 0},500)
                        })
                    })
                })
            })
        </script>
    </head>
    <body>
        <div id="brand">
            <div class=‘title‘>
                热门品牌推荐
            </div>
            <ul class=‘bd-box‘>
                <li>
                    <a href="#"> </a>
                    <img src="images/1.jpg" />
                    <span>肌龄</span>
                </li>
                <li>
                    <a href="#"> </a>
                    <img src="images/2.jpg" />
                    <span>肌龄</span>
                </li>
                <li>
                    <a href="#"> </a>
                    <img src="images/3.jpg" />
                    <span>肌龄</span>
                </li>
                <li>
                    <a href="#"> </a>
                    <img src="images/4.jpg" />
                    <span>肌龄</span>
                </li>
                <li>
                    <a href="#"> </a>
                    <img src="images/5.jpg" />
                    <span>肌龄</span>
                </li>
                <li>
                    <a href="#"> </a>
                    <img src="images/6.jpg" />
                    <span>肌龄</span>
                </li>
                <li>
                    <a href="#"> </a>
                    <img src="images/7.jpg" />
                    <span>肌龄</span>
                </li>
                <li>
                    <a href="#"> </a>
                    <img src="images/8.jpg" />
                    <span>肌龄</span>
                </li>
            </ul>
        </div>
        
    </body>
</html>

五、瀑布流

<!DOCTYPE html>
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            body {
                height: 100%;
            }
            div.wrap {
                width: 100%;
                margin: 0 auto;
                background: #DDD;
            }
            div.wrap div {
                position: absolute;
                width: 220px;
                padding: 4px;
                border: 1px solid #000;
            }
            div.wrap div img {
                width: 220px;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            window.onload = function(){
                pbl("wrap");
            }
            $(window).resize(function(){
                pbl("wrap");
            })
        function pbl(ele,child,space){
            //初始化参数
            if(!ele){
                return;
            }
            child = child || ‘div‘;
            space = space || 10;
            //获取大盒子
            var $bigBox = $("#" + ele);
            //获取所有的子盒子
            var $childs = $bigBox.children(child);
            //大盒子的宽度
            var bigBoxWidth = $bigBox.width();
            //一个子盒子的宽
            var childWidth = $childs.eq(0).width();
            //计算列数
            var colNum = Math.floor(bigBoxWidth / childWidth);
    
            //计算左右间隙
            var padding = Math.floor((bigBoxWidth - childWidth * colNum) / (colNum + 1));
            //初始化第一行的坐标
            var arr = [];
            for(var i = 0;i < colNum;i ++){
                arr[i] = {};
                arr[i].left = (i * childWidth) + (i + 1) * padding;
                arr[i].top = space;
            }
            
            //遍历所有的子节点，放到最小高度的列中
            $childs.each(function(index,value){
                $(value).css(‘position‘,‘absolute‘);
                var i = minTop(arr);
//              alert(i);
                $(value).animate({left : arr[i].left,top : arr[i].top},3000,function(){
                    
                })
                arr[i].top += $(value).outerHeight();
                    $bigBox.css(‘height‘,arr[i].top);
            })
        }
        function minTop(arr){
            var min = arr[0].top;
            var index = 0;
            for(var i = 0,len = arr.length;i < len;i ++){
                if(min > arr[i].top){
                    min = arr[i].top;
                    index = i;
                }
            }
            return index;
        }
        </script>
    </head>

    <body>
        <div class="wrap" id="wrap">
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/1.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/2.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/3.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/4.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/5.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/6.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/7.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/8.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/9.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/10.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/11.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/12.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/13.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/14.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/15.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/16.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/17.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/18.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/19.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/20.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/21.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/22.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/23.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/24.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/25.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/26.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/27.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/28.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/29.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/30.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/31.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/32.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/33.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/34.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/35.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/36.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/37.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/38.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/39.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/40.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/41.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/42.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/43.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/44.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/45.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/46.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/47.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/48.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/49.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/50.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流</span>
            </div>
            <div>
                <h3>瀑布流</h3>
                <a href="javascript:void(0)" title=""><img src="waterfall/51.jpg"  title="" /></a>
                <p>瀑布流瀑布流瀑布流瀑布流</p>
                <span>瀑布流瀑布流瀑布流</span>
            </div>
        </div>
    </body>

</html>

以上是关于26jQuery的主要内容，如果未能解决你的问题，请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段