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. [调整] Firemonkey TEdit 避免按下立即弹出键盘的问题

    目前 Firemonkey 有一个问题,就是在 Edit 按下会立即弹出键盘,在红鱼儿的博客也提交了 QC: http://blog.sina.com.cn/s/blog_44fa172f0102vy ...

  2. 上中下三个DIV，高度自适应（上高度固定，下固定，中间自适应）（代码来自X人）

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DivDemo.aspx.c ...

  3. 【Linux_Fedora_应用系列】_5_如何安装XZ Utils 解压缩工具以及利用 xz工具来解压缩.xz文件

    有段时间没有来园子了,今天从 www.kernel.org 上面下载了一个 2.6.32.2 内核压缩包,下载 下来后发现是一个  .xz  结尾的文件,一看与通常的  .gz..bz2等格式不一样, ...

  4. [moka同学笔记]Yii2 自定义class、自定义全局函数(摘录)

    1.在app\components下新建MyComponent.PHP namespace app\components; use Yii; use yii\base\Component; use y ...

  5. Python多线程学习

    一.Python中的线程使用: Python中使用线程有两种方式:函数或者用类来包装线程对象. 1.  函数式:调用thread模块中的start_new_thread()函数来产生新线程.如下例: ...

  6. [翻译] Autofac 中注册的概念

    原文链接:http://docs.autofac.org/en/latest/register/registration.html 所谓注册组件,是指创建 ContainerBuilder 的实例,并 ...

  7. 玩转Docker之Docker简介（一）

    近几年掀起的docker热潮,可谓席卷全球.什么原因使它这么备受推崇呢?主要是因为它解决了行业痛点.玩linux的都知道,安装个应用时还要先安装所需环境.相关库.解决依赖关系.而docker的出现,很 ...

  8. JavaScript for循环 闭包 【转】

    个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5. <html > <head> <meta http-e ...

  9. 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

    在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...

  10. web前端命名规范

    在做web项目的时候,命名的规范是很重要.初学者一般急于求成对命名规范没有概念,觉得花时间这些还不如多看几遍框架.其实在我看来,一个良好的命名习惯是很重要的.下面就来介绍一下我总结的命名规范: (1) ...