客戶端網頁編程10——Jquery


客戶端網頁編程10——Jquery

jQuery 就是一些方法的封裝,類似jar包。 
導入后,能夠直接調用的方法。

1.導入js文件

代碼如下:

一般導入壓縮包,源碼留給自己看吧(0 _ 0)。

2.常用的方法介紹

window.onload類似方法

     $(document).ready(function(){

});//這個相當於window。onload = functions(){};

等待系統載入完全才執行的代碼。

選擇器相關方法

jquery 中封裝了document.getElementBy??? 方法。 
導入jquery后可以直接通過:

$(“參數”) 這個來直接獲取對象

1.通過id獲取對象。

var op1 = $("#p1");

2.根據class獲取元素

 var op2 = $(".p1");

3.通過name屬性獲得元素

var ospan= $("span[name = span]");

4.通過標簽名字獲得元素

var odiv = $("div");

5.選中元素的子元素

$("#ul li:first-child")
/*先通過id ul 找到ul,再找到ul下面第一個li*/

6.對於表格選擇的操作。

 $("#mytable tr:even")
$("#mytable tr:odd")

偶數行 even 奇數行 odd。

對於屬性的操作

1.得到屬性的值,設置屬性。 
方法采用 對象.attr() 
一個參數是獲取屬性值,兩個參數是設置屬性值(第一個是屬性名字,第二個就是值。) 
eg:

 $("[name=test]").attr("title","text1"); 

2.移除屬性(直接移除,不是設置為空) 
通過對象.removeAttr(“屬性名稱”); 
eg:

 $("[name=test]").removeAttr("title"); 

3.動態添加class屬性。 
采用 
第一種:對象.attr(“class”,”sk”);

第二種:對象..addClass(“sk”); 
addclass是設置class屬性,調用方法的時候 可以傳遞一個函數,最后必須返回一個值就可以了。 
——–sk是class值。

4.把class屬性設置為空,不是移除。

對象.removeClass();

5.反向操作 0。0—-toggleClass() 
傳入的參數是如果之前對象的class中有xxx,就把xxx去掉,如果沒有,就給原來的加上xxx 
eg:

$("#ul1 li").toggleClass("as");
/*給所有的li中class沒有as的加上,有as的去掉*/

6.獲取元素中所有的文本內容

對象.text()。 
eg:

$("#span1").text();

7.獲取元素內部的html語句。 
對象.html(); 
html方法,封裝了js里面的 innerHTML屬性,如果傳了參數就是用傳入的去替換里面的。

eg:

 $("#ul1").html($("<li>萬歲</li>");

8.獲取輸入框中的值。

輸入框對象.val(); 
eg:

$("input[name=username]").val()

篩選元素

1.獲取到集合中指定下標的元素。

eg:

$("li").eq(1);
/*這個$("li")找出來肯定是一個集合,然后調用eq(i)傳入一個下標值,即可獲得指定下標的元素。*/

2.獲得第一個,最后一個元素。

eg:

$("li").first();
$("li").last();

3.判斷元素是否有指定class屬性。 
采用hasClass方法。 
eg:

$("li").hasClass("sk");

hasClass 用來判斷當前元素是否有指定的class屬性,有就返回true,沒有就返回false。

jquery獲取到一個集合,取出集合中的內容,默認返回第一個值的內容 
但是。text() 方法有特性。會返回集合中的所有內容。

4.循環取出內容。 
采用each方法

eg:

 $("li").each(function(){
$(this).html();//這里就相當於循環操作
});

5.篩選出符合指定條件 
采用filter方法,filter從集合中篩選出符合指定條件的元素。 
eg:

$("div").filter(".box").attr("style","width:200px ;height:200px ;background :red");
/*從div集合中找到有class屬性為box的div,然后設置樣式,鏈式操作。*/

6.找到包含xx的元素 
采用has方法。 
has() 包含: 獲取到元素內部(不僅指子元素,孫元素也要算上)的條件是否符合要求,最終操作的還是前面的是那個

eg:

$("div").has(".span").css("border-radius","30px");
/*找到div集合中包含有class 為span的div。設置div樣式*/

7.找到xxx元素。 
eg:

 $("div").find(".span").css("border","5px solid black"); 
/*其實感覺這段代碼前面完全可以用$(".span")來獲取,不過這個方法要了解*/

find() ,針對的是子類,操作的也是子類。

8.is方法。判斷是否是xxx 
eg:

$(".span").parent().is(".box")
/*判斷找到的span的父類是不是用class =box屬性來知道的元素,是就返回true,不是就返回false*/
$(".box").children().is(".span")


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com