一、什么是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. 结构体定义 typedef struct 用法详解和用法小结

    typedef是类型定义的意思.typedef struct 是为了使用这个结构体方便.具体区别在于:若struct node {}这样来定义结构体的话.在申请node 的变量时,需要这样写,stru ...

  2. cocos2d-x3.2在xcode6.1下的 环境搭建

    由于最近需要给CP开发游戏SDK,顺便又重新接触了下cocos2d-x,自己曾在2011年的时候用过cocos2d-x早起的版本,现发现3.2版于原来的差距还是蛮大的,环境搭建流程如下: 1.xcod ...

  3. win7 下 qwt安装教程

    一.安装:qwt的安装很简单,可以参看它的install文档.1.解开下载下来的zip文件,比如解开到d:\qt\qwt-5.0.2目录下,修改目录下的qwtconfig.pri文件里面的安装路径,比 ...

  4. A Simple Actions Recognition System

    1. Problem Definition There's no doubt that researches and applications on the foundation of videos ...

  5. 机器学习经典算法详解及Python实现--基于SMO的SVM分类器

    原文:http://blog.csdn.net/suipingsp/article/details/41645779 支持向量机基本上是最好的有监督学习算法,因其英文名为support vector  ...

  6. 关于“学习Linux用什么系统”的解答

    首先,阐述一下,我个人的观点——这个问题我曾经也想了很久了,这绝不是长篇大论后就是简单一句,适合你的就是最好的.其实,很多人看到这一句,心里已经有成千上万个奔腾了(至少我当时是这样的),为什么?因为我 ...

  7. The First

    好吧,今天是第一次,写博客,虽然有点不明白,博客的作用.以后就写点感想,与每天的收获.既然,在博客园注册,自然也与IT相关了. hello,world!

  8. 装饰者模式--《Head First DesignPattern》

    装饰者模式动态地将责任附加到对象杭,若要拓展功能,装设置提供了比继承更有弹性的替代方案. 星巴兹有多种咖啡,它们具有不同的价格.在购买咖啡时,也可以要求在其中加入各种调料,例如豆浆.摩卡.奶泡等等.需 ...

  9. Android(java)学习笔记103:Map集合的获取功能

    package cn.itcast_01; import java.util.Collection; import java.util.HashMap; import java.util.Map; i ...

  10. (重刷)HDU 1874 畅通工程续 + HDU 2544 最短路 最短路水题,dijkstra解法。

    floyd解法 今天初看dijkstra,先拿这两题练手,其他变形题还是不是很懂. 模版题,纯练打字... HDU 1874: #include <cstdio> #define MAXN ...