`
liboxlu
  • 浏览: 64279 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

用jquery操作属性和类名

阅读更多
attr( name )

参数:* String

返回值:* Object

取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果第一个匹配元素没有这个属性,则返回“undefined”

实例

取得页面中第一个em元素的title属性

var title = $("em").attr("title");
$("div").text(title);

attr( properties )

参数: * Map

返回值: * jQuery

将一个“名/值”形式的对象设置为所有匹配元素的属性。 这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意,如果需要设置一个类属性,则必须使用类名作为名,或使用addClass和removeClass来操作

实例

给img元素添加多项属性

$("img").attr({
        src: "/images/hat.gif",
        title: "jQuery",
        alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));

attr( key, value )

参数:
    * String
    * Object

返回值:
    * jQuery

为所有匹配的元素设置一个属性值

实例

禁用所有索引数大于0的按钮

$("button:gt(0)").attr("disabled","disabled");

attr( key, fn )

参数:
    * String
    * Function

返回值:
    * jQuery

为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。fn参数可以带有一个参数,此参数为当前元素在jQuery集合中的索引数,fn中的this指代这个元素

实例

针对div元素在页面中的位置来添加id属性值

$("div").attr("id", function (arr) {
        return "div-id" + arr;
}).each(function () {
        $("span", this).html("(ID = '<b>" + this.id + "</b>')");
});

removeAttr( name )

参数:* String

返回值:* jQuery

从每一个匹配的元素中删除一个属性

实例

点击按钮后使此按钮的下一个输入框可编辑

$("button").click(function () {
        $(this).next().removeAttr("disabled").focus().val("editable now");
    });

addClass( class )
参数:
    * String(一个或多个class名,多个class以空格分开)

返回值:
    * jQuery

为每个匹配的元素添加指定的类名

实例

给匹配的元素添加“selected”类

$("p:last").addClass("selected");

给匹配的元素添加“selected”和“highlight”类

$("p:last").addClass("selected highlight");

hasClass( class )
参数:
    * String
返回值:
    * Boolean

在匹配的元素集合中,如果至少有一个元素具有指定的class类,则返回true,否则返回false

实例
在匹配的元素集合中找出class属性值为“selected”的元素

$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());

removeClass( class )
参数:
    * String (可选)
返回值:
    * jQuery

从所有匹配的元素中删除全部或者指定的类,多个类名之间用空格分开。如果不指定类名,则删除全部的类

实例

从匹配的元素集合中删除“blue”类

$("p:even").removeClass("blue");

从匹配的元素集合中删除“blue”和“under”类

$("p:odd").removeClass("blue under");

从匹配的元素集合中删除所有类属性

$("p:eq(1)").removeClass();

toggleClass( class )

参数:
    * String

返回值:
    * jQuery

如果存在(不存在)就删除(添加)一个类(只支持单独的类名)

实例

点击时切换p元素的highlight类的有无

$("p").click(function () {
        $(this).toggleClass("highlight");
});

html( )
返回值:
    * String

取得第一个匹配元素的html内容(使用innerHTML方法)。这个函数不能用于XML文档(虽然可以用于XHTML文档)。

实例

点击一个段落,将它的HTML代码转化成内容显示

$("p").click(function () {
        var htmlStr = $(this).html();
        $(this).text(htmlStr);
});

html( val )
参数:
    * String

返回值:
    * jQuery

设置每一个匹配元素的html内容。这个函数不能用于XML文档(虽然可以用于XHTML文档)。

实例

将每一个div元素中的代码设置为指定的HTML代码

$("div").html("<span class='red'>Hello <b>Again</b></span>");

将每一个div元素中的代码设置为指定的HTML代码,然后再添加文本和style属性

$("div").html("<b>Wow!</b> Such excitement...");
$("div b").append(document.createTextNode("!!!")).css("color", "red");

text( )
返回值:
    * String

取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效

实例

取得第一段中的文本,将文本作为HTML代码添加到最后一段中

var str = $("p:first").text();
$("p:last").html(str);

text( val )

参数:

    * String

返回值:

    * jQuery

设置所有匹配元素的文本内容。这个函数与html()函数类似,但是将给定的<和>字符转义以HTML字符实体代替

实例

将段落中的文本设置为<b>Some</b> new text.

$("p").text("<b>Some</b> new text.");

val( )

返回值:

    * String, Array

获得第一个匹配元素的当前值。在jQuery1.2中,此方法对包括select在内的所有元素都有效。对于多选项(multiple select),则返回一个数组。

实例

取得输入框的值

$("input").keyup(function () {
        var value = $(this).val();
        $("p").text(value);
}).keyup();

从单选项中取得一个值,从多选项中取得一个数组

function displayVals() {
        var singleValues = $("#single").val();
        var multipleValues = $("#multiple").val() || [];
        $("p").html("<b>Single:</b> " + singleValues + " <b>Multiple:</b> " +  multipleValues.join(", "));
}

$("select").change(displayVals);
displayVals();

val( val )

参数:

    * String

返回值:

    * jQuery

设置每一个匹配元素的值。在jQuery 1.2中,此方法也可以设置select元素的值,但是需要指定恰当的选项值。

实例

设置输入框的值

$("button").click(function () {
        var text = $(this).text();
        $("input").val(text);
});

val( val )

参数:

    * Array[String]

返回值:

    * jQuery

选择或设置所有的单选按钮、复选框和下拉列表为指定的val值

实例

设置单选按钮、多选菜单和选择框

$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
分享到:
评论

相关推荐

    jQuery中的类名选择器(.class)用法简单示例

    2. **jQuery操作**:当页面加载完毕后,通过jQuery的`$(document).ready()`方法确保DOM完全加载,然后使用类名选择器"$('.myClass')"选取了含有"myClass"类的元素。 3. **应用样式**:随后通过css方法改变选取到的...

    jQuery商品属性(多选)选择器代码

    总的来说,"jQuery商品属性(多选)选择器代码"涉及到的关键技术包括jQuery选择器、事件处理、DOM操作、AJAX通信以及用户交互设计。通过熟练运用这些技术,开发者可以构建出强大且易用的商品属性筛选系统,提升电商...

    jQuery操作属性和样式详解

    本文将深入探讨jQuery如何操作属性和样式,帮助开发者更好地理解和应用这一强大的工具。 首先,我们需要理解DOM(Document Object Model)属性与元素属性的区别。在HTML中,像`id`、`src`和`alt`这样的属性被称为...

    jQuery 文档操作方法

    本文将对 jQuery 文档操作方法进行详细的介绍,包括方法的语法、参数、返回值、使用场景和示例代码等。 addClass() 方法 addClass() 方法用于向匹配的元素添加指定的类名。该方法可以将一个或多个类名添加到元素上...

    jQuery属性 toggleClass()方法添加和移除

    toggleClass()也可以与自定义的数据属性(data-*)配合使用,以存储和管理状态,特别是在处理复杂交互时。 通过深入理解并熟练运用jQuery的toggleClass()方法,我们可以实现丰富的用户界面交互,提高用户体验,...

    jquery Manipulation元素操作

    对于DOM元素的属性操作,jQuery提供了`.attr()`和`.removeAttr()`。`.attr('attribute', 'value')`可以设置元素的属性值,`.removeAttr('attribute')`则用于移除属性。`.data()`方法用于存储和检索与元素关联的数据...

    jQuery DOM节点操作源码

    1. **选择器**:jQuery 的核心功能之一就是强大的选择器机制,它允许开发者通过CSS选择器、ID、类名、属性等来选取DOM元素。例如,`$("#myID")` 选择ID为"myID"的元素,`$(".myClass")` 选择所有类名为"myClass"的...

    jquery学习ppt和实例

    在这个压缩包中,你将找到各种jQuery的实例代码,涵盖了上述的所有知识点,包括选择器的使用、DOM操作的实践、事件处理的应用、动画效果的实现以及Ajax交互的案例。 总结,jQuery作为一个强大的JavaScript库,不仅...

    jquery操作手册中文版

    这个“jQuery 操作手册中文版”是初学者入门和进阶的宝贵资源,包含了丰富的 API、函数、选择器等内容,帮助开发者快速理解和掌握 jQuery。 **jQuery 的核心概念** 1. **选择器**: jQuery 的选择器类似于 CSS,...

    Jquery Table 固定行和列

    虽然较旧,但它仍能支持基本的jQuery操作。在这个项目中,它提供了JavaScript操作DOM和处理事件的能力。 `superTables.js`和`jquery.superTable.js`是JavaScript文件,它们可能是实现固定行和列功能的插件。`jquery...

    jquery jar包和api

    在IT行业中,jQuery是一个非常重要的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。...同时,了解jQuery的API和使用方式对理解现代前端开发也有着基础性的帮助。

    《jQuery权威指南》学习笔记之第3章 jQuery操作DOM

    总结,jQuery操作DOM的主要知识点包括:选择器的使用、元素的遍历、插入与删除、属性和内容的修改、事件处理以及动画和Ajax交互。熟练掌握这些技能,可以极大地提高开发效率,使得网页交互变得更加生动和流畅。通过...

    jQuery给HTML标签添加自定义属性.zip

    这个URL指向了一篇博客文章,作者pearl007分享了如何使用jQuery和自定义属性实现带有title提示的tab切换效果。文章可能详细介绍了实现步骤,包括如何利用`title`属性来创建提示信息,并结合自定义属性完成交互逻辑。...

    精通jquery(中文第二版)_扫描版_以及源代码

    1. **jQuery基础**:介绍如何引入jQuery库,理解选择器的概念,以及如何使用jQuery操作DOM元素,包括增删改查。这包括ID选择器、类选择器、属性选择器等,并讲解如何使用链式操作提高代码效率。 2. **事件处理**:...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    如 `$()` 函数可以接受CSS选择器、ID、类名、属性等多种方式选取元素,例如 `$("#myID")` 和 `$(".myClass")`。此外,jQuery还提供了更高级的选择器,如`:first`、`:last`、`:even`等,用于更复杂的元素筛选。 2. *...

    bootstrap&jQueryUI例子

    3. 分析组件:找出使用了 Bootstrap 和 jQuery UI 的组件,比如导航栏、按钮、日期选择器等。 4. 调试和修改:在浏览器的开发者工具中,尝试修改组件的属性和样式,观察页面的变化,理解它们的工作原理。 5. 实践...

    jQuery仿京东页面制作,组件封装

    总的来说,这个项目涵盖了jQuery的基础和进阶用法,包括DOM操作、事件处理、动画和Ajax交互,并强调了代码组织和组件化设计的重要性。通过学习和实践这个项目,初学者不仅可以掌握jQuery的基本技术,还能提升对Web...

    jQuery操作手册

    **jQuery操作手册** ...这个jQuery操作手册详尽地涵盖了这些关键功能,旨在帮助开发者快速上手和熟练掌握jQuery,提高网页开发效率。无论你是初学者还是经验丰富的开发者,这份手册都将是你不可或缺的参考资料。

    jquery1.4.1使用手册

    《jQuery 1.4.1 使用手册》是前端开发者的重要参考资料,主要涵盖了jQuery库的各个方面,包括选择器、DOM操作、事件处理、效果动画、AJAX以及插件开发等内容。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档...

    JQuery教程全集

    - **数据操作**:演示如何使用 JQuery 获取和更新服务器数据,以及如何使用 AJAX 进行异步请求。 - **表单验证**:介绍如何使用 JQuery 实现简单的表单验证功能,提高用户体验。 通过以上内容的学习,读者不仅可以...

Global site tag (gtag.js) - Google Analytics