一、什么是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. mac 功能修改。。。。

    个人表示 Mac 下的 Spotlight 搜索功能确实是个鸡肋,安装 QuickSilver 才是王道!所以我个人就把 Spotlight 关闭掉了.方法很简单,还是要用到 “终端” 工具. 在 “ ...

  2. mysql_upgrade命令

    mysql 创建存储过程失败.查看错误日志,发现如下信息:*********************************************************************** ...

  3. 实例源码--Android的ListView控件的总结

    下载源码   技术要点: 1.ListView控件的总结 2.微信ListView气泡的实现 3.ListView仿优酷播放列表 4.ListView刷新列表 5.详细的源码注释 ...... 详细介 ...

  4. Bitmap 多语言实现及应用

    http://blog.studygolang.com/2014/09/bitmap_multi_language/

  5. 小白日记30：kali渗透测试之Web渗透-扫描工具-Skipfish

    WEB渗透-skipfish Skipfish是一个命令行模式,以C语言编写的积极的Web应用程序的安全性侦察工具,没有代理模式. 它准备了一个互动为目标的网站的站点地图进行一个递归爬网和基于字典的探 ...

  6. Honda HDS IMMO PCM Code calculator Free Download

    HDS IMMO PCM Code calculator software for Honda vehicle models is free download available in Eobd2.f ...

  7. 为什么arcgis里，鼠标的图标都变成放大镜不能用了

    做作业做到一半,鼠标的图标就只有放大镜了,不管是点箭头还是作图工具都没用,手抓的也没用,只剩下放大镜的功能和图标了,这是怎么一回事啊?种情况我碰到过几次,具体原因不清楚,但是解决方法是有的:把你的数据 ...

  8. Debian 7 安装 Docker

    Debian 7更新内核到3.16后 一.添加docker源 在source.list中加入: # Docker Repo deb https://get.docker.io/ubuntu docke ...

  9. Python学习笔记 第一课 列表

    Python的列表就像是一个数组: 一.创建列表 movies=["The Holy Grail","Then Life of Brian","The ...

  10. avoid null value in field

    Each bean should implements 'InitializingBean'