jQuery学习笔记(DOM操作)
DOM操作的分类
一般来说,DOM操作分为3个方面,即DOM Core、HTML-DOM和CSS-DOM。
1. DOM Core
DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页,也可以处理任何一种使用标记语言编写出来的文档,例如XML。
JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法,这些都是DOM Core的组成部分。
2. HTML-DOM
它提供了一些简明的记号来描述各种HTML元素。如:document.forms、element.src。它只能用来处理Web文档。
3. CSS-DOM
它是针对CSS的操作。在JavaScript中CSS-DOM技术的主要作用是获取和设置style对象的各种属性。如:element.style.colr = "red";
jQuery中的DOM操作
1. 查找元素节点,查找属性节点
// 查找节点
var $para = $("p"); // 获取<p>节点
var $li = $("ul li:eq(1)"); // 获取第二个<li>元素节点 // 查找属性
var p_txt = $para.attr("title"); // 输出<p>元素节点属性title
var ul_txt = $li.attr("title"); // 获取<ul>里的第二个<li>元素节点的属性title
var li_txt = $li.text(); // 输出第二个<li>元素节点的text
2. 创建节点
创建元素节点
var $li_1 = $("<li></li>"); // 创建第一个<li>元素
var $li_2 = $("<li></li>"); // 创建第二个<li>元素 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $parent.append($li_1); // 添加到<ul>节点中,使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);
创建文本节点
var $li_1 = $("<li>香蕉</li>"); // 创建一个<li>元素,包括元素节点和文本节点
var $li_2 = $("<li>雪梨</li>"); // 创建一个<li>元素,包括元素节点和文本节点 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $("ul").append($li_1); // 添加到<ul>节点中,使之能在网页中显示
$("ul").append($li_2); // 添加到<ul>节点中,使之能在网页中显示
创建属性节点
var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素
var $li_2 = $("<li title='雪梨'>雪梨</li>"); //创建一个<li>元素
var $parent = $("ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中,使之能在网页中显示
$parent.append($li_2); // 等价于:$parent.append($li_1).append($li_2);
3. 插入节点
普通插入
var $li_1 = $("<li title='香蕉'>香蕉</li>"); // 创建第一个<li>元素
var $li_2 = $("<li title='雪梨'>雪梨</li>"); // 创建第二个<li>元素
var $li_3 = $("<li title='其它'>其它</li>"); // 创建第三个<li>元素 var $parent = $("ul"); // 获取<ul>节点,即<li>的父节点
var $two_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点 $parent.append($li_1); // append方法将创建的第一个<li>元素添加到父元素的最后面
$parent.prepend($li_2); // prepend方法将创建的第二个<li>元素添加到父元素里的最前面
$li_3.insertAfter($two_li); // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
移动节点
var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点
$two_li.insertBefore($one_li); //移动节点
4. 删除节点
remove()方法
$("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后,将它从网页中删除。
var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后,将它从网页中删除。
$li.appendTo("ul"); // 把刚才删除的又重新添加到<ul>元素里
//所以,删除只是从网页中删除,在jQuery对象中,这个元素还是存在的,我们可以重新获取它
$("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title不等于"菠萝"的<li>元素删除
detach()方法
var $li = $("ul li:eq(1)").detach(); // 获取第二个<li>元素节点后,将它从网页中删除。
$li.appendTo("ul"); // 重新追加此元素,它之前绑定的事件还在;如果用remove()方法,之前的方法不复存在。
empty()方法
$("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后,清空此元素里的内容
5. 复制节点
$(this).clone().appendTo("ul"); // 复制当前点击的节点,并将它追加到<ul>元素 $(this).clone(true).appendTo("ul"); // 注意参数true
//可以复制自己,并且他的副本也有同样功能。
6. 替换节点
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
// 同样的实现: $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件。
7. 包裹节点
$("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来,结果:
// <b><strong>test1</b></strong>
// <b><strong>text2</b></strong>
$("strong").wrapAll("<b></b>"); // 结果:<b><strong>test1</strong><strong>text2</strong>
$("strong").wrapInner("<b></b>"); // 在标记里包裹,结果:<strong><b>test</b></strong>
8. 属性操作
//设置<p>元素的属性'title'
$("input:eq(0)").click(function(){
$("p").attr("title","选择你最喜欢的水果.");
});
//获取<p>元素的属性'title'
$("input:eq(1)").click(function(){
alert( $("p").attr("title") );
});
//删除<p>元素的属性'title'
$("input:eq(2)").click(function(){
$("p").removeAttr("title");
});
9. 样式操作
//获取样式
$("input:eq(0)").click(function(){
alert( $("p").attr("class") );
});
//设置样式
$("input:eq(1)").click(function(){
$("p").attr("class","high");
});
//追加样式
$("input:eq(2)").click(function(){
$("p").addClass("another");
});
//删除全部样式
$("input:eq(3)").click(function(){
$("p").removeClass();
});
//删除指定样式
$("input:eq(4)").click(function(){
$("p").removeClass("high");
});
//重复切换样式
$("input:eq(5)").click(function(){
$("p").toggleClass("another");
});
//判断元素是否含有某样式
$("input:eq(6)").click(function(){
alert( $("p").hasClass("another") )
alert( $("p").is(".another") )
});
10. 设置和获取HTML、文本和值
html()方法,类似于JavaScript中的innerHTML属性。
text()方法,类似于JavaScript中的innerText属性。
val()方法,类似于JavaScript中的value属性。
11. 遍历节点
children()方法
var $ul = $("ul").children();
for(var i=0;i< $ul.length;i++){
alert( $ul[i].innerHTML );
}
next()方法
prev()方法
sibling()方法
var $p1 = $("p").next();
alert( $p1.html() ); // 紧邻<p>元素后的同辈元素
var $ul = $("ul").prev();
alert( $ul.html() ); // 紧邻<ul>元素前的同辈元素
var $p2 = $("p").siblings();
alert( $p2.html() ); // 紧邻<p>元素的唯一同辈元素
closeset()方法
$(e.target).closest("li").css("color","red");
parent()、parents()、closeset()方法区别
- $(".item-1").parent().css(...),parent()方法从指定类型的直接父节点开始查找,返回一个元素节点。
- $(".item-1").parents('ul').css(...),parents()方法查找同parents()方法类似,不同在于它查找多个父节点。
- $(".item-a").closeset('ul').css(...),closeset()方法从包含自身节点开始查找,同parents()方法类似,但它只返回匹配的第一个节点。
12. CSS-DOM操作
//获取<p>元素的color
alert( $("p").css("color") );
//设置<p>元素的color
$("p").css("color","red"); //设置<p>元素的fontSize和backgroundColor
$("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"}); //获取<p>元素的高度
alert( $("p").height());
//获取<p>元素的宽度
alert( $("p").width());
//设置<p>元素的高度
$("p").height("100px");
//设置<p>元素的宽度
$("p").width("400px"); // offset()方法,获取当前元素在当前视窗的相对偏移
var offset = $("p").offset();
var left = offset.left;
var top = offset.top;
alert("left:"+left+";top:"+top); // 其它还有position()方法,scrollTop()方法与scrollLeft()方法
jQuery学习笔记(DOM操作)的更多相关文章
- jquery学习笔记---Dom操作
一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...
- Jquery学习笔记:操作form表单元素之一(文本框和下拉框)
一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步, ...
- jQuery学习笔记1——操作属性
一.获得和设置内容 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容, 得到匹配元素集合中每个元素的文本内容结合,包括他们的后代, 即由所有匹配 ...
- jQuery学习笔记(3)-操作jQuery包装集的函数
一.前言 在使用jQuery选择器获取到jQuery包装集后,我们就要对这些包装集进行各种操作 二.创建新的元素 1.使用HTMLDOM创建元素 (1)什么是DOM 当网页被加载时,浏览器会创建页面的 ...
- Jquery学习笔记:操作form表单元素之二(复选框和单选框)
在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...
- Javascript学习笔记二——操作DOM
Javascript学习笔记 DOM操作: 一.GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二.querySelector( ...
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
- jQuery:自学笔记(3)——操作DOM
jQuery:自学笔记(3)——操作DOM 修改元素的属性 获取元素属性 设置元素属性 修改元素的内容 说明 有三种方式可以获取HTML元素的内容,分别是 ☐ text():设置或返回所选元素的文本内 ...
随机推荐
- SpringMVC学习笔记六:使用Formatter解析或格式化数据
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6832903.html Converter可以将一种类型转换成另一种类型,是任意Object之间的类型 ...
- Maven依赖传递、依赖传递排除、依赖冲突
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6628429.html 一:Maven依赖传递 假如有Maven项目A,项目B依赖A,项目C依赖B.那么我们可 ...
- 关于XCode更换项目名称
1.打开项目直接修改项目名称 2.直接修改分组名 3.然后.command+B会报错 4.找到项目源文件 YourProject.xcodeproj - > 右键显示包内容->找到pro ...
- jqPlot图表插件学习之柱形图和旋转分类名称
一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...
- Android开发之将拍摄的图片传至服务器
package com.example.oldtab; import java.io.ByteArrayOutputStream; import java.io.File; import java.i ...
- urllib2特点--urllib2.Request对象,定制请求头部信息
# -*- coding: cp936 -*- #python 27 #xiaodeng #urllib2特点--urllib2.Request对象,定制请求 import urllib2 def r ...
- Android(4.0.3+): Service, AsyncTask, 定时任务和UI通信
Service使用AlarmManager实现后台定时任务 在Android 4.0.3版本中, 使用AlarmManager实现后台定时任务是比较好的方案, 其实现机制, 是利用Service的 o ...
- Huginn部署到 Heroku
折腾了几个小时,现在记录下安装步骤 1.本机Win10,放弃本地安装,官网建议也是, 2.安装虚拟机,装ubuntu系统 3.更换国内源(包括apt和gem,bunlde)ruby中国 4.注册her ...
- [转载]Ubuntu 安装 万能五笔 输入法
原文地址:Ubuntu 安装 万能五笔 输入法作者:庖丁解牛 paul@paul-desktop:~/scripts$ cat ins-ibus-wnwb.sh #!/bin/sh set -e cd ...
- 关于mysql中使用聚合函数结果集为空,仍显示size为1,所有元素为Null问题的解决办法
转自:https://www.2cto.com/database/201806/757632.html 1.不使用聚合函数sql: select * from sys_role_data a left ...