jQuery相关

我愿成为你头顶的云

于 2021-02-16 15:19:57 发布

阅读量237

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42640067/article/details/113796579

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、前言

如果我们单纯的使用原生的JavaScript的话，会发现，有些操作会很麻烦，也很繁琐，比如通过id、class、标签等来获取元素，原生的JS语句如下：
在这里插入图片描述
只是获取dom元素而已，就要写一长串单词，每次都这样获取总感觉有点大材小用。原生JS写Ajax请求就更加麻烦了，一大堆的代码，在开发中几乎都是Ajax请求从后端获取数据，如果每个Ajax请求都要这样，开发的人会很抓狂。当然你可以将这些通用的代码自己通过函数封装起来使用，这样会简便很多，但是我们自己写的封装往往会有这样那样的问题，我们可以选择使用人家大牛已经写好的，并且很成熟已经被很多人使用的，比如说jQuery框架。

2、jQuery

2.1、jQuery的概念

jQuery是一款JavaScript框架库，可以方便的处理HTML、事件、动画等。这里的HTML指的是处理HTML文档中的DOM节点，比如添加、删除等，事件指的是通过jQuery对页面上的事件进行处理，动画指的是通过jQuery实现淡入、淡出、滑动等动画。jQuery最大的益处是跨浏览器，兼容多种浏览器。前10000个网站中，有80%以上网站使用了jQuery。

小结：jQuery是一个JavaScript库，它封装了原生JS中的通用操作，极大地简化了JS编程，使用它可以提高我们的开发效率。

以下通过一个例子说明：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='./js/jquery-3.4.1.min.js'></script>
</head>
<body>
	<h2>点击我的话，我会消失。</h2>
	<h3>点击我，又会出现。</h3>
<script>
	// dom加载完毕后才会执行
	$(document).ready(function(){
		$('h2').click(function(){
			$(this).hide();
		});

		$('h3').click(function(){
			$('h2').show();
		});
	});
</script>
</body>
</html>

在这里插入图片描述
点击大标题：

大标题消失了已经，再点击下面的小标题：

上面的大标题又出现了。可以看到，通过使用jQuery，可以精简JS语句，而且操作也方便多了。

2.2、jQuery的引入

有两种方式引入jQuery库文件，第一种就是下载好jquery.js到本地，然后引入。如下：
在这里插入图片描述
带min后缀的是精简和压缩过的，用于实际网站开发中。不带min的是未精简压缩过的，一般用于测试中，可以看到两个文件的大小相差还是蛮大的。

另一种是使用别人服务器上的CDN jQuery文件。国内的直接网上搜，这些前端公共库一般是免费开源的，如下：
在这里插入图片描述

两种方式任选其一，都可以。

2.3、使用jQuery的目的

写的更少，做的更多，即write less，do more，这是人家的原话，就是简化JS操作，提高开发效率。

2.4、jQuery基本语法

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。基础语法如下：
$(selector).action()。

美元符号定义jQuery，选择符（selector）“查询”和“查找” HTML元素，jQuery的action() 执行对元素的操作。

2.4.1、文档就绪函数

$(document).ready(function(){
   ......
});

所有的jQuery函数都是位于document的ready函数中的，目的是为了防止文档在完全加载（就绪）之前运行jQuery代码，如果在文档没有完全加载之前就运行函数，操作可能失败。这里所说的加载指的的话dom元素，即只是html文档的结构。注意区分ready函数和onload的区别：

ready函数只需加载文档的dom元素，即只加载文档的结构。
onload需要加载整个文档，包括结构和内容。
因此，ready函数比onload的速度快很多。

2.4.2、链式语法

即对同一个元素的多个操作可以简写在一起，不用分行写。如下是不使用链式语法：

		$('h2').text('你好鸭，2021！');
		$('h2').addClass('demo');
		$('h2').removeClass('demo');
		$('h2').css('color','red');

那么使用链式语法，如下：

		$('h2').text('你好鸭，2021！')
		       .addClass('demo')
		       .removeClass('demo')
		       .css('color','red');

使用链式语法的好处是可以省略掉多余的代码，所以能用链式语法尽量优先使用。

使用链式语法需要注意的地方：

譬如find()、add()、children()、filter()等方法具有破坏性，拿.find()来说，find(‘p.child’)会缩小范围，锁定到class为child的p元素，若想还原到上一次的查询对象，可使用end()方法结束。
有些方法不返回jQuery对象，比如使用get()方法后不能使用find()方法。

2.5、jQuery对象筛选

jQuery可以使用元素选择器、属性选择器、CSS选择器、内容筛选器等来选取元素。

2.5.1、元素选择器

jQuery使用CSS选择器来选取HTML元素。如下：
在这里插入图片描述
示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<link rel="stylesheet" href="./css/demo.css" />
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
	<p></p>
	<p></p>
	<p>人生各有其命，竭尽全力之后而不得就放弃吧。</p>
	<p>尽最大努力去争取就好。</p>
	<p>1234<span>56789</span></p>
	<input type="text" name="" value="inp">
	<p id="foo">如果这一切都与你有关，我怎么能平静的释然。</p>
	<p>爱江山更爱美人。爱江山更爱美人。爱江山更爱美人。爱江山更爱美人。爱江山更爱美人。</p>
	<input type="text" name="">
	<input type="hidden" name="">
    <p style="display:none">如果这一切都与你有关，我怎么能平静的释然。如果这一切都与你有关，我怎么能平静的释然。如果这一切都与你有关，我怎么能平静的释然。如果这一切都与你有关，我怎么能平静的释然。如果这一切都与你有关，我怎么能平静的释然。如果这一切都与你有关，我怎么能平静的释然。</p>
    <p style="visibility: hidden">如果这一切都与你有关，我怎么能平静的释然。如果这一切都与你有关，我怎么能平静的释然。如果这一切都与你有关，我怎么能平静的释然。如果这一切都与你有关，我怎么能平静的释然。如果这一切都与你有关，我怎么能平静的释然。如果这一切都与你有关，我怎么能平静的释然。</p>
    <h1>标题一</h1>
    <h2>标题二</h2>
    <div>
    	<ul class="list" id="list">
    		<li>list-01</li>
    		<li class="item2">list-02</li>
    		<li>list-03</li>
    		<li>list-04</li>
    		<li>list-05</li>
    		<li class="item6">list-06</li>
    		<li>list-07</li>
    		<li>list-08</li>
    		<li class="item9">list-09</li>
    		<li>list-10</li>
    	</ul>
    </div>
<script type="text/javascript" src='./js/demo.js'></script>
</body>
</html>

.highlight {
	padding: 10px;
	border: 1px solid yellow;
	background: yellow; 
}

.sty {
    padding: 10px;
	border: 2px solid red;
	background: pink; 
}

.sty2 {
    padding: 10px;
	border: 2px solid red;
	background: orange; 
}

.sty3 {
	padding: 10px;
	border: 2px solid red;
	background: #333; 
}

$(function(){
    // 选取所有p元素添加class
    $('p').addClass('sty');
    // 选取指定id的p元素添加class
    $('p#foo').addClass('sty2');
});

在这里插入图片描述

2.5.2、属性选择器

jQuery使用XPath表达式来选择带有给定属性的元素。如下：
在这里插入图片描述
示例如下：

$(function(){
    // 选取属性为text的input元素添加class
    $('input[type="text"]').addClass('sty');
});

在这里插入图片描述

2.5.3、CSS选择器

jQuery CSS选择器可用于改变 HTML元素的CSS属性。如下：

$(function(){
    // 选取p元素添加CSS样式
    $('p').css('color','red')
          .css('fontSize','30px');
});

在这里插入图片描述

2.5.4、内容筛选器

通过文本内容来筛选元素。如下：

:empty：文本为空。
:contains(text)：包含文本。
:has(selector)：包含选择器。
:parent：文本不为空，与empty相反。

示例如下：

$(function(){
	// 给文本为空的元素添加class
	$('p:empty').addClass('highlight');
	// 给文本不为空的p元素添加class
	$('p:parent').addClass('sty');
	// 为包含关键字的p元素添加class
	$('p:contains("放弃")').addClass('sty2');
	// 为包含span元素的p元素添加class
	$('p:has(span)').addClass('sty3');
});

在这里插入图片描述

2.5.5、其他筛选器（1.9版本以后新增）

:lang(language)：筛选语言。
:not(selector)：非指定选择器。
:root：根元素，使用很少。
:target：很少使用。
:hidden：选择所有不可见元素，不显示，但占位。
:visible：刚好与hidden相反。
:header：选择所有标题。
:animated：选择所有正在执行动画效果的元素。

添加以下css：

.sty4 {
	color: blue;
}

$(function(){
	// 为语言为en的元素添加class
	$(':lang(en)').addClass('sty');
	// 为id不为foo的所有p元素添加class
	$('p:not(#foo)').addClass('sty2');
	// 为隐藏的input元素添加class
	console.log($('input:hidden').addClass('highlight'));
	// 为可见的input元素添加class
	$('input:visible').addClass('sty3');
	// 为所有标题添加class
	$(':header').addClass('sty4');
});

在这里插入图片描述

2.5.6、jQuery选择器的性能优化

尽量使用CSS中有的选择器。
避免过度约束。
尽量以ID开头。
让选择器的右边有更多的特征。
避免使用全局选择器。
缓存选择器结果。

测试如下：

// 封装函数，测试代码的执行时长
function testTime(cb){
	console.time("选取元素所用时间：");
	if(typeof(cb)==='function'){
		for(var i=0;i<1000;i++){
			cb();
		}
	}
	console.timeEnd("选取元素所用时间：");
}

$(function(){
	testTime(function(){
		$('ul li:even');
	});
	testTime(function(){
		$("ul li:nth-child(odd)");
	});
	testTime(function(){
        document.querySelectorAll("ul li:nth-child(odd)");
     });
	//尽量避免过度约束
	testTime(function(){
        $("div ul li.item2");
    });
    testTime(function(){
    	$('li.item2');
    });
    testTime(function(){
        $(".list li.item2");
    });
    //尽量使用id开头的
    testTime(function(){
        $("#list li.item2");
    });
    //让选择器右边尽可能的有更多的特征
    testTime(function(){
        $("ul.list.item2");
    });
    testTime(function(){
        $(".list li.item2");
    });
    //避免使用全局选择器
    testTime(function(){
        $("ul");
     }); 
    testTime(function(){
        $(".list");
    });
    //缓存选择器结果
    testTime(function(){//slow
        $("#list.item2");
        $("#list.item6");           	
    });
    testTime(function(){//better
        var ul=$('#list'); 
        ul.find(".item2");
        ul.find(".item6");         	
    }); 
});

在这里插入图片描述

2.6、jQuery的事件

jQuery事件处理方法是jQuery中的核心函数。对于事件，原则如下：

把所有jQuery代码置于事件处理函数中。
把所有事件处理函数置于文档就绪事件处理器中。
把jQuery代码置于单独的js文件中。
如果存在名称冲突，则重命名jQuery库。

jQuery中的所有事件如下：
在这里插入图片描述

2.7、jQuery和DOM的互相转换

DOM对象

通过原生JS获取的，如下：
在这里插入图片描述
jQuery对象

通过jQuery获取的，如下：
在这里插入图片描述
DOM对象和jQuery对象之间可以相互转换，如下：

$(function(){
	// 获取所有li元素，返回的是数组
	var eles = $('li');
	console.log("li元素的个数：" + eles.length);
	// 获取指定元素，获取的是dom对象
	console.log('第3个li元素内容：' + eles[2].innerHTML);
	console.log('第3个li元素内容：' + eles.get(2).innerHTML);
	// 索引为负数时，从末尾开始
	console.log(eles.get(-2).innerHTML);
	// 获取指定元素，获取的是jQuery对象
	console.log(eles.eq(2));
	console.log(eles.eq(-2));
	console.log('首个li元素内容：' + eles.first().get(0).innerHTML);
	console.log('末个li元素内容：' + eles.last().get(0).innerHTML);
	// jQuery对象转为DOM数组
	console.log(eles.toArray());
});

在这里插入图片描述

2.8、jQuery添加和删除HTML元素

可以通过jQuery很快的创建或删除HTML元素，常用方法如下：

append()：在被选元素的结尾插入内容。
appendTo()：将前面的元素添加到后面的元素中。
prepend()：在被选元素的开头插入内容。
after()：在被选元素之后插入内容。
before()：在被选元素之前插入内容。
remove()：删除被选元素（及其子元素）。
empty()：从被选元素中删除子元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
	<h2>万水千山总是情</h2>
	<button type="button" id='btn'>添加文本</button><br><br>
	<p>风和日丽。</p>
	<div style="border: 1px solid green;width: 300px;height: 200px;">
	   二十四节气
	   <ol>
		   <li>立春</li>
		   <li>雨水</li>
		   <li>惊蛰</li>
	   </ol>
	</div>
	<button type="button" id='btn2'>添加列表子项</button>
	<button type="button" id='btn3'>删除节气</button>
	<button type="button" id='btn4'>删除列表子项</button>
</body>
<script type="text/javascript" src="./js/demo.js"></script>
</html>

$(function(){
	var btn = $('#btn');
	btn.click(function(){
	  // 后面添加文本
	  $('h2').append('如果当时');
	  // 前面添加文本
	  $('h2').prepend('星座书上');
   });
    // 创建新元素
	var li = $('<li>春分</li>');
	// 将新元素添加到指定元素中
	li.appendTo('ol');
	var btn2 = $('#btn2');
	btn2.click(function(){
		// 在指定元素之后添加新元素
		$('ol').append('<li>节气1</li>','<li>节气2</li>');
		// 在指定元素之前添加新元素
		$('ol').prepend('<li>节气3</li>','<li>节气4</li>');
	});
	// 在指定元素之前添加内容
	$('p').before('<b>前面</b>');
	// 在指定元素之后添加内容
	$('p').after('<i>后面</i>');
	$('p').before('<h2 style="color:red;">再回首</h2>','<h2 style="color:red;">醉寒江</h2>');
	$('p').after('<h3 style="color:blue;">再回首</h2>','<h3 style="color:blue;">醉寒江</h2>');
	// 删除整个元素及其子元素
	var btn3 = $('#btn3');
	btn3.click(function(){
		$('div').remove();
	});
	// 清空子元素
	var btn4 = $('#btn4');
	btn4.click(function(){
		$('div').empty();
	});
});

在这里插入图片描述
点击添加文本：

点击添加列表子项：

点击删除节气：

刷新，点击删除列表子项：

可以通过某些方法和属性检查元素的数量和获取到元素，如下：

length：获取集合元素数量。
get(index)：返回DOM元素或元素集合。
eq(index)：返回jQuery对象。
first()：获取首个元素。
last()：获取末个元素。
toArray()：将jQuery对象转换为DOM元素数组。

示例如下：
在这里插入图片描述

$(function(){
	// 获取素有li元素，返回的是数组
	var eles = $('li');
	console.log("li元素的个数：" + eles.length);
	// 获取指定元素，获取的是dom对象
	console.log('第3个li元素内容：' + eles[2].innerHTML);
	console.log('第3个li元素内容：' + eles.get(2).innerHTML);
	// 索引为负数时，从末尾开始
	console.log(eles.get(-2).innerHTML);
	// 获取指定元素，获取的是jQuery对象
	console.log(eles.eq(2));
	console.log(eles.eq(-2));
	console.log('首个元素：' + eles.first());
	console.log('末个元素：' + eles.last());
	// jQuery对象转为DOM数组
	console.log(eles.toArray());
});

在这里插入图片描述

2.9、jQuery对象的遍历

jQuery遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML元素。以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止。能够从被选（当前的）元素开始，轻松地在家族树中向上移动到达祖先，向下移动到达子孙，水平移动到达同胞。

常用方法如下：

parent()：返回被选取元素的直接父元素。任何元素的直接父元素有一个。
parents()：返回被选取元素的所有祖先元素，它一路向上直到文档的根元素html。
parentsUntil()：返回介于两个给定元素之间的所有祖先元素。
children()：返回被选取元素的所有直接子元素，这个方法只向下遍历，直接子元素可以有多个。
contents()：返回直接子元素文本节点。
find(ele)：返回被选取元素的后代元素，一路向下直到最后一个后代。
siblings()：返回被选元素的所有同胞元素。
next()：返回被选元素的下一个同胞元素。
nextAll()：返回被选元素的所有跟随的同胞元素。
nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素。
closest(ele)：从元素本身开始逐级向上，返回匹配的元素。
prev()：返回被选元素的上一个同胞元素。
prevAll()：返回被选元素的所有前面的同胞元素。
prevUntil()：在范围内往前查找同辈元素。
add()：选取多个指定元素。
first()：返回被选元素的首个元素。
last()：返回被选元素的最后一个元素。
eq(index)：返回被选元素中带有指定索引号的元素。
filter()：规定一个标准，匹配的元素会被返回。
not()：返回不匹配标准的所有元素，与filter()相反。
has(ele)：返回拥有指定元素的元素。
slice(start,len)：截取元素，start为起始位索引，len为截取长度。
map(callback)：将一个jQuery对象转换为另一个jQuery对象。
each(iterator)：遍历元素。
is()：判断，返回布尔值。
end()：回到最近的一次破坏性操作之前。破坏性操作指任何对jQuery对象进行改变的操作，如前面的find()、next()、not()、children()、parent()、not()等。
addBack()：选取元素，包括本身。

其他方法可以查阅API文档。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
	<div class="box">
		<div class="box2">
			<div class="box3">
				<p id="p2">爱江山更爱美人</p>
				<p class="cp1">随遇而安</p>
				<p class="cp2">笑看风云</p>
				<p id="info">时也，命也，非吾所能及也。</p>
				<p class="cp3">何必诗债换酒钱</p>
				<p>一年之计在于春</p>
				<p id="p3">笨鸟要先飞</p>
				<p>一日之计在于晨</p>
				<ul>
					<li>1</li>
					<li>2
						<ul>
							<li>2-1</li>
							<li>2-2</li>
							<li>2-3</li>
						</ul>
					</li>
					<li id="li3">3</li>
				</ul>
			</div>
		</div>
	</div>
<script type="text/javascript" src='./js/demo.js'></script>
</body>
</html>

$(function(){
	// 获取id为info的p元素
	var p =$('#info');
	// 获取直接父元素
	console.log(p.parent());
	// 获取所有父元素
	console.log(p.parents());
	// 范围内选取父元素
	console.log(p.parentsUntil('.box'));
	var box3 = $('.box3');
	// 获取所有直接子元素
	var childrens = box3.children();
	console.log('直接子元素个数：' + childrens.length);
	console.log(childrens);
	// children方法不会返回文本节点
	var p2 = $('#p2');
	console.log(p2.children());
	// 返回文本节点
	console.log(p2.contents());
	// 获取所有子元素，不止是直接子元素
	console.log('class为box3的元素的所有p元素个数：' + box3.find('p').length);
	console.log(box3.find('p'));
	// 返回所有的同胞元素
	console.log(p.siblings());
	// 返回下一个同胞元素
	console.log(p.next());
	// 返回后面的所有同胞元素
	console.log(p.nextAll());
	// 返回后面范围内的所有同胞元素
	console.log(p.nextUntil($('ul')));
	console.log(p.closest($('.box')));
	console.log(p.closest($('.box2')));
	// 返回上一个同胞元素
	console.log(p.prev());
	// 返回前面的所有同胞元素
	console.log(p.prevAll());
	// 返回前面范围内的所有同胞元素	
	console.log(p.prevUntil('.box'));
	// 组合多个指定元素
	console.log($('.cp1').add('.cp2').add('.cp3').add('li'));
	// 返回第一个p元素
	console.log($('P').first().get(0).innerHTML);
	// 返回最后一个p元素
	console.log($('p').last().get(0).innerHTML);
	// 按照索引获取元素
	console.log($('p').eq(2).get(0).innerHTML);
	// 返回匹配规则的所有元素
	console.log($('p').filter('#p2,#p3'));
	// 返回不匹配规则的所有元素
	console.log($('p').not('#p2,#p3'));
	console.log($('li').has('ul').get(0));
	// 返回截取的所以元素
	console.log($('p').slice(0,5));
	// map方法进行转换
	console.log($('p').map(function(index,dom){
		return this.innerText;
	}));
	// each方法遍历元素
	console.log($('li').each(function(index,dom){
		return this.innerText;
	}));
	// 判断是否拥有某个元素
	console.log('子元素中是否有p元素？' + $('.box3').children().is('p'));
	console.log('子元素中是否有a元素？' + $('.box3').children().is('a'));
	// end方法返回到最近一次破坏性方法之前的状态
	$('.box3').find('#info')
	          .css('background','pink').css('fontSize','25px').css('fontWeight','bold')
	          .end()
	          .find('.cp2').add('.cp3')
	          .css('color','red');
	console.log($('.box3').find('#info').end());
	$('#p2').nextUntil('.cp2').addBack()
	        .css('color','blue').css('fontSize','30px').css('fontWeight','30px');
});

在这里插入图片描述

2.10、jQuery操作元素的内容和属性

常用的方法：

text()：设置或返回所选元素的文本内容。
html()：设置或返回所选元素的内容（包括HTML标记）。
val()：设置或返回表单字段的值。
attr()：获取或设置元素的属性值。

测试：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
	<h3>一年始于立春，终于大寒。</h3>
	<p>谷雨马上到了。</p>
	<div>
		<h2>五行八卦十天干十二地支二十四节气。</h2>
	</div>
	<h1></h1>
	输入内容：<input type="text" />&nbsp;
	<button type="submit">提交</button>&nbsp;
	<button type="button" id ='info'/>设置默认值</button>
	<script type="text/javascript" src='./js/demo.js'></script>
</body>
</html>

$(function(){
	var h3 = $('h3');
	var p = $('p');
	// 获取文本内容
	console.log(h3.text());
	console.log(h3.html());
	console.log(p.text());
	console.log(p.html());
	var div = $('div');
	console.log(div.text());
	console.log(div.html());
	// 设置内容文本
	$('h1').text('设置内容设置内容。');
	// 获取文本框内容
	var btn = $('button[type="submit"]');
	btn.click(function(){
	  var input = $('input[type="text"]');
	  console.log('文本框里面的内容：' + input.val());
	});
	// 设置文本框内容
	var btn2 = $('#info');
	btn2.click(function(){
		var input = $('input[type="text"]');
		input.val('默认值');
	});
});

在这里插入图片描述

点击设置默认值按钮：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
	<img src="./images/春天.jpg" alt="春天" id="sp" class="sp" width="400px" height="250px" title="spring" />
<script>
	$(document).ready(function(){
		// 获取属性值
		var img = $('img');
	    console.log('图片路径：' + img.attr('src'));
	    console.log('提示：' + img.attr('alt'));
	    console.log('元素id：' + img.attr('id'));
	    console.log('元素类名：' + img.attr('class'));
	    console.log('图片宽度：' + img.attr('width'));
	    console.log('图片高度：' + img.attr('height'));
	    console.log('标题：' + img.attr('title'));
	    // 设置属性值
	    img.attr('alt','修改的值');
	    img.attr('title','修改的值');
	    console.log('提示：' + img.attr('alt'));
	    console.log('提示：' + img.attr('title'));
	    // 同时设置多个属性值
	    img.attr({
	    	'alt': '修改的值2',
	    	'title': '修改的值2'
	    });
	    console.log('提示：' + img.attr('alt'));
	    console.log('提示：' + img.attr('title'));
	});
</script>
</body>
</html>

在这里插入图片描述

2.11、jQuery操作元素样式

可以通过jQuery来给元素添加或移除class，获取css样式以及设置样式等。常用方法如下：

addClass(name)：添加class。
removeClass(name)：移除class。
hasClass(name)：判断是否有指定class。
toggleClass(names,switchs)：添加/移除之间切换。
css(name)：获取样式值。
css(name,value)：设置样式。
width()：返回元素的宽度（不包括内边距、边框或外边距）。
height()：返回元素的高度（不包括内边距、边框或外边距）。
innerWidth()：返回元素的宽度（包括内边距）。
innerHeight()：返回元素的高度（包括内边距）。
outerWidth()：返回元素的宽度（包括内边距和边框），参数为ture时包括外边距。
outerHeight()：返回元素的高度（包括内边距和边框），参数为ture时包括外边距。
replaceWith(ele)：将指定元素替换成新元素。
replaceAll(ele)：用新元素替换掉指定旧元素。

测试：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<link rel="stylesheet" href="./css/demo.css"/>
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
	<p>Java Web</p>
	<p>Servlet + JSP。</p>
	<button type="button" id="btn">添加样式</button>
	<button type="button" id="btn2">移除样式</button>
	<button type="button" id="btn3">切换</button><br><br>
	<h2 style="color: red;">标题</h2>
	<button type="button" id="btn4">设置样式</button>
	<div class="d1">块儿</div>
	<h3>春去春又回</h3>
	<h3>春去春又回</h3>
	<h3>春去春又回</h3>
	<h4>花谢依旧会开</h4>
	<h4>花谢依旧会开</h4>
</body>
<script type="text/javascript" src="./js/demo.js"></script>
</html>

.sty {
	color: blue;
	font-size: 20px;
	font-weight: bold;
}

.d1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
	padding: 10px;
	margin: 15px;
}

$(function(){
	var btn = $('#btn');
	btn.click(function(){
		// 添加class
		$('p').addClass('sty');
	});
	var btn2 = $('#btn2');
	btn2.click(function(){
		// 移除class
		$('p').removeClass('sty');
	});
	var btn3 = $('#btn3');
	btn3.click(function(){
		// 添加和删除class之间切换
		$('p').toggleClass('sty');
	});	
	// 获取样式
	var h2 = $('h2');
	console.log(h2.css('color'));
	// 设置样式
	var btn4 = $('#btn4');
	btn4.click(function(){
		$('h2').css('color','green')
		       .css('fontStyle','italic')
		       .css('fontSize','30px')
		       .css('fontWeight','bold');
	});	
	var div = $('div');
	// 获取元素的高度、宽度
	console.log('元素的宽度：' + div.width());
	console.log('元素的高度：' + div.height());
	console.log('包含内边距元素的宽度：' + div.innerWidth());
	console.log('包含内边距元素的高度：' + div.innerHeight());
	console.log('包含内边距、边框元素的宽度：' + div.outerWidth());
	console.log('包含内边距、边框元素的高度：' + div.outerHeight());
	console.log('包含内边距、边框、外边距元素的宽度：' + div.outerWidth(true));
	console.log('包含内边距、边框、外边距元素的高度：' + div.outerHeight(true));
	// 元素替换
	$('h3').replaceWith('<h1>行千里，致广大</h1>');
	$('<h1>静默</h1>').replaceAll('h4');
});

在这里插入图片描述
点击添加样式：

点击移除样式：

点击切换：

再点击：

点击设置样式：

2.12、jQuery事件模型

先看DOM的事件模型。

2.12.1、DOM事件模型

（1）0级事件模型

0级事件模型是带有on的事件，比如onclick，onmouseover等。0级事件模型只能添加1个事件处理函数，后面添加的会覆盖掉前面所有的事件处理函数。0级事件模型会发生事件冒泡现象。

测试：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<link rel="stylesheet" href="./css/demo.css"/>
	<!--引入jQuery库文件-->
	<!--
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
	-->
</head>
<body>
    <p id="example">
    	落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。落月随山隐。
    </p>
    <div id="p1">
    	<div id="p1-1">
    		<div id="p1-1-1">
    			<div id="p1-1-1-1">
    				<p>曾在我回忆里的那个人，愿你现在过得幸福安稳。曾在我回忆里的那个人，愿你现在过得幸福安稳。曾在我回忆里的那个人，愿你现在过得幸福安稳。曾在我回忆里的那个人，愿你现在过得幸福安稳。曾在我回忆里的那个人，愿你现在过得幸福安稳。曾在我回忆里的那个人，愿你现在过得幸福安稳。曾在我回忆里的那个人，愿你现在过得幸福安稳。曾在我回忆里的那个人，愿你现在过得幸福安稳。曾在我回忆里的那个人，愿你现在过得幸福安稳。</p>
    			</div>
    		</div>
    	</div>
    </div>
</body>
<script type="text/javascript" src="./js/demo.js"></script>
</html>

在这里插入图片描述

var example = document.getElementById('example');
example.onclick = function(){
	console.log('点击我！');
}

// 后绑定的事件会覆盖掉前面绑定的事件
example.onclick = function(){
	console.log('点击我222！');
}

// DOM 0级事件会发生冒泡现象，从子元素一直触发到父元素
var p1 = document.getElementById('p1');
p1.onclick = function(){
	console.log('点击p1！');
}

var p2 = document.getElementById('p1-1');
p2.onclick = function(){
	console.log('点击p1-1！');
}

var p3 = document.getElementById('p1-1-1');
p3.onclick = function(){
	console.log('点击p1-1-1！');
}

var p4 = document.getElementById('p1-1-1-1');
p4.onclick = function(event){
	console.log('点击p1-1-1-1！');
}

在这里插入图片描述

可以看到，点击子元素，事件会一直触发到父元素，这就是事件的冒泡现象。有两种方法可以防止事件冒泡，如下：
在这里插入图片描述

（2）2级事件模型

addEventListener(eventType,listener,boolean)

2级事件保留了0级事件的冒泡，并且有捕获的功能。参数为false时，只冒泡不捕获，此时与0级事件模型基本相同，参数为true时既冒泡又捕获。

测试：

var example = document.getElementById('example');

// DOM 2级事件，不会发生覆盖
example.addEventListener('click',function(evevt){
	console.log('点击111！');
},false);

example.addEventListener('click',function(evevt){
	console.log('点击222！');
},false);

example.addEventListener('click',function(evevt){
	console.log('点击333！');
},false);

// 2级事件的冒泡和捕获
// 参数为false时只冒泡，不捕获
var p1 = document.getElementById('p1');
p1.addEventListener('click',function(event){
	console.log('点击p1！');
},false);

var p2 = document.getElementById('p1-1');
p2.addEventListener('click',function(event){
	console.log('点击p1-1！');
},false);

var p3 = document.getElementById('p1-1-1');
p3.addEventListener('click',function(event){
	console.log('点击p1-1-1！');
},false);

var p4 = document.getElementById('p1-1-1-1');
p4.addEventListener('click',function(event){
	console.log('点击p1-1-1-1！');
},false);

在这里插入图片描述

// 既冒泡又捕获，只需绑定2次即可，1次参数为false，1次参数为true
// 优先捕获，然后冒泡
var p1 = document.getElementById('p1');

p1.addEventListener('click',function(event){
	console.log('点击p1！');
},false);

var p2 = document.getElementById('p1-1');
p2.addEventListener('click',function(event){
	console.log('点击p1-1！');
},false);

var p3 = document.getElementById('p1-1-1');
p3.addEventListener('click',function(event){
	console.log('点击p1-1-1！');
},false);

var p4 = document.getElementById('p1-1-1-1');
p4.addEventListener('click',function(event){
	console.log('点击p1-1-1-1！');
},false);

p1.addEventListener('click',function(event){
	console.log('点击p1！');
},true);

var p2 = document.getElementById('p1-1');
p2.addEventListener('click',function(event){
	console.log('点击p1-1！');
},true);

var p3 = document.getElementById('p1-1-1');
p3.addEventListener('click',function(event){
	console.log('点击p1-1-1！');
},true);

var p4 = document.getElementById('p1-1-1-1');
p4.addEventListener('click',function(event){
	console.log('点击p1-1-1-1！');
},true);

在这里插入图片描述
可以看到捕获和冒泡同时存在时，优先发生捕获，然后再冒泡。

2.12.2、jQuery事件模型

特点：

提供了统一的事件处理方法。
允许添加多个事件处理函数。
使用标准的事件名称（不带on）。
事件实例作为事件处理函数的第一个参数。
标准化事件实例最常用的属性。
提供了统一的事件取消和阻止默认行为的方法。

语法格式：

on(eventType,[selector],[data],handler)

参数说明：

eventType：事件名称。
[selector]：选择器，可选参数。
[data]：数据，可选参数。
handler：事件处理函数。

测试：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
	<h2>title</h2>
	<div class="item">
	    <p>努力的人不会差到哪里去。</p>
	</div>
	<ul>
		<li class="item1">新闻标题-1</li>
		<li class="item2">新闻标题-2</li>
		<li class="item3">新闻标题-3</li>
		<li class="item4">新闻标题-4</li>
		<li class="item5">新闻标题-5</li>
		<li class="item6">新闻标题-6</li>
		<li class="item7">新闻标题-7</li>
		<li class="item8">新闻标题-8</li>
		<li class="item9">新闻标题-9</li>				
	</ul>
	<div id="p1">
		<div id="p1-1">
			<div id="p1-1-1">
				<div id="p1-1-1-1">
					<p>
						人生短短几个秋啊，不醉不罢休。人生短短几个秋啊，不醉不罢休。人生短短几个秋啊，不醉不罢休。人生短短几个秋啊，不醉不罢休。人生短短几个秋啊，不醉不罢休。人生短短几个秋啊，不醉不罢休。人生短短几个秋啊，不醉不罢休。人生短短几个秋啊，不醉不罢休。人生短短几个秋啊，不醉不罢休。人生短短几个秋啊，不醉不罢休。人生短短几个秋啊，不醉不罢休。
					</p>
				</div>
			</div>
		</div>
	</div>  
</body>
<script type="text/javascript" src="./js/demo.js"></script>
</html>

$(function(){
	// 链式语法绑定多个事件
	$('.item p')
	.on('click',null,null,function(){
		console.log('点击111！');
	})
	// null可省去
	.on('click',function(){
		console.log('点击222！');
	})
	.on('click',function(){
		console.log('点击333！');
	});

	// 中间参数过滤选取子元素
	$('div').on('click','#p1-1',function(){
		console.log('点击p1-1！');
	});

	// 不同状态时绑定不同事件
	$('div')
	.on('click','#p1-1-1',{foo:'bar'},function(event){
		console.log('点击%o',event.data);
	})
	.on('mouseover','#p1-1-1',{foo:'bar'},function(event){
		console.log('鼠标滑过%o',event.data);
	});

	$('li').on('click',function(event){
		console.log('%o选择了该标题（每个子元素绑定事件）！',$(this));
	});

	// 事件的委托
	// 如果每个子元素都需要绑定相同的事件，那么可以将这个事件绑定给直接父元素
	$('ul').on('click',function(event){
		if(event.target){
			console.log('%o选择了该标题（事件委托给父元素）！',$(event.target));
		}
	});

});

事件委托：将子元素要添加的事件委托给其父元素，达到节省开销的目的，简化了过程。
在这里插入图片描述

可以使用stopPropagation()方法来统一防止事件的冒泡。

有冒泡现象，修改：

冒泡现象消失，只有最里层的元素触发事件。除此之外，还可以使用preventDefault()方法来阻止默认行为，使用return false来阻止默认行为和冒泡行为。

jQuery支持的所有事件如下：
在这里插入图片描述

一次事件处理

有时候希望某个事件只触发一次便销毁，这时可以使用jQuery提供的一次性事件处理。语法如下：

one(eventType,[selector],[data],handler);

该事件只会触发一次便被销毁，无法再次触发。如下：

$(function(){
	// 一次性处理事件one
	// 该事件函数只会触发一次便被销毁，不会再触发
	$('.item p').one('click',function(){
		console.log('%o点击！',$(this));
	});
});

事件的移除

可以移除掉不再使用的事件，语法：

off(eventType,[selector],[handler]);

如下：

$(function(){
	
	 var clicked2 =  function(){
	 	console.log('Clicked2！');
	 };

	 $('.item p')
	 .on('click',function(){
	 	console.log('Clicked！');
	 })
	 .on('click',clicked2)
	 .on('click',function(){
	 	console.log('Clicked3！');
	 });


});

在这里插入图片描述
现在3个事件都会触发，下面移除掉其中1个事件。

off和on的用法类似，都可以移除或绑定多个事件。

触发事件

trigger(eventType,[data]);
triggerHandler(eventType,[data]);

triggerHandler对比trigger：

不会触发浏览器默认事件。
不会产生事件冒泡。
只触发jQuery对象集合中第一个元素的事件处理函数。
返回的是事件处理函数的返回值，而不是jQuery对象。

在这里插入图片描述

点击按钮：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<style>
	   .outer{
	      width: 200px;
	      height: 200px;
	      background: green;
	      color: #FFF;
	      padding: 20px;
        }

       .inner{
	      width: 100px;
	      height: 100px;
	      background: orange;
	      padding: 20px;
	      margin: 30px auto;
        }

       #outer1{
	      margin-bottom: 50px;
        }
	</style>
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
	<div class="outer" id="outer1">
		Outer1
		<div class="inner" id="inner1">
			Inner1
		</div>
	</div>
	<div class="outer" id="outer2">
		Outer2
		<div class="inner" id="inner2">
			Inner2
		</div>
	</div>
</body>
<script>
	$(function(){
		function report(event){
			// 阻止冒泡
			event.stopPropagation();
			console.log(event.type + "on" + event.target.id);
		}

	   $('#outer1').on("mouseover mouseout",report);
	   $('#inner1').on("mouseover mouseout",report);
	   //使用hover快捷方法
	   $('#outer2').hover(report);
	   $('#inner2').hover(report);
	});
</script>
</html>

在这里插入图片描述

2.13、jQuery插件机制

jQuery主要有两种使用方式：

在jQuery集合对象上面调用方法。
直接调用jQuery方法。

jQuery的插件机制实质上是在上面两种方式的基础上进行的功能扩展，如下：
扩展jQuery对象上的方法：jQuery.fn.extend()。
扩展jQuery工具方法：jQuery.extend()。

插件的使用很简单，首先，寻找需要用的插件，然后引入jQuery和插件。再阅读插件使用文档，按照要求写JS代码。以下示例几种常用的插件。

chosen表单插件

!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<!--表单插件样式文件-->
	<link href="http://cdn.bootcss.com/chosen/1.8.8.rc6/chosen.css" rel="stylesheet">
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
	<select name="demo" id="demo" style="width: 300px">
		<option value="1">湖北</option>
		<option value="2">湖南</option>
		<option value="3">四川</option>
		<option value="4">重庆</option>
	</select>
	<br><br>
	<select name="demo2" id="demo2" multiple data-placeholder="请选择...">
		<option value="1">湖北</option>
		<option value="2">湖南</option>
		<option value="3">四川</option>
		<option value="4">重庆</option>
	</select>
</body>
<!--表单插件js文件-->
<script src="http://cdn.bootcss.com/chosen/1.8.8.rc6/chosen.jquery.js"></script>
<script>
	$(function(){
		$('#demo').chosen();
		$('#demo2').chosen({
			width: '50%'
		});
	});
</script>
</html>

效果：
在这里插入图片描述

使用插件，表单的样式变得美观，动态效果也不错。

pickadate日期插件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<!--插件样式文件-->
	<link href="http://cdn.bootcss.com/pickadate.js/3.6.4/compressed/themes/default.css" rel="stylesheet">
	<link href="http://cdn.bootcss.com/pickadate.js/3.6.4/compressed/themes/default.date.css" rel="stylesheet">
	<link href="http://cdn.bootcss.com/pickadate.js/3.6.4/compressed/themes/default.time.css" rel="stylesheet">
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
	<input type="text" class="datepicker" placeholder="请选择日期..." />
	<br><br>
	<input type="text" class="timepicker" placeholder="请选择时间..." />
</body>
<!--插件js-->
 <script src="http://cdn.bootcss.com/pickadate.js/3.6.4/compressed/picker.js"></script>
 <script src="http://cdn.bootcss.com/pickadate.js/3.6.4/compressed/picker.date.js"></script>
 <script src="http://cdn.bootcss.com/pickadate.js/3.6.4/compressed/picker.time.js"></script>
 <script src="http://cdn.bootcss.com/pickadate.js/3.6.4/compressed/translations/zh_CN.js"></script>
<script>
	$(function(){
		var $input = $('.datepicker').pickadate();
        $('.timepicker').pickatime();
		var picker = $input.pickadate('picker');
		// 链式语法
		picker.on({
			open: function(){
				console.log('open！');
			},
			close:function(){
				console.log('close！');
			},
			render: function(){
				console.log('render！');
			}
		});
	});
</script>
</html>

效果：
在这里插入图片描述

slick插件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<style>
		.panel {
			width: 300px;
			margin: 50px 0 0 50px;
			line-height: 1.8;
			text-align: center;
			font-size: 20px;
			color: #fff;
			box-shadow: 0 0 10px #999;
		}

		.title {
			background: #c7731f;
		}

		h1 {
			margin: 0;
			padding: 0;
		}

		.body {
			padding: 30px 10px;
			background: #5298c7;
		}

		img {
			width: 500px;
			height: 300px;
		}

	</style>
	<!--插件样式文件-->
	<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
	<div class="panel">
		<div class="title">
			<h1>唐诗一首</h1>
		</div>
		<div class="body">
		<p>
			前尘往事断肠诗，<br/>
			侬为君痴君不知。<br/>
			莫道世界真意少，<br/>
			自古人间多情痴。<br/>
		</p>
		</div>
	</div><br><br>
	<!--有些插件的使用，需要有特定的HTML结构，如slick插件-->
	<div class="your-class">
		<div><img src="./images/春天.jpg" alt="春天"></div>
		<div><img src="./images/夏天.jpg" alt="夏天"></div>
		<div><img src="./images/冬天.jpg" alt="冬天"></div>
	</div>
</body>
<!--插件js-->
<script src="./plugins/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script>
	$(function(){
		$('.title').click(function(){
			$(this).siblings('.body').slideUp(2000,'easeInOutCirc');
		});

		$('.your-class').slick({
			dots: true,
			infinite: true,
			speed: 300,
			slidesToShow: 1,
			adaptiveHeight: true
		});
	});
</script>
</html>

在这里插入图片描述
点击标题：

点击圆点切换图片：

Magnific-Popup图片插件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<!--插件样式文件-->
	<link href="https://cdn.bootcss.com/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" />
	<link rel="stylesheet" href="./css/demo.css" />		
	<!--引入jQuery库文件-->
	<script type="text/javascript" src='https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
	<a href="./images/春天.jpg" class="a1">
		<img src="./images/春天.jpg" alt="春天" width="100px" height="100px"/>
	</a>
	<a href="./images/夏天.jpg" class="a2">
		<img src="./images/夏天.jpg" alt="夏天" width="100px" height="100px"/>
	</a>
	<a href="./images/冬天.jpg" class="a3">
		<img src="./images/冬天.jpg" alt="冬天" width="100px" height="100px"/>
	</a>
</body>
<!--插件js-->
<script type="text/javascript" src='./js/demo.js'></script>
<script type="text/javascript" src='https://cdn.bootcss.com/magnific-popup.js/1.1.0/jquery.magnific-popup.js'>
</script>
</html>

.mfp-no-margins img.mfp-img {
	padding: 0;
}

.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
 }

 .mfp-no-margins .mfp-container {
     padding: 0;
 }

 .mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
	opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
	opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}

$(document).ready(function() {

	$('.a1').magnificPopup({
		type: 'image',
		closeOnContentClick: true,
		mainClass: 'mfp-img-mobile',
		image: {
			verticalFit: true
		}		
	});

	$('.a2').magnificPopup({
		type: 'image',
		closeOnContentClick: true,
		image: {
			verticalFit: false
		}
	});

	$('.a3').magnificPopup({
		type: 'image',
		closeOnContentClick: true,
		closeBtnInside: false,
		fixedContentPos: true,
		mainClass: 'mfp-no-margins mfp-with-zoom', 
		image: {
			verticalFit: true
		},
		zoom: {
			enabled: true,
			duration: 300 
		}
	});

});

在这里插入图片描述
点击任意一张图片：

2.14、jQuery弹出层示例

使用场景如下：

注册、登录。
统一的消息提示框。
减少页面跳转、刷新的一些操作。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<link rel="stylesheet" href="./css/demo.css" />		
</head>
<body>
	<div class="header">
		<div class="banner">
			<img src="./images/熊猫.jpg" alt="">
			<span><a href="#">实战</a></span>
			<span><a href="#">路径</a></span>
			<span><a href="#">猿问</a></span>
			<span><a href="#">手记</a></span>
		</div>
		<div class="demo">
			<a href="#" id="loginLink">登录</a>
			<a href="#" id="regLink">注册</a>
		</div>
	</div>
	<div class="swipe">
		<div class="nav">
			<div class="item">
				<div class="title">前端开发</div>
				<p>
					<span>HTML&nbsp;/&nbsp;CSS</span>
					<span>JavaScript</span>
					<span>HTML5</span>
				</p>
			</div>
			<div class="item">
				<div class="title">后端开发</div>
				<p>
					<span>PHP&nbsp;/&nbsp;NodeJS</span>
					<span>Javat</span>
					<span>C##</span>
				</p>				
			</div>
			<div class="item">
				<div class="title">移动开发</div>
				<p>
					<span>Android</span>
					<span>IOS</span>
					<span>CoCos2D-X</span>
				</p>				
			</div>
			<div class="item">
				<div class="title">数据开发</div>
				<p>
					<span>MySQL</span>
					<span>Oracle</span>
					<span>sql&nbsp;server</span>
				</p>				
			</div>
		</div>
		<div class="ppt first"></div>
	</div>
	<div class="lessions">
		<p class="title">❤ 热门课程</p>
		<ul>
			<li>
				<img src="./images/t004.jpg"/>
				<p>JavaScript快速入门</p>
			</li>
			<li>
			    <img src="./images/t005.jpg"/>
				<p>玩转PhotoShop</p>
			</li>
			<li>
				<img src="./images/t006.jpg"/>
				<p>代码编写规范</p>
			</li>
			<li style="margin-right:0;">
				<img src="./images/t004.jpg"/>
				<p>JavaScript快速入门</p>
			</li>
			<li>
			    <img src="./images/t005.jpg"/>
				<p>玩转PhotoShop</p>				
			</li>
			<li>
				<img src="./images/t006.jpg"/>
				<p>代码编写规范</p>				
			</li>
			<li>
				<img src="./images/t004.jpg"/>
				<p>JavaScript快速入门</p>				
			</li>
			<li style="margin-right: 0;">
			    <img src="./images/t005.jpg"/>
				<p>玩转PhotoShop</p>					
			</li>
		</ul>		
	</div>
	<div class="lessions">
		<p class="title">☆ 最新发布</p>
		<ul>
			<li>
				<img src="./images/t004.jpg">
				<p>JavaScript快速入门</p>
			</li>
			<li>
				<img src="./images/t005.jpg">
				<p>玩转Photoshop</p>
			</li>
			<li>
				<img src="./images/t006.jpg">
				<p>代码编写规范</p>
			</li>
			<li style="margin-right:0;">
				<img src="./images/t004.jpg">
				<p>JavaScript快速入门</p>
			</li>
			<li>
				<img src="./images/t005.jpg">
				<p>玩转Photoshop</p>
			</li>
			<li>
				<img src="./images/t006.jpg">
				<p>代码编写规范</p>
			</li>
			<li>
				<img src="./images/t004.jpg">
				<p>JavaScript快速入门</p>
			</li>
			<li style="margin-right:0;">
				<img src="./images/t005.jpg">
				<p>玩转Photoshop</p>
			</li>
		</ul>		
	</div>
	<div class="footer">
		<div class="site">
			<span>关于我们</span>
			<span>人才招聘</span>
			<span>讲师招募</span>
			<span>联系我们</span>
			<span>意见反馈</span>
			<span>友情链接</span>
		</div>
		<div class="author">
			 &copy;2016 xxx.com  京ICP备33333333号
		</div>		
	</div>
	<!--弹出层遮罩-->
	<div class="layer-mask" id="layer-mask"></div>
	<!--弹出层窗体-->
	<div class="layer-pop" id="layer-pop">
		<!--弹出层关闭按钮-->
		<div class="layer-close" id="layer-close"></div>
		<!--弹出层内容区域-->
		<div class="layer-content" id="layer-content">
			<!--登录窗体-->
			<div class="login">
				<h4 class="title">登录</h4>
				<div class="item">
					<label>账号</label>
					<input type="text" id="username" class="input" name="username"/>
					<p class="error-msg"></p>
				</div>
				<div class="item">
					<label>密码</label>
					<input type="password" id="password" class="input" name="password"/>
				</div>
				<div class="item">
					<input type="submit" id="loginSubmitbtn" class="submit" name="password" value="填写完毕"/>
				</div>
			</div>
		</div>		
	</div>
</body>
<script type="text/javascript" src='./js/jquery-3.4.1.min.js'></script>
<script type="text/javascript" src='./js/demo.js'></script>
</script>
</html>

@charset 'utf-8';

* {
     margin: 0;
     padding: 0;
}

body {
     text-align: center;
     line-height: 30px;
     font: 14px/1.5 "微软雅黑",Verdana,Tahoma,Arial,sans-serif,"宋体";
}

.header {
     height: 80px;
     line-height: 80px;
     text-align: center;
     margin: 0 20px;
     overflow: hidden;
}

.header .banner {
     float: left;
}

.header .demo {
     float: right;
}

.header .banner img {
     left: 0;
     width: 150px;
     position: relative;
     vertical-align: middle;
     margin-right: 40px;
}

.header .banner span {
     font-size: 18px;
     line-height: 80px;
     margin: 0 15px;
}

.header a {
     color: #666;
     text-decoration: none;
     margin-left: 20px;
}

.swipe {
     width: 1200px;
     height: 450px;
     margin: 0 auto;
     overflow: hidden;
}

.swipe .ppt {
     width: 100%;
     height: 100%;
}

.swipe .first {
     background: url(../images/t001.jpg);
     background-size: cover;
}

.nav {
     width: 280px;
     height: 450px;
     background: #000;
     position: absolute;
     color: #fff;
     opacity: 0.5;
}

.nav .item {
     text-align: left;
     padding: 10px;
     margin: 5px 20px;
     border-bottom: 1px solid #aaa;
}

.nav .item:hover {
     background: #666;
     cursor: pointer;
}

.nav .item .title {
     font-size: 16px;
     margin-top: 10px;
}

.nav .item span {
     margin-right: 9px;
}

.lessions {
     width: 1200px;
     margin: 0 auto;
}

.lessions .title {
     font-size: 16px;
     line-height: 45px;
     text-align: left;
     color: #666;
     margin-top: 30px;
}

.lessions ul {
     overflow: hidden;
}

.lessions li {
     width: 23%;
     float: left;
     margin-top: 32px;
     margin-right: 32px;
}

.lessions li img {
     max-width: 100%;
}

.footer {
     background: #eee;
     padding: 50px 0;
     margin-top: 50px;
     border-top: 1px solid #ddd;
}

.footer .site {
     line-height: 100px;
}

.footer .site span {
     margin: 0 20px;
     color: #888;
}

ul,li {
     list-style: none;
}

.layer-mask {
     width: 100%;
     height: 100%;
     background: #000;
     position: fixed;
     top: 0;
     left: 0;
     opacity: 0.5;
     z-index: 999;
     display: none;
}

.layer-pop {
     width: 400px;
     height: 300px;
     background: #fff;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     z-index: 1000;
     display: none;
}

.layer-close {
     width: 24px;
     height: 24px;
     line-height: 24px;
     background: #eee;
     text-align: center;
     float: right;
     margin-top: -12px;
     margin-right: 12px;
     border: 3px solid #fff;
     border-radius: 50%;
}

.layer-close:hover {
     background: #ccc;
     color: #fff;
     cursor: pointer;
}

.login h4 {
     font-size: 20px;
     line-height: 50px;
}

.login label {
     width: 60px;
     text-align: right;
     color: #888;
     margin-right: 5px;
     display: inline-block;
}

.login .input {
     width: 250px;
     padding: 10px 5px;
     border: 1px solid #ccc;
     border-radius: 3px;
}

.login .item {
     margin: 20px auto;
}

.login .submit {
     width: 250px;
     background: #e40;
     color: #fff;
     float: right;
     padding: 10px 5px;
     margin-right: 54px;
     border: 1px solid #e40;
     border-radius: 5px;
}

.login .error-msg{
     color: #e40;
}

在这里插入图片描述

点击右上角的登录：

这个就是弹出层的简单应用，可以点击关闭掉。

2.15、jQuery瀑布流示例

瀑布流即瀑布流式布局。是一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此种布局的网站是Pinterest，并逐渐在国内流行开来。

应用场景：

电商导购
兴趣图谱分享
细节垂直领域
服装款式设计资讯平台

特点：

满目：正版以图片为主，大小不一的图片按照一定的规律排列。
图片：图片风格以唯美为主题。
操作简单：在浏览网站的时候只需要轻轻滑动鼠标滚轮，图片呈现在眼前。

布局优势：

有效降低界面复杂度，节省空间，不需要臃肿复杂的页码导航链接或按钮。
对触屏设备来说，交互方式更符合直觉。在移动应用的交互环境中，通过向上滑动滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远低于点击链接或按钮。
更高的参与度。以上两点带来的交互便捷性可以使用户将注意力更多的集中在内容上而不是操作上，是用户的浏览体验更佳。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试</title>
	<link rel="stylesheet" href="./css/demo.css" />		
</head>
<body>
	<div class="wrap" id="wrap">
	    <div><img src="./images/云南十八怪/001.jpg"/><a href="#">第一怪 竹筒当烟袋</a></div>
		<div><img src="./images/云南十八怪/002.jpg"/><a href="#">第二怪 草帽当锅盖</a></div>
		<div><img src="./images/云南十八怪/003.jpg"/><a href="#">第三怪 这边下雨那边晒</a></div>
		<div><img src="./images/云南十八怪/004.jpg"/><a href="#">第四怪 四季服装同穿戴</a></div>
		<div><img src="./images/云南十八怪/005.jpg"/><a href="#">第五怪 火车没有汽车快</a></div>
		<div><img src="./images/云南十八怪/006.jpg"/><a href="#">第六怪 火车不通国内国外</a></div>
		<div><img src="./images/云南十八怪/007.jpg"/><<a href="#">第七怪 老奶爬山比猴快</a></div>
		<div><img src="./images/云南十八怪/008.jpg"/><a href="#">第八怪 鞋子后面多一块</a></div>
		<div><img src="./images/云南十八怪/009.jpg"/><a href="#">第九怪 脚趾四季露在外</a></div>
		<div><img src="./images/云南十八怪/010.jpg"/><a href="#">第十怪 鸡蛋拴着卖</a></div>
		<div><img src="./images/云南十八怪/011.jpg"/><a href="#">第十一怪 粑粑叫饵块</a></div>
		<div><img src="./images/云南十八怪/012.jpg"/><a href="#">第十二怪 花生蚕豆数着卖</a></div>
		<div><img src="./images/云南十八怪/013.jpg"/><a href="#">第十三怪 三个蚊子一盘菜</a></div>
		<div><img src="./images/云南十八怪/014.jpg"/><a href="#">第十四怪 四个竹鼠一麻袋</a></div>
		<div><img src="./images/云南十八怪/015.jpg"/><a href="#">第十五怪 树上松毛扭着卖</a></div>
		<div><img src="./images/云南十八怪/016.jpg"/><a href="#">第十六怪 姑娘叫老太</a></div>
		<div><img src="./images/云南十八怪/017.jpg"/><a href="#">第十七怪 小和尚可以谈恋爱</a></div>
		<div><img src="./images/云南十八怪/018.jpg"/><a href="#">第十八怪 背着娃娃再恋爱</a></div>
	</div>
</body>
<script type="text/javascript" src='./js/jquery-3.4.1.min.js'></script>
<script type="text/javascript" src='./js/demo.js'></script>
</script>
</html>

* {
     margin: 0;
     padding: 0;
     border: 0;
}

body {
     background: #ddd;
}

img {
     border: none;
}

a {
     text-decoration: none;
     color: #444;
}

a:hover {
     color: red;
}

.wrap {
      width: auto;
     height: auto;
     position: relative;
     margin: 0 auto;
}

.wrap div {
     width: 280px;
     height: auto;
     background: #fff;
     float: left;
     margin: 10px;
     padding: 10px;
     border-radius: 5px;
     box-sizing: border-box;
}

.wrap div img {
     width: 100%;
}

.wrap div a {
     font-size: 18px;
     font-weight: bold;
     line-height: 40px;
     text-align: center;
     display: block;
}

// json数据
var data = [{
  "src":"001.jpg",
  "title":"第一怪 竹筒当烟袋"
},{
  "src":"002.jpg",
  "title":"第二怪 草帽当锅盖"
},{
  "src":"003.jpg",
  "title":"第三怪 这边下雨那边晒"  
},{
  "src":"004.jpg",
  "title":"第四怪 四季服装同穿戴"  
},{
  "src":"005.jpg",
  "title":"第五怪 火车没有汽车快"  
},{
  "src":"006.jpg",
  "title":"第六怪 火车不通国内国外"  
},{
  "src":"007.jpg",
  "title":"第七怪 老奶爬山比猴快"  
},{
  "src":"008.jpg",
  "title":"第八怪 鞋子后面多一块"  
},{
  "src":"009.jpg",
  "title":"第九怪 脚趾四季露在外"  
},{
  "src":"010.jpg",
  "title":"第十怪 鸡蛋拴着卖"  
},{
  "src":"011.jpg",
  "title":"第十一怪 粑粑叫饵块"  
},{
  "src":"012.jpg",
  "title":"第十二怪 花生蚕豆数着卖"  
},{
  "src":"013.jpg",
  "title":"第十三怪 三个蚊子一盘菜"  
},{
  "src":"014.jpg",
  "title":"第十四怪 四个老鼠一麻袋"  
},{
  "src":"015.jpg",
  "title":"第十五怪 树上松毛扭着卖"  
},{
  "src":"016.jpg",
  "title":"第十六怪 姑娘叫老太"  
},{
  "src":"017.jpg",
  "title":"第十七怪 小和尚可以谈恋爱"  
},{
  "src":"018.jpg",
  "title":"第十八怪 竹筒当烟袋"  
}];

var waterfall = function(wrap,boxes){
	// 获取屏幕可现实列数
	var boxWidth = boxes.eq(0).width() + 40; // 显示图片的每列宽度
	var windowWidth = $(window).width(); // 屏幕宽度
	var cols = Math.floor( windowWidth / boxWidth);//列数
	// 设置容器的宽度
	wrap.width(boxWidth * cols);

	// 定义数组，存储每列高度
	var everyHeight = new Array();
	for(var i=0;i<boxes.length;i++){
		// 如果索引小于列数
		if(i<cols){
			everyHeight[i] = boxes.eq(i).height() + 40;
		} else { // 如果索引不小于列数
			// 获取最小列高度
			var minHeight = Math.min.apply(null,everyHeight);
			// 最小列高度索引
			var minIndex = getIndex(minHeight,everyHeight);
			// 设置盒子样式
			setstyle(boxes.eq(i),minHeight,boxes.eq(minIndex).position().left,i);
			// 更新最小列高度
			everyHeight[minIndex] += boxes.eq(i).height() + 40; 
		}
		// 鼠标滑过图片时，显示为半透明效果
		boxes.eq(i).hover(function(event){
			$(this).stop().animate({
				'opacity': '0.5'
			},500);
		},function(event){
			$(this).stop().animate({
				'opacity': '1'
			},1000);
		});
	}
};

// 追加盒子的样式
var getStartNumber = 0;
var setstyle = function(box,top,left,index){
	if(getStartNumber >= index){
		return false;
	}
	box.css({
          'position':'absolute',
          'top':top,
          'left':left,
          'opacity':'0'		
      }).stop().animate({
      	'opacity':'1'
      },2000);
      getStartNumber = index;
};

// 数据校验
var getCheck = function(wrap){
	// 获取文档高度
	var documentHeight = $(window).height();
	// 获取文档向上滚动的高度
	var scrollHeight = $(window).scrollTop();
	// 获取最后一个盒子所在列的高度
	var boxes = wrap.children('div');
	var lastBoxTop = boxes.eq(boxes.length-1).offset().top;
	var lastHeight = boxes.eq(boxes.length-1).height() + 20;
	var lastColHeight = lastBoxTop + lastHeight;
	return documentHeight + scrollHeight >=lastColHeight ? true : false;
};

// 追加盒子
var appendBox = function(wrap){
	if(getCheck(wrap)){
		for(i in data){
			var innerString = '<div><img src="images/云南十八怪/' + data[i].src + '"/><a href="#">' + data[i].title + '</a></div>';
		    wrap.append(innerString);
		}
	}else {
		return false;
	}
	waterfall(wrap,wrap.children('div'));
};

// 获取最小高度的索引
function getIndex(minHeight,everyHeight){
	for(index in everyHeight){
		if(everyHeight[index] == minHeight){
			return index;
		}
	}
}

$(document).ready(function(event){
	// 获取容器
	var wrap = $('#wrap');
	// 获取盒子
	var boxes = $('#wrap').children('div');
	// 盒子加载
	waterfall(wrap,boxes);
	// 滚动事件，追加盒子
	$(this).scroll(function(event){
		appendBox(wrap,boxes);
	});
});

效果：
在这里插入图片描述

这个页面永远也到不了底部，当滚轮滑动到最后一张图片，底部会继续从数据列表中加载，也就是不断的在底部加载图片。这种布局的关键是追加的条件，最后一个盒子的top值+其高度 < document高度值+滚动条滚动的值。

我愿成为你头顶的云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery相关

JQuery相关1、前言1、前言如果我们单纯的使用原生的JavaScript的话，会发现，有些操作会很麻烦，也很繁琐，比如通过id、class、标签等来获取元素，原生的JS语句如下：只是获取dom元素而已，就要写一长串单词，每次都这样获取总感觉有点大材小用。原生JS写Ajax请求就更加麻烦了，一大堆的代码，在开发中几乎都是Ajax请求从后端获取数据，如果每个Ajax请求都要这样，开发的人会很抓狂，当然你可以将这些通用的代码自己通过函数封装起来使用，这样会简便很多，但是我们自己写的封装往往...
复制链接

扫一扫

专栏目录