关于JS(原生js+jq)中获取设置或者删除元素属性和获取元素值

Posted 慕念

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于JS(原生js+jq)中获取设置或者删除元素属性和获取元素值相关的知识,希望对你有一定的参考价值。

一、JS获取、设置或者删除元素属性

原生js:

  $("要获取属性class/id名").getAttribute("属性");

  $("要设置属性class/id名").setAttribute("属性","属性值");

  $("要删除属性class/id名").removeAttribute("属性");

jq:  

  $("要获取属性class/id名").attr("属性");

  $("要设置属性class/id名").attr("属性","属性值");

  $("要删除属性class/id名").removeAttr("属性");

/*js获取属性*/
    var temp = document.getElementById(‘test1‘).getAttribute(‘data‘);
/*jq获取属性*/
    var temp = $(‘.test1‘).attr(‘class‘);

 

/*js设置属性*/
    var temp2= document.getElementById(‘test2‘).setAttribute(‘data‘,‘self-name-2‘);
/*jq设置属性*/ var temp2= $(‘.test2‘).attr(‘class‘,‘test-spe‘);

 

/*js删除属性*/
      var temp = document.getElementById(‘test1‘).removeAttribute(‘data‘);
/*jq删除属性*/ var temp = $(‘.test1‘).removeAttr(‘data‘);

二、获取JS的内容或值

 原生javascript的方法: innerhtmlouterHTMLinnerTextouterTextvalue

 jQuery中的方法: text()、html(),val()。

1.原生javascript的方法

原生javascript的方法: innerHTML、outerHTML、innerText 、outerText、value。

(1)、innerHTML属性:innerHTML 会根据指定的值创建新的 DOM 树,然后用这个 DOM 树完全替换调用元素原先的所有子节点。

<script type="text/javascript" charset="utf-8">
        document.getElementById("box").innerHTML="这是innerHTML"
</script>

(2)、outerHTML属性:与innerHTML相同。

<script type="text/javascript" charset="utf-8">
        document.getElementById("box").outerHTML="<p>This is a paragraph.</p>"
</script>

等同于
var p = document.createElement("p"); 
p.appendChild(document.createTextNode("This is a paragraph."));
div.parentNode.replaceChild(p,box);

注意:replaceChild() 方法用新节点替换某个子节点;使用:node.replaceChild(newnode,oldnode)

(3)、 innerText 属性:操作元素中包含的所有文本内容,包括子文档树中的文本;

<script type="text/javascript" charset="utf-8">
    var text = document.getElementById("box").innerText;
    alert(text)
</script>

(4)、outerText属性:除了作用范围扩大到了包含 调用它的节点之外,outerText 与innerText 基本上没有多大区别。

<script type="text/javascript" charset="utf-8">
    var text = document.getElementById("box").outerText;
    alert(text)
</script>

(5)、value:获取文本框的值(主要用于获取表单元素的值如input, select 和 textarea);

按钮中用的value 指的是 按钮上要显示的文本 比如‘确定,删除 等等字样‘
复选框用的value 指的是 这个复选框的值
单选框用的value 和复选框的作用一样
下拉菜单用的value 是 列表中每个子项的值
隐藏域用的value 是 框里面显示的内容

<script type="text/javascript" charset="utf-8">
    var text = document.getElementById("inbox").value;
    alert(text)
</script>

注意:value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

注意:value 属性不适用于 <input type="file">。

2.jQuery中的方法

 jQuery中的方法: text()、html(),val()。

(1)、text():设置或者获取所选元素的文本内容

  ①、text():无参;返回的值是一个String;

  ①、text(val):有参;返回的值是一个Object;

(2)、html():设置或者获取所选元素的内容(包括html标记)

  ①、html():无参;返回的值是一个String;

  ①、html(val):有参;返回一个jquery对象。;

(3)、val():主要用于获取表单元素的值如input, select 和 textarea;

  ①、val():无参;返回的值是一个String;

  ①、val(val):有参;返回一个jquery对象。;

  

以上是关于关于JS(原生js+jq)中获取设置或者删除元素属性和获取元素值的主要内容,如果未能解决你的问题,请参考以下文章

原生js之删除节点(元素)

js或者jq怎样获取动态生成的元素的属性比如top ,height?

大坑啊!!!关于页面加载完毕事件!!!

js获取id号和class类名的区别

jq中连续删除的操作;以及js中连续删除的操作;jq方法中如何写循环。

js 原生事件委托