创建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, ...
随机推荐
- vs-code 的常用插件
最近编辑器转移至VS-Code上面了,为什么抛弃sublime呢,因为,sublime在项目逐渐变大的过程中(项目已上万行,还在不停继续变大),sublime会出现卡顿,反应缓慢,甚至未响应状态,基于 ...
- ajax对数据删除、查看详情功能
运用bootstrap,jquery和ajax显示一些数据,附加删除功能并且点击能弹出模态框详情功能 主页面main.php <!DOCTYPE html PUBLIC "-//W3C ...
- rabbit MQ 的环境及命令使用（一）
RabbitMQ依赖erlang,所以先安装erlang,然后再安装RabbitMQ; 先安装erlang,双击erlang的安装文件即可,然后配置环境变量: ERLANG_HOME=D:\Progr ...
- golang使用sftp连接服务器远程上传、下载文件
安装github.com/pkg/sftp 我们之前介绍了,golang如何通过ssh连接服务器执行命令,下面我们来如何上传文件,上传文件同样需要之前的ssh,但是除此之外还需要一个模块,直接使用go ...
- 【数据库】通过触发器实现审计日志记录-demo篇
触发器实现审计日志记录(记录增.删.改) #创建测试表 CREATE TABLE COMPANY( ID INT PRIMARY KEY NOT NULL, NAME TEXT NOT NULL, ...
- Mha-Atlas-MySQL高可用方案实践
一,mysql-mha环境准备 1.1 实验环境: 1.1 实验环境: 主机名 IP地址(NAT) 描述 mysql-master eth0:10.1.1.154 系统:CentOS6.5(6.x都可 ...
- synchronized 和 ReentrantLock 区别是什么？（未完成）
synchronized 和 ReentrantLock 区别是什么?(未完成)
- Til the Cows Come Home（Dijkstra）
Dijkstra (迪杰斯特拉)最短路算法,算是模板 POJ - 2387 #include<iostream> #include<algorithm> #include< ...
- ndk学习之c++语言基础复习----C++容器、类型转换、异常与文件流操作
继续来复习C++,比较枯燥,但是这是扎实掌握NDK开发的必经之路,不容小觑. 容器: 容器,就是用来存放东西的盒子. 常用的数据结构包括:数组array, 链表list, 树tree, 栈stack, ...
- IAR添加debug和release选项
在IAR的Workspace窗口顶部的下拉菜单中有两个选项,Debug和Release. 名字和数量可以在菜单栏的Project-->Edit Configuration中增删修改 每个选项都对 ...