當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

26、jQuery

發布時間：2023/12/1 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 26、jQuery 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一. 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><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():用匹配元素替換成指定元素

四、圖片翻轉

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

轉載于:https://www.cnblogs.com/zhongchao666/p/9275624.html

總結

以上是生活随笔為你收集整理的26、jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

jquery

上一篇： jackson - @JsonPrope
下一篇： CPU-内存-IO-网络调优