一、什么是DOM操作？

　　文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

二、具体的解释

Text()和html()的区别

也可以进行设定($('input').val(“Moshimol”));
当传入参数进来是get方法，不传参数是set方法
<html>

    <head>

        <title>JQuery DOM Manipulation</title>

        <link rel="stylesheet" href="style.css">

    </head>

    <body>

    <input type="text">

        <div class="hello">Hello World

            <p>I am Moshimol</p>

        </div>

        <button>Click me</button>

    </body>

    <script src="js/jquery-latest.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

        $('button').on('click', function() {

            //alert($('div').text());

            //alert($('div').html());

            alert($('input').val());

            // $('div').replaceWith('<p>Hello World</p>');

           // $('.hello').before($('.world').clone());

            // $('<p>Hello World</p>').replaceAll('div');

        });

    });

    </script>

</html>

　　

## 获取设定属性 [attr(),  removeAttr()]

$('div').removeAttr('class'); 移除css

$('div').attr("class","hello") 获取css
可以设置两个

## 获取设定 CSS Class [addClass(), removeClass(), hasClass(), toggleClass] hasclass 看有没有这个class toggleClass 有就删除 没有就加上

## 获取设定 CSS style [css()]可以打印div里面的css   但是需要JSON.stringify这个函数来打印具体的，如果没有这个函数的话,打印出options

## append() and prepend() methods append()把后面一个元素插入前面元素最后子元素中，一个向后面插   prepend这个是插入后面，一个向前面插

## appendTo() and prependTo() methods  和上面一样 字面意思区别不是很大，但是前后位置倒反了

## before() and after() methods

## insertBefore() and insertAfter() methods


<html>

<head>

    <title>JQuery DOM Manipulation</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="a">

        <div class="b">b</div>

    </div>

    <button>'c'</button>

    <div class="c">c</div>

<button>Click me</button>

</body>

<script src="js/jquery-latest.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $('button').on('click', function() {

           // $('.a').append($('.c'));

           // $('.a').prepend($('.c'));

            //$('.c').appendTo($('.a'));

            //$('.c').prependTo($('.a'));

            //$('.a').after($('.c'));插如之前 不是子元素

           // $('.a').before($('.c'));插入之后 不是子元素

            $('.c').insertAfter($('.a'));

            $('.c').insertBefore($('.a'));

        });

    });

</script>

</html>

　　

## remove(), empty() and .detach() methods
remove() 删掉整个元素
empty() 使他变空 但是内容是存在的
.detach() 和remove 区别不是很大
可以自己实验

var p;

        function selectChange() {

            if (document.getElementById("ddl_schoolarea").value != "请选择") {

                p = $("#trlession").detach();

            }

            else {

                //table1为一个table名字

                $("#table1").append(p);

            }

        }

　　

# unwrap(), wrapInner(), wrap(), wrapAll(), 逐层放大
<html>

<head>

    <title>JQuery DOM Manipulation</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </div>

</body>

<script src="js/jquery-latest.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $('button').on('click', function() {

            $('li').wrap("<ul></ul>>");

            $('li').wrapAll("<ul></ul>>");

            $('li').unwrap();

	$('li').wrapInner("<b></b>>");

        });

    });

</script>

</html>

　　

## target.replaceWith() and replaceAll(target)
<html>

<head>

    <title>JQuery DOM Manipulation</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </div>

</body>

<script src="js/jquery-latest.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $('button').on('click', function() {

            $('div').replaceWith('<p>Moshimol</p>');

           $ ('<p>Moshimol</p>').replaceAll('div');

        });

    });

</script>

</html>

　　

## clone() and Cloning Event Handlers and Data
clone()进行复制
$('.hello').before($('.world').clone());

　　相当于windows的拷贝功能，吧world的内容进行拷贝，再把他放到hello前面

 
 

jQuery学习教程(3)的更多相关文章

  1. 大量Javascript/JQuery学习教程电子书合集

    ［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  2. ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  3. jQuery学习教程(2)

    由于一件事情打断了我的生活节奏,每天都学习都在托托拉拉,导致很多进度都没有达到自己预期的效果 在上一个章节我学到了环境的搭建,以及对jquery的熟悉.现在开始对其具体进行熟悉了. 一.如何使用选择器 ...

  4. jQuery学习教程(1)

    一.什么是jQuery JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safar ...

  5. 值得 Web 开发人员学习的20个 jQuery 实例教程

    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...

  6. 《jQuery基础教程(第四版)》学习笔记

    本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...

  7. jquery 基础教程[温故而知新二]

    子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...

  8. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  9. Jquery easyui 教程

            Jquery easyui教程                 目  录 1基本拖放... 4 2构建购物车型拖放... 5 3创建课程表... 8 4菜单和按钮Menu and Bu ...

随机推荐

  1. 关于port的关闭——Linux

    本文出自:http://blog.csdn.net/svitter 引文出自:http://bbs.chinaunix.net/thread-775649-1-1.html 1.关闭服务 servic ...

  2. myloader原理0

    开源MySQL多线程逻辑导入工具myloader原理与改进 在上一篇中,介绍了多线程备份工具mydumper的实现及网易对其所做的优化,本篇聊聊与mydumper配合使用的myloader工具. my ...

  3. 【ZZ】C 语言中的指针和内存泄漏 & 编写高效的C程序与C代码优化

    C 语言中的指针和内存泄漏 http://www.ibm.com/developerworks/cn/aix/library/au-toughgame/ 本文讨论了几种在使用动态内存分配时可以避免的陷 ...

  4. UNIX标准化及实现之限制

    前言 UNIX系统实现定义了很多幻数和常量,其中有很多已被硬编码(关于硬编码和软编码:http://www.cnblogs.com/chenkai/archive/2009/04/10/1432903 ...

  5. centos、linux改变ll命令显示颜色

    服务器用的centOS,用putty管理时,在命令行下目录用蓝色显示,很难看清.可以用以下两种方法改变: 方法一: 1.直接修改个人帐户目录下的.color.rc文件. 找到 DIR 01;34,修改 ...

  6. 小白日记10：kali渗透测试之端口扫描-UDP、TCP、僵尸扫描、隐蔽扫描

    端口扫描 二三四层发现的目的只是为了准确发现所有活着主机IP,确定攻击面,端口扫描即发现攻击点,发现开放端口.端口对应网络服务及应用端程序,服务端程序的漏洞通过端口攻入.[所有的扫描结果,都不要完全相 ...

  7. Android（java）学习笔记82：我们到底该如何处理异常？

    我们到底该如何处理异常? 原则: 如果该功能内部可以将问题处理,用try,自己能解决就自己解决问题. 如果处理不了,交由调用者处理,这是用throws,自己不能解决的问题,我们就抛出去交个调用者解决这 ...

  8. jq选择器 第一部分

    没有什么新意,全是从网上摘抄的,如果哪天忘了,就来查查吧. 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(documen ...

  9. android开发之路06（浅谈单例设计模式）

    设计模式之单例模式: 一.单例模式实现特点:①单例类在整个应用程序中只能有一个实例(通过私有无参构造器实现):②单例类必须自己创建这个实例并且可供其他对象访问(通过静态公开的访问权限修饰的getIns ...

  10. Linux上安装MPEG-1 Layer3(mp3)解码器

    今天突然想要在linux上播放音乐,但是打开之后发现缺少了解码器 于是去网上找了解决的方法,说得天花乱坠,不过有个帖子给出了很简单的方法. 以下内容转载于网络 上面提示没有安装解码器,这是因为版权问题 ...