ONE PIECE ------ jQuery

最新推荐文章于 2024-05-27 14:07:12 发布

扬天靜雲

最新推荐文章于 2024-05-27 14:07:12 发布

阅读量735

点赞数

分类专栏：学习文章标签： jquery javascript

本文链接：https://blog.csdn.net/u013028110/article/details/48731301

版权

学习专栏收录该内容

43 篇文章 0 订阅

订阅专栏

jQuery是對JavaScript的封裝，是一個JavaScript庫，所以使用起來會比JavaScript簡單，但是學習jQuery還是需要一些JS的基礎知識的！
<div id="insignia">
   
   <div id="lyy">
   
   </div>

</div>
<script>
   
   $(document).ready(function(){
      $(function(){
        alert("Insignia");
      });
   });

   $(document).ready(function(){
      jQuery(function(){
        alert("Insignia");
      });
   });

</script>
在jQuery中$就等價於jQuery，功能是一樣的，也就是說$其實是jQuery的縮寫形式。
將一個匿名函數直接放在$()中的話，就會直接執行裏面的匿名函數！

jQuery中有許多的函數，有些是可以使用$直接調用的，如$.AJAX();有些則是需要先獲取到頁面上的元素之後才能調用的，如$("#lyy").css()！

要使用jQuery方法就必須是一個jQuery對象，jQuery對象就是使用jQuery選擇器得到的對象；

使用原生的JS獲取到的是一個DOM對象，這個對象是不能調用jQuery方法的，DOM對象就是使用原生JS選擇器得到的對象；

幸好，jQuery對象和DOM對象是可以相互轉換的；
   $("#lyy")                                //得到jQuery對象
   document.getElementById("insignia")      //得到DOM對象   
   
   $("#lyy").get(0)                         //將得到的jQuery對象轉換為DOM對象
   $("#lyy")[0]                             //將得到的jQuery對象轉換為DOM對象

   $(document.getElementById("insignia"))   //將DOM對象轉換為jQuery對象
選擇器：

通過標籤名選擇：$("div")、$("p")、$("span")……

通過元素ID選擇：$("#insignia")

注：使用ID進行選擇的前提必須是該ID在當前頁面只能出現一次，如果同一個ID在同一個頁面中出現多次的話，只有一個是有效的！

        在jQuery中如果使用的ID在當前頁面不存在，那麼頁面也不會報錯，雖然語句執行了但不會有什麼效果，因為頁面上沒有相應的元素，可是如果使用document.getElementById()，來獲取頁面上元素的時候，如果ID不存在，那麼頁面將報錯！

        判斷元素是否存在的話，不應該使用if($("#insignia")){ }，而應該使用if($("#insignia").length>0){ },如果使用if($("#insignia"))作為判斷條件的話，那麼這個條件返回的結果永遠為TRUE!當然也可以使用if($("#insignia")[0])或者if($("#insignia").get(0))來作為判斷條件！

通過元素CLASS選擇：$(".lyy")

群組選擇器：$("div,#insignia,.lyy")選擇頁面上所有標籤為DIV、ID為insignia和CLASS為lyy的元素

後代選擇器：$("div #insignia .lyy")選擇頁面上標籤為DIV下面ID為insignia下面CLASS為lyy的元素

                        $("div").find("#insignia").find(".lyy")選擇頁面上標籤為DIV下面ID為insignia下面CLASS為lyy的元素

子選擇器：$("div>#insignai")選擇頁面上標籤為DIV的直接子元素中ID為insignia的元素

                    $("div").children("#insignia")選擇頁面上標籤為DIV的直接子元素中ID為insignia的元素

NEXT選擇器：$("div+.lyy")選擇頁面上標籤為DIV的後面同級節點中CLASS為lyy的第一個元素

                    $("div").next(".lyy")選擇頁面上標籤為DIV的後面同級節點中CLASS為lyy的第一個元素

NEXTALL選擇器：$("div~.lyy")選擇頁面上標籤為DIV的後面同級節點中CLASS為lyy的所有元素

                     $("div").nextAll(".lyy")選擇頁面上標籤為DIV的後面同級節點中CLASS為lyy的所有元素

PREV選擇器：$("div").prev(".lyy")選擇頁面上標籤為DIV的前面同級節點中CLASS為lyy的第一個元素

PREVALL選擇器：$("div").prevAll(".lyy")選擇頁面上標籤為DIV的前面同級節點中CLASS為lyy的所有元素

SIBLINGS選擇器：$("div").siblings(".lyy")選擇頁面上標籤為DIV的前面和后面同級節點中CLASS為lyy的所有元素

PREVUNTIL選擇器：$("#insignia").prevUntil(".lyy")選擇頁面上元素ID為insignia的前面同級節點的所有元素，遇到CLASS為lyy的元素停止
NEXTUNTIL選擇器：$("#insignia").nextUntil(".lyy")選擇頁面上元素ID為insignia的後面同級節點的所有元素，遇到CLASS為lyy的元素停止
屬性選擇器：

$("div[id]")：獲取頁面上具有ID屬性的DIV元素

$("div[id=lyy]")：獲取頁面上具有ID屬性，並且ID的值等於lyy的DIV元素

$("div[id!=lyy]")：獲取頁面上具有ID屬性，並且ID的值不等於lyy的DIV元素

$("div[id^=li]")：獲取頁面上具有ID屬性，並且ID的值是以li開頭的DIV元素

$("div[id$=yy]")：獲取頁面上具有ID屬性，並且ID的值是以yy結尾的DIV元素

$("div[id|=insignia]")：獲取頁面上具有ID屬性，並且ID的值等於insignia或者ID的值是以insignai開頭後面跟一個‘-’號的DIV元素

$("div[class~=insignia]")：獲取頁面上具有CLASS屬性，並且屬性值是一個以空格分隔的列表，列表中包含insignia的DIV元素

$("div[id*=lyy]")：獲取頁面上具有ID屬性，並且ID的值包含lyy的DIV元素

$("div[id][class=.insignia]")：獲取頁面上具有ID屬性和CLASS屬性，並且CLASS屬性值等於insignia的DIV元素

過濾器：

$("div:first")：獲取頁面上標籤為DIV的元素第一個元素

$("div").first()：獲取頁面上標籤為DIV的元素第一個元素

$("div:last")：獲取頁面上標籤為DIV的元素最後一個元素

$("div").last()：獲取頁面上標籤為DIV的元素最後一個元素

$("div:not(#insignia)")：獲取頁面上ID不等於insignia的標籤為DIV的所有元素

$("div").not("#insignia")：獲取頁面上ID不等於insignia的標籤為DIV的所有元素

$("div:even")：獲取頁面上標籤為DIV的，並且索引是偶數的所有元素（索引從零開始）

$("div:odd")：獲取頁面上標籤為DIV的，並且索引是奇數的所有元素（索引從零開始）

$("div:eq(0)")：獲取頁面上標籤為DIV，並且索引等於0的元素

$("div").eq(0)：獲取頁面上標籤為DIV，並且索引等於0的元素

$("div:gt(1)")：獲取頁面上標籤為DIV，並且索引大於1的所有元素

$("div:lt(5)")：獲取頁面上標籤為DIV，並且索引小於5的所有元素

$("div:hidden")：獲取頁面上標籤為DIV，並且可見的所有元素

$("div:visible")：獲取頁面上標籤為DIV，並且不可見的所有元素

$(":first-child")：獲取頁面上每個父元素的第一個子元素

$(":last-child")：獲取頁面上每個父元素的最後一個子元素

$(":only-child")：獲取頁面上只有一個子元素的元素

$(":text")：獲取頁面上所有文本框，type=text

$(":password")：獲取頁面上所有密碼框，type=password

$(":radio")：獲取頁面上所有單選按鈕，type=radio

$(":checkbox")：獲取頁面上所有複選框，type=checkbox

$(":button")：獲取頁面上所有按鈕，type=button

$(":hidden")：獲取頁面上所有不可見元素，type=hidden（包括display=none和visibility=hidden）

$(":enabled")：獲取頁面上所有可用元素

$(":disabled")：獲取頁面上所有不可用元素

$(":checked")：獲取頁面上所有被選中的（單選按鈕和複選框）

$(":selected")：獲取頁面上所有被選中的元素（下拉列表框）

常用方法：

$("#lyy").html()：獲取頁面上ID為lyy的元素的HTML內容

$("#lyy").html("<a href=''>Insignia</a>")：設置頁面上ID為lyy的元素的HTML內容

$("#lyy").text()：獲取頁面上ID為lyy的元素的文本內容
$("#lyy").text("insignia")：設置頁面上ID為lyy的元素的文本內容

$("#lyy").val()：獲取頁面上ID為lyy的元素的值
$("#lyy").val("insignia")：設置頁面上ID為lyy的元素的值
$("#lyy").css("color")：獲取頁面上ID為lyy的元素的CSS的color值（一次一個）

$("#lyy").css("color","blue")：設置頁面上ID為lyy的元素的CSS的color值為藍色（一次一個）

$("#lyy").css(["color","border"])：獲取頁面上ID為lyy的元素的CSS值（一次多個）

$("#lyy").css({“color”:"blue"“,border”:"1px solid black";})：設置頁面上ID為lyy的元素的CSS值（一次多個）

$("#lyy").addClass("lyy insignia")：為頁面上ID為lyy的元素的添加CLASS（一次多個或者多個）

$("#lyy").removeClass("lyy insignia")：為頁面上ID為lyy的元素刪除CLASS（一次多個或者一個）

$("#lyy").width()：獲取頁面上ID為lyy的元素的寬

$("#lyy").height()：獲取頁面上ID為lyy的元素高

$("#lyy").innerWidth()：獲取頁面上ID為lyy的元素的寬包括內邊距
$("#lyy").innerHeight()：獲取頁面上ID為lyy的元素的高包括內邊距
$("#lyy").outWidth()：獲取頁面上ID為lyy的元素的寬包括內邊距和邊框

$("#lyy").outHeight()：獲取頁面上ID為lyy的元素的高包括內邊距和邊框

$("#lyy").outWidth(true)：獲取頁面上ID為lyy的元素的寬包括內邊距、邊框和外邊距

$("#lyy").outHeight(true)：獲取頁面上ID為lyy的元素的高包括內邊距、邊框和外邊距

$(window).scrollTop()：獲取頁面上垂直滾動條的值
$(window).scrollTop(0)：設置頁面上垂直滾動條的值
$(window).scrollLeft()：獲取頁面上水平滾動條的值

$(window).scrollLeft(0)：設置頁面上水平滾動條的值

$("#lyy").prop("checked")：獲取頁面上ID為lyy的元素是否被選中
$("#lyy").prop("disabled")：設置頁面上ID為lyy的元素是否可用

注：在jQuery中获取或设置控件的checked和disabled值是使用prop方法而不是attr方法！！！！！

$.trim("   zfc   ")：去除字符串左右的空格

$.each()：遍曆

$.inArray()：判斷是否在數組中

$.isArray()：判斷是否為數組

$.isFunction()：判斷是否為函數

$.isEmptyObject()：判斷是否為空對象

$.type()：判斷數據類型

$.inNumeric()：判斷是否為數值

$.isArray()：判斷是否為數組

$.isWindow()：判斷是否為window對象

$.param()：將對象鍵值對轉換為URL字符串形式

$("#lyy").on()：綁定事件，綁定事件時可以添加命名空間，如click.lyy、dbclick.insignia

$("#lyy").off()：解綁事件，解綁事件時可以指定命名空間，如click.lyy、dbclick.insignia

$("#lyy").one()：綁定一個只執行一次的事件

$("#lyy").click()：綁定click事件

$("#lyy").dbclick()：綁定dbclick事件
$("#lyy").mouseup()：綁定mouseup事件
$("#lyy").mousedown()：綁定mousedown事件

$("#lyy").mouseover()：綁定mouseover事件（子元素處發）

$("#lyy").mouseout()：綁定mouseout事件（子元素處發）

$("#lyy").mousemove()：綁定mousemove事件

$("#lyy").mouseenter()：綁定mouseenter事件（子元素不處發）

$("#lyy").mouseleave()：綁定mouseleave事件（子元素不觸發）

$("#lyy").keydown()：綁定keydown事件

$("#lyy").keyup()：綁定keyup事件

$("#lyy").keypress()：綁定keypress事件
$("#lyy").focus()：綁定focus事件
$("#lyy").blur()：綁定blur事件

$("#lyy").change()：綁定change事件

$("#lyy").trrige(“click”)：自動觸發click事件，可以傳參數，如果是多個的話，需要用中括號括起來，如：[{“x”:"li",“m”:"yy"},[1,"lyy"]]

$("#lyy").trrigeHandler(“click”)：用法與trigger一樣，只是triggerHandler不會觸發默認行為而trigger會；如果選擇器得到的是多個元素的話，triggerHandler只會調用第一個匹配元素的相應事件，而trigger會調用所有匹配元素的相應事件，triggerHandler與trigger返回值不同，triggerHandler不支持連綴寫法而trigger支持。

event對象：

e.type：事件類型

e.data()：額外數據

e.which()：鼠標左右中鍵

e.altKey()：是否按下alt鍵

e.shiftKey()：是否按下shift鍵

e.ctrlKey()：是否按下ctrl鍵

e.keyCode()：字符編碼

e.stopPropagation()：阻止冒泡事件

e.preventDefault()：阻止默認行為

動畫效果：

$("#lyy").show()：顯示ID為lyy的元素（display:inline或者display:block）

$("#lyy").hide()：隱藏ID為lyy的元素（display:none）

$("#lyy").toggle()：切換ID為lyy的元素的顯示和隱藏狀態

show()和hide()都可以傳遞參數，以毫秒為單位，如：show(1000)和hide(1000)；

也可以使用jQuery定義好的字符串參數，分別是：show("slow")==show(600)、hide("normal")==show(400)和show("fast")==show(200)；

默認值為normal（400）；

如果傳遞的參數是空字符串將採用默認值；

可以有回調函數，如：$("#lyy").show("normal",function(){ alert("Insignia"); })

$("#lyy").slideUp()：ID為lyy的元素向上收縮（height:0）

$("#lyy").slideDown()：ID為lyy的元素向下展開（height:default）

$("#lyy").slideToggle()：切換ID為lyy的元素的向上和向下狀態

slideUp()和slideDown()都可以傳遞參數，以毫秒為單位，如：slideUp(1000)和slideDown(1000)；

也可以使用jQuery定義好的字符串參數，分別是：slideUp("slow")==slideUp(600)、slideDown("normal")==slideDown(400)和slideUp("fast")==slideUp(200)；

默認值為normal（400）；

如果傳遞的參數是空字符串將採用默認值；

可以有回調函數，如：$("#lyy").slideUp("normal",function(){ alert("Insignia"); })

$("#lyy").fadeIn()：ID為lyy的元素的透明度從0到100

$("#lyy").fadeOut()：ID為lyy的元素的透明度從100到0

$("#lyy").fadeToggle()：切換ID為lyy的元素的透明度

$("#lyy").fadeTo()：指定ID為lyy的元素的透明度

fadeIn()和fadeOut()都可以傳遞參數，以毫秒為單位，如：fadeIn(100)和fadeOut(0)；

也可以使用jQuery定義好的字符串參數，分別是：fadeIn("slow")==fadeIn(600)、fadeOut("normal")==fadeOut(400)和fadeIn("fast")==fadeIn(200)；

默認值為normal（400）；

如果傳遞的參數是空字符串將採用默認值；

可以有回調函數，如：$("#lyy").fadeIn("normal",function(){ alert("Insignia"); })

$("#lyy").fadeTo("normal",0.5)

$("#lyy").animate()：ID為lyy的元素的執行自定義動畫（在回調函數中或者通過連綴實現隊列動畫效果），也可以設置執行動畫的時間和執行回調函數；

$("#lyy").stop()：停止ID為lyy的元素的動畫效果，有兩個參數，都是bool類型，第一個表示是否清除之後的動畫隊列，第二個表示是否跳轉到動畫的最後狀態；

$("#lyy").delay()：執行動畫效果之前延遲，如：$("#lyy").delay(100)

$.fx.interval：設置每秒運行的幀數，如：$.fx.interval=1000;

$.fx.stop：關閉頁面上所有動畫效果，如：$.fx.stop()=true;

AJAX:

$("#lyy").load()：ID為lyy的元素加載內容，可接收三個參數，第一個是必須的URL，第二個是發送的額外數據，第三個是一個回調函數；

$.get()：可接收四個參數，前三個同load方法，第四個參數用於定義服務端返回的內容格式，包括：text、json、script、html等；

$.post()：使用方法同get，只是兩個方法運行機制不同；

get與post兩種提交方法的主要區別：get通過URL傳輸會被瀏覽器緩存，而且有大小限制！

$.getScript()：加載指定JS文件;

$.getJSON：加載指定JSON文件;

$.ajax()：該方法只接受一個參數，一個鍵值對對象；

常用的有:

url：請求地址
type：發送請求的方式，post或者get，如果不聲明，默認為get
dataType：服務端返回數據的類型，json、text、html等
data：和請求一起發送到服務端的數據
success：請求成功後執行的回調函數
error：請求失敗時執行的回調函數
complete請求完成後執行的回調函數不管成功或失敗
async：是否異步處理，默認為true
username：在認證請求中使用的用戶名
password：在認證請求中使用的密碼