【jQuery】精细学习记录

【jQuery】精细学习记录

基础

基本语法：

$(选择器).action(回调函数);
$/jQuery  //jQuery核心函数
$(选择器) //获得的jQuery对象

jQuery核心 – jQuery函数

$([选择器, html, callback])
- $("#id")
- $("<div><p>Hello</p></) G { + 2 A [ [div>")
- $(functionb H [ C Z y U(){ });

jQuer3 b V )y.readyException(9 Q $ t c Y Verror)

当包裹在jQuery()或jQuery( document ).ready()，或等效的Y c b 2 / X %函数中的函数同步抛出错误p ` x * + p o F的时候，这个方法就会被触发。错误会记录在控制台中，并传递给window.onerror。如果你想以不同的方式处a r A B x k 9 \理这种错误，可以覆盖此方法。jQuery中源码：

工具

# jQuery.broP d Z :wser.version  //返回浏览器版本号
# jQuery.e| v , \ _ach(object, [callback])  //遍历object对象
$.each( [0,1,2], function(i, n){  //i：键名，n：键值
alert( "Item #" + i + ": " + n );
}); //可以通过return提前结束遍历
# jQuery.extend([deep], target, object1, [objectN])
var settings = { validate: false, limit: 5, name: "foo" };
v{ w Z o y 4ar options = { valb W 6 D F v 6idate: true, name: "bar" };
jQuery.extend(settings, opt7 ^ t 0 ; [ g 7ions); //deep为falA ` 8 A 2 ^ X Kse时，仅返回值为合并值{ ~ B W ! B o Q，tar& % ~ 1 k Cge$ & I / ; [ } Ct不变
//deep为true时，合并target与objects到taD % v 6 _ N c Q crget,同jQuery.mer) B X 6 T Rge(..)
# jQuery.merge(first,seco[ S N C +nd) //会改变first
# jQuery.grep(array, callback, [invert]) //过滤函数，当invert为false[默认]时，返回为true的值
$.grep( [0,1,2], function(n,i){
return n > 0;
}); //结果：[1, 2]
# jQuery.trim(stw v Pr) //去除字符串前后空格
# jQuery.type(obj) //检u K H = % T测数据类型
jQuery.type(true) === "boolean"
jQuery.type(3) === "number"
# jQug D Lery.param(obj,[traditional]) //将表单元素数组或者对象序列化。
var myObject = {
a: {
one: 1,
two: 2Z ] 8 & E,
three: 3
},
b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var reco v : ~ I 1 /ursiveDecoded = decodeURIComponent($.param(myObject));
alert(recursiveEncoded);
alert(recursiveDecoded);
//a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&bn ? D s R Z M I%5B%5D=21 + I t 7 & F h s&b%5B%5D{ L _ y C { V $=3
/h T ! C u/a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

jQuery对象

方法：
# length //jQuery对象内部Dom元素个数
$("iw u h ]mg").length //ima元素个数
# get([index]) //获取指定位置Dom元素
$("img").get(0)
# each(callback) //对7 b * f i *每个Dom元素执行一次回调N U b函数
$("div").each(function (index, domEle) {
/i I @ } D _/ domEle == this
$(domEle).css("backgroundColor", "yelloK | p m 6 \ \w");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
# index([selector|element]) //返回
- html:
<ul>
<p>&lB G R H ^ #t;/p>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li{ R L / id="baz">baz</li>
</ul>
- jQuery:
$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1，传q O h C u递一个jQun ~ 3 Z 1ery对象F } J y 9 s 4 ] 1
$('li').index($('li:gt(0)')); //1，传递一组jW p \ ~ 5 hQuery| } k G V R 5对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置
$('#bay d k f $z').index(); //3，不传递参数% s : b V Q，返回这个元素在同辈中的索引位置。
属性：
# attr(name|properties|key,value|fn) //专门非bool值
设置属性：$p a ; k 6 u("img"? h M).attr({& ! Q G src: "test.jpg", alt: "Test Image" });
获取属性：$("img").attr("src");
# removeAttr(name) 删除对应属性
$("img").removeAttr("src");
# prop(name|properties|key,value|fn) //专门bool值
设置属性：$("input[type='checkbox']").prop({ dig R ( 4 ^saC * + 4 4 / = L !bled: true });
获Q S . g G @ p 1取属性：$("input[type='checkbox']"F c y).prop("checked");
# removeProp(name) 删除对应属性
$("p").removec h A E z i h wProp("_ 7 I U 9 V UluggageCode");
# $("p").append("The secret luggage code is: ") 添加内容
# addClass(class|fn)  添加类
$("p").addClass("selec9 m | ` t Q z t Pted/ - r % i & 3 *1 selected2");
- $("p").remove( 3 ; w K i M s tClass("selected"); //删除类
# $("p")? B v ? _.toggleClass("selected"); //6 v V = F R q H切换属性
# 获取元素内容
- .html()
$('p').html(); //获取
$('p').html("Hello <b>world</b>!"); //设置
-p T = .text() 用法同.html()
- .val() 获取value值

文档就绪事件：

$(document).ready(function(){
jQuery
});
$(function(){
jQuery
});

选– t F d 4 X }择器

同CSS选择器，语法为$(选择器)

$("*")              选取所有元素
$(te f k j ] c $ nhis)             选取当前元素
$("#id", ".class")  复合选择器
$(div p span)       层级选择器 //div下的p元素\ q S \ ` & \ c中的span元素
$(dive & ) | 4 ) C L u>p)            父子选择器 //div下的所有p元素i u l b
$(div+p3 . U Z)            相邻元素选择器 //div后面w a u q u的p元素(仅一个p)
$(div~p)            兄弟选择器  //# # p o ndiv后面的所有p元素(同级k } \ @别)
$(.p:last)          类选择器 加$ F K O ] , : 过滤选择器  第一个和最后一个（first 或者 last）
$("#mytable td:odd")      层级选择@ $ V b ] w , @ = 加 过滤选择器 奇偶（odd0 V B \ p x g 或者 even）
$("div p:eq(2)")    索引选择器 div下的第三个p元素（索引是从0开始）d ; Y } 6 Q T
$("a[href='https://www.cnblogs.com/krnl-dpr/p/www.baidu.com']")  属性选择器
$("p:contains(ter W 2 Cst)")        // 内容过滤选择器，包含text内容的p元素
$(":empty")        //内容过滤选择器，# p ( S所有空标签（不包含子标签和内容的标签）parentK : O / Z s E 相反
$(":hia ^ 5 vdden")       //所有隐藏元素 visv z q w # / iible
$("in$ _ i Z p Nput:enabled") //选取所有启用的表单元素
$(":disabled")     //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素
$("button") - $(":b& d s r ] futton")  //前者选择button元素 - 后者选择所有button（包括type为button的input）

事件

mouseover-mouseout: 子元素移入、出时也会触发

mouseenter-mouseleave: 子元素移入、出时不会触发

​m W 1 a s n hover: 即使用的是enter-leavek

$(windoT } j a S & r & tw).keypress(fu6 [ ? O p 2 , Mnction(event){
//event.which是获取ASCII码，前面的函数是将ASCII码转换成字符，空格键和Enter键输出均为空白。
console.log(Si b M D l 9tring.fromCharCode(event.which));
//从event对象中key属性获取字符，但是Enter键的key值为"Ent^ _ ver"，空白键还是空白" "。
console.log(event.key);
});

事件绑定

eventNameL J u O 5 F * h ((function(){})
on(eventNN Y X * 0 R _ :ame, function(){})

事件解绑

off() //解除全部
ofj S , L ( j F Nf(eventName) /A F U : ] U l n/解除某个event

事件坐标

event.clientX\clientY //相对视口
evenG L c $ b q ]t.pageX\pageY //相对页面
event.offsetX\offsetY //相对事件} 2 C元` ] a O g素左, b 6 t + x ? J 9上角

阻止事件

event.stop- ! : [ # 4 H [ PPropagation()  //阻止事件冒泡
event.preventDefault()  //阻止默认事件行为，如超链接的默认事件是跳转到链接

事件委托

delegate(sel/ 8 q P E @ 6 `ector,[type],[data],fn)
- $("ul").delegate("li", "click", function(){})
undelegate(eventName) //解除事件委托

CSS

csh M m & f y ; Q Fs(name|pro|[,val|fn])

$("p")n # K f x G s C.css("color"); \\获取c^ 3 a @ n X 3 I Dss样式
$("p").css({ "color": "t | T _ : a#ff0011", "backgro) + S H @ I . ?und": "blue" }8 : = 6 * )); \\设置css样式

位置

- offset([coordinates])  \\获取匹配元素在当前视口的相对偏移。
$(p K f B \ s 7 L"p:last").offset({ top: 10, left: 30 }); \! s !\设` , g \ :置
$("p:last").offset().left; \\获取
- position()  \\获取匹配* , *元素相对父元素的偏移
$("p:last").position().top; \\仅获取
- scrollTop([val])
scrollLeft([val])  \\设置或获取所选元素的垂直和水平滚动条，如果没有则忽略
$("div.demo").o R % 6 F 4 p escrollLeft(300);\ y ) i ; I y 6 \\设置
$(S D H 8 4 J e _"div.demo").scrollLeft(); \\获取

尺寸

height(): height
wiP 8 p Jdth(): width
innerHeight(): height+padding
innerWidth(Z V # F S): width+padding
outerHeight(bool): height+padding+border
outerWidth(bool): width+padding+border //bool为true，加上margin

元素筛选

过滤

返回的jQuery对象的
first() 第一个
last() 
eq(n) 第n+1个
filter(r \ /selector) 仅保留
not(selector) 滤除
has(selector) 内含
hasClass() 选择标有k $ y ~ { z ^ { -某class的元素

查找

children(selector)  \\取得一个包含匹配J { . f \ { Y的元素集合中每一个元素的所有子元素的元素集合。
find(selector)  \\取得一个包含匹x N I配的元素集合中每一个元素的所有后代元素的元素集合。
parent() \\找到唯一父元素
parents([selector]) \\找到祖先元素
后面参考下图：
n\ $ , O e ` uext() //下方兄弟元素
prev() //上方兄弟元素
siblings() //所有兄弟元素

文档处理

内部插入

append()  /F ` : q 3 # G = n/插入到元素最后
appendTo()
- $('#id').appenW c Q Y H Ud('<p>1</p>') r g 2 S b)
$('<p>1</p>').appendTo($('#id'))
prepend()  //插入到元素最前
prep$ g \ 6 IendTo()

替换

repla9 f r k 1 5ceAllx @ L J I G P i(selector)
replaceWith(contentA ; ; a *|fn) //fn是直接移动位置，而不是复制一份

外部插入

after()
before()
insertAfter()
insertBefore()
- &V k ] G a ylt;p>I wor . S 5uld like to say: </p><div id="foo">Hello</div>
$("p").insertAfter("#foo"); 或 $("#foo").after("p")
<div id="foo">Hello</div><p>I would like to say: </p>

删除

empty() //元素内部# r Q L置为空白
rem( A d y c Hove([selector]) //移除元素

效果

show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])//元素显示与隐藏
实质：对display属性进行操作
toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函! V $ s数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切u C 5 P ) N g换为隐藏的；如果元素是隐藏的，切换为可见的。
如果有多个fn，则随着点击依次执行（回调函数
---调t q h s ; # r整高度
slideDo% ( B 1 M \ V @wn([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])A } j J ;
---调整不透明度i q & Z } j b ^ C
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeTo([[speed],opacity,[easing],[fn]]) //调整
fadeToggle([speed,[easing],[fn]])

网络请求

更底层+灵活 – $.ajax()

- jQuery.ajax(url,[settings])
\k Q ] T {\jQuery 底i % Z 3 n O i层 AJAX 实现。
\\简单易用的高层实现见 $.get, $.post 等。_ Z l : ] C 7 $
\\$.a5 $ {jax() 返回其创建的 XMLHttS w o :pRequest 对象。
\\你需要操作不常用3 o O r的选项，以获得更多的灵活性。
- 回调函^ 7 t J K u ! +数
需要使用回调函数处理$.ajax()得到的数据。
\\beforeSend、W + R ; Lerror、dataFilter、success、c` T a j yomplete。
beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及"dC o k ; ) e N /a1 r k L [ DtaType"参数的值。并且必须返回新的数据（可能9 { T ! & n y ] #是处理过的）传递给success回调函数。
success 当请求之后调用。传入n 0 v 4 3 a返回后的数据，以及包含成功代码的字符串。Q ~ b 9
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest6 / n p q s E M对象，以及一个包含成功或错误代码的字符串。
- settings:选项
async:Boolean^ # D a * . 1  (默认: true) 默认设置下，所有请求均为异步Z @ ! 2 n Z X m请求。
contentType:String  (默认: "application/x-www-form-urlencodr 3 c C jed") 发送信息至服务器时内容编码类型。
context:Object  设置Ajax回调函数的上下文(this)。默认this就指向调用本次AJy I ~ @ g IAX请求时传递的options参数。
就像这样：
$.ajax({ url: "test.html",@ V J w context: document\ z j ] ! \ % O o.W g E ;body, success: function(){
$(this).addClass("done");
}});
data:Object,String  发送到服务器的数据。
dataType:String  预期服务器返回的数据类型。
error:FunctJ A g 0 H ] 8ion  (默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
headers:map  Header Dg s ~ P . 2 Eefault: {} 一个额外的"{键:值}"对映射到请求一起发送。
见文档

详情可见中文文档jQuery.Ajax

$.get()

jQuery.get(url, [data], [callback], [type])
\\通过5 Y o ! HTTP GET 请求载入信息。
\\* 7 I ! y {简单的 GET 请求功能，复杂请使用 $.ajax() 。
参数含义同后面 $.post()

$.getJson()

同 $.get(,,,json)

$.getScript()

同o M b C - \ i I $ $.get(,,,script)

$.post()

jQuery.post(url, [data],1 3 r d O - [callback], [type])
\\通过 HTTP POST 请求载[ q N ^入信息。简单的 POST 请求功r ? b T l @ q D能。
\4 G B ,\复杂请使用 $.ajax()
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _defau5 $ C r l alt。

$(selectora s k)d k j (.load()

load(url, [data], [callback])
\\载入文件代码并插入至 DOM 中A [ K z !。
\\会覆盖Dom元素原有值

serialize()7 & H , ! + V M ^

\\序列表表格内容为字d ~ y E N - E符串。
$("form").serialize()

详细中文文档

町子门户

链接