开发工具与关键技术:visual Studio jquery
作者:邓伟征
撰写时间:2019年5月15日
创建流程很简单:1创建节点(属性 元素 文本)document createElement
2:添加节点属性 setAttribute
3:加入到文档中 appendCgld
var body = document.querySelector(‘body’);//查找body元素
////addEventListener() 方法用于向指定元素添加事件句柄
$(“body”).click(function () {
});
document.getElementById(“leftDiv”).addEventListener(‘click’, function () {
var rightdiv = document.createElement(‘div’);
var rightaaron = document.createElement(‘div’);
//给2个div设置不同的属性
rightdiv.setAttribute(‘class’, ‘right’);
rightaaron.className = “aaron”;
rightaaron.innerHTML = “动态创建DIV元素节点”;
//2个div合并成包含关系
rightdiv.appendChild(rightaaron);
//绘制到页面body
body.appendChild(rightdiv);
});
$("#leftDiv").click(function () {
var $body = $(“body”);
var div = $(“
var de = $(“
2019/5/15/15/15
”);$body.append(div).append(de);
});
点击创建新的元素节点,可以创建无数个
节点创建与属性的处理
上面通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程
创建元素节点:
可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过(“html结构”)
$("
创建为本节点:
与创建元素节点类似,可以直接把文本内容一并描述
$(“
创建为属性节点:
与创建元素节点同样的方式
$(“
我们通过jQuery把上一面的代码改造一下,
ar $body = $(“body”);
$("#leftDiv").on(‘click’, function () {
//通过jQuery生成div元素节点
var div = $(“
将div添加到body内
$body.append(div);
});
$("#leftDiv").click(function () {
var $body = $(“body”);
var div = $(“
var de = $(“
2019/5/15/15/15
”);$body.append(div).append(de);});