<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<div id="dictionary">
</div>
<div class="letters">
<div class="letter" id="letter-a">
<h3><a href="entries-a.html">A</a></h3>
</div>
<div class="letter" id="letter-b">
<h3><a href="entries-a.html">B</a></h3>
</div>
<div class="letter" id="letter-c">
<h3><a href="entries-a.html">C</a></h3>
</div>
<div class="letter" id="letter-d">
<h3><a href="entries-a.html">D</a></h3>
</div>
<!-- and so on -->
</div>
</head>
<body >
<script>
$(document).ready(function() {
$('#letter-c a').click(function(event) {
event.preventDefault()
$.getScript('c.js')
})
})
</script>
</body>
</html>
将写好的c.js文件放置同一个目录下面
var entries = [
{
"term": "CALAMITY",
"part": "n.",
"definition": "A more than commonly plain and..."
},
{
"term": "CANNIBAL",
"part": "n.",
"definition": "A gastronome of the old school who..."
},
{
"term": "CHILDHOOD",
"part": "n.",
"definition": "The period of human life intermediate..."
}
//省略的内容
]
var html = ''
$.each(entries, function() {
html += '<div class="entry">'
html += '<h3 class="term">' + this.term + '</h3>'
html += '<div class="part">' + this.part + '</div>'
html += '<div class="definition">' + this.definition + '</div>'
html += '</div>'
})
$('#dictionary').html(html)
//$('#dictionary').append(html)
这里的$('#dictionary').html(html)可以直接将需要的代码放入到指定的div内 (<div id="dictionary">)
也可以通过$('#dictionary').append(html)将代码附加到指定的div内 (<div id="dictionary">)
//1、首先获取div的父节点//2、创建一个新节点
//3、将新节点添加到div节点后面
//具体操作如下：
var divs = document.getElementsByTagName("DIV")//获取页面中所有div
for(var i=0i<divs.lengthi++) {
var div = divs[i]//获取第i个div
var divParent = div.parentNode//获取该div的父节点
var newNode = document.createTextNode("文本节点")//创建文本节点
var next = div.nextSibling//获取div的下一个兄弟节点
//判断兄弟节点是否存在
if(next) {
//存在则将新节点插入到div的下一个兄弟节点之前，即div之后
divParent.insertBefore(newNode,next)
} else {
//不存在则直接添加到最后,appendChild默认添加到divParent的最后
divParent.appendChild(newNode)
}
}
//以下是一些常用js操作
var textNode = document.createTextNode("xxx")//创建文本节点
var elementNode = document.createElement("p")//创建元素节点(p)
var body = document.getElementsByTagName("body")[0]//获取body节点
body.appendChild(elementNode)//元素节点添加到body节点下，添加在末尾
elementNode.appendChild(textNode)//将文件节点添加到元素节点下
//获取要删除的节点，elementNode.length-1 表示最后一个指定节点(这里表示最后一个p节点)
var delElementNode = elementNode.item(elementNode.length-1)
body.removeChild(delElementNode)；//移除指定节点
body.insertBefore(newNode, oldNode)//在body中的oldNode前插入newNode节点
body.replaceChild(newNode, oldNode)//将body中的oldNode替换为newNode节点
//创建一个新的属性
var style = document.createAttribute("style")
//为节点添加新属性
option.attributes.setNamedItem(style)
//设置新属性的值
option.setAttribute("style","color:red")
