js与jquery之元素操作

js

1、innerHTML获取

a = document.getElementById("username").innerHTML;

取出元素的html内容，即元素的开始标签和结束标签之间的所有字符，类型为字符串。

<p name='username'>12<span>123</span>3</p>

a = document.getElementById("username").innerHTML;
a的值为12<span>123</span>3

2、innerText获取

a = document.getElementById("username").innerText;

取出元素的文本内容，即元素的开始标签和结束标签之间的，除了嵌套的标签外所有的字符内容，类型为字符串。

<p name='username'>12<span>123</span>3</p>

a = document.getElementById("username").innerText;
a的值为121233

3、获取属性

document.getElementById("username").attributes
document.getElementById("username").attributes[0]
document.getElementById("username").attributes['name']

返回元素的属性集合对象，通过下标获取

4、innerHTML设置

document.getElementById('a').innerHTML='<img src="https://shs3.b.qianxin.com/butian_public/f8595983366a88d39b1a65d669a823b7184cd19eef9be.jpg">'

执行后，赋值内容中会解析html显示
5、innerText设置

document.getElementById('a').innerText='<img src="https://shs3.b.qianxin.com/butian_public/f8595983366a88d39b1a65d669a823b7184cd19eef9be.jpg">'

执行后，赋值内容中不会解析html显示，而是直接作为文本显示

6、设置属性

document.getElementById('a').setAttribute('id','123')

jquery元素操作

jquery获取对象与js获取对象的类型存在差异，jquer获取的对象无法调用原生js的操作方法，而需要使用jquery自定义的操作方法。

//获取html内容
$("#a").html()
//设置html内容
$("#a").html('<a href="123">abc</a>')
//获取text内容
$("#a").text()
//设置text内容
$("#a").text('<a href="123">abc</a>')
//获取属性内容
$("#a").attr('checked')
//设置属性内容
$("#a").attr('checked',false)
//获取输入控件的value内容
$("#a").val()
//设置输入控件的value内容
$("#a").val('abcdef')