文档章节

JQuery 选择器 文档处理 操作

睡觉谁教谁叫呢
 睡觉谁教谁叫呢
发布于 2014/06/06 00:43
字数 285
阅读 20
收藏 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

课前须知: 学习jQuery前必须先掌握JavaScript jQuery虽然属于前端技术, 但是对于后端人员(诸如Java、PHP等,也需要掌握) jQuery是什么? jQuery是一款优秀的JavaScript库,从命名可以看出jQu...

极客江南
04/20
0
0
jquery要怎么写才能速度最快?(转)

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

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

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

随影求是
2012/03/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

腾讯三大运维开源项目齐聚“OSCAR开源先锋日”

10月20日,腾讯开源三大运维开源项目——TARS、蓝鲸和织云Metis首次集结,参与了由中国信息通信研究院主办、云计算标准与开源推进委员会承办的 “OSCAR开源先锋日”。会上,腾讯开源团队与前...

腾讯开源
9分钟前
0
0
JAVA并发-从缓存一致性说volatile 讲的很好

学过计算机组成原理的一定知道,为了解决内存速度跟不上CPU速度这个问题,在CPU的设计中加入了缓存机制,缓存的速度介于CPU和主存之间。在进行运算的时候,CPU将需要的数据映射一份在缓存中,...

码代码的小司机
27分钟前
0
0
IDEA 调试功能

1.设置断点 选定要设置断点的代码行,在行号的区域后面单击鼠标左键即可。 2.开启调试会话 点击红色箭头指向的小虫子,开始进入调试。 IDE下方出现Debug视图,红色的箭头指向的是现在调试程序...

狼王黄师傅
35分钟前
0
0
Java面试170题

1、面向对象的特征有哪些方面? 2、访问修饰符public,private,protected,以及不写(默认)时的区别? 3、String 是最基本的数据类型吗? 4、float f=3.4;是否正确? 5、short s1 = 1; s1 = ...

lanyu96
40分钟前
0
0
优雅的写出类

前言 虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。 本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。 一、例子 例子为一个轻提示组件T...

peakedness丶
45分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部