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 元素的“节操”的更多相关文章

  1. Python web前端 09 jQuery

    Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...

  2. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  3. Python之Web前端Dom, jQuery

    Python之Web前端: Dom   jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...

  4. [Web 前端] 026 jQuery 初探

    目录 1. jQuery 简介 2. jQuery 的简单操作 2.1 jQuery 选择器 2.1.1 简介 2.1.2 基础选择器 2.2 过滤获取 2.3 父子关系获取 3. jQuery 元素 ...

  5. web前端一览&jQuery

    web前端一览 html:裸体 css:好看的衣服            //通常基于bootstrap魔改 JavaScript:动起来           //通常基于JQuery魔改 jQuer ...

  6. web前端基础——jQuery编程进阶

    1 jQuery本质 jQuery不是一门独立的语言,它是JavaScript的一个类库或框架.jQuery的核心思想就是:选取元素,对其操作.很多时候写jQuery代码的关键就是怎样设计合适的选择器 ...

  7. web前端基础——jQuery编程基础

    1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...

  8. Web前端开发JQuery框架

    JQuery 是一个兼容多浏览器支持的JavaScript库,其核心理念是write less,do more(写得更少,做得更多),它是轻量级的js库,兼容CSS3还兼容各种浏览器,需要注意的是后续 ...

  9. Web前端之jQuery 的10大操作技巧

    不管是做什么事情,人们习惯在工作中去找方法.找技巧,来帮助提高效率,在软件开发中更是如此.jQuery作为前端开发必学技术之一,在使用中也有各种各样的小技巧,今天小编为大家分享10条必知会的技巧,希望 ...

随机推荐

  1. oracle partition 分区

    --范围分区create table person( id int, name varchar2(20), birth date, sex char(2))partition by range (bi ...

  2. python(Django2.0) 安装

    前言 哇 ,python 是真的强大,看看如何安装的python: 下载咯 在python的官网下载python对应版本:https://www.python.org/downloads/window ...

  3. 第二章Python入门

    第二章 Python入门 2.1.简介 Python是著名的"龟叔"(Guido van Rossum)在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言 Pytho ...

  4. CodeForces-437C(贪心)

    链接: https://vjudge.net/problem/CodeForces-437C 题意: On Children's Day, the child got a toy from Delay ...

  5. day_10猜年龄游戏函数版

    ''' 1. 在猜年龄的基础上编写登录.注册方法,并且把猜年龄游戏分函数处理,如 2. 登录函数 3. 注册函数 4. 猜年龄函数 5. 选择奖品函数 ''' import json real_age ...

  6. 【NOIP2016提高A组模拟9.24】我的快乐时代

    题目 分析 虽然我们很难求出\(\sum_{i=n}^mjoy(i)\), 但是我们可以分别求出\(\sum_{i=1}^mjoy(i)\)和\(\sum_{i=1}^{n-1}joy(i)\),相减 ...

  7. golang rabbitmq实践 (一 rabbitmq配置)

    1:环境选择 系统为ubuntu 15.04 ,我装在虚拟机里面的 2:rabbitmq tabbitmq 3.5.4  download url : http://www.rabbitmq.com/ ...

  8. Android应用系列:仿MIUI的Toast动画效果实现

    前言 相信有些人用过MIUI,会发现小米的Toast跟Android传统的Toast特么是不一样的,他会从底部向上飞入,然后渐变消失.看起来效果是挺不错的,但是对于Android原生Toast是不支持 ...

  9. es之分页

    导入测试数据: POST /_bulk{ "create": { "_index": "us", "_type": &q ...

  10. bitmap相关工具类

    一,bitmap工具 封装了以下方法: 1,获取activity屏幕截图,保存为图片文件 2,从文件中获取截图,返回bitmap对象 package com.ctbri.weather.utils; ...