一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

十分鐘玩轉(zhuǎn) jQuery、實例大全

 百科圖書館291 2016-07-30

一、簡介

定義

  jQuery創(chuàng)始人是美國John Resig,是優(yōu)秀的Javascript框架;

  jQuery是一個輕量級、快速簡潔的javaScript庫。源碼戳這

jQuery對象

  jQuery產(chǎn)生的對象時jQuery獨有的,只能自己調(diào)用

書寫規(guī)則

  支持鏈?zhǔn)讲僮鳎?/p>

  在變量前加"$"符號(var $variable = jQuery 對象);

  注:此規(guī)定并不是強制要求。

 

二、尋找元素

選擇器

基本選擇器、層級選擇器、屬性選擇器  與CSS類似,這里不再細說,詳細猛戳這里。

基本篩選器

復(fù)制代碼
$('li:first')    //第一個元素
$('li:last')     //最后一個元素

$("tr:even")     //索引為偶數(shù)的元素,從 0 開始
$("tr:odd")      //索引為奇數(shù)的元素,從 0 開始
 
$("tr:eq(1)")    //給定索引值的元素
$("tr:gt(0)")    //大于給定索引值的元素
$("tr:lt(2)")    //小于給定索引值的元素

$(":focus")      //當(dāng)前獲取焦點的元素
$(":animated")   //正在執(zhí)行動畫效果的元素
復(fù)制代碼

內(nèi)容選擇器

$("div:contains('nick')")    //包含nick文本的元素
$("td:empty")    //不包含子元素或者文本的空元素
$("div:has(p)")  //含有選擇器所匹配的元素
$("td:parent")   //含有子元素或者文本的元素

表單選擇器

復(fù)制代碼
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的單行文本框
$(":password")   //所有密碼框
$(":radio")      //所有單選按鈕
$(":checkbox")   //所有復(fù)選框
$(":submit")     //所有提交按鈕
$(":reset")      //所有重置按鈕
$(":button")     //所有button按鈕
$(":file")       //所有文件域
 
$("input:checked")    //所有選中的元素
$("select option:selected")    //select中所有選中的option元素
復(fù)制代碼

  

篩選器

過濾

$("p").eq(0)       //當(dāng)前操作中第N個jQuery對象,類似索引
$('li').first()    //第一個元素
$('li').last()     //最后一個元素
$(this).hasClass("test")    //元素是否含有某個特定的類,返回布爾值
$('li').has('ul')  //包含特定后代的元素

查找

復(fù)制代碼
$("div").children()      //div中的每個子元素,第一層
$("div").find("span")    //div中的包含的所有span元素,子子孫孫

$("p").next()          //緊鄰p元素后的一個同輩元素
$("p").nextAll()         //p元素之后所有的同輩元素
$("#test").nextUntil("#test2")    //id為"#test"元素之后到id為'#test2'之間所有的同輩元素,掐頭去尾

$("p").prev()            //緊鄰p元素前的一個同輩元素
$("p").prevAll()         //p元素之前所有的同輩元素
$("#test").prevUntil("#test2")    //id為"#test"元素之前到id為'#test2'之間所有的同輩元素,掐頭去尾

$("p").parent()          //每個p元素的父元素
$("p").parents()         //每個p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2")    //id為"#test"元素到id為'#test2'之間所有的父級元素,掐頭去尾

$("div").siblings()      //所有的同輩元素,不包括自己
復(fù)制代碼

 

 三、屬性操作

基本屬性操作

復(fù)制代碼
$("img").attr("src");           //返回文檔中所有圖像的src屬性值
$("img").attr("src","test.jpg");    //設(shè)置所有圖像的src屬性
$("img").removeAttr("src");       //將文檔中圖像的src屬性刪除

$("input[type='checkbox']").prop("checked", true);    //選中復(fù)選框
$("input[type='checkbox']").prop("checked", false);
$("img").removeProp("src");       //刪除img的src屬性
復(fù)制代碼

CSS類

$("p").addClass("selected");      //為p元素加上 'selected' 類
$("p").removeClass("selected");    //從p元素中刪除 'selected' 類
$("p").toggleClass("selected");    //如果存在就刪除,否則就添加

HTML代碼/文本/值

$('p').html();               //返回p元素的html內(nèi)容
$("p").html("Hello <b>nick</b>!");  //設(shè)置p元素的html內(nèi)容
$('p').text();               //返回p元素的文本內(nèi)容
$("p").text("nick");           //設(shè)置p元素的文本內(nèi)容
$("input").val();             //獲取文本框中的值
$("input").val("nick");          //設(shè)置文本框中的內(nèi)容

 

 四、CSS操作

樣式 

$("p").css("color");          //訪問查看p元素的color屬性
$("p").css("color","red");    //設(shè)置p元素的color屬性為red
$("p").css({ "color": "red", "background": "yellow" });    //設(shè)置p元素的color為red,background屬性為yellow(設(shè)置多個屬性要用{}字典形式)

 位置

復(fù)制代碼
$('p').offset()     //元素在當(dāng)前視口的相對偏移,Object {top: 122, left: 260}
$('p').offset().top
$('p').offset().left
$("p").position()   //元素相對父元素的偏移,對可見元素有效,Object {top: 117, left: 250}

$(window).scrollTop()    //獲取滾輪滑的高度
$(window).scrollLeft()   //獲取滾輪滑的寬度
$(window).scrollTop('100')    //設(shè)置滾輪滑的高度為100
復(fù)制代碼

尺寸

復(fù)制代碼
$("p").height();    //獲取p元素的高度
$("p").width();     //獲取p元素的寬度

$("p:first").innerHeight()    //獲取第一個匹配元素內(nèi)部區(qū)域高度(包括補白、不包括邊框)
$("p:first").innerWidth()     //獲取第一個匹配元素內(nèi)部區(qū)域?qū)挾?包括補白、不包括邊框)

$("p:first").outerHeight()    //匹配元素外部高度(默認包括補白和邊框)
$("p:first").outerWidth()     //匹配元素外部寬度(默認包括補白和邊框)
$("p:first").outerHeight(true)    //為true時包括邊距
復(fù)制代碼

 

 五、文檔處理

 內(nèi)部插入

$("p").append("<b>nick</b>");    //每個p元素內(nèi)后面追加內(nèi)容
$("p").appendTo("div");        //p元素追加到div內(nèi)后
$("p").prepend("<b>Hello</b>");  //每個p元素內(nèi)前面追加內(nèi)容
$("p").prependTo("div");        //p元素追加到div內(nèi)前

 外部插入

$("p").after("<b>nick</b>");     //每個p元素同級之后插入內(nèi)容
$("p").before("<b>nick</b>");    //在每個p元素同級之前插入內(nèi)容
$("p").insertAfter("#test");     //所有p元素插入到id為test元素的后面
$("p").insertBefore("#test");    //所有p元素插入到id為test元素的前面

替換

$("p").replaceWith("<b>Paragraph. </b>");    //將所有匹配的元素替換成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p");     //用匹配的元素替換掉所有 selector匹配到的元素

刪除

$("p").empty();     //刪除匹配的元素集合中所有的子節(jié)點,不包括本身
$("p").remove();    //刪除所有匹配的元素,包括本身
$("p").detach();    //刪除所有匹配的元素(和remove()不同的是:所有綁定的事件、附加的數(shù)據(jù)會保留下來)

復(fù)制

$("p").clone()      //克隆元素并選中克隆的副本
$("p").clone(true)   //布爾值指事件處理函數(shù)是否會被復(fù)制

 

六、事件

頁面載入

  當(dāng)頁面載入成功后再運行的函數(shù)事件

復(fù)制代碼
$(document).ready(function(){
  do something...
});

//簡寫
$(function($) {
  do something...
});
復(fù)制代碼

頁面處理

復(fù)制代碼
//bind 為每個匹配元素綁定事件處理函數(shù),綁定多個用{}。
$("p").bind("click", function(){
  alert( $(this).text() );
});
$(menuF).bind({
    "mouseover":function () {
     $(menuS).parent().removeClass("hide");
     },"mouseout":function () {
     $(menuS).parent().addClass("hide");
}
});         


$("p").one( "click", fun...)    //one 綁定一個一次性的事件處理函數(shù)
$("p").unbind( "click" )        //解綁一個事件
復(fù)制代碼

頁面委派

復(fù)制代碼
// 與bind 不同的是當(dāng)時間發(fā)生時才去臨時綁定。
$("p").delegate("click",function(){
  do something...
});

$("p").undelegate();       //p元素刪除由 delegate() 方法添加的所有事件
$("p").undelegate("click")   //從p元素刪除由 delegate() 方法添加的所有click事件
復(fù)制代碼

事件

復(fù)制代碼
$("p").click();      //單擊事件
$("p").dblclick();    //雙擊事件
$("input[type=text]").focus()  //元素獲得焦點時,觸發(fā) focus 事件
$("input[type=text]").blur()   //元素失去焦點時,觸發(fā) blur事件
$("button").mousedown()//當(dāng)按下鼠標(biāo)時觸發(fā)事件
$("button").mouseup()  //元素上放松鼠標(biāo)按鈕時觸發(fā)事件
$("p").mousemove()     //當(dāng)鼠標(biāo)指針在指定的元素中移動時觸發(fā)事件
$("p").mouseover()     //當(dāng)鼠標(biāo)指針位于元素上方時觸發(fā)事件
$("p").mouseout()     //當(dāng)鼠標(biāo)指針從元素上移開時觸發(fā)事件
$(window).keydown()    //當(dāng)鍵盤或按鈕被按下時觸發(fā)事件
$(window).keypress()   //當(dāng)鍵盤或按鈕被按下時觸發(fā)事件,每輸入一個字符都觸發(fā)一次
$("input").keyup()     //當(dāng)按鈕被松開時觸發(fā)事件
$(window).scroll()     //當(dāng)用戶滾動時觸發(fā)事件
$(window).resize()     //當(dāng)調(diào)整瀏覽器窗口的大小時觸發(fā)事件
$("input[type='text']").change()    //當(dāng)元素的值發(fā)生改變時觸發(fā)事件
$("input").select()    //當(dāng)input 元素中的文本被選擇時觸發(fā)事件
$("form").submit()     //當(dāng)提交表單時觸發(fā)事件
$(window).unload()     //用戶離開頁面時
復(fù)制代碼

(event object) 對象

所有的事件函數(shù)都可以傳入event參數(shù)方便處理事件

復(fù)制代碼
$("p").click(function(event){  
 alert(event.type); //"click"  
}); 

(evnet object)屬性方法:
event.pageX   //事件發(fā)生時,鼠標(biāo)距離網(wǎng)頁左上角的水平距離
event.pageY   //事件發(fā)生時,鼠標(biāo)距離網(wǎng)頁左上角的垂直距離
event.type   //事件的類型
event.which   //按下了哪一個鍵
event.data   //在事件對象上綁定數(shù)據(jù),然后傳入事件處理函數(shù)
event.target  //事件針對的網(wǎng)頁元素
event.preventDefault()  //阻止事件的默認行為(比如點擊鏈接,會自動打開新頁面)
event.stopPropagation()  //停止事件向上層元素冒泡
復(fù)制代碼

 

 七、效果

 基本

$("p").show()        //顯示隱藏的匹配元素
$("p").show("slow");    //參數(shù)表示速度,("slow","normal","fast"),也可為900毫秒
$("p").hide()        //隱藏顯示的元素
$("p").toggle();      //切換 顯示/隱藏

滑動

$("p").slideDown("900");    //用900毫秒時間將段落滑下
$("p").slideUp("900");     //用900毫秒時間將段落滑上
$("p").slideToggle("900");  //用900毫秒時間將段落滑上,滑下

淡入淡出

$("p").fadeIn("900");        //用900毫秒時間將段落淡入
$("p").fadeOut("900");       //用900毫秒時間將段落淡出
$("p").fadeToggle("900");     //用900毫秒時間將段落淡入,淡出
$("p").fadeTo("slow", 0.6);    //用900毫秒時間將段落的透明度調(diào)整到0.6

 

 八、對象訪問

復(fù)制代碼
$.trim()   //去除字符串兩端的空格
$.each()   //遍歷一個數(shù)組或?qū)ο?,for循環(huán)
$.inArray() //返回一個值在數(shù)組中的索引位置,不存在返回-1  
$.grep()   //返回數(shù)組中符合某種標(biāo)準(zhǔn)的元素
$.extend()  //將多個對象,合并到第一個對象
$.makeArray() //將對象轉(zhuǎn)化為數(shù)組
$.type()    //判斷對象的類別(函數(shù)對象、日期對象、數(shù)組對象、正則對象等等
$.isArray() //判斷某個參數(shù)是否為數(shù)組
$.isEmptyObject() //判斷某個對象是否為空(不含有任何屬性)
$.isFunction()    //判斷某個參數(shù)是否為函數(shù)
$.isPlainObject() //判斷某個參數(shù)是否為用"{}"或"new Object"建立的對象
$.support()       //判斷瀏覽器是否支持某個特性
復(fù)制代碼
模擬each()內(nèi)部實現(xiàn)機制

 

九、插件拓展機制 

復(fù)制代碼
//方式一
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
復(fù)制代碼
復(fù)制代碼
//方式二
jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },    //三元運算
  max: function(a, b) { return a > b ? a : b; }
});

jQuery.min(2,3);     //2
jQuery.max(4,5);    //5
復(fù)制代碼
View Code

 

 十、實例

返回頂部
左側(cè)菜單
菜單切換
滾動菜單
淡入淡出
滑動
隱藏與顯示
添加與刪除標(biāo)簽
商城商品放大鏡
商城菜單
拖動面板
模態(tài)對話框
輪播圖
編輯框

 

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    久久精品国产第一区二区三区| 色婷婷日本视频在线观看| 国产精品亚洲综合天堂夜夜| 久久精品中文扫妇内射| 东京热男人的天堂久久综合| 日韩一区二区三区有码| 欧美精品激情视频一区| 精品人妻精品一区二区三区| 亚洲av日韩一区二区三区四区 | 国产一区二区三区av在线| 成人三级视频在线观看不卡| 九九热在线视频观看最新| 国产av熟女一区二区三区四区| 色哟哟精品一区二区三区| 亚洲中文字幕在线综合视频| 亚洲中文字幕亲近伦片| 日韩国产亚洲欧美另类 | 国产一区二区三区免费福利| 日本精品中文字幕人妻| 一区二区三区四区亚洲专区| 黄片美女在线免费观看| 欧美日韩无卡一区二区| 欧美日韩精品一区二区三区不卡| 夜色福利久久精品福利| 国产美女网红精品演绎| 国产午夜精品美女露脸视频| 亚洲欧美国产网爆精品| 东京热男人的天堂一二三区| 日韩国产传媒在线精品| 国内外激情免费在线视频| 日韩精品成区中文字幕| 久久精品国产亚洲av麻豆| 亚洲精品一区三区三区| 欧美欧美欧美欧美一区| 午夜精品国产一区在线观看| 国产成人在线一区二区三区| 欧美日韩亚洲国产精品| 日本熟妇五十一区二区三区| 国产亚洲欧美自拍中文自拍| 开心久久综合激情五月天| 91久久精品在这里色伊人|