1. 返回选中元素的属性值:attr(name)
示例:返回文档中所有图像的src属性值。
jquery:
$("img").attr("src");
结果:
[<img
src="test.jpg"/>]
2. 设置选中元素的属性值:attr(name:value)
注意:可同时设置多个属性,中间用逗号分隔。
示例:为所有图像设置src和alt属性。
jquery:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
结果:
[<img
src="test.jpg" alt="test"/>]
其中参数value也可以是一个function返回的值
$("img").attr("title", function() { return this.src });
3. 删除选中元素的属性值:removeAttr(name)
注意:是把属性的属性名和属性值都删除掉,而不仅是把属性值删除。
示例:将文档中图像的src属性删除。
jquery:
$("img").removeAttr("src");
结果:
[<img />
]
jQuery1.6以后,加上了prop来操作属性。
示例:禁用页面上的所有复选框。
jquery:
$("input[type='checkbox']").prop({
disabled: true
});
关于它们两个的区别:
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
4. 为每个匹配的元素添加指定的类名:addClass(class|fn)
示例:为匹配的元素加上 'selected' 类。
jquery:
$("p").addClass("selected");
结果:
[<p
class="selected"/>]
其中参数也可以是一个function返回的值。
html:
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
jquery:
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
结果:
<ul>
<li>Hello</li>
<li>Hello</li>
<li class="item-3">Hello</li>
</ul>
5. 从所有匹配的元素中删除全部或者指定的类:removeClass([class|fn])
注意:是把属性的属性名和属性值都删除掉,而不仅是把属性值删除。
示例:从匹配的元素中删除 'selected' 类。
jquery:
$("p").removeClass("selected");
结果:
[<p
/>]
其中参数也可以是一个function返回的值。
例如:删除最后一个元素的class与前面重复的class。
jquery:
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
6. 切换一个类:toggleClass(class|fn[,sw])
即:如果存在,就删除一个类;如果不存在,就添加一个类。
示例1:为匹配的元素切换 'selected' 类。
jquery:
$("p").toggleClass("selected");
示例2:每点击三下加上一次 'highlight' 类。
jquery:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
示例3:根据父元素来设置class属性。
jquery:
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
7. 返回选中元素的html内容:html()
注意:如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。
示例:返回p元素的内容。
jquery:
$('p').html();
8. 设置选中元素的html内容:html(val)
示例:设置所有 p 元素的内容。
jquery:
$("p").html("Hello <b>world</b>!");
使用函数来设置所有匹配元素的内容。:
$("p").html(function(n){
return "这个 p 元素的 index 是:" + n;
});
9. 返回选中元素的文本内容:text()
注意:结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
示例:返回p元素的文本内容。
jquery:
$('p').text();
10. 设置选中元素的文本内容:text(val)
示例:设置所有 p 元素的内容。
jquery:
$("p").text("Hello world!");
使用函数来设置所有匹配元素的文本内容。:
$("p").text(function(n){
return "这个 p 元素的 index 是:" + n;
});
11. 获得匹配元素的当前值:val()
示例:获取文本框中的值。
jquery:
$("input").val();
12. 设置匹配元素的当前值:val(val|fn)
示例:设定文本框的值。
jquery:
$("input").val("hello world!");
使用函数来设置所有匹配元素的文本内容。:
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
相关推荐
在jQuery的原型上,定义了一系列的方法,这些方法是所有jQuery对象都可以访问的。例如,`init`方法是jQuery对象的构造器,它负责根据传入的选择器(selector)和上下文(context)来查找和初始化DOM元素。`jquery`...
深入理解jQuery之Data jQuery中的Data机制是为了解决在DOM节点上绑定数据时出现的一系列问题,如数据与展示混淆、DOM结构复杂化、属性值只能是字符串等问题。Data机制的出现解决了这些问题,并提供了一种高效、安全...
3. **属性操作**: `attr()`,`removeAttr()`,`prop()`,`removeProp()` - 获取、设置或移除元素属性。 ### 三、事件处理(Events) jQuery使得绑定和触发事件变得简单: 1. **事件绑定**: `on()`, `click()`, `...
为了更好地利用这个框架,开发者需要熟悉jQuery的基本操作,并学习EasyUI的API文档,了解每个组件的属性、方法和事件。同时,合理地组织HTML结构,结合CSS进行定制,可以使页面既美观又功能强大。总的来说,jQuery ...
3. 编写JavaScript代码:利用jQuery选择器找到目标元素,然后进行属性操作。 4. 添加事件监听:使用`.on()`方法绑定点击或其他事件,根据用户交互更新属性。 5. 动画效果:结合`.animate()`方法,实现平滑的动画效果...
《jQuery基础教程第四版》是学习JavaScript库jQuery的重要参考资料,其中"Book02_jQuery_选择元素"这一章节主要探讨了如何在DOM(文档对象模型)中高效地选取和操作元素,这是jQuery的核心功能之一。在jQuery中,...
《jQuery核心源码详解——从1.5到2.0.2的演进之路》 jQuery,这个被誉为“JavaScript库的王者”,自2006年发布以来,因其简洁易用的API和强大的功能,迅速成为了前端开发者的首选工具。本资源包含从1.5到2.0.2的...
在本文中,我们将深入探讨jQuery 1.6版本,它是jQuery系列的一个重要里程碑,为Web前端开发提供了丰富的功能和高效的性能。 首先,jQuery的核心特性在于其简洁的API,它使用链式调用来实现多种操作,如选择元素、...
首先,我们要了解jQuery的核心概念——选择器。在`jquery选择器介绍.txt`中,详细列出了jQuery支持的各种选择器,包括基本选择器(如ID选择器"#id",类选择器".class",元素选择器"tag"),层次选择器(如后代选择器...
#### 二、jQuery对象操作 **创建jQuery对象**: - 使用选择器创建:`$("选择器")` - 创建的不是原生DOM对象,而是jQuery对象,可以使用jQuery提供的各种方法。 **转换为原生对象**: - `$("选择器").get(下标)`:...
在DOM操作方面,jQuery提供了丰富的选择器,如CSS选择器、基本选择器、属性选择器等,使得定位DOM元素变得简单。同时,`.html()`, `.append()`, `.prepend()`等方法让DOM元素的添加和修改变得直观易用。 在Ajax方面...
- **属性操作**:如获取和设置属性值。 - 示例:`$("a").attr("href", "http://example.com");` - **样式操作**:如改变CSS属性。 - 示例:`$("p").css("color", "blue");` #### 七、事件与事件对象 - **事件绑定...
二、jQuery DOM操作 jQuery提供了丰富的DOM操作方法,如`append()`用于在元素内部追加内容,`prepend()`在元素内部预置内容,`html()`和`text()`分别用于设置或获取元素的HTML内容和纯文本内容。此外,`clone()`...
本资源"网页模板——基于jquery的图像悬停焦点效果制作.zip"专注于一个常见的网页设计元素:图像悬停焦点效果。这个效果通常用于增强用户体验,使用户在鼠标悬停在图片上时能看到更丰富的信息或动态变化,比如放大、...
这个版本是jQuery系列的一个重要里程碑,它修复了许多已知问题,提升了性能,并保持了向后兼容性。1.12.0版本主要关注于稳定性和改进,确保开发者可以放心地在项目中使用。它提供了丰富的选择器、DOM操作方法,如`$...
`jQuery`是`$`的别名,它们的原型(`$.prototype`或`jQuery.prototype`)定义了一系列的方法,如`click()`, `append()`, `fadeIn()`等,这些都是我们日常使用jQuery进行DOM操作的接口。 当我们调用`$()`时,它会...
《jQuery纸张切割效果——深度解析与应用》 在当今的网页设计中,动态效果的运用已经成为提升用户体验的重要手段之一。"jQuery纸张切割效果"就是这样一个独特且引人注目的网页特效,它通过结合jQuery库和CSS3的3D...
1.1 DOM操作:jQuery提供了一系列简洁的API,如`$(selector)`用于选取元素,`.find()`查找子元素,`.parent()`获取父元素,`.children()`获取直接子元素,`.append()`、`.prepend()`用于元素的添加与插入。...
深入探讨jQuery的选择器,包括基本选择器、层次选择器、属性选择器和伪类选择器,这些都是高效操作DOM的关键。 5. **CH05——jQuery中的DOM操作.pptx**: 主要讲解jQuery中如何增删改查DOM元素,如append()、...
通过上述分析,我们可以看到,虽然 init 函数可能看起来简单,但其内部逻辑处理却相当丰富,它让 jQuery 能够接受广泛类型的输入参数,并将它们转换为 jQuery 对象,使得后续的一系列链式操作成为可能。对于初学者和...