0%

JQuery介绍,一篇就够了!

JQuery是全世界 65% 的网页使用,是非常受欢迎的 JavaSript Library 。
以【Write less, Do more!】扬名。JQuery官网/JQuery Plugins
不过最近两年,很多网站开始弃用它而改用原生JavaSript重写,不过历史总有痕迹,因此俺在这里记录一下JQuery的一些常用操作。

使用方式

引入 jQuery 文件

1
2
3
<head>
<script src="jQuery Path"></script>
</head>

基本语法

1
$(selector).action(); or jQuery(selector).action();
  • selector选择器
    • 比 HTML 5 Selector 和 CSS 3 Selector 更强大
  • action方法
    • 将许多 JavaScript 功能整合成一个方法

JQuery中的选择器Selector

Returns: Node List

伪类别Pseudo classes

1
2
3
4
5
6
7
8
9
10
11
12
:visible                      //当 Element 显示时
:hidden //当 Element 隐藏时
:header //选择属于 header 的标签,如 h1, h2, …
:has(selector) //子节点有符合 selector 的 Element
:eq(index) //结果为第 index 个节点的 Element
:even //结果属于偶数的 Element
:first //结果属于第一个节点的 Element
:gt(index) //结果大于第 index 个节点的 Element
:last //结果属于最后一个节点的 Element
:lt(index) //结果取于第 index 个节点的 Element
:odd //结果属于基数的 Element
:only-child //仅仅为子元素
JQuery SelectorCSS3/HTML Selector
:eq(index):nth-child(index)
:even:nth-child(even)
:first:first-child
:last:last-child
:odd:nth-child(odd)

其它

1
2
3
4
5
6
:button			       //结果属于 button 的 Element
:checkbox //结果属于 checkbox 的 Element
:file //结果属于 file 的 Element
:password //结果属于 password 的 Element
:radio //结果属于 radio 的 Element
:text //结果属于 text 的 Element
JQuery SelectorCSS3/HTML Selector
:buttoninput[type='button'], button
:checkboxinput[type='checkbox']
:fileinput[type='file']
:passwordinput[type='password']
:radioinput[type='radio']
:textinput[type='text']

jQuery中的CSS操作

类操作

1
2
3
4
$(element).addClass('className1 className2');                         //增加类
$(element).removeClass('className1 className2'); //删除类[不写清除全部]
$(element).toggleClass('className1 className2'[,addOrRemove(bool)]); //开关类
$(element).hasClass('className1 className2'); //判断该 Element 是否存在某个类

CSS操作

1
2
3
4
5
6
7
8
$(element).css(propertyName);        //取得 CSS Style
$(element).css(propertyName, value); //设置 CSS Style
//多个操作
jQuery(element1,element2).css({
'color': 'red',
'display': 'block'
});
//不需要像原生JS一样将属性名称改为大小写

width&height

1
2
3
4
5
6
$(element).width();                 //content
$(element).innerWidth(); //content+padding
$(element).outerWidth(); //element width
$(element).height(); //content
$(element).innerHeight(); //content+padding
$(element).outerHeight(); //element width

Document Object Model

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(element).prop(attrName);             //取得属性值
$(element).prop(attrName, attrValue); //设置属性值,一般原生的我们都使用prop,特别是radio与checkbox使用prop设置true和false才正确,其它的使用attr。
$(element).attr(attrName);
$(element).attr(attrName, attrValue);
$(element).removeAttr(attrName, attrValue);
$(element).removeAttr('attrName1 attrName2');

$(element).html(); //innerHTML
$(element).text(); //innerText
$(element).val(); //value

$(element).data(key); //取得自定义资料
$(element).data(key, value); //设置自定义资料,可叠加设置。
$(element).data({
x: 1,
y: 2,
z: 3
});

DOM-Tree Traversal

DOM-Select

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//过滤器筛选表单元素:disabled、:enabled、:checked、:selected
$("input:disabled");
//指定序号获取元素
$(element).eq(3);
//指定范围获取元素
$(element).slice(1,5);
//指定条件获取元素
$(element).is(".blue");

$(element).parent([selector]); //父节点
$(element).parents([selector]); //所有父节点
$(element).parents('.xxx'); //所有长辈节点的含有 xxx 类的

$(element).children([selector]); //子节点

$(element).find([selector]); //找符合要求的子节点。相当与$(element selector);
$(element).filter([selector]); //从初始结果中筛选,找自己。相当与$(elementselector);//div.className

$(element).siblings([selector]); //所有的同辈节点

$(element).next([selector]); //下一个节点
$(element).nextAll([selector]); //之后的所有节点


$(element).prev([selector]); //上一个节点
$(element).prevAll([selector]); //之前的所有节点

$(document.querySelector('h1')); //dom对象转jquery对象
$('h1')[0]; or $('h1').get(0); //jquery对象转dom对象
$('a'); //现在chrome好像也可以使用$()选取元素了

DOM-Insertion

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(parentElement).append(newElement);                       //在目前节点插入新子节点到最后 
$(parentElement).syntaxhighlightpend(newElement); //在目前节点插入新子节点到开头
$(newElement).appendTo(parentElement); //将新节点插入到某个父节点下的当第一个子节点
$(newElement).syntaxhighlightpendTo(parentElement); //将新节点插入到某个父节点下的当最后一个子节点

$(siblingElement).after(newElement); //在目前节点后方插入新相邻节点
$(siblingElement).before(newElement); //在目前节点前方插入新相邻节点
$(newElement).insertAfter(siblingElement); //将新节点插入到某节点之后当相邻节点
$(newElement).insertBefore(siblingElement); //将新节点插入到某节点之前当相邻节点

a.replaceWith(b); //b替换a,后面替换前面。
b.replaceAll(a); //b替换a,前面替换后面。

a.wrap(b); //给匹配的a包裹b标签。<b><a>123</a></b><b><a>456</a></b>
a.wrapAll(b); //给匹配的a全部包裹b标签。<b><a>123</a><a>456</a></b>
a.wrapInner(b); //给匹配的a新增一个子标签b包裹内容。<a><b>123</b></a><a><b>456</b></a>

DOM-Removal

1
2
3
$(element).remove();                     //删除自身节点及子节点
$(element).empty(); //清空子节点
$(element).clone(true).appendTo($el); //复制element节点并复制事件监听,填到$el。

DOM-Event

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//当文件载入完成时[onload]
$(document).ready(function(){
//do something
});
$(function(){
//do something
});

//增加事件监听器
$(element).on('eventType1 eventType2 eventType3', handler);

//顺带一提,有些元素是无法聚焦的,设置keydown或者keyup事件会发现无法触发,所以我们一般给其设置tabindex,再设置事件即可。
$('h1').attr({
'tabindex': '-1',
'style': 'outline: none;'//不能学习这种写法,应该用css()语义化。
}).on('keydown',function(e){
if (event.ctrlKey && event.keyCode === 65) {
console.log(123);
e.stopPropagation();
e.preventDefault();
}
});

//移除事件监听器
$(element).unbind(eventType);//弃用
$(element).off(eventType); //不写eventType移除所有事件

//鼠标放置/离开动作
$(element).hover(over(),out());
//元素被点击时的切换动作
$(element).toggle(fn1(),fn2(),fn3(),···);
//元素点击事件
$(element).click(fn());
//鼠标事件
$(element).mouseover(fn());
$(element).mouseout(fn());
//只响应一次事件
$(element).one(type,[data],fn);
//在每一个元素上触发一次某事件
$(element).trigger(type,[data]);

Effects

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(element).focus([function]);              //得到焦点
$(element).blur([function]); //失去焦点
$(element).defaultValue; //得到预设值value

$(element).offset(); //得到元素左边距和上边距[对象]。
$(element).offset().left; //得到元素左边距
$(element).offset().top; //得到元素上边距

$(element).show([duration][, complete]); //显示元素
$(element).hide([duration][, complete]); //隐藏元素
$(element).toggle([duration][, complete]); //显示元素开关【不推荐】

$(element).fadeIn(); //淡入元素
$(element).fadeOut(); //淡出元素
$(element).fadeToggle(); //淡入淡出开关【不推荐】

$(element).slideDown(); //向下滑动元素
$(element).slideUp(); //向上滑动元素
$(element).slideToggle(); //滑动元素开关【不推荐】

//自定义元素动画
$(element).animate(properties[, duration][, easing][, complete]);
/*
*properties //CSS 属性
{
property1: value1,
property2: value2
}
*duration //持续时间
*easing //加速度曲线
*complete //动画完成后的handle
*/

//中文转Unicode
escape('中文转Unicode').toLocaleLowerCase().replace(/%u/gi,'\\u');
//中文转Unicode(CSS)
escape('中文转Unicode').toLocaleLowerCase().replace(/%u/gi,'\\');

//为JQuery扩展min,max两个方法 ,通过<$.方法名>调用。
$.extend({
min: function(a, b){return a<b?a:b;},
max: function(a, b){return a>b?a:b;}
});

Ajax&Form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$.ajax(options) | jQuery.ajax(options);
$.get("demo_test.php",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
$.post("demo_test.php",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});

//获取JSON
$.getJSON(url,[data],[callback]);
$.ajax({
async: false,
url: 'http://跨域',
type: "GET", //jsonp只支持GET
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: {
test: 'hello world'
},
timeout: 5000,
beforeSend: function () {
//jsonp 方式此方法不被触发,原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了。
},
success: function (json) {
//客户端jquery预先定义好的callback函式,成功获取跨域服务器上的json资料后,会动态执行这个callback函式。
},
complete: function (XMLHttpRequest, textStatus) {

},
error: function (xhr) {
//jsonp 方式此方法不被触发,原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了。
}
});
//获取JS并执行
$.getScript(url,[callback]);
//读取HTML文件插入到元素中
$(element).load(url,data,callback);
//ajax完成后执行的函数
$.ajaxComplete(callback);
//ajax失败后执行的函数
$.ajaxError(callback);
//ajax成功后执行的函数
$.ajaxSuccess(callback);
//ajax发送前执行的函数
$.ajaxSend(callback);
//ajax开始时执行的函数
$.ajaxStart(callback);
//ajax结束时执行的函数
$.ajaxStop(callback);
//设置Ajax全局预设值
$.ajaxSetup(options);

//获取表单序列化结果
$("form").serialize();
//return JSON
$("form").serializeArray();
$("form").submit();
$("form").reset();
//对象序列化
$.param(obj,[traditional]);

//数组
$.each(object, [callback]);//遍历数组(key,value)=>{做一些处理}
$.map(arr|obj, [callback]);//返回新数组
$(selector).toArray(); //NodeList 2 Array
$.merge(arr1, arr2); //合并数组,赋给arr1。
$.unique(NodeList); //去除重复Element
----------文章已到底啦  感谢您的阅读----------
给博主来杯卡布奇诺~
DoubleAm 微信 微信
DoubleAm 支付宝 支付宝
  • 博主: DoubleAm
  • 本文链接: http://a.biugle.cn/jquery/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
bulb