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. 详解 Spring 3.0 基于 Annotation 的依赖注入实现(转)

    使用 @Repository.@Service.@Controller 和 @Component 将类标识为 Bean Spring 自 2.0 版本开始,陆续引入了一些注解用于简化 Spring 的 ...

  2. postgreSQL的设置自增主键初始值

    select setval('t_custom_model_id_seq',1,false);

  3. 框架Maven笔记系列 一 基础

    主题:SpringMVC 学习资料参考网址: 1.http://www.icoolxue.com 2.http://maven.apache.org/ 1.Maven解决了什么问题? Maven基于项 ...

  4. Scalaz（42）－ Free ：FreeAp－Applicative Style Programming Language

    我们在前面花了几期时间讨论Free Monad,那是因为FP既是Monadic programming,Free Monad是FP模式编程的主要方式.对我们来说,Free Monad代表着fp从学术探 ...

  5. No.013：Roman to Integer

    问题: Given a roman numeral, convert it to an integer.Input is guaranteed to be within the range from ...

  6. svn利用钩子实现代码同步到web目录

    思路:  找 到SVN Server中的仓库(Repositories)文件夹的位置,在相应的项目文件夹中找到hooks文件夹.在该文件夹中添加一个post- commit文件:当有commit动作发 ...

  7. C#如何实现一个简单的流程图设计器

    以前看过不少Window Form开发的流程图设计器,支持节点拖放,非常方便即可设计出很美观的流程图,作为一个程序员,对其内部实现原理一直很好奇,感叹有朝一日自己如果可以开发一款类似的软件那是多么让人 ...

  8. Hyhyhy – 专业的 HTML5 演示文稿工具

    Hyhyhy 是创建好看的 HTML5 演示文档的工具.它具备很多的特点:支持 Markdown,嵌套幻灯片,数学排版,兼容性,语法高亮,使用 Javascript API ,方便的骨架.它支持 Fi ...

  9. 避开unity的坑（转摘）

    避开unity的坑(转摘) 以下总结一部分来自经验之谈,一部分来自其他人的分享.总的来讲,unity开发原型和效果.验证想法,确实是无比便利.可能一个月就把核心玩法做得差不多.强大的编辑器功能让我们也 ...

  10. python之socket开发

    socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...