生成元素
$('<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;
});