jQuery使用总结 - Core jQuery Selectors选择器二3/4

简介: 生成元素 $('', { src: 'images/little.bear.png', alt: 'Little Bear', title:'I woof in your general direction', click: function(){ alert($(this).
生成元素

$('<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;
});
相关文章
|
6天前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
24 5
|
4月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
26 0
|
4月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
6天前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
15天前
|
JavaScript
jQuery 选择器
jQuery 选择器
20 3
|
20天前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
23 1
|
2月前
|
JavaScript 索引
jQuery的选择器有几种?
jQuery的选择器有几种?
31 1
|
5月前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
5月前
|
JSON JavaScript 前端开发
Jquery常用的选择器有哪些?用途有什么不同?
Jquery常用的选择器有哪些?用途有什么不同?
|
5月前
|
JavaScript 前端开发 开发者
jquery选择器有哪些
jquery选择器有哪些
28 0