jQuery
jQuery
是一个快速和简洁的JavaScript
库, 并且在不同浏览器上的兼容表现非常好.
它封装了JavaScript
常用的DOM
操作, 样式渲染, 事件处理, 动画设计和Ajax
交互.
使用jQuery
库时, 最好使用以下规范.
jQuery
对象对应的变量应以$
开头, 用于区分DOM
对象.
尽量使用ID
选择器(效率最高)以及逐渐缩小范围的复合选择器.
避免创建过多的jQuery
对象, 推荐使用连缀写法.
长字符串处理时, 可以利用数组和join
方法的配合来提高使用+
拼接字符串的效率.
进行节点操作时, 尽量使用JavaScript
的原生方法.
使用prop
获取/设置元素的固有属性, 而attr
用来获取/设置元素的自定义属性.
Ajax
因为跨域的问题, 必须要有HTTP
服务器存在的情况下才能进行本地测试.
选择器与对象
选择器
jQuery
支持大量的CSS
选择器, 并新增了它自己独有的过滤选择器和表单选择器
选择器用来选择符合条件的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>