文档章节

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
2018/05/17
0
0
JavaWeb05-HTML篇笔记(一)

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

我是小谷粒
2018/05/10
0
0
从零玩转jQuery-初识jQuery

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

极客江南
2018/04/20
0
0
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

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

Rhymo-Wu
2018/06/18
0
0
jquery要怎么写才能速度最快?(转)

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

山哥
2012/03/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos操作时区

变更时区不需要重启 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 同步时间 ntpdate asia.pool.ntp.org...

果树啊
11分钟前
0
0
图解ZooKeeper的典型应用场景

zookeeper在很多框架中都有应用,例如:Dubbo,Hadoop,Kafka等,但典型的用法也就几种,掌握了这几种用法,再看zookeeper在相关框架中的应用就很轻松,下一篇文章将会详细介绍zookeeper在d...

Java填坑路
24分钟前
2
0
Hadoop之MapReduce理论篇

1. Writable序列化 序列化就是把内存中的对象,转换成字节序列 (或其他数据传输协议) 以便于存储 (持久化) 和网络传输。 反序列化就是将收到字节序列 (或其他数据传输协议) 或者是硬盘的持久...

飞鱼说编程
26分钟前
1
0
Java使用原生的HttpURLConnection发送http请求

/** * 发送http请求 * @param message 发送的内容 * @param snedUrl 请求的url * @return */public static String sendRequest(String message, String snedUrl) { log.e......

骑羊放狼灬
28分钟前
1
0
Java四种线程池两篇文章节选总结

Executor 可 以 创 建 3 种 类 型 的 ThreadPoolExecutor 线 程 池: 1. FixedThreadPool 创建固定长度的线程池,每次提交任务创建一个线程,直到达到线程池的最大数量,线程池的大小不再变化...

亭子happy
30分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部