【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)

事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
click – 单机6 ; 2 w H n 4 ) ^ keypress – 不会触发ALT等键 submit – 表单提交 load – 加载完毕时
dblclick – 双击 keydown – 键按下 change – 表单值改变 resize – 窗口大小调整时
mouseenter – 鼠标进入 kN 6 \ F I S _ 0 Geyup – 键抬起 focus – 元素聚焦 scroll – 滚动条滚动时
mouseleave – 鼠标离开 blur – 失去焦点 unload – 离开页面时
hover – 鼠标悬停
mousedown – 鼠标按下

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()

详细中文文档

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注