jQuery如何获取指定的属性值

Posted 2023-03-31

jquery如何获取一个元素的指定属性值比如我要获取超链的href属性值，这个应该怎么写

在jQuery输入元素表达式属性名即可得到。
如：

1.$("#textId").attr("width")是获取Id为textId的控件的width属性。

2.$(".className").attr("width")是获取包含class名为className的控件的width属性。

3.$("[name=textName]").attr("width")是获取name为textName的控件的width属性。

但要注意，jquery取到的可能是一个数组，如果确定属性为同一值，则没问题，否则应该循环取得控件，再取属性值。如：$("#textId")[0].width是取第一个控件的width属性。但也有写属性用attr取不到，也需要用角标的方式取得控件后再取属性。

jQuery是一个快速、简洁的javascript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化html文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

参考技术A

问题分析：

在jQuery中获取HTML标签的属性，可以使用attr方法。

举例说明：

接下来的案例将演示如何获取a标签的href属性。

HTML代码：

<a href="https://zhidao.baidu.com/question/585413051.html"></a>

jQuery代码：

var href = $('a').attr('href');
alert(href);

运行结果：

总结：

从结果可以看出，jQuery正确获取了a标签中href属性的值。

参考技术B $("a").attr("href");大体是这样吧，jquery没有原生熟悉 参考技术C 建议去看一下API文档，有个“选择器”那一章有讲。

jquery获取改变元素属性值

标签的属性称作元素属性，在JS里对应的DOM对象的对应属性叫DOM属性。JS里的DOM属性名有时和原元素属性名不同。

  1 
  2 //返回元素指定属性值
  3 var txt1_val=$("#txt1").attr("value");
  4 //通过元素的DOM属性名更改DOM属性值
  5 $("#txt1").attr({value : "txt1_value" , className : "txt1_class" });
  6 //通过指定元素属性改变元素属性值
  7 $("#txt1").attr("class","txt1_class2");
  8 //给指定元素属性赋值，通过后面捆绑的方法返回值
  9 $("#txt1").attr("class",function(){
 10    return"txt1_class3";
 11 })
 12 //移除指定的元素属性
 13 $("#txt1").removeAttr("class");
 14 
 15 //给CSS类即class元素属性添加一个属性值，可以添加多个之间用空格分开以下的对CSS类操作函数同样可以填入多个CSS类
 16 $("#txt1").addClass("txt1_classtxt1_class2");
 17 //判断是否已有该CSS类，返回真假
 18 $("#txt1").hasClass("txt1_classtxt1_class2");
 19 //移除指定CSS类，用空格分开，如无指定则删除该元素所有CSS类
 20 $("#txt1").removeClass("txt1_class");
 21 //判断是否有这个CSS类，有就删除，没有就添加
 22 $("#txt1").toggleClass("txt1_class");
 23 //根据后面的返回真则添加此CSS类，假则删除此CSS类
 24 $("#txt1").toggleClass("txt1_class",false);
 25 
 26 //返回指定CSS样式值
 27 $("#txt1").css("color");
 28 //一次赋多个样式
 29 $("#txt1").css({color:"#ff0011",background:"blue"});
 30 //一次赋一个指定的样式
 31 $("#txt1").css("color","black");
 32 
 33 //设置元素的高度，无值则返回该元素的高度单位像素
 34 $("#txt1").height(25);
 35 //设置元素的宽度，无值则返回该元素的宽度
 36 $("#txt1").width(150);
 37 //获取元素的内部高度，不包括边框
 38 $("#txt1").innerHeight();
 39 //获取元素内部宽度，不包括变宽
 40 $("#txt1").innerWidth();
 41 //获取元素外部高度，包括边框
 42 $("#txt1").outerHeight();
 43 //获取元素外部宽度，包括边框
 44 $("#txt1").outerWidth();
 45 
 46 //获取元素相对窗口的偏移位置，返回两个值，一个top值，一个left值
 47 var txt1_offset=$("#txt1").offset();
 48 var top=txt1_offset.top;
 49 var left=txt1_offset.left;
 50 //返回相对父元素的相对偏移位置，返回两个值一个top，一个left
 51 var txt1_position=$("#txt1").position();
 52 var top=txt1_position.top;
 53 var left=txt1_position.left;
 54 
 55 //针对的元素具有垂直滚动条，设置从总体内容向下的第20行像素开始，显示在滚动条可视窗口内上方顶端
 56 //如无参数，则返回当前滚动条可视窗口上方顶点位置，距离整体内容上方顶点的距离
 57 $("#div_outer").scrollTop(20);
 58 //针对的元素具有横向滚动条，设置从总体内容左侧的第20列像素开始，显示在滚动条可视窗口内左端顶点
 59 //如无参数，则返回当前滚动条可视窗口左端顶点位置，距离整体内容左端顶点的距离
 60 $("#div_outer").scrollLeft(20);
 61 
 62 

JS和Jquery获取和修改label的值的示例代码

一、label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值，下面有个不错的示例，希望大家可以学习下

二、获取值：

label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值：

  1 var label=document.getElementById("id");
  2 var value=label.value;
  3 var value=$("#id").val();

可以这样：

  1 var label=document.getElementById("id");
  2 var value=label.innerText;

Jquery:

  1 var value=$("#id").html();

赋值：

不像Java，JS和Jquery不能这样赋值：

  1 var label=document.getElementById("id");
  2 var value=label.innerText;
  3 value="XXXXXX";

  1 var value=$("#id").html();
  2 value="XXXXXX";

可以这样赋值：

  1 var label=document.getElementById("id");
  2 label.innerText="XXXXXX";
  3 $("#id").html("XXXXX");

_______________________________________________________________