26、jQuery
一. jQuery简介
(一) jQuery是什么：
是一个javascript代码仓库
是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。
(二) jQuery优势
- 体积小，使用灵巧(只需引入一个js文件)
- 方便的选择页面元素(模仿CSS选择器更精确、灵活)
- 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
- 控制响应事件(动态添加响应事件)
- 提供基本网页特效(提供已封装的网页特效方法)
- 快速实现通信(ajax)
- 易扩展、插件丰富
(三) 如何下载JQuery
- 官方网站：http://jquery.com/
(四) 如何引入JQuery包
- 引入本地的Jquery
- 使用Google提供的API导入
写第一个JQUery案例
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
$(function(){
alert(“jQuery 你好!”);
});
</script>
(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" 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>
26、jQuery的更多相关文章
- 26、Jquery 基础
什么是Jquery? Jquery是一套Javascript脚本库. 使用时需要先下载下来,并引用到项目中. 下载地址:http://jquery.com/download/ 目前jquery分为 1 ...
- 常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)
来自:http://www.xueit.com/js/show-6015-1.aspx 本文列出jquery一些应用小技巧,比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器. ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JS、JQuery和ExtJs动态创建DOM对象
做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...
- 59、jQuery初识
jQuery是由原生js写的所以说所有jQuery制作出来的效果都可以使用js做出来,jQuery出现的目的是为了优化代码,提高码代码的效率它将很多功能封装. 一.jQuery的认识 1.何为jque ...
- 10、jQuery初识
jQuery是由原生js写的所以说所有jQuery制作出来的效果都可以使用js做出来,jQuery出现的目的是为了优化代码,提高码代码的效率它将很多功能封装. 本篇导航: jQuery的认识 jQue ...
- Javascript、Jquery获取浏览器和屏幕各种高度宽度（单位都为px）
Javascript.Jquery获取浏览器和屏幕各种高度宽度 另外参见 http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
随机推荐
- BMFont制作美术字体
生成 Number.fnt.Number_0.png 两个文件,将其拖入Unity 相应位置,继续下一步 箭头所指就是我们要得到的最终目标,在文本处字体使用它就可以了. 在使用 Tools -> ...
- android应用程序中获取view的位置
我们重点在获取view的y坐标,你懂的... 依次介绍以下四个方法: 1.getLocationInWindow int[] position = new int[2]; textview.getLo ...
- 利用Caffe训练模型(solver、deploy、train_val) + python如何使用已训练模型
版权声明:博主原创文章,微信公众号:素质云笔记,转载请注明来源“素质云博客”,谢谢合作!! https://blog.csdn.net/sinat_26917383/article/details/5 ...
- java后台服务器启动脚本
最近由于经常在项目上线或者调试中启动服务,由于要设置环境变量这些,所以为了方便写了个启动脚本,希望能够帮助大家,也算是给自己做个小笔记: example_project_start.sh: # /bi ...
- qt5信息提示框QMessageBox用法
information QMessageBox::information(NULL, "Title", "Content", QMessageBox::Yes ...
- 【ASP.NET Core】EF Core 模型与数据库的创建
大家好,欢迎收看由土星卫视直播的大型综艺节目——老周吹逼逼. 今天咱们吹一下 EF Core 有关的话题.先说说模型和数据库是怎么建起来的,说装逼一点,就是我们常说的 “code first”.就是你 ...
- vue改变了数据却没有自动刷新
有两个按钮,按钮上有个number属性,当此值为偶数时,按钮显示为红色. 最初的数据如下:"a": [{ name: "one" },{ name: " ...
- wamp 在本地安装PHP环境， 开启 curl 扩展
分别打开以下 2 个文件: wamp\bin\php\(your php version)\php.ini wamp\bin\Apache\(your apache version)\bin\php. ...
- Spring Boot系列——AOP配自定义注解的最佳实践
AOP(Aspect Oriented Programming),即面向切面编程,是Spring框架的大杀器之一. 首先,我声明下,我不是来系统介绍什么是AOP,更不是照本宣科讲解什么是连接点.切面. ...
- 在 java 开发接口中需要注意的问题
1 在开发过程中免不了对接上游或下游,有合作就要保证入参.出参的准确性.一个接口一般只能处理有限情况下的情况,因此在逻辑处理前要对入参进行校验. 2 在自己的逻辑处理过程中,要时刻持有怀疑的态度.假设 ...