1.基礎(chǔ)代碼

調(diào)用

<script type=”text/javascript” src=”js/jquery-3.1.1.js”></script>

開始

$(document).ready(function(){})的dom結(jié)構(gòu)的簡化的寫法就是$(function(){})

優(yōu)先

優(yōu)先權(quán)轉(zhuǎn)讓的處理jQury.noConflict();

ul選擇器

?????????

表格元素

?????????

可見隱藏選擇器

?????????

表單選擇器

:text 在文本框中

:password 輸出密碼項

:radio 單選框

:checked 復(fù)選框、單選框被選中

:selected 下拉列表被選中的

:enabled 可用的表單項

:disabled 不可用的表單項

? ? ??

轉(zhuǎn)換

將js對象轉(zhuǎn)化為jquery的對象 Var oImg=document.getelementsbytagname(‘img’)[0]; Alert($(oImg).attr(‘src’)); 將jquery轉(zhuǎn)換為js對象 Var img=$(‘img’); Alert(img[0].src);

元素操作

$(‘img’).attr(src:”img/c.jpg”,width:”300px”);

內(nèi)容操作

獲取內(nèi)容

html() 獲得、設(shè)置標(biāo)簽里面的html內(nèi)容

text() 獲得、設(shè)置標(biāo)簽里面的文本內(nèi)容

val() 獲得、設(shè)置表單元素的value值

$(‘:#div1’).html()

$(‘:#div1’).text()

$(‘:#div1’).val()

樣式操作

css()：

css(attr,value)

css({attr1:value1,attr2:value2})

$(‘img’).css(‘border’,’1px solid red’);

寬高

width() 獲得元素真實的寬度

height() 獲得元素真實的高度

innerWidth() ?innerHeight() 內(nèi)部寬高（不包括邊框）

outerWidth() ??outerHeight 整體的寬高（包括邊框）

位置

offset() ：相對于body的偏移

position()：相對于父元素的偏移（絕對定位使用）

scrollTop()：設(shè)置、獲得body距離頂部的偏移

scrollLeft() 設(shè)置、獲得body距離左邊的偏移

2.DOM

DOM就是將html標(biāo)簽轉(zhuǎn)換成一個一個的節(jié)點對象

內(nèi)部追加

append()：父節(jié)點追加子節(jié)點

appendTo() 子節(jié)點追加到父節(jié)點

prepend() 父節(jié)點追加子節(jié)點（放在前面的位置）

prependTo() ?子節(jié)點追加到父節(jié)點上（放在前面的位置上）

?

外部追加

after() : 父節(jié)點追加子節(jié)點到后面

before() ：父節(jié)點追加子節(jié)點到前面

insertAfter() ： 子節(jié)點追加到父節(jié)點的后面

insertBefore()：子節(jié)點追加到父節(jié)點的前面

?

包裹節(jié)點

就是一個加外圍的意思

wrap() ?將匹配的標(biāo)簽單獨包裹

wrapAll() 將匹配的標(biāo)簽整體包裹

$(‘p’).wrap(‘<div>’);使用div標(biāo)簽單獨包裹p

$(‘p’).wrapall(‘<div>’);使用div標(biāo)簽整體包裹p

代替節(jié)點

replaceWith(content) 使用指定的內(nèi)容替換匹配的標(biāo)簽

replaceAll() ??? 使用創(chuàng)建的元素替換匹配的標(biāo)簽

?

?刪除節(jié)點

待刪除的節(jié)點.remove()

待清空的節(jié)點.empty()

過濾節(jié)點

eq(index) 過濾索引值是index的元素

first() 過濾第一個元素

last() 過濾最后一個元素

hasClass(className) 是否包含指定的類

filter(exp) 過濾符合表達式的元素

is() 判斷是否符合條件

has(element) 過濾包含element元素的標(biāo)簽

?

查詢節(jié)點

children() 父節(jié)點查詢所有的子節(jié)點，返回數(shù)組

find() 從父節(jié)點中查詢指定的子節(jié)點

next() 當(dāng)前節(jié)點的下一個同輩節(jié)點

prev() 當(dāng)前節(jié)點的上一個同輩節(jié)點

nextAll() 返回當(dāng)前節(jié)點后面的所有同輩節(jié)點

prevAll() ??返回當(dāng)前節(jié)點前面的所有同輩節(jié)點

parent() 當(dāng)前節(jié)點的父節(jié)點

siblings() 當(dāng)前節(jié)點的所有兄弟節(jié)點

?

遍歷節(jié)點

lenght：獲得集合的元素個數(shù)

get(index)根據(jù)索引獲得節(jié)點對象

index() 獲得某個節(jié)點在集合中的索引位置

?

3.事件

事件監(jiān)聽

//進行獲取，之后再進行添加事件

Var oDiv=$(‘#div1’);

oDiv.click(function(event){

內(nèi)容

});

//添加多個的事件監(jiān)聽

oDiv.on(){

Mouseover.function(){

$(this).css(‘border’:’red’,’color’:’yellow’);

}

}

//取消事件監(jiān)聽

oDiv.off(){“mouseover”}

//只監(jiān)視一次

oDiv.one(“click”,function(){內(nèi)容})

//自動觸發(fā)trigger事件

oDiv.trigger(‘myevent’,[‘阿貓’,’阿狗’,’阿花’]);

事件委派

就是后創(chuàng)建對象，之前就說明動作變化

?

合成事件

$(‘img’).hover(function(){},function(){})

4.動畫

基本效果

show(speed,callback)

hide(speed,callback)

toggle(speed,callback)

$(this).next().hide(1000,function(){})

$(this).next().show(1000,function(){})

滑動效果

? slideDown() 向下滑動

? slideUp ????向上滑動

? slideToggle() 切換滑動

$(this).nex().slidedown(1000,function())

$(this).next().slideup(1000,function(){})

漸變效果

該動畫效果控制的是opacity的值

fadeIn() 淡入，opacity從0到1

fadeOut() 淡出，opacity從1到0

fadeTo() 指定opacity執(zhí)行到哪里，值是0到1之間的數(shù)值

fadeToggle() 切換

$(this).next().fadein(1000,function(){})

自定義

animate()

參數(shù)1：{}對象，執(zhí)行動畫效果的css屬性

參數(shù)2：speed，也就是多長時間執(zhí)行完畢

參數(shù)3：回調(diào)函數(shù)

停止

stop()

參數(shù)1：bool，clearQueue,是否清除所有排著隊動畫

參數(shù)2：bool，goEnd，是否讓當(dāng)前正在執(zhí)行的動畫立即執(zhí)行完畢

$(this).stop(true,false);

?

5.Ajax封裝

$.get

參數(shù)1：url，請求的服務(wù)器地址

參數(shù)2：param，請求時攜帶的參數(shù)

參數(shù)3：callback，請求完成時執(zhí)行的回調(diào)函數(shù)

參數(shù)4：dataType，期望返回的數(shù)據(jù)格式（html，xml，text，json），默認是text

如果期待返回一個xml格式的數(shù)據(jù)，需要服務(wù)器端返回的是xml文件格式

默認的例子如下：

$.get(‘get.php’,‘name=zhangsan&age=30’,function(res){alert(res);},‘xml’)<?php echo ‘<?xml version=”1.0” encoding=”utf-8”?><students>zhangsan</students>’;?>

針對于參數(shù)四的分析

1如果數(shù)據(jù)需要重用，那么json文件是不錯的選擇,它在性能和文件大小方面具有優(yōu)勢

2如果遠程應(yīng)用程序未知，可以使用xml，因為xml是web領(lǐng)域的”世界語言”，

總結(jié)就是：json性能大小好-------xml兼容性好

?

$.post

$.post(

‘post.php’,

?{username:zhangsan,password:zhangsan},

?Function(res){

?Console.log(res);

?},

‘json’

);

序列化

表單項太多的話，需要一個一個拼接，所以jQuery提供了系列化函數(shù)

serialize() 將表單的數(shù)據(jù)進行序列化，序列化成字符串

serializeArray() 將表單的數(shù)據(jù)序列化成數(shù)組

$.param(obj) 該方法可以將對象序列化成一個字符串

json

$.parseJSON() 將json格式的字符串轉(zhuǎn)換成一個對象

JSON.stringfy() 將對象轉(zhuǎn)換成json格式的字符串

$.ajax

參數(shù)1:請求的地址;

參數(shù)2:請求的類型

參數(shù)3:攜帶的數(shù)據(jù)，沒有就寫空

參數(shù)4:期待服務(wù)器返回的數(shù)據(jù)格式 ?

參數(shù)5:發(fā)送之前執(zhí)行的函數(shù)

參數(shù)6:請求完成 ?

參數(shù)7:請求成功

參數(shù)8:請求失敗的回調(diào)函數(shù)

?

6.插件

輪播插件
Cookie插件
表單驗證插件
驗證碼
Fullpage
動畫插件等等

?

總結(jié)

以上是生活随笔為你收集整理的Jquery常用标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。