title: jQuery介绍，一篇就够了！
tags: jQuery
categories: Web
keywords: jQuery,jQuery常用操作
description: jQuery常用操作介绍
hot: true
date: 2019-10-25 00:00:00
{% note info no-icon %}
jQuery是全世界 65% 的网页使用，是非常受欢迎的 JavaSript Library 。
以【Write less, Do more!】扬名。jQuery官网/jQuery Plugins
不过最近两年，很多网站开始弃用它而改用原生JavaSript重写，不过历史总有痕迹，因此俺在这里记录一下jQuery的一些常用操作。
使用方式
引入 jQuery 文件
<head>
<script src="jQuery Path"></script>
</head>
基本语法
$(selector).action(); or jQuery(selector).action();
- selector选择器
- 比 HTML 5 Selector 和 CSS 3 Selector 更强大
- action方法
- 将许多 JavaScript 功能整合成一个方法
jQuery中的选择器Selector
Returns: Node List
伪类别Pseudo classes
: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 Selector | CSS3/HTML Selector |
|---|---|
| :eq(index) | :nth-child(index) |
| :even | :nth-child(even) |
| :first | :first-child |
| :last | :last-child |
| :odd | :nth-child(odd) |
其它
:button //结果属于 button 的 Element
:checkbox //结果属于 checkbox 的 Element
:file //结果属于 file 的 Element
:password //结果属于 password 的 Element
:radio //结果属于 radio 的 Element
:text //结果属于 text 的 Element
| jQuery Selector | CSS3/HTML Selector |
|---|---|
| :button | input[type='button'], button |
| :checkbox | input[type='checkbox'] |
| :file | input[type='file'] |
| :password | input[type='password'] |
| :radio | input[type='radio'] |
| :text | input[type='text'] |
jQuery中的CSS操作
类操作
$(element).addClass('className1 className2'); //增加类
$(element).removeClass('className1 className2'); //删除类[不写清除全部]
$(element).toggleClass('className1 className2'[,addOrRemove(bool)]); //开关类
$(element).hasClass('className1 className2'); //判断该 Element 是否存在某个类
CSS操作
$(element).css(propertyName); //取得 CSS Style
$(element).css(propertyName, value); //设置 CSS Style
//多个操作
jQuery(element1,element2).css({
'color': 'red',
'display': 'block'
});
//不需要像原生JS一样将属性名称改为大小写
width&height
$(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
$(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
//过滤器筛选表单元素: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
$(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
$(element).remove(); //删除自身节点及子节点
$(element).empty(); //清空子节点
$(element).clone(true).appendTo($el); //复制element节点并复制事件监听，填到$el。
DOM-Event
//当文件载入完成时[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
$(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
$.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