jQuery使用總結-CorejQuerySelectors選擇器二3/4

生成元素

$(`<img>`,

{

src: `images/little.bear.png`,

alt: `Little Bear`,

title:`I woof in your general direction`,

click: function(){

alert($(this).attr(`title`));

}

})

.css({

cursor: `pointer`,

border: `1px solid black`,

padding: `12px 12px 20px 12px`,

backgroundColor: `white`

})

.appendTo(`body`);

Element properties and attributes

$(`*`).attr(`title`,function(index,previousValue) {

return previousValue + ` I am element ` + index +

` and my name is ` + (this.id || `unset`);

});

This method will run through all elements on the page, modifying the title attribute of each element by appending a string (composed using the index of the element within the DOM and the id attribute of each specific element) to the previous value.

$(`input`).attr(

{ value: “, title: `Please enter a value` }

);

$(“a[href^=`http://`]”).attr(“target”,”_blank”);

First, we select all links with an href attribute starting with http:// (which indicates that the reference is external). Then, we set their target attribute to _blank.

元素的class屬性處理

<div class=”someClass anotherClass yetAnotherClass”></div>

addClass removeClass toggleClass hasClass

元素的css屬性處理

$(“div.expandable”).css(“width”,function(index, currentWidth) {

return currentWidth + 20;

});

.css({

cursor: `pointer`,

border: `1px solid black`,

padding: `12px 12px 20px 12px`,

backgroundColor: `white`

})

元素上的自定義資料

$(“div”).data(“blah”); // undefined

$(“div”).data(“blah”, “hello”); // blah設定為hello

$(“div”).data(“blah”); // hello

$(“div”).data(“blah”, 86); // 設定為86

$(“div”).data(“blah”); // 86

$(“div”).removeData(“blah”); //移除blah

$(“div”).data(“blah”); // undefined

元素的內容

var text = $(`#theList`).text();

函式：html text

文件處理

$("p").append("<b>Hello</b>");

$("p").wrap("<div class=`wrap`></div>");

在“jQuery 1.4.1 Cheat Sheet.chm”文件處理節有例子

主要有：插入、替換、刪除、包裹

Form元素處理

函式Val

$("#single").val("Single2");

$("#multiple").val(["Multiple2", "Multiple3"]);

$("input").val(["check2", "radio1"]);

$(`input:text.items`).val(function() {

  return this.value + ` ` + this.className;

});