创建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, ...
随机推荐
- （四）Redis之哈希
一.哈希常用命令 赋值 取值 删除 增加数字 判断字段是否存在 获取hash属性个数 获取hash所有属性名称 1.2.3 赋值取值和删除 package myRedis01; import java ...
- VBA消息框（MsgBox）（五）
MsgBox函数显示一个消息框,并等待用户点击一个按钮,然后根据用户点击的按钮执行相关的操作. 语法 MsgBox(prompt[,buttons][,title][,helpfile,context ...
- 3d转化
3d转化 想要实现3d效果,首先要确定的是观察点,这是2d转换所不需要的.具体的我也看的很糊涂,美术什么的根本不懂好吗. 但有些东西是确定的,perspective定义的是3d元素距视图的距离,因此像 ...
- python 链接impala执行SQL
项目中用python来链接impala数据库最常见,一个简单的链接,获取结果. #!/usr/bin/python # -*- coding:utf-8 -*- from impala.dbapi i ...
- Mongodb 的ORM框架 Morphia 注解 之 @Reference
public class BlogEntry { private String title; private Date publishDate; private String body; privat ...
- Java学习第一天之简单了解java语言及开发环境的安装
一.初步了解Java语言 Java语言是由Sun公司的James Gosling创造的一门面向对象的高级语言. 2009年4月20日,Sun公司被Oracle以总价值约为74亿美元的价格收购,Java ...
- 关于stm32 SDIO初始化TF卡 失败的问题
类似问题:http://www.openedv.com/thread-33232-1-1.html 现象:初始化4bit SDIO模式的TF卡,卡死在初始化过程中. 问题现象代码移植于野火开发板相关例 ...
- 【问题】Debian安装、配置sources.list、安装VMware Tools
Debian安装: 我采用的是纯命令行安装方式.具体安装过程网上一大堆,不介绍了.需要强调一点,那个SSH Server必须选,否则像XShell这样的客户端不能访问Debian. 配置sources ...
- Windows 下 mysql 安装
mysql官网下载地址:https://downloads.mysql.com/archives/community/ 以5.7.20版本为例 首先安装包解压后,没有网上教程里面提到的data文件夹和 ...
- python3 基础一
一.python基本运行 1.python特点:(1)python使用C语言开发,但是python不再有C语言中的指针等复杂数据类型,(2)python有很强的面向对象特性,而且简化了面向对象的实现, ...