var kv = [{ "label": "姓名", "id": "Name" }, { "label": "手机号", "id": "Mobile"}]
//变成编辑事件
function modify() {
//获取页面上所有的 li 标签元素
//这里的 document 可以换成 document.getElementById("ul1")
//表示只查找 ul1 标签下面的 li 标签
var lis = document.getElementsByTagName("li")
//遍历找到的 li 标签
for (var i = 0 i < lis.length i++) {
//查找 li 标签下的 p 标签
var ps = lis[i].getElementsByTagName("p")
//查找 li 标签下的 label 标签
var labels = lis[i].getElementsByTagName("label")
var p = ps[0] //取第一个 p 标签元素
var label = labels[0] //取第一个 label 标签元素
var t = p.innerHTML //获取 p 标签中的文本
//同理,name 的值也可以像 id 一样额外设定
var id = getID(label)
//删除 P 标签
lis[i].removeChild(p)
//累加文本框
lis[i].innerHTML += "<input type='text' name='" + id + "' id='" + id + "' value='" + t + "' />"
}
}
//根据规则设定 ID
function getID(label) {
var id = ""
var t = label.innerHTML
for (var i = 0 i < kv.length i++) {
//如果标签中含有指定字眼,则设定为对应的 ID
if (t.indexOf(kv[i].label) > -1) {
id = kv[i].id
break
}
}
return id
} <input type="button" value="编辑" onclick="modify()" />
<ul id="ul1">
<li><label>姓名:</label><p>张苏安</p></li>
<li><label>手机号:</label><p>number</p></li>
</ul>
html()方法可以用来读取或者设置某个元素中的HTML内容,text()方法可以用来读取或者没置某个元素中的文本内容html()方法
此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容。要获取某个元素的内容,可以这样:
var
p_html
=
$("p").html()
//获取p元素的HTML代码
如果需要设置某元素的HTML代码,那么也可以使用该方法,不过需要为它传递一个参数。例如要设置p元素的HTML代码,可以使用如下代码:
//设置p元素的HTML代码
$("p").html("欢迎您访问简明现代魔法图书馆~~")
注意:html()方法可以用于XHTML文档,但不能用于XML文档。
text()方法
此方法类似于JavaScript中的innerText属性,可以用来读取或者没置某个元素中的文本内容。继续使用以上的HTML代码,用text()方法对p元素进行操作:
var
p_text
=
$("p").text()
//获取p元素的文本内容
与html()方法一样,如果需要为某元素设置文本内容,那么也需要传递一个参数。例如对p元素设置文本内容,代码如下:
//
设置p元素的文本内容
$("p").text("欢迎您访问简明现代魔法图书馆~~")
要注意下面两点:
JavaScript中的innerText属性并不能在Firefox浏览器下运行,而jQuery的text()方法支持所有的浏览器.
text()方法对HTML文档和XML文档都有效。
显示好友列表时,在显示好友名字的<p></p>元素中设置:<p
id="p${friend.friendId}"></p>,这样js文件就可以动态获取<p></p>元素的id,并顺利通过text()方法赋值$("#p"+userId).text(name)
js里面的getAttribute(key)是获取dom的属性值,使用方法如下:
1、首先创建一个名称为 getAttribute 的html文件。
2、添加一个button在点击事件中加入自定义函数mygetAttribute。
3、然后加入一个a链接和p标签显示获取的属性值。
4、创建一个自定义函数mygetAttribute。
5、在自定义函数中通过id的方式获取对象,在用getAttribute方法获取 href的值,并将值赋值到p标签。
6、最后在浏览器中打开文件,点击button或获取到a 表签的 href属性值,就完成了。