jq編程基礎(chǔ)

jq是函數(shù)式編程,所以獲取元素就有如下形式:

$("#id");相當(dāng)于js中document.getElementById("id");因為jq中不需要=,所以本文之后用=代替"相當(dāng)于js中"這句話.
$(".class")=document.getElementsByClassName("class");
$("tag")=document.getElementsByTagName("tag");

可以看出,jq作為js庫相比后者在寫法上大幅度簡化了,所以jq比起js要簡單得多,相當(dāng)多.使用jq開發(fā)效率高很多,而且不存在瀏覽器兼容問題.這是因為jq其實是用js寫的,jq源碼在用js寫的過程中實際上就包括了所有瀏覽器的兼容方案.
接下來繼續(xù)介紹jq的語法;

$(function(){});=window.onload=function(){}
$($("tag").html());=document.getElementsByTagName("tag").innerHTML("");
$($("tag").find("#id/.class/tag"));=document.getElementsByTagName("tag").document.getElementsByTagName("tag")/document.getElementsByClassName("class")/document.getElementById("id");在節(jié)點下查找某元素.
index(),索引 表示在兄弟節(jié)點中的位置;
has(),包含  在節(jié)點內(nèi)部查找某元素.
filter(),過濾  例子filter($("tag"));過濾名為tag的元素,即獲取tag元素
not(),反過濾  和上面的相反.
next(),下一個兄弟節(jié)點
prev(),上一個兄弟節(jié)點
attr(),操作元素屬性值,例子$("tag").attr("title","哈哈");把tag標(biāo)簽的title屬性值改為哈哈.
eq() 下標(biāo) 相當(dāng)于數(shù)組里的下標(biāo)
addClass()給節(jié)點添加class
removeClass()刪除class
append()添加某節(jié)點為某節(jié)點最后一個子節(jié)點.例如$("tag").append("tag1");添加tag1為tag子節(jié)點的最后一個.
appendTo()把某節(jié)點添加為某節(jié)點最后一個子節(jié)點,例如$("tag").append("tag1");把tag添加為tag1子節(jié)點的最后一個.
注意:這里的append()和appendTo()操作的對象不同,前者操作括號里的節(jié)點,后者則相反操作該方法前面的節(jié)點.
prepend()和prependTo()同上,意為添加為子節(jié)點首位.
insertBefore()和before()也是,意為把某節(jié)點插入(剪切)到某節(jié)點之前
至于insetAfter()和after()同樣,意為把某節(jié)點插入(剪切)到某節(jié)點之后
jq中對同一節(jié)點的一系列操作可以簡化節(jié)點,直接在第一個節(jié)點后追加 例如;
$("tag").click(function(){});
$("tag").mouseover(function(){});
$("tag").mouseout(function(){});
可以簡化為$("tag").click(function(){}).mouseover(function(){}).mouseout(function(){});
這個特點稱之為jq的鏈?zhǔn)讲僮?
remove(),不需要參數(shù),移除節(jié)點/變量

on(),添加事件 參數(shù)為事件,可多個參數(shù).例如:
$("tag").on("click",function(){});  第一種 適用于單個事件一切場景
$("tag").on("click mouseover",function(){});第二種 適用于兩種事件采用同一函數(shù)的場景
$("tag").on({click:function(){},mouseover:function(){}});第三種 適用于多個事件一切場景

off(),移除事件,參數(shù)為要移除的事件,不寫默認移除所有事件
對事件進行操作,jq中是直接
$("div").click(function(ev){
     ev.pageX    ev就是事件對象,pageX和js中clientX作用相仿,不過不同的是前者相對于文檔,后者相對于可視區(qū)域,Y同理      
});
ev對象有一些方法:
which:和js中keyCode一樣,獲取鍵盤值,不同的是,which連鼠標(biāo)的值也可以獲取
preventDefault(),阻止默認時間,stopPropagation(),阻止冒泡,return false;既阻止默認又阻止冒泡.one()事件只執(zhí)行一次
scrollTop(),獲取節(jié)點垂直滾動距離,left為水平距離
$("<div>div</div>")創(chuàng)建節(jié)點,相當(dāng)于js中
document.creatElement("div");
document.getElementsByTagName("div").innerHTML("div");
可以說jq大幅度,簡化了js的操作.

offset().left/top 獲取元素到瀏覽器窗口的left值或top值
position() 把當(dāng)前元素轉(zhuǎn)化為類似定位的形式
offsetParent()獲取定位的父級元素
parent()獲取父級元素
val()獲取元素value值
size()類似于js中的length
each(function(i,value){}),jq中的for循環(huán),i代表下標(biāo),value代表每一個元素
hover(function(){},function(){})前一個鼠標(biāo)移入,后一個鼠標(biāo)移出
show()和hide(),jq的運動效果,同時改變width和height還有透明度. 顯示和隱藏 參數(shù)為時間,單位毫秒
fadeIn()和fadeOut(),同上,只改變透明度 分別為淡入,淡出
fadeTo(1000,0.5),具體設(shè)置透明度,時間1秒,透明度0.5
slideDown()和slideUp無參數(shù),分別為下拉,上拉 運動效果.

get(),把jq轉(zhuǎn)化為js,例如$("#div1").get(0).innerHTML這樣在同一行里就實現(xiàn)js和jq同時存在,需要注意參數(shù)為一個集合的下標(biāo),如果一個就寫0,不寫默認選中集合中所有元素.同時有一個簡寫用[i]可以代替get[i];
remove()和detach(),前者徹底刪除節(jié)點,包括與事件的綁定關(guān)系(徹底刪除,粉碎存在痕跡),而后者僅僅刪除節(jié)點,保留其他東西(相當(dāng)于回收站,可以恢復(fù)如初)
outerWidth獲取任意元素的寬度,而js中offsetWidth獲取不到隱藏元素的寬度例如display:none其他類似高度height也一樣有區(qū)別
text(),獲取或設(shè)置文本,類似html()但僅獲取或設(shè)置文本

$(function(){});window.onload=function(){}的區(qū)別是,前者僅dom加載完就執(zhí)行,后者需要全部頁面加載完才執(zhí)行,然而并不需要這樣做,所以jq的性能更好,速度更快

parents(),獲取元素祖先節(jié)點,參數(shù)為具體某一個節(jié)點,數(shù)目不限
closest(),獲取最近的指定祖先節(jié)點,必須設(shè)置參數(shù),因為只能找一個元素
siblings()獲取所有兄弟節(jié)點,參數(shù)也是篩選節(jié)點
nextAll()獲取下面所有兄弟節(jié)點,參數(shù)篩選
prevAll()上面兄弟節(jié)點,參數(shù)篩選
上述方法的All改為utill獲取直到某節(jié)點停止,參數(shù)篩選
clone();在用append()等移動節(jié)點的操作時通常是剪切,但$(''#div1").clone().append("#div2")是復(fù)制不會改變原div2.如果加參數(shù)true,就連事件綁定關(guān)系等一切完美復(fù)制.
wrap();包裝,$("#div1").wrap("#div2")即為在div2外面包一個div1
wrapAll();整體包裝,包裝一個集合,把all換inner為內(nèi)部包裝,正好相反,
unWrap();刪除包裝,但body不受此約束.

add(),并集 var oDiv=$("#div1").add("span")同時選定div1和span

slice()和數(shù)組用法相似
serialize(),將數(shù)組解析為字符串例如:

<input type="texe" name="a" value="1">
<input type="texe" name="b" value="2">
<input type="texe" name="c" value="3">
$('form').serialize(1);

即為a=1&b=2&c=3;

serializeArray()是轉(zhuǎn)化為數(shù)組形式即:

[
    {name:"a",value:"1"},
    {name:"b",value:"2"},
    {name:"c",value:"3"}
]

animate()運動,類似js中的startMove,參數(shù)用json寫 參數(shù)有四個:
1.參數(shù)用json格式即{width:300px,height:200px}
2.時間,上述例子后面沒寫時間,所以默認為400毫秒,,這是第二個參數(shù)animate({width:300px,height:200px},300)就設(shè)置300毫秒
3.運動形式,有兩個默認為swing(慢快慢),linear(勻速).當(dāng)然還有其他的需要進一步學(xué)習(xí)才能知道
4.回調(diào)函數(shù):在運動結(jié)束時執(zhí)行animate({width:300px,height:200px},300,swing,function(){});
stop(),默認阻止當(dāng)前運動,參數(shù)true可以阻止后續(xù)運動,立即停止到當(dāng)前運動指定目標(biāo)點
finish()立即停止到所有運動指定目標(biāo)點
delay(1000)延遲一秒鐘

delegate(),事件委托 舉例:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

如果給上述li節(jié)點綁定事件函數(shù),一般的寫法為$("li").on("click",fuction(){});利用事件冒泡出現(xiàn)了一個事件委托的方法:$("ul")delegate("li","click",function(){});和前者效果是一樣的,但事件綁定在ul上,利于性能優(yōu)化

阻止事件委托:undelegate();
trigger(),事件 主動/自動 觸發(fā)
ev.data事件數(shù)據(jù) 例如$("li").on("click",{name:"hello"},function(){});其中,ev.data可以代表name:"hello"這個數(shù)據(jù),而ev.data.name就代表hello.
ev.target獲取事件源
ev.type事件類型

直到目前為止,我們學(xué)習(xí)的僅僅是$()也就是jquery對象下的方法,但是這個庫最有用的其實是它的工具插件,先來講講工具吧
$其實就是jQuery的簡寫,$().css()這種只能給jq使用.但是$.xx()不僅能給jq用,甚至原生js也可以使用,所以$.xx()被稱為工具方法
$.type()判斷數(shù)據(jù)類型 類似js中的typeof但前者判斷的數(shù)據(jù)類型更多,數(shù)據(jù)分類更具體,簡單地說就是js寫法的完美版
$.trim()去掉空格
$.inArray()類似indexof例子:
var arr=["a","b","c"];
$.inArray("a",arr);返回的值是一個數(shù)字,就是下標(biāo)0,如果找一個數(shù)組里不存在的元素,那就返回-1.
$.proxy()改變this指向,例如

function show(n1,n2){
     $.proxy(show,document,1,2     )(3,4);這里就改變show的this指向為document,并且直接給出參數(shù),也可以在后面跟括號給參數(shù),也可以兩者混用.
}

前面提到了$和jquery其實是一回事,但是$并不是jquery的專屬簡寫,實際上很多庫都使用了$作為簡寫.那么如何解決沖突呢?
noConflict()防止沖突,例如
var m=$.noConflict(); 那接下來m就可以替代$得作用了

parseJSON ()將字符串轉(zhuǎn)為json格式
makeArray()將類數(shù)組轉(zhuǎn)為真數(shù)組,什么是類數(shù)組呢?var m=$("div").$("li");這里m實際上就是類數(shù)組,因為li很可能有多個,但類數(shù)組是不能使用數(shù)組的方法的,所以用makeArray()轉(zhuǎn)換為真數(shù)組,就可以使用數(shù)組的方法.
jquery的插件:
即便jquery已經(jīng)如此強大,但有時候我們需要的效果jq并沒能實現(xiàn),所以通過插件可以補充jq
jq插件有兩種,一種是工具插件,眾所周知jq最負盛名的是它工具庫的作用,當(dāng)然插件也是其關(guān)鍵的一方面
$.extend(function(){}),這樣設(shè)置就可以了
$.fn.extend(function(){})這種是第二種插件形式,即jq對象下的插件,兩種插件因為調(diào)用的形式不同,一個是$().xx(),一個是$.xx(),所以可以存在同名插件的情況

關(guān)于jq的其他東西,直接去看中文文檔就可以了 ,道理都是相似的

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • jQuery基礎(chǔ) 什么是JQ?一個優(yōu)秀的JS庫,大型開發(fā)必備JQ的好處?一簡化JS的復(fù)雜操作二不再需要關(guān)心兼容性三...
    幺七閱讀 1,001評論 0 2
  • 通過jQuery,您可以選?。ú樵?,query)HTML元素,并對它們執(zhí)行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 713評論 0 3
  • 一.jQury的引入 jQuery的優(yōu)勢 輕量級 強大的選擇器 出色的DOM操作 可靠的事件處理機制 完善的Aja...
    空谷悠閱讀 585評論 0 2
  • 社群簡單認為就是一個群,但是社群需要有一些它自己的表現(xiàn)形式。比如說我們可以看到社群它要有社交關(guān)系鏈,不僅只是拉一個...
    亮子老濕閱讀 164評論 0 0
  • 講臺三尺地方, 老師一生奔忙。 青絲變成白發(fā), 贏得滿園芬芳。.
    天下有雙_a7de閱讀 376評論 0 4

友情鏈接更多精彩內(nèi)容