文档章节

JQuery 选择器 文档处理 操作

睡觉谁教谁叫呢
 睡觉谁教谁叫呢
发布于 2014/06/06 00:43
字数 285
阅读 20
收藏 0
点赞 0
评论 0

和昨天写JS DOM操作一模一样。 增加 删除 替换 修改节点。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="a">点击
    <div class="b">ss</div>
</div>
<div class="c"></div>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input class="fasong" type="text"/>
<button class="dianji">发送</button>
<script>
    $(function () {
        var oNode = document.createElement("div");
        var oNode1 = document.createElement("div");
        var b = $(".b");
        var div = $(".c")
        var oText = document.createTextNode("This a LY");
        var oText1 = document.createTextNode("This a LYY");
        var dom = $(oNode).append(oText);
        var dom1 = $(oNode1).append(oText1);
        b.before(dom);
        /* dom.after(dom1);*/
        b.replaceWith(dom1);
        dom.attr({class: "LY"});
        dom1.addClass("LYY");
        var c = 0;
        $(".a").on("click", function () {
            c++;
            if (c % 2 == 1) {
                dom.text("true")
            } else {
                dom.html('<button>This a LY</button>')
            }
        });
        $(":input").val(oText.nodeValue)
        $(".dianji").on("click", function () {
            var wenben = $(".fasong").val();
            var content = document.createElement("div");
            var html = "";
            html += wenben + "<button class='del'>删除</button>" + "<button class='xiugai'>修改</button>";
            $(content).append(html);
            div.append(content)
        });
        $(".del").live("click", function () {
                $(this).parent().remove()
        });
        $(".xiugai").live("click",function(){
            var parent=$(this).parent();
            parent.html("<input type='text' class='inp'><button class='yes'>确定</button>");
            $(".inp").val($(".fasong").val())
        });
        $(".yes").live("click",function(){
            var parent=$(this).parent();
            parent.html($(".inp").val()+"<button class='del'>删除</button>" + "<button class='xiugai'>修改</button>")
        })
    });
</script>
</body>
</html>


© 著作权归作者所有

共有 人打赏支持
睡觉谁教谁叫呢
粉丝 4
博文 5
码字总数 2353
作品 0
成都
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge
05/17
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
05/10
0
0
jquery要怎么写才能速度最快?(转)

很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记。 其内容和一些新提供的方法还是很多有值得学习的地方。 1. 使用最新版本的jQuery jQuery的版本更新很快,你应...

山哥
2012/03/16
0
0
jquery要怎么写才能速度最快?

很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记。 其内容和一些新提供的方法还是很多有值得学习的地方。 1. 使用最新版本的jQuery jQuery的版本更新很快,你应...

随影求是
2012/03/16
0
0
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu
06/18
0
0
3个简单的事情,使你的jQuery代码变得更加棒

     jQuery是现存最流行的(如果不是最多的)JavaScript库之一,并且大量的人使用它来做一些令人惊叹的事情。就个人而言,jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白...

webstack前端栈
04/14
0
0
了解jQuery技巧来提高你的代码

1.测试并提升你的jQuery选择器水平 这个jQuery选择器实验室非常酷,它能在线免费使用,当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段,然后你能尝试预定义使用各种jQu...

i33
2012/09/25
0
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0
来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang
05/24
0
0
jQuery--[编码规范与最佳实践]

以下是书写jQuery代码的基本规范和最佳实践,这些不包括原生JS规范与最佳实践。 加载jQuery 1、尽量使用CDN加载jQuery。 <script type="text/javascript" src="//ajax.googleapis.com/ajax/l...

Candy_Desire
2014/12/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HashMap? ConcurrentHashMap? 相信看完这篇没人能难住你!

前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据。 本篇主要想讨论 ConcurrentHashMap 这样一个并发容器,在正式开始之前我觉得有必要谈谈 HashMap,没有它...

crossoverJie
6分钟前
1
0
OSChina 周一乱弹 —— 你的朋友圈有点生锈了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @Devoes :分享Trademark的单曲《Only Love (电视剧《妙手仁心 II》插曲)》: 《Only Love (电视剧《妙手仁心 II》插曲)》- Trademark 手机党少...

小小编辑
今天
204
9
【面试题】盲人坐飞机

有100位乘客乘坐飞机,其中有一位是盲人,每位乘客都按自己的座位号就坐。由于盲人看不见自己的座位号,所以他可能会坐错位置,而自己的座位被占的乘客会随便找个座位就坐。问所有乘客都坐对...

garkey
今天
1
0
谈谈神秘的ES6——(二)ES6的变量

谈谈神秘的ES6——(二)ES6的变量 我们在《零基础入门JavaScript》的时候就说过,在ES5里,变量是有弊端的,我们先来回顾一下。 首先,在ES5中,我们所有的变量都是通过关键字var来定义的。...

JandenMa
今天
1
0
arts-week1

Algorithm 594. Longest Harmonious Subsequence - LeetCode 274. H-Index - LeetCode 219. Contains Duplicate II - LeetCode 217. Contains Duplicate - LeetCode 438. Find All Anagrams ......

yysue
今天
2
0
NNS拍卖合约

前言 关于NNS的介绍,这里就不多做描述,相关的信息可以查看NNS的白皮书http://doc.neons.name/zh_CN/latest/nns_background.html。 首先nns中使用的竞价货币是sgas,关于sgas介绍可以戳htt...

红烧飞鱼
今天
1
0
Java IO类库之管道流PipeInputStream与PipeOutputStream

一、java管道流介绍 在java多线程通信中管道通信是一种重要的通信方式,在java中我们通过配套使用管道输出流PipedOutputStream和管道输入流PipedInputStream完成线程间通信。多线程管道通信的...

老韭菜
今天
0
0
AB 压力测试

Ubuntu 安装AB apapt-get install apache2-utils 使用AB 压力测试 -c 并发数 -n请求总数 ab -c 3000 -n 10000 http://localhost/test/index.php AB只能测试localhost 返回结果 This is Apac......

xiawet
今天
0
0
用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
今天
1
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部