jQuery使用总结 Core jQuery Selectors选择器二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;

});