jQuery学习笔记（一）简介、作用、目的、兼容性、引入使用、书写格式、小案例

本文链接：https://blog.youkuaiyun.com/qq_18404993/article/details/105115282

文章目录

1 什么是jQuery?
2.jQuery的作用
3.jQuery的目的
4.jQuery的版本和兼容性
5.使用jQuery
6.一个小案例

1 什么是jQuery?

**jQuery是一个快速、小巧且功能丰富的Javascript库。**它使得HTML文档的遍历和操作、时间处理、动画和Ajax等操作变得简单，并提供了一个易用的API，可以跨多种浏览器工作。jQuery集多功能性和可扩展性于一身，改变了数百万人编写Javascript的方式。
“Write less,do more!”

2.jQuery的作用

HTML元素选取
HTML元素操作
CSS操作
HTML时间函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities

3.jQuery的目的

化大为小，化繁为简

4.jQuery的版本和兼容性

jQuery1.x.x/jQuery2.x.x/jQuery2.x.x
IE 6/7/8 兼容的最高版本为1.9.1

5.使用jQuery

5.1 jQuery引入

<script type="text/javascript" src="js/jquery.js"></script>

5.2 $符号

jQuery把所有功能全部封装在一个全局变量jQuery中，而$符号也是一个合法的变量名，它是变量jQuery的别名。

jQuery = function jQuery(arg){
	alert(arg);
}
$ = window.jQuery = jQuery;

window.jQuery;//jQuery(selector,context)
window.$;//jQuery(selector,context)
$ === jQuery;//true
typeof($);//'function'

5.3 jQuery的书写格式

5.3.1 原始格式

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

例：

$(document).ready(function(){
		$('div').addClass('div');
});

5.3.2 缩写格式

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

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

5.3.3 原生格式

window.onload(){
	......
}

6.一个小案例

在这里插入图片描述
点击上方按钮切换图片

<!DOCTYPE html>
<html>
<head>
	<title>jQuery</title>
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		//jQuery内容
		$(document).ready(function(){
			$('a').click(function(){
				$('img')
				.eq($(this).index())
				.css({'opacity':'1'})
				.siblings()
				.css({'opacity':'0'});
			});
		});
	</script>
	<style>
		*{
			margin: 0;
			padding: 0;
			border:none;
		}
		a{
			text-decoration:none;
			color: black;
		}
		body{
			height:100%;
			background-color: #93b3c6;
			overflow:hidden;
		}
		span{
			display: block;
			height: 16px;
			width: 16px;
			margin: 36px auto 40px;
			border-radius: 50%;
			background-color: #fff;s
		}
		nav{
			position: relative;
			display: flex;
			width:800px;
			margin: 0 auto 45px;
			justify-content: space-between;
		}
		nav:before{
			position: absolute;
			top:20px;
			width: 100%;
			height: 10px;
			background:#fff;
			display: block;
			content: '';
			z-index: -1;
		}
		nav > a{
			position: relative;
			font-size: 20px;
			padding: 10px;
			border:2px solid #5395b4;
			background-color: #fff;
			width: 50px;
			text-align: center;
		}
		div{
			width:800px;
			height:520px;
			margin: 0 auto;
			background-color: #fff;
			padding: 10px;
			box-shadow: 0 0 30px 0 rgb(8,1,3,0.3);
			overflow: hidden;
			position: relative;
		}
		div > img{
			width:800px;
			height:520px;
			position: absolute;
			top:0;
			right:0;
			bottom:0;
			left:0;
			margin: auto;
		}
	</style>
</head>
<body>
<span></span>
<nav>
	<a href="#">1</a>
	<a href="#">2</a>
	<a href="#">3</a>
	<a href="#">4</a>
	<a href="#">5</a>
	<a href="#">6</a>
</nav>
<div>
	<img src="http://android.tgbus.com/download/UploadFiles_2115/201205/20120519153246972.jpg">
	<img src="http://file.mumayi.com/forum/201401/16/231735cfp4046206r4i705.jpg">
	<img src="http://cdn.duitang.com/uploads/item/201211/21/20121121100635_yPV3U.jpeg">
	<img src="http://attach.bbs.miui.com/forum/201304/25/195151szk8umd8or8fmfa5.jpg">
	<img src="http://attach.bbs.miui.com/forum/201205/03/0141439qhd0cq600q1j0g0.jpg">
	<img src="http://attachments.gfan.com/forum/attachments2/201301/29/125722eh9nj87bq20eq2e8.jpg">
</div>
</body>
</html>

其中用到了css()方法，具体用法如下：

var alinks = $('a');
for(var i = alinks.length-1;i>=0;i--){
	alinks.eq(i).css({
		'background':'red',
		'border':'5px solid yellow',
		'color':'#fff'
	});
}

在这里插入图片描述
其中用到了text()方法，具体用法如下：

var alinks = $('a');
for(var i = alinks.length-1;i>=0;i--){
	alinks.eq(i).css({
		'background':'red',
		'border':'5px solid yellow',
		'color':'#fff'
	}).text('美图'+i);
}

在这里插入图片描述
其中用到了html()方法，具体用法如下：

var alinks = $('a');
for(var i = alinks.length-1;i>=0;i--){
	alinks.eq(i).css({
		'background':'red',
		'border':'5px solid yellow',
		'color':'#fff'
	}).html('<strong>丑图</strong>'+i);
}

在这里插入图片描述