做前端页面的时候 jQuery 用的也比较多了,可从来没有仔细看过它的文档,趁着最近工作不忙来对着文档来缕一缕 jQuery 的 API 。
jQuery 通过 jQUery 函数 jQuery 对象 和 jQuery 静态方法来提供功能,其核心就是 jQuery 对象的创建,查找,队列操作和扩展方法。
jQuery 函数
$(fn) 在文档加载完成后执行 fn ,等同于 $(document).ready(fn)
$(dom) 将 dom 对象转换为 jQuery 对象, dom 可以是一个包含 dom 对象的数组
$(selector, [context]) 最常用的,在页面上查找并构造 jQuery 对象,默认在整个文档下查找,如果给定 context 则只在 context 下查找
$(html) 通过 html 代码创建一个 jQuery 对象,在需要动态创建页面元素时很有用
jQuery 对象方法
selector 获得查找 jQuery 对象时用的选择器
context 获得查找 jQuery 对象时用的 context
each 遍历 jQuery 对象内的 dom 元素
get([index]) 获得 jQuery 对象内的第 index 个 dom 元素,若不传递 index 则获取所有 dom 元素
index([obj]) 获得 jQuery 对象在文档中相对其兄弟的编号,若传递 obj 则获得 obj 在 jQuery 对象中的编号
data([key], [value]) 在 dom 对象上设置或存储数据,可以是任意 js 数据
queue(fn) 为 jQuery 对象添加队列任务
dequeue() 结束 jQuery 对象的当前队列任务
clearQueue() 结束 jQuery 对象所有的队列任务
jQuery 静态方法
$.fn.extend(obj) 扩展 jQuery 对象
$.extend(obj) 扩展 jQuery静态方法
$.noConflict([ext]) 解决 全局变量 $ 和 jQuery 带来的冲突,它返回 jQuery 函数,并禁用全局的 $ 。若 ext = true 则同时禁用全局的 jQuery 。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../lib/jquery-1.11.2/jquery.js"></script>
</head>
<body>
<!-- ################## jQuery对象操作 start ################### -->
<div id="obj">
<p></p>
<p></p>
<p></p>
</div>
<script>
$(function() {
// $(selector, [context])
console.log($('p', $('#obj')).length);
console.log($('p').length);
// $(dom)
$(document.getElementById('obj')).text('$(dom)');
// $(html)
$('<p>我是动态添加的</p>').appendTo($('body'));
// selector context
var jq = $('p', $('#obj'));
console.log(jq.selector); console.log(jq.context);
// each(func)
var num = 0;
$('#obj>p').each(function() {
if(++num >= 3) return false;
this.innerHTML = '我是 each 方法修改的' + num;
});
// get([index])
console.log($('p').get());
console.log($('p').get(0));
// index
console.log($('div').index($('#queue')));
console.log($('#queue').index());
// data([key], [value])
$('#obj').data({name: 'mcj', age: 26});
console.log($('#obj').data('name'));
console.log($('#obj').data());
});
</script>
<!-- ################## jQuery对象操作 end ###################-->
<!-- ################## jQuery队列操作 start ###################-->
<div id="queue">1</div>
<script>
// queue dequeue clearQueue
var num = 1;
$('#queue').queue(function() {
$(this).html(num++);
var that = this;
setTimeout(function() {
$(that).dequeue();
}, 1000);
});
$('#queue').queue(function() {
$(this).html(num++);
var that = this;
setTimeout(function() {
$(that).dequeue();
}, 1000);
});
$('#queue').queue(function() {
$(this).html(num++);
var that = this;
setTimeout(function() {
$(that).dequeue();
}, 1000);
});
$('#queue').click(function() {
$('#queue').clearQueue();
});
</script>
<!-- ################## jQuery队列操作 end ###################-->
<!-- ################## jQuery扩展 start ###################-->
<div id="ext">
<p></p>
<p></p>
</div>
<script>
$.fn.extend({
sayHello: function() {
this.html('hello world!');
}
});
$.extend({
sayHello: function() {
console.log('hello world!');
}
});
$('#ext *').sayHello();
$.sayHello();
</script>
<!-- ################## jQuery扩展 end ###################-->
</body>
</html>