【JavaScript】jQuery

No1:

jQuery能帮我们干这些事情:

  • 消除浏览器差异:你不需要自己写冗长的代码来针对不同的浏览器来绑定事件,编写AJAX等代码;

  • 简洁的操作DOM的方法:写$('#test')肯定比document.getElementById('test')来得简洁;

  • 轻松实现动画、修改CSS等各种操作。

目前jQuery有1.x和2.x两个主要版本,区别在于2.x移除了对古老的IE 6、7、8的支持,因此2.x的代码更精简。选择哪个版本主要取决于你是否想支持IE 6~8。

No2:

引入jQuery

<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
...
</head>
<body>
...
</body>
</html>

No3:

【选择器】

jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点。

// 查找<div id="abc">:
var div = $('#abc');

注意,#abc#开头。返回的对象是jQuery对象;jQuery对象类似数组,它的每个元素都是一个引用了DOM节点的对象。

返回jQuery对象如下

[<div id="abc">...</div>]

如果不存在,返回

[]
var div = $('#abc'); // jQuery对象
var divDom = div.get(0); // 假设存在div,获取第1个DOM元素
var another = $(divDom); // 重新把DOM包装为jQuery对象

【按tag查找】按tag查找只需要写上tag名称就可以了:

var ps = $('p'); // 返回所有<p>节点
ps.length; // 数一数页面有多少个<p>节点

【按class查找】按class查找注意在class名称前加一个.

var a = $('.red'); // 所有节点包含`class="red"`都将返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>

查找同时包含redgreen的节点

var a = $('.red.green'); // 注意没有空格!
// 符合条件的节点:
// <div class="red green">...</div>
// <div class="blue green red">...</div>

使用前缀查找或者后缀查找

var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"

【多项选择器】

多个选择器用,组合起来一块选

$('p,div'); // 把<p>和<div>都选出来
$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来

【层级选择器】

如果两个DOM元素具有层级关系,就可以用$('ancestor descendant')来选择,层级之间用空格隔开

<!-- HTML结构 -->
<div class="testing">
<ul class="lang">
<li class="lang-javascript">JavaScript</li>
<li class="lang-python">Python</li>
<li class="lang-lua">Lua</li>
</ul>
</div>

要选出JavaScript,可以用层级选择器:

$('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
$('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]

【子选择器】子选择器$('parent>child')类似层级选择器,但是限定了层级关系必须是父子关系,就是<child>节点必须是<parent>节点的直属子节点

$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], 无法选出,因为<div>和<li>不构成父子关系

【过滤器】

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素,N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

【表单相关】

  • :input:可以选择<input><textarea><select><button>

  • :file:可以选择<input type="file">,和input[type=file]一样;

  • :checkbox:可以选择复选框,和input[type=checkbox]一样;

  • :radio:可以选择单选框,和input[type=radio]一样;

  • :focus:可以选择当前输入焦点的元素,例如把光标放到一个<input>上,用$('input:focus')就可以选出;

  • :checked:选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如$('input[type=radio]:checked')

  • :enabled:可以选择可以正常输入的<input><select> 等,也就是没有灰掉的输入;

  • :disabled:和:enabled正好相反,选择那些不能输入的。

$('div:visible'); // 所有可见的div
$('div:hidden'); // 所有隐藏的div

No4:

【查找】

<!-- HTML结构 -->
<ul class="lang">
<li class="js dy">JavaScript</li>
<li class="dy">Python</li>
<li id="swift">Swift</li>
<li class="dy">Scheme</li>
<li name="haskell">Haskell</li>
</ul>

find()查找

var ul = $('ul.lang'); // 获得<ul>
var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
var swf = ul.find('#swift'); // 获得Swift
var hsk = ul.find('[name=haskell]'); // 获得Haskell

如果要从当前节点开始向上查找,使用parent()方法

var swf = $('#swift'); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent('.red'); // 获得Swift的上层节点<ul>,同时传入过滤条件。如果ul不符合条件,返回空jQuery对象

可以通过next()prev()方法

var swift = $('#swift');

swift.next(); // Scheme
swift.next('[name=haskell]'); // 空的jQuery对象,因为Swift的下一个元素Scheme不符合条件[name=haskell] swift.prev(); // Python
swift.prev('.dy'); // Python,因为Python同时符合过滤器条件.dy

No5:

【过滤】

filter()方法可以过滤掉不符合选择器条件的节点:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

No6:

【操作DOM】

<!-- HTML结构 -->
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="book">Java &amp; JavaScript</li>
</ul>
$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'

【修改CSS】jQuery对象有“批量操作”的特点

<!-- HTML结构 -->
<ul id="test-css">
<li class="lang dy"><span>JavaScript</span></li>
<li class="lang"><span>Java</span></li>
<li class="lang dy"><span>Python</span></li>
<li class="lang"><span>Swift</span></li>
<li class="lang dy"><span>Scheme</span></li>
</ul>
$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');

运行结果

【JavaScript】jQuery

显示和隐藏DOM

var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示

获取DOM信息

// 浏览器可视窗口大小:
$(window).width(); //
$(window).height(); // // HTML文档大小:
$(document).width(); //
$(document).height(); // // 某个div的大小:
var div = $('#test-div');
div.width(); //
div.height(); //
div.width(400); // 设置CSS属性 width: 400px,是否生效要看CSS是否有效
div.height('200px'); // 设置CSS属性 height: 200px,是否生效要看CSS是否有效
// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性
div.attr('name'); // undefined

jQuery对象统一提供val()方法获取和设置对应的value属性

/*
<input id="test-input" name="email" value="">
<select id="test-select" name="city">
<option value="BJ" selected>Beijing</option>
<option value="SH">Shanghai</option>
<option value="SZ">Shenzhen</option>
</select>
<textarea id="test-textarea">Hello</textarea>
*/
var
input = $('#test-input'),
select = $('#test-select'),
textarea = $('#test-textarea'); input.val(); // 'test'
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com select.val(); // 'BJ'
select.val('SH'); // 选择框已变为Shanghai textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi'

【添加DOM】

// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM对象:
ul.append(ps); // 添加jQuery对象:
ul.append($('#scheme')); // 添加函数对象:
ul.append(function (index, html) {
return '<li><span>Language - ' + index + '</span></li>';
});

【删除DOM】

var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被删除

No7:

【点击事件】

/* HTML:
*
* <a id="test-link" href="#0">点我试试</a>
*
*/ // 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});

a.click(function () {
alert('Hello!');
});

【鼠标事件】

click: 鼠标单击时触发;
dblclick:鼠标双击时触发;
mouseenter:鼠标进入时触发;
mouseleave:鼠标移出时触发;
mousemove:鼠标在DOM内部移动时触发;
hover:鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave。

【键盘事件】

键盘事件仅作用在当前焦点的DOM上,通常是<input><textarea>

keydown:键盘按下时触发;
keyup:键盘松开时触发;
keypress:按一次键后触发。

【其他事件】

focus:当DOM获得焦点时触发;
blur:当DOM失去焦点时触发;
change:当<input>、<select>或<textarea>的内容改变时触发;
submit:当<form>提交时触发;
ready:当页面被载入并且DOM树完成初始化后触发。

【取消绑定】

一个已被绑定的事件可以解除绑定,通过off('click', function)实现

function hello() {
alert('hello!');
} a.click(hello); // 绑定事件 // 10秒钟后解除绑定:
setTimeout(function () {
a.off('click', hello);
}, 10000);

监控文本框的内容改动

var input = $('#test-input');
input.change(function () {
console.log('changed...');
});

No8:

【动画】

toggle()方法则根据当前状态决定是show()还是hide()

var div = $('#test-show-hide');
div.hide(3000); // 在3秒钟内逐渐消失

show()hide()是从左上角逐渐展开或收缩的,而slideUp()slideDown()则是在垂直方向逐渐展开或收缩的。

var div = $('#test-slide');
div.slideUp(3000); // 在3秒钟内逐渐向上消失

slideToggle()则根据元素是否可见来决定下一步动作

fadeIn()fadeOut()的动画效果是淡入淡出,也就是通过不断设置DOM元素的opacity属性来实现,而fadeToggle()则根据元素是否可见来决定下一步动作

【自定义动画animate】

var div = $('#test-animate');
div.animate({
opacity: 0.25,
width: '256px',
height: '256px'
}, 3000, function () {
console.log('动画已结束');
// 恢复至初始状态:
$(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

【串行动画】

var div = $('#test-animates');
// 动画效果:slideDown - 暂停 - 放大 - 暂停 - 缩小
div.slideDown(2000)
.delay(1000)
.animate({
width: '256px',
height: '256px'
}, 2000)
.delay(1000)
.animate({
width: '128px',
height: '128px'
}, 2000);
}
</script>

No9:

【AJAX】

ajax(url, settings)函数需要接收一个URL和一个可选的settings对象,常用的选项如下:

  • async:是否异步执行AJAX请求,默认为true,千万不要指定为false

  • method:发送的Method,缺省为'GET',可指定为'POST''PUT'等;

  • contentType:发送POST请求的格式,默认值为'application/x-www-form-urlencoded; charset=UTF-8',也可以指定为text/plainapplication/json

  • data:发送的数据,可以是字符串、数组或object。如果是GET请求,data将被转换成query附加到URL上,如果是POST请求,根据contentType把data序列化成合适的格式;

  • headers:发送的额外的HTTP头,必须是一个object;

  • dataType:接收的数据格式,可以指定为'html''xml''json''text'等,缺省情况下根据响应的Content-Type猜测。

'use strict';

function ajaxLog(s) {
var txt = $('#test-response-text');
txt.val(txt.val() + '\n' + s);
} $('#test-response-text').val('');
var jqxhr = $.ajax('/api/categories', {
dataType: 'json'
}).done(function (data) {
ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
ajaxLog('请求完成: 无论成功或失败都会调用');
});

【get】

var jqxhr = $.get('/path/to/resource', {
name: 'Bob Lee',
check: 1
});

【post】

var jqxhr = $.post('/path/to/resource', {
name: 'Bob Lee',
check: 1
});

【getJSON】

var jqxhr = $.getJSON('/path/to/resource', {
name: 'Bob Lee',
check: 1
}).done(function (data) {
// data已经被解析为JSON对象了
});

No10:

【jQuery插件】

$.fn.highlight1 = function () {
// this已绑定为当前jQuery对象:
this.css('backgroundColor', '#fffceb').css('color', '#d85030');
return this;
}
$.fn.highlight2 = function (options) {
// 要考虑到各种情况:
// options为undefined
// options只有部分key
var bgcolor = options && options.backgroundColor || '#fffceb';
var color = options && options.color || '#d85030';
this.css('backgroundColor', bgcolor).css('color', color);
return this;
}

综上最终版

$.fn.highlight = function (options) {
// 合并默认值和用户设定值:
var opts = $.extend({}, $.fn.highlight.defaults, options);
this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
return this;
} // 设定默认值:
$.fn.highlight.defaults = {
color: '#d85030',
backgroundColor: '#fff8de'
}

编写一个jQuery插件的原则:

  1. $.fn绑定函数,实现插件的代码逻辑;
  2. 插件函数最后要return this;以支持链式调用;
  3. 插件函数要有默认值,绑定在$.fn.<pluginName>.defaults上;
  4. 用户在调用时可传入设定值以便覆盖默认值。

No11:

【针对特定元素的扩展】

$('#main a').external();
$.fn.external = function () {
// return返回的each()返回结果,支持链式调用:
return this.filter('a').each(function () {
// 注意: each()内部的回调函数的this绑定为DOM本身!
var a = $(this);
var url = a.attr('href');
if (url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)) {
a.attr('href', '#0')
.removeAttr('target')
.append(' <i class="uk-icon-external-link"></i>')
.click(function () {
if(confirm('你确定要前往' + url + '?')) {
window.open(url);
}
});
}
});
}
上一篇:PHP的学习--生成器Generators


下一篇:QRCode生成二维码,jq QRCode生成二维码,QRCode生成电子名片