[Web 前端] 029 jQuery 元素的“节操”
jQuery 元素的节点操作
- 记下方代码为
code1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<script src="./jquery-1.8.3.min.js"></script>
<style>
*{margin:0;padding:0}
.wrap{
width: 800px;
height: 600px;
border: 1px solid red;
}
.item{
width: 100px;
height: 100px;
background: blue;
border-radius: 50%;
float: left;
}
</style>
</head>
<body>
<button>在元素内部之末插入元素</button>
<button>在元素内部之首插入元素</button>
<button>在元素外部之末插入元素</button>
<button>在元素外部之首插入元素</button>
<button>删除节点</button>
<button>清空</button>
<button>克隆</button>
<button>注意</button>
<div class="wrap"></div>
<script>
// ...... (1)
</script>
</body>
</html>
1. 创建节点
- 在 code1 的 (1) 处加入如下代码
var oDiv = $('<div>这是一个div元素</div>');
2. 插入节点
- 同“创建节点”一样，“插入节点”的代码均写在 code1 的 (1) 处，且在“创建节点”的代码下面
- 先写两个会用到的函数，不妨写在 code1 的 (1) 处的末尾
// 1. 定义随机数函数
function rund(m, n){
return Math.floor(Math.random() * (n-m+1)) + m;
}
// 2. 定义创建新元素的函数
function creatDiv(){
oDiv = $('<div class="item"></div>');
oDiv.css('background', 'rgb('+rund(0,255)+','+rund(0,255)+','+rund(0,255)+')');
}
2.1 在现存元素的内部，从后面插入元素
2.1.1 方法一：append()
$('button').eq(0).click(function(){
creatDiv(); // 调用创建新元素的函数
$('.wrap').append(oDiv); // 在 wrap 内部之末插入 oDiv
});
2.1.2 方法二：appendTo()
$('button').eq(0).click(function(){
creatDiv();
oDiv.appendTo($('.wrap')); // 将 oDiv 插入到 wrap 内部之末
});
2.2 在现存元素的内部，从前面插入元素
2.2.1 方法一：prepend()
$('button').eq(1).click(function(){
creatDiv();
$('.wrap').prepend(oDiv); // 在 wrap 内部之首插入 oDiv
});
2.2.2 方法二：prependTo()
$('button').eq(1).click(function(){
creatDiv();
oDiv.prependTo($('.wrap')); // 将 oDiv 插入到 wrap 内部之末
});
2.3 在现存元素的外部，从后面插入元素
2.3.1 方法一：after()
$('button').eq(2).click(function(){
creatDiv();
$('.wrap').after(oDiv); // 在 wrap 外部之末插入 oDiv
});
2.3.2 方法二：insertAfter()
$('button').eq(2).click(function(){
creatDiv();
oDiv.insertAfter($('.wrap')); // 将 oDiv 插入到 wrap 外部之末
});
2.4 在现存元素的外部，从前面插入元素
2.4.1 方法一：before()
$('button').eq(3).click(function(){
creatDiv();
$('.wrap').before(oDiv); // 在 wrap 外部之首插入 oDiv
});
2.4.2 方法二：insertBefore()
$('button').eq(3).click(function(){
creatDiv();
oDiv.insertBefore($('.wrap')); // 将 oDiv 插入到 wrap 外部之首
});
3. 删除节点与清空节点
3.1 删除节点
$('button').eq(4).click(function(){
$('.wrap').remove(); // 删除元素，可以删除自己
// $('body').remove(); // 使用 body 标签也行
});
3.2 清空节点
$('button').eq(5).click(function(){
$('.wrap').empty(); // 清空元素，不删除自己
});
4. 克隆节点
- 如果单纯的只是为了克隆元素，那么里面不需要传参数
- 如果需要连同元素身上的事件一起克隆，那就在括号中写 true
$('button').eq(6).click(function(){
// var newBtn = $('button').eq(6).clone(); // 注意 true 填与不填的区别
var newBtn = $('button').eq(6).clone(true);
$('.wrap').before(newBtn); // 将克隆的元素插入到 wrap 外部的前面
});
5. 注意事项
- 插入元素的时候，要先进行克隆，再进行插入操作，不然相当于对原来的元素作“剪切”+“粘贴”
$('button').eq(7).click(function(){
$('.wrap').append($('button').eq(0)); // 将第一个按钮添加到 wrap 中
// $('.wrap').append($('button').eq(0).clone()); // 先克隆，再插入
});
[Web 前端] 029 jQuery 元素的“节操”的更多相关文章
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- Python之Web前端Dom, jQuery
Python之Web前端: Dom jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
- [Web 前端] 026 jQuery 初探
目录 1. jQuery 简介 2. jQuery 的简单操作 2.1 jQuery 选择器 2.1.1 简介 2.1.2 基础选择器 2.2 过滤获取 2.3 父子关系获取 3. jQuery 元素 ...
- web前端一览&jQuery
web前端一览 html:裸体 css:好看的衣服 //通常基于bootstrap魔改 JavaScript:动起来 //通常基于JQuery魔改 jQuer ...
- web前端基础——jQuery编程进阶
1 jQuery本质 jQuery不是一门独立的语言,它是JavaScript的一个类库或框架.jQuery的核心思想就是:选取元素,对其操作.很多时候写jQuery代码的关键就是怎样设计合适的选择器 ...
- web前端基础——jQuery编程基础
1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...
- Web前端开发JQuery框架
JQuery 是一个兼容多浏览器支持的JavaScript库,其核心理念是write less,do more(写得更少,做得更多),它是轻量级的js库,兼容CSS3还兼容各种浏览器,需要注意的是后续 ...
- Web前端之jQuery 的10大操作技巧
不管是做什么事情,人们习惯在工作中去找方法.找技巧,来帮助提高效率,在软件开发中更是如此.jQuery作为前端开发必学技术之一,在使用中也有各种各样的小技巧,今天小编为大家分享10条必知会的技巧,希望 ...
随机推荐
- SpringMVC初识
1 SpringMVC的概述 Spring为展现层提供的基于MVC设计理念的优秀的web框架,是目前最主流的MVC框架之一. Spring3.0后面全面超过Struts2,成为了最优秀的MVC框架. ...
- nodejs中 require 方法的加载规则
require参数类型 http.fs.path等,原生模块 ./mod或../mod,相对路径的文件模块 /pathtomodule/mod,绝对路径的文件模块 mod,非原生模块的文件模块 在进 ...
- layui静态表格固定td宽度,table固定td宽度
正在做一个项目,要求数据表的列是不固定的,有可能是有10列,有可能是20列,第一列宽度要固定,然后我怎么设置都没有用, 这个问题困扰了我三天,后来终于百度到了, 这个博客: https://www.c ...
- Trie树简介
Trie树, 即字典树, 又称单词查找树或键树, 多叉树 基本性质 根节点不包含字符,除根节点外每一个节点都只包含一个字符 从根节点到某一节点,路径上经过的字符连接起来,为该节点对应的字符串 每个节点 ...
- Android 内存泄漏优化总结
1,验证是否为汉字 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 3 ...
- （71）一篇文章带你熟悉HTTP协议
作者:涤生_Woo链接:http://www.jianshu.com/p/6e9e4156ece3來源:简书著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 本篇文章篇幅比较长,先 ...
- jdbcTemplate进行CRUD，查询结果转json
通过Spring的jdbcTemplate作为dao层的框架,将获取到的字段名,及其值,通过put放在jsonObject或jsonArray中,将json返回. public class Sprin ...
- Vue-router 中hash模式和history模式的区别
实际上存在三种模式: Hash: 使用URL的hash值来作为路由.支持所有浏览器. History: 以来HTML5 History API 和服务器配置.参考官网中HTML5 History模式 ...
- 读写锁StampedLock的思想
该类是一个读写锁的改进,它的思想是读写锁中读不仅不阻塞读,同时也不应该阻塞写. 读不阻塞写的实现思路: 在读的时候如果发生了写,则应当重读而不是在读的时候直接阻塞写! 因为在读线程非常多而写线程比较少 ...
- springboot+druid+mybatis-Plus 配置详解
网上找了很多关于springboot+druid+mybatis-Plus的配置,遇见的很多问题 也没找到好的解决方案.折腾了好几天终于自己配置通过了. springboot的pom文件 <pa ...