创建jQuery节点对象
现在的年轻人，经历旺盛，每天都熬夜，今天又晚了，现在才更新博客，今天更新jquery入门之对节点的操作，内容简单好掌握。认真的燥再来吧。
1、$("<li class="li"></li>") 创建一个li标签
//1、创建节点，$("标签") 类似js document.createElement("li")
console.log($("<li clsass='li'>我是li创建的标签</li>"))
2、$("ul").html("<li></li>"）
//2、创建节点，$("ul").html("<li></li>") 类似js innerHTML 因为此属性，识别标签 会覆盖原来的内容
console.log($("ul").html("<li>我是thml创建的li</li>"))
//不会覆盖原来的内容
<script>
$(document).ready(function(){
var li= $("ul").html();
li+="<li>ss</li>";
$("ul").html(li);
})
</script>
$("button").click(function(){
//创建一个li标签对象
var li= $("<li>我是刚创建出来的li对象</li>")
// append 在盒子的末尾添加li新对象
$("ul").append(li)
})
}
appendTo: 在父盒子最后添加一个元素 （用的少）
li.appendTo($("ul"))
2、perpend 在父盒子最前面添加一个元素
$("ul").prepend(li)
perpendTo 在父盒子最前面添加一个元素
li.prepend("ul")
3、after 操作兄弟元素，添加到兄弟元素最后面
$("li").after(li)
4、before 操作兄弟元素，添加到兄弟元素最前面
$("ul").html("")
2、$("元素").empty()全部清空
$("ul").empty()
3、删除指定元素 remove 获取的是兄弟节点
$("li").eq().remove()
$("button").click(function(){
var jqul=$(".box ul").clone();
$(".box").append(jqul)
})
<script>
$(function(){
// 模拟从后台拿到的数据
var data = [{
name: "传智播客",
url: "http://www.itcast.cn",
type: "IT最强培训机构"
}, {
name: "黑马程序员",
url: "http://www.itheima.com",
type: "大学生IT培训机构"
}, {
name: "传智前端学院",
url: "http://web.itcast.cn",
type: "前端的黄埔军校"
}];
//需求：点击按钮，然后生成tr里面生成三个td 数组元素个数的tr 然后放入j_tbData肿
//1、绑定事件
$("input").click(function(){
//写入到click事件肿，每次点击以后吧str清空
var str="";
//2、利用for循环，把数组中的所有数据组合成一个字符串
for( var i=; i<data.length; i++){
//data[i]=数字中的每一个json
//data[i].name=数组肿的每个json的name属性值
str+="<tr>" +
"<td>"+data[i].name+"</td>"+
"<td>"+data[i].url+"</td>"+
"<td>"+data[i].type+"</td>"+
"</tr>"
}
//3、把生成的字符串设置为html内容添加进TBODY肿
$("#j_tbData").html(str)
})
})
</script>
</head>
<body>
<input type="button" value="获取数据" id="j_btnGetData" />
<table>
<thead>
<tr>
<th>标题</th>
<th>地址</th>
<th>说明</th>
</tr>
</thead>
<tbody id="j_tbData">
</tbody>
</table>
</body>
<script>
$(function(){
// 模拟从后台拿到的数据
var data = [{
name: "传智播客",
url: "http://www.itcast.cn",
type: "IT最强培训机构"
}, {
name: "黑马程序员",
url: "http://www.itheima.com",
type: "大学生IT培训机构"
}, {
name: "传智前端学院",
url: "http://web.itcast.cn",
type: "前端的黄埔军校"
}];
//需求：点击按钮，然后生成tr里面生成三个td 数组元素个数的tr 然后放入j_tbData肿
//1、绑定事件
$("input").click(function(){
//写入到click事件肿，每次点击以后吧str清空
var str="";
//2、利用for循环，把数组中的所有数据组合成一个字符串
for( var i=; i<data.length; i++){
//data[i]=数字中的每一个json
//data[i].name=数组肿的每个json的name属性值
str+="<tr>" +
"<td>"+data[i].name+"</td>"+
"<td>"+data[i].url+"</td>"+
"<td>"+data[i].type+"</td>"+
"</tr>"
}
//3、把生成的字符串设置为html内容添加进TBODY肿
$("#j_tbData").html(str)
})
})
</script>
</head>
<body>
<input type="button" value="获取数据" id="j_btnGetData" />
<table>
<thead>
<tr>
<th>标题</th>
<th>地址</th>
<th>说明</th>
</tr>
</thead>
<tbody id="j_tbData">
</tbody>
</table>
</body>
动态添加数据
<script>
$(document).ready(function(){
//需求 1、点击按钮显示遮罩层和添加数据表格
$("#j_btnAddData").click(function(){
$("#j_mask").show();
$("#j_formAdd").show();
})
//需求 2、点击里面的关闭按钮隐藏遮罩层和添加数据表格
$("#j_hideFormAdd").click(function(){
$("#j_mask").hide();
$("#j_formAdd").hide();
});
//需求 3、点击get所在的标签，删除所在的tr
$("#j_tb .get").click(function(){
$(this).parent("td").parent("tr").remove()
});
//需求 4、点击里面的添加内容，全部能容这个成嵌套td形式添加到tbody里面
$("#j_btnAdd").click(function()
//有点小错误 因为原来的内容会被覆盖掉
/*var str=$("#j_tb").html();
str+="<tr>" +
"<td>11</td>"
"</tr>"
$("#j_tb").html(str);*/
var srt=$("<tr></tr>");
//外单内双 因为里面用到了双引号
srt.html('<td>'+$("#j_txtLesson").val() +'</td><td>'+$("#j_ttxBelSch").val()+'</td><td><a href="javascrip:;" class="get">GET</a></td>');
//buy1 内容不能为空
if($("#j_txtLesson").val()==="") {
alert("内容不能为空");
return;
}
$("#j_tb").append(srt);
$("#j_mask").hide();
$("#j_formAdd").hide();
//buy2 之前填写的内容，在关闭后，清空
$("#j_txtLesson").val("");
//buy3 新添加的表格也可以删除
srt.find("a").click(function(){
srt.remove()
});
})
})
</script>
创建jQuery节点对象的更多相关文章
- 第四章 jQuery节点操作
1.DOM操作分为三类:(1)DOM Core:任何一种支持DOM的编程语言都可以使用用它如:getElementById()(2)HTML-DOM:用于处理HTML文档,如document,form ...
- jquery创建一个新的节点对象(自定义结构/内容)的好方法
jq创建一个新的节点对象,这对一些自定义功能很有帮助,而且可以随意控制对象的结构与内容,何乐而不为呢,看到这里,相信有些朋友已经按耐不住了,好记下来为大家介绍实现方法,感兴趣的朋友可以了解下哦 < ...
- jQuery 节点操作（创建 插入 删除 复制 替换 包裹）
一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...
- JavaScript&&jQuery创建新节点和操作属性对比
JavaScript创建新节点和操作属性 通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的. <!DOCTYPE html> <html lang="e ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- jquery节点操作
很久没有jquery写东西了,最近使用jquery的时候发现很多节点的操作都不太熟悉了,于是就进行了一个小小的总结. 创建节点:var dom=$('<div></div>') ...
- jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...
- 深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...
随机推荐
- Abp 领域事件简单实践 <四> 聚合根的领域事件
聚合根有个 DomainEvents 属性. 首先聚合根是一个实体.这个实体的仓储有变化(增删改)的时候,会触发这个DomainEvents 里的事件.就像EventBus.Trigger一样. pu ...
- Java Web 深入分析（4） Java IO 深入分析
I/O问题可以说是现在海量数据时代下 ,I/O大部分web系统的瓶颈.我们要了解的java I/O(后面简称为(IO)) IO类库的基本结构 磁盘IO的工作机制 网络IO的工作机制 NIO的工作方式 ...
- java封装数据类型——Boolean
众所周知,java对常见的原始数据类型都提供了对应的封装类型,增加一些常用的特性(如 计算hash值.比较相等.类型转换等),以扩展他们对数据处理的能力,使得他们更好地适应面向对象编程的各种场景.今天 ...
- 记一次Git提交报错的问题
通常代码版本控制的步骤是: 在代码版本控制平台新建一个仓库 clone远程仓库到本地 开始编码,然后是一系列add,commit,push 我的步骤是: 在远程代码版本管理平台新建一个仓库 在本地新建 ...
- 移动端自适应之flexible
移动端自适应之flexible 作用:flexible的作用是使页面可以适配不同移动终端 原理:在页面html标签上添加style = "font-size: 36px;"样式,设 ...
- 如何解决js地址栏中传递中文乱码的问题
目标要求: 实现从A页面跳转至B页面,B页面接收A页面通过地址栏传递过来的中文参数,中文不能出现乱码. A页面部分代码(传递参数): var title = "这是中文"; var ...
- 图像处理库GPUImage简单使用
一.介绍 GPUImage是一个基于OpenGL ES 2.0的开源的图像处理库,作者是Brad Larson.GPUImage将OpenGL ES封装为简洁的Objective-C或Swift接口, ...
- harbor小结
1.harbor是什么? docker容器是集装箱,harbor就是放集装箱的港湾. docker工具下有:①自带镜像库房:image ②容器管理清单 :container ③doc ...
- Computer Vision_33_SIFT：Evaluation of Interest Point Detectors——2000
此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...
- TLS1.3&TLS1.2形式化分析（二）
1.下面是TLS1.2和TLS1.3握手协议过程 ,明显的可以看出存在不同 . 我们先说TLS1.2的握手过程明显是比TLS1.3的握手过多了一次.在TLS1.3中舍弃了之前RSA的协商过程,然后基于 ...