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. 深度技术32位Win7系统Ghost版2014年

    深度技术32位Win7系统Ghost版,GhostWin7是指使用Ghost软件做成压缩包的Windows7,俗称克隆版Win7.用克隆版的目的是节省安装时间.本作品在采用微软封装部署技术的基础上,结 ...

  2. Windows Git中文文件名乱码

    在Windows下使用git,安装包如下: https://git-for-windows.github.io/ 在使用git bash时git 默认中文文件名是 xx% 是因为 对0x80以上的字符 ...

  3. get传递中文产生乱码的解决方式汇总

    1 最基本的乱码问题. 这个乱码问题是最简单的乱码问题.一般新会出现.就是页面编码不一致导致的乱码. <%@ page language="java" pageEncodin ...

  4. jQuery Label Better – 友好的表单输入框提示插件

    jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间.这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签. 您可 ...

  5. win7系统下，vs2010一调式，vs就关闭要重启

    进入我的文档 %appdata%\Microsoft\VisualStudio, 将 10.0 重命名.网上找的方法有些问题,可能找这路径很难找到啊. 于是自己 找了找 一般都在当前用户文件夹下 Ap ...

  6. SAP中数字计算时溢出捕获

    CLEAR:g_vol. CATCH SYSTEM-EXCEPTIONS arithmetic_errors = OTHERS = . g_vol = gwa_input-laeng * gwa_in ...

  7. Android Tips: 在给drawable中添加图片资源时，文件名必须全小写

    在给drawable中添加图片资源时,文件名必须全小写

  8. 之二：CAKeyframeAnimation - 关键帧动画

    是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CA ...

  9. ios UI 适配布局相关文章

    1. http://lvwenhan.com/ios/430.html 2 . http://blog.csdn.net/liangliang103377/article/details/400822 ...

  10. 获取在线APP的素材图片

    1.打开iTunes,搜索并下载APP 2.打开下载的APP的路径 4.对ipa包进行解压 5.找到app,右键"显示包内容"进行查看 6.结果