第四章 jQuery文件處理

2022-09-16 09:54:08 字數 3681 閱讀 2448

一、建立元素

1.$("html");  建立乙個dom元素

2.$("html",props); 建立乙個dom元素,並給予props屬性、事件或方法

例:$("

",,click:function()});

二、內部插入

3.$("selector1").prepend("html");  在匹配元素selector1元素集合的每個元素開頭插入「html」;

4.$("selector1").prependto("selector2");  將匹配元素selector1插入到sleector2元素開頭。

5.$("selector1").html(["html"]);  設定或獲取selector1的html,當不給引數時代表獲取html。

6.$("selector1").text(["text"]);  設定或獲取selector1的內容,當不給引數代表獲取其內容值。

三、外部插入

1.$("selector1").after(content);  該方法是在所有匹配selector1元素集合後面(同級目錄)插入centent(html、dom物件),若content為選擇物件,則該方法將會移動該物件。

2.$("selector1").insertafter("selector2");  該方法是將元素selector1插入到selector2後面(同級目錄)

3.$("selector1").before(content);  該方法是將content插入到匹配元素selector1的前面(同級目錄)

4.$("selector1").insertbefore("selector2");  該方法是將元素selector1插入到selector2前面(同級目錄)

四、刪除元素

1.$("selector1").remove();  該方法將會刪除匹配selector1的所有元素(不可恢復)。

2.$("selector1").detach();  該方法將會刪除匹配元素,並返回被刪除的元素(以便恢復時使用)。

3.$("selector1").empty();  該方法會清空符合selector1元素集合的所有後代節點,以及其中的任何文字。

五、替換元素

1.$("selector1").replacewith(newcontent);  該方法用於將匹配元素sleector1集合中的所有元素替換為newcontent(html、dom,function[返回html])。

2.$("selector1").replaceall("selector2");  該方法是使用sleector1替換selecotr2與replacewith目標相反。

六、複製元素

七、包裝元素

1.$("selector1").wrap(html);  該方法是在所有匹配元素selecotor外面包裹一層html。

例:$("div").wrap("");  這樣就會在所有div外面加一層h2標籤。

2.$("selector1").unwrap();   該方法是刪除所有匹配元素的父元素。與wrap的作用相反。

例:$("selector1").wrap("").unwrap();  執行後selector會保持不變。

3.$("selector1").wrapall(html);  該方法也是在selecotr外面包裹一層html與wrap方法不同的是,該方法會將所有匹配selecotr1的元素視為乙個整體只包裝一次。

4.$("selector1").wrapinner(html);  該方法是在所有匹配元素selecotr1裡面內容包裹一層html

例:$("123

").wrapinner();  執行結果為"

"八、設定和獲取dom屬性

1.$("selecotr1").attr(attrname[,attrvalue]);  該方法將獲取selecotor中的attrname屬性值,若指定了attrvalue引數則會設定attrname的屬性值。

2.$("selector1").removeattr(attrname);  刪除匹配元素的attrname屬性。

3.$("selecotor1").val([value]);  設定或獲取表單元素的value屬性值,若指定了value引數則會設定表單元素selecotor的value值。

九、設定和切換css類

1.$("selector1").addclass("classname");  該方法是給所有匹配元素selecotor引用classnmae樣式類。

2.$("selector1").hasclass("classnmae");  該方法用於檢測selecotor是否引用了classname樣式類。

3.$("selector1").removeclass("classname");  該方法用於刪除classname樣式類

4.$("selector1").toggleclass("classname");  該方法作用是判定selecotor1是否擁有classname類,若有則刪除該類,若沒有則新增該類。

十、設定和獲採樣式屬性

1.$("selector1").css("css");  該方法用於設定或獲取selector1的樣式屬性。

例:$("selector1").css("color");  獲取其color屬性值

$("selector1").css();  這是其顏色和背景顏色。

一、設定和獲取元素的位置

1.$("selector1").offset();  獲取selector1相對文件的當前座標,其返回值包含top和left屬性物件。

例:$("selector1").offset().top; $("selector1").offset().left;  獲取位置

$("selector1").offset();  設定位置

2.$("selector1").position();  該方法用於獲取selector元素相對于父元素的偏移量,其返回值包含top和left屬性物件。

3.$("selector1").scrollleft([value]);  該方法用於獲取或這是匹配元素的水平滾動條位置。

4.$("selector1").scrolltop();  該方法用於獲取或設定匹配元素的垂直滾動條位置。

二、設定和獲取元素大小

1.$("selector1").height([value]);  設定或獲取元素的高度。(該屬性高度不包括:填充、邊框、邊距)

2.$("selector1").width([value]);

3.$("selector1").innerheight([value]);  設定或獲取元素的內部高度。(該屬性高度不包括:邊框、邊距)

4.$("selector1").innerwidth([value]);

5.$("selector1").outerheight([bool]);  設定或獲取元素的外部高度,引數預設為false表示不包括:邊距;若給定引數true則包括:邊距

6.$("selector1").outerwidth([bool]);  

第四章 jQuery節點操作

1.dom操作分為三類 1 dom core 任何一種支援dom的程式語言都可以使用用它 如 getelementbyid 2 html dom 用於處理html文件,如document,forms 3 css dom 用於操作css,如 element.style.color green 2.直接...

第四章 處理使用者輸入

特殊引數變數 移動變數 處理選項 獲得使用者輸入 addem 10 20 本例向指令碼addem傳遞了兩個命令列引數。指令碼會通過特殊的變數來處理命令列引數。bash shell會將一些稱為位置引數 positional parameter 的特殊變數分配給輸入到命令列中的所有引數。這也包括shel...

jQuery第四章課後作業

3.建立乙個物件student,表示乙個學生物件,要求如下。1 新增屬性 姓名,年齡和自我介紹。2 新增方法 輸出該學生的姓名,年齡和自我介紹。3 在頁面上顯示該方法輸出的資訊。4.建立乙個建構函式student,表示學生,要求如下。1 新增屬性 姓名,年齡和自我介紹。2 新增方法 在乙個p標籤中顯...