JQuery 一些簡單的操作

2021-07-25 06:25:33 字數 3220 閱讀 3301

jquery 就是一些方法的封裝,類似jar包。

匯入後,能夠直接呼叫的方法。

**如下:

一般匯入壓縮包,原始碼留給自己看吧(0 _ 0)。

$(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中有***,就把***去掉,如果沒有,就給原來的加上***

eg:

$("#ul1 li").toggleclass("as");

/*給所有的li中class沒有as的加上,有as的去掉*/

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

物件.text()。

eg:

$("#span1").text();
7.獲取元素內部的html語句。

物件.html();

html方法,封裝了js裡面的 innerhtml屬性,如果傳了引數就是用傳入的去替換裡面的。

eg:

$("#ul1").html($("萬歲");
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());
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.找到***元素。

eg:

$("div").find(".span").css("border","5px solid black"); 

/*其實感覺這段**前面完全可以用$(".span")來獲取,不過這個方法要了解*/

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

8.is方法。判斷是否是***

eg:

$(".span").parent().is(".box")

/*判斷找到的span的父類是不是用class =box屬性來知道的元素,是就返回true,不是就返回false*/

$(".box").children().is(".span")

jQuery的一些操作

獲取表單元素的值 jquery物件.val 為表單元素賦值 jquery物件.val sss 獲取 等元素的值 jquery物件.text 只獲得純文字 jquery物件.html html標籤也會獲取到 為span 等元素賦值 jquery物件.text html標籤也會當做文字顯示,jquery...

Jquery的一些基本操作

獲得text.areatext的值 var textval text id attr value 或者 var textval text id val 獲取單選按鈕的值 var valradio input type radio checked val 獲取一組名為 items 的radio被選中項...

jquery的一些簡單用法

複習一下jquery獲取表單的一些用法 表單是動態生成的乙個陣列,可以有n個class和name相同的表單 提交按鈕的click事件裡面做判斷邏輯 monitor each function else if val.length 500 else 實際上就是jquery的each的用法,重點關注cl...