亚洲永久精品WW47,韩国三级《老师的秘密》,抖抈短视频app免费下载安装

jquery簡介

1.jquery是什么 ? 參考用法

jQuery由美國人John Resig創建，至今已吸引了來自世界各地的眾多 javascript高手加入其team。
jQuery是繼prototype之后又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。
它是輕量級的js庫(壓縮后只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現動畫效果，并且方便地為網站提供AJAX交互。
jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。
jQuery能夠使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html里面插入一堆js來調用命令了，只需定義id即可。

2.什么是jQuery對象？

jQuery 對象就是通過jQuery包裝DOM對象后產生的對象。
jQuery 對象是 jQuery 獨有的. 如果一個對象是 jQuery 對象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

比如：

$("#test").html()意思是指：獲取ID為test的元素內的html代碼。其中html()是jQuery里的方法

這段代碼等同于用DOM實現代碼： document.getElementById(" test ").innerHTML;

　　雖然jQuery對象是包裝DOM對象后產生的，但是jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery里的方法.亂使用會報錯

約定：如果獲取的是 jQuery 對象, 那么要在變量前面加上$.

var $variable = jQuery對象

var variable = DOM對象

二尋找元素(重要的選擇器和篩選器)

2.1選擇器

2.1.1 基本選擇器

$("*")

$("#id")

$(".class")

$("element")

$(".class,p,div") //每一個選擇器匹配到的元素合并后一起返回。

2.1.2 層級選擇器

$(".outer div") //匹配所有的后代元素

$("parent > child") //匹配所有的子元素

$("prev + next") //匹配所有緊接在 prev 元素后的 next 元素

$("prev ~ siblings ") //匹配 prev 元素之后的所有 siblings 元素(同級元素)

2.1.3 基本篩選器

$('li:first'); //獲取第一個元素

$('li:last') //最后一個元素

:not(selector) //去除所有與給定選擇器匹配的元素配的元素

$("input:not(:checked)") //查找所有未選中的 input 元素

$("tr:even") //索引為偶數的元素，從 0 開始

$("tr:odd") //索引為奇數的元素，從 0 開始

$("tr:eq(1)") //給定索引值的元素

$("tr:gt(0)") //大于給定索引值的元素

$("tr:lt(2)") //小于給定索引值的元素

$(":focus") //當前獲取焦點的元素

$(":animated") //正在執行動畫效果的元素

2.1.4 屬性選擇器

$("div[id]")

$('[id="div1"]')

$("div[name!='new']")

$("div[name^='new']")

$("div[name&='new']")

$("div[name*='new']")

//復合:

$('["alex="sb"][id]')

$("div[id][name$='man']")

2.1.5 表單選擇器

$(":input") //匹配所有 input, textarea, select 和 button 元素

$(":text") //所有的單行文本框

$(":password") //所有密碼框

$(":radio") //所有單選按鈕

$(":checkbox") //所有復選框

$(":submit") //所有提交按鈕

$(":reset") //所有重置按鈕

$(":button") //所有button按鈕

$(":file") //所有文件域

$("input:checked") //所有選中的元素

$("select option:selected") //select中所有選中的option元素

2.1.6 表單對象屬性選擇器

$(":enabled") //匹配所有可用元素

$(":disabled") //匹配所有不可用元素

$(":checked") //匹配所有選中中元素

$(":selected") //匹配所有選中的option元素

2.1.7 內容選擇器

$(":contains(text)") //匹配包含給定文本的元素

$(":empty") //匹配所有不包含子元素或者文本的空元素

$(":parent") //匹配含有子元素或者文本的元素

$(":has(selector)") //匹配含有選擇器所匹配的元素的元素

2.1.8 可見性選擇器　　

1 2	`$(":hidden")` `//匹配所有不可見元素，或者type為hidden的元素` `$(":visible")` `//匹配所有的可見元素`

2.2篩選器

2.2.1 過濾

$("p").eq(0) //當前操作中第N個jQuery對象,類似索引

$('li').first() //第一個元素

$('li').last() //最后一個元素

$(this).hasClass("test") //元素是否含有某個特定的類,返回布爾值

$('li').has('ul') //包含特定后代的元素

2.2.2 查找

$("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() //所有的同輩元素,不包括自己

實例左側菜單

demo

實例 tab切換

demo

三操作元素(屬性 CSS 和文檔處理)

3.1 屬性操作

3.1.1 基本屬性操作

$("div").attr("id"); 　　　　　　 //返回文檔中所有div的id屬性值

$("div").attr("id","4"); //設置所有div的id屬性

$("div").attr({'alex':'sb'}) //設置多個屬性,字典形式

$("div").removeAttr("name"); 　 //將文檔中圖像的src屬性刪除

$("input[type='checkbox']").prop("checked", true); //選中復選框

$("input[type='checkbox']").prop("checked", false);

$("img").removeProp("src"); 　　 //刪除img的src屬性

3.1.2 CSS類操作

$("p").addClass("selected"); 　　//為p元素加上 'selected' 類

$("p").removeClass("selected"); //從p元素中刪除 'selected' 類

$("p").toggleClass("selected"); //如果存在就刪除,否則就添加

3.1.3 HTML代碼/本文/值

$('p').html(); 　　　　　　　　　　 //返回p元素的html內容

$("p").html("Hello nick!"); //設置p元素的html內容

$('p').text(); 　　　　　　　　　　 //返回p元素的文本內容

$("p").text("nick"); 　　　　　　　//設置p元素的文本內容

$("input").val(); 　　　　　　　　 //獲取文本框中的值

$("input").val("nick"); 　　　　 //設置文本框中的內容

實例編輯框正反選

demo

實例模態對話框

demo

3.2 CSS操作

3.2.1 樣式

$("p").css("color"); //訪問查看p元素的color屬性

$("p").css("color","red"); //設置p元素的color屬性為red

$("p").css({ "color": "red", "background": "yellow" }); //設置多個屬性要用{}字典形式

3.2.2 位置

$('p').offset() //元素在當前視口的相對偏移,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') //設置滾輪滑的高度為100

$(window).height() //獲取窗口的高度

$(document).height() //獲取文檔的高度

3.2.3 尺寸

$("p").height(); //獲取p元素的高度

$("p").width(); //獲取p元素的寬度

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

$("p:first").innerWidth() //獲取第一個匹配元素內部區域寬度(包括補白、不包括邊框)

$("p:first").outerHeight() //匹配元素外部高度(默認包括補白和邊框)

$("p:first").outerWidth() //匹配元素外部寬度(默認包括補白和邊框)

$("p:first").outerHeight(true) //為true時包括邊距

實例返回頂部

demo

緩慢返回頂部(帶效果):

$('#backTop').bind('click',function(){

$('html,body').animate( {scrollTop:0} );

});

注:html,body需一起使用。

實例滾動菜單

demo

3.3 文檔處理

3.3.1 內部插入

$("p").append("nick"); //每個p元素內后面追加內容

$("p").appendTo("div"); 　　　 //p元素追加到div內后

$("p").prepend("Hello"); //每個p元素內前面追加內容

$("p").prependTo("div"); 　 //p元素追加到div內前

3.3.2 外部插入

$("p").after("nick"); //每個p元素同級之后插入內容

$("p").before("nick"); //在每個p元素同級之前插入內容

$("p").insertAfter("#test"); //所有p元素插入到id為test元素的后面

$("p").insertBefore("#test"); //所有p元素插入到id為test元素的前面

3.3.3 替換

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

3.3.4 刪除

$("p").empty(); //刪除匹配的元素集合中所有的子節點，不包括本身

$("p").remove(); //刪除所有匹配的元素,包括本身

$("p").detach(); //刪除所有匹配的元素(和remove()不同的是:所有綁定的事件、附加的數據會保留下來)

3.3.5 復制

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

實例克隆方法的應用

demo

四事件

4.1 頁面載入

　　當頁面載入成功后再運行的函數事件使用后可以在開頭位置寫入jq代碼

$(document).ready(function(){

do something...

});

//簡寫

$(function($) {

do something...

});

4.2 事件處理

//bind 為每個匹配元素綁定事件處理函數，綁定多個用{}。 3.0+版本已棄用

$("p").bind("click", function(){

alert( $(this).text() );

});

$(menuF).bind({

"mouseover":function () {

$(menuS).parent().removeClass("hide");

},"mouseout":function () {

$(menuS).parent().addClass("hide");

}

});

$("p").click(function(){}) = $("p").bind("click",function(){})

$("p").one( "click", fun...) //one 綁定一個一次性的事件處理函數

$("p").unbind( "click" ) //解綁一個事件

4.3 事件委派 3.0+版本已棄用

// 與bind 不同的是當事件發生時才去臨時綁定。

$("p").delegate("click",function(){

do something...

});

$("p").undelegate(); 　　　//p元素刪除由 delegate() 方法添加的所有事件

$("p").undelegate("click") //從p元素刪除由 delegate() 方法添加的所有click事件

4.4 事件

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

4.5 event object 對象

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

$("p").click(function(event){   alert(event.type); //"click"  }); (evnet object)屬性方法：event.pageX 　 //事件發生時，鼠標距離網頁左上角的水平距離event.pageY 　 //事件發生時，鼠標距離網頁左上角的垂直距離event.type 　　//事件的類型event.which 　 //按下了哪一個鍵event.data 　　//在事件對象上綁定數據，然后傳入事件處理函數event.target 　//事件針對的網頁元素event.preventDefault() 　//阻止事件的默認行為(比如點擊鏈接，會自動打開新頁面)event.stopPropagation()  //停止事件向上層元素冒泡

實例拖動面板

demo

解決: 拖動面板鼠標移動過快,移動斷開問題

綁定在div上鼠標移出div層事件就消失了，綁定在 document 上也就是整個頁面都有這個事件!

demo

event.clientX、event.clientY

鼠標相對于瀏覽器窗口可視區域的X，Y坐標（窗口坐標），可視區域不包括工具欄和滾動條。IE事件和標準事件都定義了這2個屬性

event.pageX、event.pageY

類似于event.clientX、event.clientY，但它們使用的是文檔坐標而非窗口坐標。這2個屬性不是標準屬性，但得到了廣泛支持。IE事件中沒有這2個屬性。

event.offsetX、event.offsetY

鼠標相對于事件源元素（srcElement）的X,Y坐標，只有IE事件有這2個屬性，標準事件沒有對應的屬性。

event.screenX、event.screenY

鼠標相對于用戶顯示器屏幕左上角的X,Y坐標。標準事件和IE事件都定義了這2個屬性

input 輸入框的change事件，要在input失去焦點的時候才會觸發!

$('input[name=myInput]').change(function() { ... });

在輸入框內容變化的時候不會觸發change，當鼠標在其他地方點一下才會觸發

用下面的方法會生效，input

$("#input_id").on('input',function(e){     alert('Changed!')  });

五動畫效果

5.1 基本　　在動畫完成后,可選地觸發一個回調函數!

$("p").show()    　　　　//顯示隱藏的匹配元素$("p").show("slow");    //參數表示速度,("slow","normal","fast"),也可為900毫秒$("p").hide()    　　　　//隱藏顯示的元素$("p").toggle();   　　 //切換 顯示/隱藏$("p").stop()              //停止所有在指定元素上正在運行的動畫。

實例顯示與隱藏

demo

實例回調函數

demo

5.2 淡入淡出　　在動畫完成后,可選地觸發一個回調函數!

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

實例淡入淡出

demo

5.3 滑動　　在動畫完成后,可選地觸發一個回調函數!

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

實例滑動

demo

實例京東輪播圖

demo

實例放大鏡

demo

實例編輯框

demo

六對象訪問

$.trim() 　　//去除字符串兩端的空格$.each() 　　//遍歷一個數組或對象，for循環$.inArray() //返回一個值在數組中的索引位置，不存在返回-1  $.grep() 　 //返回數組中符合某種標準的元素$.extend()  //將多個對象，合并到第一個對象$.makeArray() //將對象轉化為數組$.type()    //判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等$.isArray() //判斷某個參數是否為數組$.isEmptyObject() //判斷某個對象是否為空(不含有任何屬性)$.isFunction()    //判斷某個參數是否為函數$.isPlainObject() //判斷某個參數是否為用"{}"或"new Object"建立的對象$.support()       //判斷瀏覽器是否支持某個特性

循環:json對象:

$.each( data, function(k,v){ .... } )return false  =>  breakreturn true  =>  continue

判斷空object對象:

function isEmptyObject(e) {    var t;    for(t in e)        return !1;    return !0;}

七插件擴展機制

//方式一    jQuery 可以簡寫成 $jQuery.fn.extend({    hello:function(){        return $(this).text();    }});var index = $('.title').hello()alert(index);<div class="title">1111</div><div class="title">2222</div>

//方式二$.extend({    hello1 :function(arg){        var index = $(arg).text();        return index;    }})var index = $.hello1('.title')alert(index)<div class="title">1111</div><div class="title">2222</div>

實例

demo

八補充

1.input 事件, 輸入時觸發:

$('#inp').on('input',function(){});

2.文件上傳input 變更時觸發:

$(".upload").on("change","input[type='file']",function(){    ...});

3.ajax異步請求頁面時,必須返回數據,不能在后臺指定跳轉頁面

4.判斷是否存在該標簽:

$('xxx').length > 0

5.DOM對象、JQ對象轉換

獲取 Dom對象document.getElementsTagName('div')[0]獲取 JQuery對象$('div').first()Dom對象  =>  JQuery對象$(document.getElementsTagName('div')[0])JQuery對象  =>  Dom對象$('div').first()[0]

6.JSON 轉換

JSON.parse(arg)       字符串=>原型JSON.stringify(arg)   原型=>字符串

練習題

demo 1:左側菜單

demo 2:tab切換

demo 3:編輯框正反選

demo 4:返回頂部

demo 5:滾動菜單

demo 6:克隆方法的應用

demo 7:模態對話框

demo 8:拖動面板

demo 9:顯示與隱藏

demo 10:淡入淡出

demo 11:滑動

demo 12:京東輪播圖

demo 13:放大鏡

demo 14:編輯框

本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請點擊舉報。

精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

jquery簡介

二 尋找元素(重要的選擇器和篩選器)

三 操作元素(屬性 CSS 和 文檔處理)

四 事件

五 動畫效果

六 對象訪問

七 插件擴展機制

八 補充

練習題

二尋找元素(重要的選擇器和篩選器)

三操作元素(屬性 CSS 和文檔處理)

四事件

五動畫效果

六對象訪問

七插件擴展機制

八補充