用jquery操作属性和类名
文章分类:Web前端
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中DOM常见操作。分享给大家供大家参考,具体如下: DOM属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性。 removeAttr() 1.0 移除文档节点的属性。 prop() 1.6 ...
jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的...
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些: addClass() – 向被选元素添加一个或多个类 removeClass() – 从被选元素删除一个或多个类 toggleClass() – 对被选元素进行添加/删除类的切换操作 css()...
这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说,这个函数是可链接的--但真正以这种方式链接的情况并不多...
7 1.8 改变DOM节点的内容 8 1.9 快速创建DOM节点 9 1.10 为不同HTML元素分配相同类名并对它们应用样式 12 1.11 小结 13 第2章 数组和字符串 14 2.1 利用数组在列表中显示名字 14 2.2 操作数组元素 17 2.3 筛选数组...
[removed][removed][removed][removed][removed][removed]调用代码 你所需要做的所有事就是使用jQuery的方式选择一个元素并且调用插件。 $('a.myLinks').zoomimage(options); 可选项 一个哈希参数。所有的参数都是可...
我们之所以说是因为我们确实允许用户更新类名和属性。 有隐晦的计划写一个基本水平的DOM操作的扩展,将暴露的功能更类似于jQuery和Zeptos .html() .text() .remove()等... 1.1稳定版本之后。 在此之前,我们认为...
用<script></script>标签包围,这里面的代码如同java里面的代码一样有操作性 这里面的数据是弱数据类型 有顺序结构、循环结构、条件结构 还可以写函数,外还可以写拼接,点击按钮给表格加一行 BOM和DOM内置元素 ...
以前我们有需要用js或jquery的一些方法hasClass、addClass、removeClass,在一个元素的class属性上添加或者删除某几个类,达到某种样式变化的需求,但还是稍微麻烦了一些。 h5新增的classList可以让我们更方便的元素...
因此,您可以在一个元素上调用它,然后调用一个公共方法,或者直接访问数组并返回HTMLElement以进行直接JS操作。用法每个() _('.list-items').each(function() { // stuff here});得到() 只是一种更清洁的执行...
+去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel(不管你是Accordion,Panel,ContentPanel,Form,GroupPanel,SimpleForm,Tree还是...
ExtAspNet - ExtJS based ASP.NET ... +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel(不管你是Accordion,Panel,ContentPanel...
7. 增加全开放式主题皮肤设计,随时随地更换你喜欢的主题风格,自制主题皮肤即插即用。 【安装注意】不要将程序放到根目录下。 【安装方法】 1. 确认你的网站支持 php mysql。 2. FTP上传完整的程序到...
EOP自动为应用提供表单校验功能,通过指定form样式名和指定表单项特定属性的方式来完成。 5.3.1 示例 代码示例 [removed] function checkUserName(val){ if(val=='kingapex' ) return true; else return ...
13. 用 ExtEvent 打开链接和下载文件 ................................................................................. 17 14. WebApplication 显示对话框 .....................................................