<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jq文档操作</title>
    <style>
        .ppp {
            width: 50px;
            height: 50px;
            background-color: #fe452c;
            border-radius: 50%;
        }
    </style>
</head>
<body>

</body>
<script src="js/jq.js"></script>
<script>
    //通过jq来创建标签
    var $div = $('<div></div>');  //这个就是创建了div标签
    var $p = $('<p></p>');  //这个就是创建了p标签

    //设置样式 /文本 /类名 /属性  (单一属性和事件)
    $div.css({  //设置css样式
        width:'200px',
        height:'200px',
        backgroundColor:"red"
    });

    $p.addClass('ppp');  //赋值一个类名给p标签

    $p.click(function () {
        console.log('p点击了')
    });
    //添加到页面指定位置
    $('body').append($div);  //添加到页面指定位置,append就是添加到末尾
    $('body').prepend($div);  //prepend就是添加到首位
    //如果把一个标签先添加到末尾，然后又添加到首位，则会被添加到首位

    $div.append($p);  //把p标签添放到div内部末尾

    //在标签后添加目标标签
    var $h2 = $('<h2 class="h2">我是h2</h2>');
    $div.after($h2);

    //在标签前添加目标标签
    $div.before($h2);

    //这样写也可以把标签添加到目标标签下
    $h2.append('<b></b>');

    //删除标签,删除操作一定会有返回值，且一定是被删除的对象
    res = $p.remove();  //将自身删除，这个删除操作是把所有的附加数据，包括事件等

    //将删除的值放到指定标签的最后
    $('body').append(res);

    //这个删除会保留附加的数据和事件
    res = $p.detach();
    $('body').append(res);

</script>
</html>

（20）jQuery的文档操作（创建，添加、设置样式和删除等）的更多相关文章

  1. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  2. python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  3. jQuery 的文档操作

    在 js 中也有DOM操作,也可以进行 增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多. js 中 DOM 的示例 : var box = ...

  4. 前端jQuery之文档操作

    1.文档操作内部插入 A.append(B) 吧B添加到A的后面 A.appendTo(B) 吧A添加到B的后面 A.prepend(B) 吧B添加到A的前面 A.prependTo(B) 吧A添加到 ...

  5. jQuery的文档操作

    1.插入操作 一.父元素.append(子元素) 追加某元素 父元素中添加新的元素 var oli = document.createElement('li'); oli.innerHTML = '哈 ...

  6. POI简易帮助文档系列--给Excel设置样式

    正如Html需要CSS一样,我们的POI生成的Excel同样需要样式才能更完美的表现我们的数据.下面还是从简单的例子出发,学习和了解POI的样式设计. 一.我的位置. package com.myja ...

  7. jquery之文档操作

    append(content|fn) 向每个匹配的元素内部添加内容(元素内部) appendTo(content) 把所有匹配的元素追加到另一个指定的元素中(元素内部) prepend(content ...

  8. jQuery系列（六）：jQuery的文档操作

    1.插入操作 (1) 语法: 父元素.append(子元素) 解释:追加某元素,在父元素中添加新的子元素.子元素可以为:stirng | element(js对象) | jquery元素 let ol ...

  9. 【JQuery】文档操作

    一.前言 接着上一章的内容,接着JQuery的学习 二.内容 addClass 向被选元素添加一个或多个类 $(selector).addClass(class) $(selector).addCla ...

随机推荐

  1. day35 数据库介绍和初识sql

    今日内容: 1. 代码: 简易版socketsever 2.数据库(mysql)简单介绍和分类介绍 3.mysql root修改密码 4.修改字符集编码 5.初识sql语句 1.简易版socketse ...

  2. day28 黏包及黏包解决方案

    今日主要内容: 一 .缓冲区 二.两种黏包现象 三.黏包现象的两种解决方案 四.打印进度条(补充的,了解即可) 1. 缓冲区 缓冲区的作用 : 将程序和网络解耦(这样做的好处是程序不会以为网速的快慢而 ...

  3. webView 的种种

    1.关于UI 我们在设置webview的时候,有时候会发现在加载的过程中会出现一个黑色的条条,在加载完成的时候有得时候继续存在,有得时候消失不见. 这个黑边是由于webView.scrollview向 ...

  4. SQL-28 查找描述信息中包括robot的电影对应的分类名称以及电影数目，而且还需要该分类对应电影数量>=5部

    题目描述 film表 字段 说明 film_id 电影id title 电影名称 description 电影描述信息 CREATE TABLE IF NOT EXISTS film ( film_i ...

  5. cookie的参数

    def set_cookie(self, key, value='', max_age=None, expires=None, path='/', domain=None, secure=False, ...

  6. 20165214 学习基础与C语言基础调查

    读后感 我花时间仔细阅读了娄老师公众号上的那5篇关于自己各个方面学习经历的文章,随后深为震撼又自愧不如. 我实在没想到,这套学习方法竟有如此巨大的力量!纵使在娄老师不熟悉的乒乓球领域,娄老师也能通过这 ...

  7. jetty404web界面服务器信息隐藏

    jetty服务器报以上的404错误时,为了信息安全必须隐藏信息错误提示 在jetty的配置文件jetty.xml添加以下内容: 重启一下jetty服务器就OK了,在验证时是这样的:

  8. svn+http+ad域

    svn本地添加用户太麻烦了,如果公司有一百个开发人员要访问,要创建账号密码太麻烦了:所以让他们用AD域账号去登录就很方便,但是权限的管控还是在svn的本地添加(这个暂时还没办法很好的解决) 一.安装依 ...

  9. ChinaCock界面控件介绍-CCLoadingIndicator

    这是一个显示等待状态的控件,当在线程中执行一个稍长时间的任务,需要显示一个等待过程,免得让用户不知app在做什么?避免用户寂寞. 先看看这个控件的属性说明: BackgroundTransparenc ...

  10. python cookies提取——从字符串到字典(一行Python代码)

    def extract_cookies(cookie): """从浏览器或者request headers中拿到cookie字符串,提取为字典格式的cookies&quo ...