创建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, ...
随机推荐
- 查准率（precision）和查全率（recall）
一.理解查准率(precision)& 查全率(recall) 我们在平时常用到的模型评估指标是精度(accuracy)和错误率(error rate),错误率是:分类错误的样本数站样本总数的 ...
- putty和psftp命令行参数
putty和psftp命令行参数 https://the.earth.li/~sgtatham/putty/latest/w32/putty.zip https://the.earth.li/~sgt ...
- Go part 1 初探
Go 语言简介 Go 语言是 Google 在2007年开发的一种开源编程语言,于2009年11月10日向全球公布 出自 Ken Thompson 和 Rob Pike.Robert Grieseme ...
- ElasticSearch做实时OLAP框架～实时搜索、统计和OLAP需求，甚至可以作为NOSQL来使用（转）
使用ElasticSearch作为大数据平台的实时OLAP框架 – lxw的大数据田地 http://lxw1234.com/archives/2015/12/588.htm 一直想找一个用于大数据平 ...
- python多线程与多进程异步事件框架
多线程简单实现 #!/usr/bin/env python # -*- coding: UTF-8 -*- import logging import queue import threading f ...
- 自定义centos
目录 自定义centos 1. 为什么要自定义centos 2. 自定义centos步骤 自定义centos 1. 为什么要自定义centos 在使用官网的 centos镜像,只有200m,很小,但是 ...
- CAD二次开发之入门坑
如果没有引用第一个dll,则会报未找到引用CommandMethod
- echart 不同颜色（柱状图）
var option = { tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containL ...
- 如何使用Visual Studio Code调试PHP CLI应用和Web应用
在按照Jerry的公众号文章 什么?在SAP中国研究院里还需要会PHP开发? 进行XDebug在本地的配置之后,如果想使用Visual Studio Code而不是Eclipse来调试PHP应用,步骤 ...
- dockerfile构建nginx
mkdir docker_demo cd docker_demo wget http://nginx.org/download/nginx-1.2.9.tar.gz vim Dockerfile FR ...