jQuery简单入门(二)
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简单入门(二)的更多相关文章
- jQuery简单入门
jQuery是什么 John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作为什么要使用jQuery (1)write less do ...
- jQuery简单入门(三)
3.事件和动画 A. 事件 Aa. DOM加载 1.为什么使用jQuery加载DOM方法? 以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全 ...
- JQuery的入门(二)
Jquery的遍历 jQuery对象本身就是数组对象,通过jquery选择器获得的都是满足该选择器条件的元素对象的集合体,因此在常常需要对jquery对象进行遍历.这里有三种遍历Jquery的方法. ...
- jQuery简单入门（五）
5.Ajax应用 在jQuery中$ajax()方法属于最底层的方法,第二层是load().$.get().$.post(),第三层是$.getScript()和 $.getJSON():下面根据使用 ...
- jQuery简单入门(四)
4.表单应用 表单是HTML的重要组成部分,在采集.提交用户输入的信息和显示列表数据等需求中有重要作用 表单应用 一个简单的表单HTML示例: <form action=”url” method ...
- jquery简单入门（一）
相关: 本文参考<锋利的jQuery第二版> 写在前面: jQuery作为javascript框架,是做网页交互工作者,一个值得学习的优秀的前端框架... 百度指数分析:(http://i ...
- jquery 快速入门二
---恢复内容开始--- 操作标签 样式操作 样式类 addClass();//添加指定的CSS类名. removeClass();//移除指定的类名. hasClass();//判断样式不存在 to ...
- jquery简单入门1
前端 html:展示 form: 属性: action和method 子标签: input(10种) text password radio checkbox file submit button r ...
- jquery 简单入门
例:GridView
随机推荐
- html+jquery翻页相册(原创)
呵呵 今天心情大好,再发一篇最进前端实现的相册模仿功能 这个相册是在一个网站的案例展示页面上实现的,没单独写出来,没时间,重用性也很差,以后有时间了再单独提取出来, 写这个玩意前,我在网上找了一些案例 ...
- 优化加载jQuery的方法
请看下面的一段代码: <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ...
- Intellij Idea上传本地项目到Git
方法一:选择菜单VCS-Import into Version Control - Share project on Github,填写仓库名和github账户之后,点击"Share&quo ...
- Scalaz（9）－ typeclass：checking instance abiding the laws
在前几篇关于Functor和Applilcative typeclass的讨论中我们自定义了一个类型Configure,Configure类型的定义是这样的: case class Configure ...
- ThinkCMF-幻灯片制作
在后台的扩展工具 -> 幻灯片分类 添加分类标识为"portal_index"的分类,然后在此分类添加幻灯片. 个人认为,此处可以用于: 1. 门户网站的首页幻灯片播放功能: ...
- Java--Exchanger用于进行线程间的数据交换
package com; import java.util.concurrent.Exchanger; /** * Created by yangyu on 16/11/28. */ /** * Ex ...
- 跨平台日志清理工具 Log-Cutter v2.0.1 RC-1 发布
Log-Cutter 是JessMA开源组织开发的一个简单实用的日志切割清理工具.对于服务器的日常维护来说,日志清理是非常重要的事情,如果残留日志过多则严重浪费磁盘空间同时影响服务的性能.如果用手工方 ...
- 网上图书商城1--User模块
1. 注册 $(function() { /* * 1. 得到所有的错误信息,循环遍历之.调用一个方法来确定是否显示错误信息! */ $(".errorClass").each(f ...
- 从基础学起----xuld版高手成长手记[1]
别人的代码总是看不懂? 想实现一个功能总是无从下手? 学会一个,但稍微变个花样就不知道了? 无论你擅长什么编程语言,如果你觉得自己基础薄弱,想从头开始学起,那本文将适合你. 这篇文章的含金量非常高,如 ...
- Bootstrap左侧下拉三级菜单
在线实例 效果一 效果二 效果三 使用方法 <script src="/api/jq/BootstrapCaidan/js/metismenu.js"></scr ...