创建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, ...
随机推荐
- eventFlow 系列 <三> 查询所有
接着上面的例子,产生2条数据.怎么把这两条数据查询出来呢? var commandBus = resolver.Resolve<ICommandBus>(); , ); var execu ...
- MyBatis核心组件
SqlSessionFactoryBuilder (构造器) 会根据配置或者代码来生成SqlSessionFactory SqlSessionFactory (工厂接口) 以后他来生成SqlSessi ...
- maven项目打包和编译跳过单元测试和javadoc
代码中可能由于单元测试.注释(方法中的参数)或者maven javadoc插件的问题导致无法打包,影响工作,为避免这两种情况可以在打包时输入命令: mvn clean install -Dmaven. ...
- ubantu18.04 配置nginx与uwsgi(前后端分离)
ubantu18.04 配置nginx与uwsgi 一.首先先安装nginx静态服务 先更新 sudo apt-get update 1.安装gcc g++的依赖库 sudo apt-get in ...
- 关于微信小程序发布新版本后的提示用户更新的方法详解
当小程序发布新的版本后 ,用户如果之前访问过该小程序,通过已打开的小程序进入(未手动删除),则会检测新版本,提醒用户更新新的版本 话不多说,上代码 App({ onLaunch: function ( ...
- nodejs入门API之fs模块
fs模块下的类与FS常量 fs模块下的主要方法 fs的Promise API与FileHandle类 一.fs模块下的类 1.1 fs.Dir:表示目录流的类,由 fs.opendir().fs.op ...
- stm32 按键操作
抖动时间的长短由按键的机械特性决定,一般为5ms-10ms void key() { static u8 flag = 1; if(flag == 1 && KEY_UP == 1) ...
- 用js刷剑指offer(旋转数组的最小数字)
题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个 ...
- jmeter非GUI的运行命令
jmeter 的参数 参数说明: -h 帮助 -> 打印出有用的信息并退出 -n 非 GUI 模式 -> 在非 GUI 模式下运行 JMeter -t 测试文件 -> 要运行的 JM ...
- CDN加速地址URL拿不到，显示“无法访问此网站”
问题:CDN加速地址URL拿不到,显示“无法访问此网站” 原因:浏览器缓冲原因,导致拿到的content-encoding不是一个标准的值 解决方法: 1. 客户机器 ping一下访问的CDN加速域名 ...