jQuery

jQuery是一个快速和简洁的JavaScript库, 并且在不同浏览器上的兼容表现非常好.

它封装了JavaScript常用的DOM操作, 样式渲染, 事件处理, 动画设计和Ajax交互.

使用jQuery库时, 最好使用以下规范.

jQuery对象对应的变量应以$开头, 用于区分DOM对象.

尽量使用ID选择器(效率最高)以及逐渐缩小范围的复合选择器.

避免创建过多的jQuery对象, 推荐使用连缀写法.

长字符串处理时, 可以利用数组和join方法的配合来提高使用+拼接字符串的效率.

进行节点操作时, 尽量使用JavaScript的原生方法.

使用prop获取/设置元素的固有属性, 而attr用来获取/设置元素的自定义属性.

Ajax因为跨域的问题, 必须要有HTTP服务器存在的情况下才能进行本地测试.

选择器与对象

选择器

jQuery支持大量的CSS选择器, 并新增了它自己独有的过滤选择器和表单选择器

扫描二维码关注公众号，回复： 131327 查看本文章

选择器用来选择符合条件的DOM节点, 并把这些节点包装成jQuery对象集合.

它支持的CSS选择器包括基础选择器, 属性选择器, 复合选择器, 高级选择器和动态选择器.

但不支持文本选择器和状态选择器.

过滤选择器

索引过滤器选择器

:first, :last: 匹配的第一个/最后一个元素
:odd, :even: 匹配索引为奇数/偶数的元素
:eq(n), :gt(n), :lt(n): 匹配索引等于/大于/小于 n的元素

匹配第一个元素, 索引为奇数的元素以及索引为4的元素.(索引从0 开始)

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
	<script src="jquery.js"></script>
</head>
<body>
	<div>DIV1</div>
	<div>DIV2</div>
	<div>DIV3</div>
	<div>DIV4</div>
	<div>DIV5</div>
	<script>
		$('div:first').css('color', 'purple');
		$('div:odd').css('color', 'orange');
		$('div:eq(4)').css('color', 'blue');
	</script>
</body>
</html>

条件过滤选择器

:header: 匹配所有标题元素(h1~h6元素)
:animated: 匹配所有正在执行动画效果的元素
:contains(text): 匹配包含文本text的元素
:has(selector): 匹配含有选择器所匹配的元素的元素
:parent: 匹配含有子元素或者文本的元素
:hidden:匹配所有不可见或者type为hidden的元素
:visible: 匹配所有的可见元素

过滤选择器测试例子

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
	<script src="jquery.js"></script>
</head>
<body>
	<h1>Header 1</h1>
	<h2>Header 2</h2>
	
	<div>C</div>
	<div hidden>C++</div>
	<div>C#</div>
	<div>Java</div>

	<div>DIV
		<p></p>
	</div>

	<script>
        $(':header').css('color', 'orange');

        $('div:contains(C)').css('color', 'blue');

        $('div:has(p)').css('color', 'purple');

        // 显示不可见的元素
        $('div:hidden').show();
	</script>
</body>
</html>

表单选择器

:input: 选择所有input元素
:TYPE: 根据type属性来选择input元素, 有如下几个选择器.

:text :password :radio :checkbox :submit :image :reset :button :file

:selected: 选择所有被选中的option元素

jQuery对象

jQuery对象是DOM对象的包装对象.

jQuery对象与DOM对象的互相转换

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
  	<script src="jquery.js"></script>
</head>
<body>
	<p id="dom">P</p>
	<div>DIV1</div>
  	<div>DIV2</div>
	<script>
		// 单个DOM节点的情况
		var dom = document.getElementById('dom');
		var $dom = $('#dom');
		// DOM对象转jQuery对象(jQuery对象不能通过===判断相等, 只能通过它包装的DOM对象来判断.)
		console.log($(dom)[0] === $dom[0]);
		// jQuery对象转DOM对象
		console.log($dom[0] === dom);

		console.log('=========sep=========');

		// 多个DOM节点的情况, jQuery对象和DOM对象很相似.
		var divs = document.getElementsByTagName('div');
		var $divs = $('div');
		
		for (var i = 0; i < divs.length; i++) {
			console.log($divs[i] === divs[i]);
		}
		// 另一种取DOM节点的方法(效率较低)
		$divs.each(function() {
			console.log(this);
		});
	</script>
</body>
</html>

jQuery对象也有length属性, 作用是返回它包含的DOM节点的数目.

jQuery对象的常用方法

get: 根据索引获取DOM对象
eq: 根据索引获取jQuery对象
index: 获取jQuery对象或它包装的DOM对象的索引值
toArray: 将jQuery对象转换为DOM对象的数组
data: 在jQuery对象上获取/存放键值对
removeData: 在jQuery对象上移除键值对
each: 为每个DOM对象执行回调函数

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
    <script src="jquery.js"></script>
</head>
<body>
	<div>DIV1</div>
	<div class="test">DIV2</div>
	<div>DIV3</div>
	<script>
		var $divs = $('div');

		// get和eq方法
		var dom = $divs.get(1);
		var $dom = $divs.eq(1);

		console.log(dom === $dom[0]);

		// filter方法
		var $test = $divs.filter('.test');
		console.log($test[0]);

		// index方法
		var domIndex = $divs.index(dom);
		var jQueryIndex = $dom.index();
		console.log('dom-index:' + domIndex);
		console.log('jQuery-index:' + jQueryIndex);

		// toArray方法
		var arr = $divs.toArray();
		for (var i = 0; i < arr.length; i++) {
			console.log(arr[i]);
		}
	</script>
</body>
</html>

属性与样式

从这一节开始, 将jQuery对象所包装的DOM对象称为元素.

获取时只能获取第一个元素的特性, 而设置时可以设置所有元素的特性

属性

attr, prop: 获取/设置元素的属性值(可以传入对象以键值对的形式设置)
removeAttr, removeProp: 删除元素的属性

其中attr不支持元素的默认属性, prop不支持元素的自定义属性.

类

addClass, removeClass: 为元素添加/删除一个类
hasClass: 匹配的元素集合中至少包含一个拥有指定class的元素时返回true
toggleClass: 若存在指定类, 则删除指定类, 若不存在指定类, 就添加指定类.

其他

text: 获取/设置元素的文本(text是个例外, 在获取时会获取所有元素的文本拼接结果.)
val: 获取/设置元素的value属性(val属性还能为单选按钮, 复选按钮, 下拉列表指定值.)
html: 获取/设置元素的HTML内容

基础样式

css: 获取/设置元素的CSS样式(可以传入对象以键值对的形式设置)

定位

offset: 获取/设置元素在当前窗口的相对偏移(top和left)
position: 获取元素在相对于父元素的相对偏移(top和left)
offsetParent: 获取最近的被定位过的祖先元素
scrollTop, scrollLeft: 获取/设置元素滚动条的位置(距离顶部[距离左侧])

高宽

height, width: 获取/设置高度[宽度]值
innerHeight, innerWidth: 获取/设置内部高度[宽度]值
outerHeight, outerWidth: 获取/设置外部高度[宽度]值

内部高度[宽度]: 包括padding, 但不包括border的高度[宽度].

外部高度[宽度]: 包括padding和border的高度[宽度].

利用连缀设置div元素的样式并添加一个title属性

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
	<script src="jquery.js"></script>
</head>
<body>
	<div></div>
	<script>
		var $div = $('div');

		$div.width(400).height(400).css({
			'background-color': 'orange',
			'color': 'blue',
			'margin': '0 auto',
		}).text('Hello jQuery');

		$div.prop('title', 'this is a div !');
	</script>
</body>
</html>

节点与筛选

使用jQuery来操作DOM元素(节点)的效率不高, 应尽量避免使用过多.

节点处理

内部插入

append, prepend: 将节点作为后置/前置子节点追加到元素中
appendTo, prependTo: 将元素作为后置/前置子节点追加到指定的节点中

外部插入

after, before: 将节点作为后置/前置节点插入到元素的后面/前面
insertAfter, insertBefore: 把元素作为后置/前置节点插入到另一个指定的元素集合的后面/前面

包裹

wrap: 将元素用其他元素包裹起来
wrapAll: 将所有匹配的元素用一个元素包裹起来
wrapInner: 将元素的子内容用其他元素包裹起来
unwrap: 将元素的父级元素删除

替换

replaceWith: 将元素替换为指定元素
replaceAll: 使用指定元素来替换被匹配的元素

删除

empty: 清空元素的子节点
remove: 删除元素(一并删除与此元素关联的事件绑定)
detach: 删除元素(但不删除与此元素关联的事件绑定)

复制

clone: 复制元素(传入参数true可以一并复制它的事件绑定)

动态生成一个列表

使用原生字符串拼接(推荐)

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
	<script src="jquery.js"></script>
</head>
<body>
	<ul id="fruitList"></ul>

	<script>
      	var $fruitList = $('#fruitList');
      
		var fruits = ['banana', 'apple', 'pear'];
		var lis = [];

		for (var i = 0; i < fruits.length; i++) {
			lis[i] = '<li>' + fruits[i] + '</li>';
		}
		// 使用数组和join方法能够提高效率
		$fruitList.html(lis.join(''));
      	// 追加子节点方式
		// $fruitList.append(lis.join(''));
	</script>
</body>
</html>

一些节点操作

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
	<script src="jquery.js"></script>
	<style>
		#wrap ul li {
			color: orange;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li>Banana</li>
			<li>Pear</li>
		</ul>
	</div>
	<div id="wrap"></div>
	
	<script>
		var $ul = $('ul');

		$ul.prepend('<li>Apple</li>')
		   .unwrap()
		   .appendTo('#wrap');
	</script>
</body>
</html>

筛选节点

筛选节点是指从jQuery对象集合中筛选出新的jQuery对象子集

根据条件筛选节点

filter: 获取符合条件的子集
has: 删除不含有指定后代元素的jQuery对象
not: 删除符合条件的jQuery对象
slice: 获取子集(索引方式)
first, last: 获取第一个/最后一个 jQuery对象(也可获取多个对象)
find: 获取符合条件的后代元素的子集
closest: 返回最先符合条件的祖先元素的jQuery对象

根据关系筛选节点

一般用来获取多个对象的方法

children: 获取子元素的jQuery对象集合
nextAll, prevAll: 获取元素下面/上面的同级元素的jQuery对象集合
parents: 获取祖先元素的jQuery对象集合

一般用来获取单个对象的方法(也可获取多个对象)

next,prev: 获取元素紧邻的下一个/上一个同级元素的jQuery对象
parent: 获取父元素的jQuery对象

判断对象状态

hasClass: 若集合中至少有一个DOM元素具有指定的class则返回true, 否则返回false.
is: 若集合中至少有一个jQuery对象符合条件, 则返回true, 否则返回false.

使用节点筛选来选择到合适的节点

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
	<script src="jquery.js"></script>
</head>
<body>
	<div>
		<ul>
			<li>Apple</li>
			<li>Banana</li>
			<li>Pear</li>
		</ul>
	</div>
	<div></div>

	<script>
		var $li = $('div').has('ul')
						  .children()
						  .find('li')
						  .first();

		console.log($li.text());
	</script>
</body>
</html>

jQuery（1）