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. mysql ，为什么一张表的varchar关联另一张表varchar执行失败的一个原因

    CONSTRAINT `orderdts_ibfk_2` FOREIGN KEY (`address`) REFERENCES `test列` (`address`) 很可能的原因是另一张表的test ...

  2. Oracle数据库，查询语句、内置函数

    一.数据库的查询语句: 1.查询整个表: select * from 表名 例: 2.通过条件查询某一行数据: select * from 表名 where 字段名 例: 3.某一列数据去重查询: s ...

  3. 【FOL】第九周

    不知不觉又是三周过去了. 这几周忙了一下,其他时间全都在搞服务端,简直是酸爽的不行...不过还好出了些成果. 目前服务端有: 1.版本服务:游戏版本更新 2.账号服务:用户身份验证,返回各种连接(代理 ...

  4. 03Mybatis_mybatis框架原理——执行流程

    mybatis的框架的原理(执行流程).

  5. C#如何根据配置实现动态窗体

    本文主要讲述如何根据UI配置来动态生成控件, 并添加到窗体上来构建UI窗体,当用户在每个控件上完成输入操作后,程序通过遍历控件并用拼接字符串的方式动态生成Insert SQL语句,进而实现了将UI上的 ...

  6. Timeline Portfolio - 时间轴作品集效果

    这里分享一个超炫的时间轴展示作品集效果.设计师和前端开发人员可以借助这个效果来制作新颖的作品集和个人简历.时间轴专门用来呈现出年代的一系列事件.您可以把这种效果嵌入各种媒体,包括微博,视频和地图,并把 ...

  7. javascript中数组的常用方法

    数组的基本方法如下 1.concat() 2.join() 3.pop() 4.push() 5.reverse() 6.shift() 7.sort() 8.splice() 9.toString( ...

  8. 如何对sharepoint图片库的文件夹的图片按照时间排序并分页显示

    /// <summary> /// 获取图片库第一层文件夹--根据文件夹名称排序 /// </summary> /// <param name="siteUrl ...

  9. SharePoint Server 2016 Update

    Today’s post was written by Seth Patton, senior director of product management for the SharePoint te ...

  10. Get item by sharepoint web service jquery

    对于sp2010,在ie浏览器中这个代码无法生效,只有chrome可以生效. //获取附件id function GetAttachments(listName) { var soapEnv = '& ...