2.Dom操作

A.DOM分类

个人认为在jQuery中这些分类被弱化了，有兴趣的读者可以自行补充这方面的知识；

　　aa.DOM Core

　　bb.HTML -DOM

　　cc. CSS-DOM

B.jQuery操作DOM

　　aa.操作节点

　　　　1.查找节点

　　　　　　1.1.查找元素节点：

　　　　　　$(“input”).val();//获取input元素的数值

　　　　　　$(“form input:eq(1)”).val();//获取form元素的第2个input子元素的数值

　　　　　　1.2.查找属性节点：

　　　　　　$(“input”).attr(“value”);//获取input元素的value属性的值

　　　　2.创建节点

　　　　　　2.1.创建元素节点：

　　　　　　$(“form”).append(“<input type=”text” />”);//动态创建<input>元素节点并添加到<form>中

　　　　　　2.2.创建文本节点：

　　　　　　$(“form”).append(“<h5>动态创建”<h5>”文本节点</h5>”);

　　　　　　2.3.创建属性节点:

　　　　　　$(“ul”).append(<li title=”属性节点”></li>);

　　　　3.插入节点

　　　　参考创建节点实例（注：jQuery提供多种插入节点方法如：append(), appendTo, after()...）

　　　　4.删除节点

　　　　　　4.1.使用remove()    (注:当某个节点被remove掉，那么他的子代节点也同时被remove掉)

　　　　　　$(“ul li”).remove();//删除掉ul元素的所有li子元素

　　　　　　4.2.使用detach()    （注：该方法删除的节点，如果再次添加会该节点，则删除之前所绑定的事件依旧生效）

　　　　　　$(“ul li”).detach();

　　　　　　4.3.使用empty()  （注：该方法是清空掉元素里的内容）

　　　　　　$(“ul li”).empty();//清空ul元素的子元素li的内容，如：文本值

　　　　5.复制节点（clone()）

　　　　　　5.1.$(“ul li”).clone().appendTo(“form”);//复制ul元素的子元素li并把他添加到form元素中

　　　　　　5.2.$(“ul li”).clone(true).appendTo(“form”);//复制ul元素的子元素li并把他添加到form元素中,并且原本在被复制元素中具有的事件方法，在新元素中同样有效

　　　　6.替换节点（replaceWith()、replaceAll()）

　　　　　　6.1.$(“ul”).replaceWith(“<ol></ol>”);//把无序列表替换成有序列表

　　　　　　6.2.$(“<ol></ol>”).replaceAll(<ul>);//把无序列表替换成有序列表

　　　　7.包裹节点（wrap()、wrapAll()、wrapInner()）

　　　　　　7.1.$(“input”).wrap(“<li></li>”);//使用li元素把input元素包裹起来

　　　　　　7.2.其他两个方法类似，这里不累赘

　　　　8.遍历节点

　　　　　　8.1.children()

　　　　　　该方法用于获取匹配元素的子元素（而不是所有后代元素，后代元素获取请看第一篇文章）

　　　　　　$(“html”).children();//获取<html>元素的子元素，即head和body

　　　　　　8.2.next()

　　　　　　该方法用于获取匹配元素后面紧邻的同辈元素

　　　　　　$(“head”).next();//获取<head>元素后面紧邻的同辈元素(因为<head>的同辈元素有且只用一个元素，即<body>元素，所以这里获得的是<body>元素)

　　　　8.3.prev()

　　　　该方法用于获取匹配元素后面紧邻的同辈元素

　　　　$(“body”).prev();

　　　　8.4.siblings()

　　　　该方法用于获取匹配元素的同辈元素

　　　　$(“head”).siblings();

　　　　8.5.parent()、parents()

　　　　parent()//获得父元素

　　　　parents()//获得祖宗元素

bb.操作属性(attr()、removeAttr())

　　1.获取属性和设置属性

　　$(“input”).attr(“value”);//获取<input>元素的value属性值

　　$(“input”).attr(“value”, “setiValue”);//获取<input>元素并设置其value属性为setiVlalue

　　$(“input”).attr({“value” : “setiValue”, “name” : “setiName”});//获取<input>元素并分别设置其value属性为setiValue，name属性为setiName

　　2.删除属性

　　$(“input”).removeAttr(“name”);

cc.操作样式

示例HTML

<p class=”iClass” title=”样式操作”>样式操作</p>

　　1.获取样式和设置样式

　　同以上示例<p>元素中可以得知class是其属性，所以可以通过该属性来获取和设置样式（不明白的同学可以参考bb.操作属性）

　　2.追加样式（addClass()）

　　$(“p”).addClass(“addClass”);//给<p>元素追加addClass样式

　　3.移除样式（removeClass()）

　　　　3.1.移除指定样式:

　　　　$(“p”).removeClass(“addClass”);//把刚刚向<p>元素追加的addClasss样式移除掉

　　　　3.2.移除所有样式：

　　　　$(“p”).removeClass();//移除<p>元素所有样式

　　4.切换样式（toggleClass()）

　　切换样式就好比电闸的开关闸，当电闸开时，电路通路；当电闸关时，电路不通

　　$(“p”).toggleClass(“addClass”);

　　5.是否具有某一样式(hasClass())

　　$(“p”).hasClass(“addClass”);

dd.设置和获取HTML、文本和值

示例HTML

<p title=”设置和获取HTML代码”><strong>锋利的jQuery</strong></p>

　　1.设置和获取HTML代码

　　$(“p”).html();//获取<p>元素的html代码，这里得到的结果是：<strong>锋利的jQuery</strong>

　　$(“p”).html(“<strong>锋利的jQuery</strong>”);//设置<p>元素的html为<strong>锋利的jQuery</strong>

　　2.设置或获取文本内容

　　$(“p”).text();//获取<p>元素的文本内容，这里得到的结果是：锋利的jQuery

　　$(“p”).text(“锋利的jQuery”);

　　3.设置和获取元素的值

　　示例HTML

　　<input type=”text” value=”设置和获取元素的值” />

　　$(“input”).val(“锋利的jQuery”);//这里把<input>元素的值设置为:锋利的jQuery

　　$(“input”).val();//获取<input>元素的值

cc.操作CSS-DOM

CSS-DOM技术简单来说就是设置和获取style（层叠样式）对象的各种属性

　　1.获取样式属性

　　$(“input”).css(“color”);//获取<input>元素的样式颜色

　　...

　　2.设置样式属性

　　　　2.1.设置单一样式属性

　　　　$(“input”).css(“color”, “red”);//设置<input>元素样式颜色为红色

　　　　...

　　　　2.2.设置多个样式属性

　　　　$(“input”).css({“color” : “red”, “fontSize” : “30px”});//设置<input>元素样式颜色为红色且字体大小为30像素

(未完...)

jQuery简单入门(二)的更多相关文章

  1. jQuery简单入门

    jQuery是什么 John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作为什么要使用jQuery (1)write less do ...

  2. jQuery简单入门(三)

    3.事件和动画 A. 事件 Aa. DOM加载 1.为什么使用jQuery加载DOM方法? 以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全 ...

  3. JQuery的入门(二)

    Jquery的遍历 jQuery对象本身就是数组对象,通过jquery选择器获得的都是满足该选择器条件的元素对象的集合体,因此在常常需要对jquery对象进行遍历.这里有三种遍历Jquery的方法. ...

  4. jQuery简单入门（五）

    5.Ajax应用 在jQuery中$ajax()方法属于最底层的方法,第二层是load().$.get().$.post(),第三层是$.getScript()和 $.getJSON():下面根据使用 ...

  5. jQuery简单入门(四)

    4.表单应用 表单是HTML的重要组成部分,在采集.提交用户输入的信息和显示列表数据等需求中有重要作用 表单应用 一个简单的表单HTML示例: <form action=”url” method ...

  6. jquery简单入门（一）

    相关: 本文参考<锋利的jQuery第二版> 写在前面: jQuery作为javascript框架,是做网页交互工作者,一个值得学习的优秀的前端框架... 百度指数分析:(http://i ...

  7. jquery 快速入门二

    ---恢复内容开始--- 操作标签 样式操作 样式类 addClass();//添加指定的CSS类名. removeClass();//移除指定的类名. hasClass();//判断样式不存在 to ...

  8. jquery简单入门1

    前端 html:展示 form: 属性: action和method 子标签: input(10种) text password radio checkbox file submit button r ...

  9. jquery 简单入门

    例:GridView

随机推荐

  1. 一不小心把oschina给戒了

    不知怎么回事,逐渐变成一周看一次oschina了.

  2. 第 12 章 CSS 入门

    学习要点: 1.使用 CSS 2.三种方式 3.层叠和继承 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS(层叠样式表),它是用来对 HTML 文档外观的表现形式进行排版和格式化. 一．使用 ...

  3. Verilog学习笔记简单功能实现（四）...............译码器和编码器

    这里以简单的3-8译码器和8-3编码器为例: module decoder3_8(a,out); :]a; :]out; 'b1<<a;/*把最低位的1左移in位(根据in口输入的值)并赋 ...

  4. OGNl和ValueStack的基础和深入分析

    一.OGNL 1)什么是OGNL? 解析:OGNL是Object Graph Navigation Language(对象图导航语言)它是强大的表达式语言. 2)用途:通过简单一致的表达式语法来读取和 ...

  5. 已解决：Ubuntu php gettext 无效

    使用gettext做多文字国际化,按PHP官方文档,在CentOS上OK,在Ubuntu上不行,调试了快1天,试了网上提供的无数方法,终于有一个OK了…… 看到此文的同学别再被坑了…… 感谢:http ...

  6. Vis.js – 基于浏览器的动态 JavaScript 可视化库

    Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...

  7. Popline：帅气的浮动 HTML5 文本编辑器工具栏

    Popline 是一个基于 HTML5 实现的富文本编辑器工具栏,设计灵感来自 PopClip ,相比传统的文本编辑器工具,Popline 能够浮动在编辑的文本周围,操作起来十分方便. 您可能感兴趣的 ...

  8. windows中安装node.js和测试

    首先下载node.js安装包:下载页面:http://down.keleyi.com/goto/node.js.htm 选择windows msi安装包,根据自己操作系统选择32位或者64位安装包.然 ...

  9. vs2010 未能将脚本调试器附加到计算机上的进程。已附加了一个调试器

    图片: 上周不小心升级了IE10,今天,VS2010报:未能将脚本调试器附加到计算机XXX上的进程iexplore.exe . 已附加了一个调试器”.启动调试失败. 到网上查找解决办法,最后用这个解决 ...

  10. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...