View on GitHub

learning

学习笔记

jQuery

jQuery下载
jQuery文档

jQuery和原生JavaScript的对比

差异 原生JavaScript jQuery
选取元素 document.getElementById()
document.getElememtsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()
$(‘选择器’)
属性操作 getArrtibute()
setArrtibute()
removeAttribute()
attr()
removeAttr()
prop()
removeProp()
HTML结构
文本内容
innerHTML
innerText
html()
text()
表单取值 value(text/password/hidden/select)
selected(radio/checkbox)
val()
class操作 className(若有多个返回字符串) addClass()
removeClass()
toggleClass()
CSS操作 style.* css()
节点的创建 document.createElement()
document.createTextNode()
$(‘ ‘)
节点的插入 appendChild()
insertBefore()
append()
appendTo()
prepend()
prependTo()
after()
insertAfter()
before()
insertBefore()
节点的删除 removeChild() empty()
remove()
detach()
(unwrap())
节点的拷贝 cloneNode() clone()
节点的替换 replaceChild(new, old) replaceWith()
replaceAll()
节点的包裹 - wrap()
(unwrap())
wrapAll()
wrapInner()
节点关系查找 childNodes
firstChild
lastChild
parentNode
nextSibling
perviousSibling
child()
find()
parent()
parents()
closest()
next()
perv()
siblings()

jQuery介绍

jQuery优势

$

$ === jQuery;

$是一个函数。函数也是一个对象,拥有很多属性

想要不使用$: jQuery.noConflict()

jQuery对象和DOM的相互转化

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

选择器

选择元素

大部分同CSS选择器, 详见下方

var div = $('#abc');

获取到的是一个jQuery对象, 不存在返回, 不会返回null:

[]

特殊选择器

基本筛选

img

:eq():lt():gt()索引从0开始

内容筛选

img

可见性筛选

img

元素的visibility: hiddenopacity: 0被认为是可见的,因为他们仍然占用空间布局

属性筛选

img

子元素筛选

img

nth-child(n)同CSS索引针对父元素的第n个元素(从1开始计数)

表单筛选

img

$(":input")除了单选(radio)、复选(checkbox)都能选中

表单对象属性筛选

img

this特殊选择器

this, 表示当前上下文的一个HTML对象
$(this), 把HTML对象包装为jQuery对象

DOM样式

修改text和HTML

text() html()

无参数调用是获取文本, 传入参数就是设置文本

会同时作用在多个满足条件的元素上,且若有错也不会报错
text()将返回一个包含所有匹配元素文本的字符串

修改CSS

内联样式

css('name', 'value') 所有方法都返回jQuery对象,可以链式调用

var div = $('#test-div');
div.css('color'); // '#000033', 获取CSS属性
div.css(['width', 'height']); //同时获取多个属性

div.css('color', '#336699'); // 设置CSS属性
div.css({'width': 15, 'height': 15}) //合并设置

div.css('color', ''); // 清除CSS属性

修改class

样式修改也可通过修改class处理(外部样式)

优先级: 外部样式 < 内部样式 < 内联样式

var div = $('#test-div');
div.hasClass('highlight'); // false, class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class
div.toggleClass('highlight'); //切换highlight的状态

修改属性

attr()removeAttr() 操作DOM节点属性(查找,修改,删除)
prop()removeProp() 获取设置属性(在属性值为true/false的时候使用)

div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性

表单元素处理

val()表单元素的值处理(获取、赋值), 只能作用于表单元素

当没有选项被选中, 返回null; 当多选时, 返回选中项数组

DOM节点的操作

节点的创建

直接使用$()包裹一个标签即可

节点的插入(5个)

append(), 在子节点最后添加(可以传入HTML片段、DOM对象、jQuery对象和函数对象)
appendTo(), 把对象添加到子节点最后
prepend(), 在子节点最前添加
prependTo(), 添加到子节点最前
after()before() 在前后添加

若已存在HTML中,将先从文档中移除,然后再添加

节点的删除(3个)

empty(), 清空内部所有元素
remove(), 清空自己和内部所有元素, 能传递参数筛选
detach(), 清空, 方式同remove, 但还存在内存, 之后可以使用插入方法还原

节点的拷贝

clone(), 参数为true将会同时克隆其他的事件

在原生JS中, cloneNode(true)只为深度拷贝全部节点

节点的替换

replaceWith(), 用参数来替换
replaceAll(), 替换掉参数

包裹节点

参数为 HTML代码

wrap()
unwrap(), 删除掉父元素(包裹元素)
wrapAll(), 给一堆元素增加父元素(如一堆li加上ul)
wrapInner(), 给子元素增加父元素

节点的遍历(8个)

查找元素/查找参数: child()
查找后代元素/查找参数: find()
查找元素: parent()
查找祖先元素: parents()
查找最近祖先元素: closest()
同级查找: next()prev()sibilings()

拿到jQuery对象后,可以过滤掉一些节点

过滤节点: filter(), 参数可为函数,但this指向为DOM对象 转为其他对象: map(),

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript,相当于$('ul.lang li:first-child')
var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致

jQuery对象数组增加

add()

$("li").add('<p>新元素</p>').appendTo($('.test'));

DOM遍历

each(function(index, element){})

获取DOM信息

width()height()获取宽高信息,可传入参数修改

事件

var a = $('#test-link');
a.on('click', function () {
    alert('Hello!');
});
//用的更多:
a.click(function () {
    alert('Hello!');
});

常见事件

事件名 说明
click 鼠标单击时触发;
dblclick 鼠标双击时触发;
mouseenter 鼠标进入时触发;
mouseleave 鼠标移出时触发;
mousemove 鼠标在DOM内部移动时触发;
hover 鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave
keydown 键盘按下时触发;
keyup 键盘松开时触发;
keypress 按一次键后触发。
focus 当DOM获得焦点时触发;
blur 当DOM失去焦点时触发;
change 当<input>、<select>或<textarea>的内容改变时触发;
submit 当<form>提交时触发;
ready 当页面被载入并且DOM树完成初始化后触发。

document对象的ready事件

//写法一
$(document).on('ready', function () {
    $('#testForm').on('submit', function () {
        alert('submit!');
    });
});

//写法二
$(document).ready(function () {
    $('#testForm').submit(function () {
        alert('submit!');
    });
});

//写法三(推荐)
$(function () {
    // init...
});

取消绑定

// 解除绑定:
a.off('click', function () {
    alert('hello!');
});

注意: 通常直接a.off('click')取消所有click,因为通常函数对象不一样

常用事件对象的属性方法

属性方法 说明
type 事件的类型
pageX/pageY 相对于当前页面的坐标
preventDefault() 阻止默认行为
stopPropagation 阻止事件冒泡
which 单击事件, 单击的哪个键(左1, 中2, 右3)
currentTarget 冒泡当前的DOM元素(this)
target 事件的目标DOM元素

自定义事件

trigger('click'), 根据绑定的事件类型执行所有处理程序
trigger('click'), 不触发浏览器默认行为, 仅匹配第一个元素, 不会冒泡

动画

show/hide/toggle(以左上角)

加上参数 可以指定在 多少秒内逐渐出现/隐藏

toggle根据当前情况判断

$('div').hide(3000); // 在3秒钟内逐渐消失
$('div').show('slow'); // 在0.6秒钟内逐渐显示

slideUp/slideDown/slideToggle(垂直方向, 下拉)

slide, 滑动

fadeIn/fadeOut/fadeToggle(淡入淡出)

fade, 褪色
隐藏元素, 并带有淡入淡出效果

fadeTo

第二个参数为透明度, 确定最终的透明度

$('div').fadeTo(3000, .2);

自定义动画 animate()

参数一:CSS最终状态
参数二:时间可选
参数三(可选):函数,动画结束后的操作

$('div').animate({
    fontSize: "5em"
}, 2000, function() {
    alert("动画 fontSize执行完毕!");
});

delay() 暂停

6.重要方法

each

inArray

代替 indexOf()

参数一: 查找的值; 参数二: 数组

trim

get

可以使用负数

index

对元素、选择器索引

7.AJAX

ajax()

参数一: URL

参数二: setting对象:

{
	async: true;  //是否异步, 默认true;
	method: 'GET';  //发送方法, 默认GET
	contentType: 'application/x-www-form-urlencoded; charset=UTF-8';  //发送POST请求的格式
	data: {};  //发送的数据
	headers: {};  //额外的头
	dataType: 'json';  //接收的数据格式
	jsonp: 'callback';  //JSONP跨域访问
}

处理相应:

使用done()、fail()、always()

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

参数一: URL

参数二: 如果是对象将自动把它变成query string加到URL后

post

参数一: URL

参数二: 默认序列化为 application/x-www-form-urlencoded

getJSON

快速GET获取一个JSON对象

参数一: URL

参数二: 如果是对象将自动把它变成query string加到URL后

扩展

$.fn插件

$.fn.highlight1 = function () {
    // this已绑定为当前jQuery对象:
   this.css('backgroundColor','#fffceb').css('color', '#d85030');
    return this;  //继续链式操作
}

extend()

把多个object对象合并到第一个参数的对象中 遇到重复的, 越往后优先级越高

最终,我们得出编写一个jQuery插件的原则:

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