jQuery中DOM操作
1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作
2 分类:
1)DOM Core(核心):用途广泛 支持多种编程语言
2)HTML DOM:代码简短 只用于处理web文档
3)CSS DOM:对样式的操作
作用:用于获取和设置style对裂的各种属性 使网页呈现不同效果
3 DOM操作
1)节点操作
a)查找节点: 查节点:利用jquery选择器
例:$("ul li:eq(2)") 查找到ul下的li节点的第三个节点
查属性:使用attr()方法,若参数为一个则传入属性名称.若参数为两个则为设置属性
例:$("p").attr("title") 查找到p标签的title属性
b)创建节点:元素节点:$("<li></li>") 创建<li>节点
文本节点:$("<li>xxxxx</li>")
属性节点:$("<li title='xxxx'></li>")
c)插入节点:append():给与a元素匹配的元素内部添加 $("a").append("content")
例:$("p").append("<b>其他</b>");
appendTo():将content添加到a元素内部 $("content").appendTo("a")
例:$("<b>其他</b>").appendTo("p");
prepend():在a元素内部前面添加content $("a").prepend("content")
例:$("p").prepend("<b>其他</b>");
prependTo():将content添加到a元素内部前置 $("content").prependTo("a")
例:$("<b>Hello</b>").prependTo("p");
after():在a元素外部的后面添加content $("a").after("content")
例:$("p").after("<b>Hello</b>");
insertAfter():将content插入到a外部之后 $("content").insertAfter("a")
例:$("<b>Hello</b>").insertAfter("p");
before():在a元素外部的前面插入content $("a").before("content")
例:$("p").before("<b>Hello</b>");
insertBefore():将content插入到a外部的前面 $("content").insertBefore("a")
例:$("<b>Hello</b>").insertBefore("p");
d)删除节点:
remove():作用:删除所有匹配元素以及它的后代元素 删除元素引用
($("ul li:eq(1)").remove()).appendTo("ul");
empty():清空节点 $("ul li:eq(1)").empty();
e)复制节点:$("ul li").click(function(){
$("this").clone().appendTo(); //复制当前点击的节点将它追加到<ul>元素
f)替换节点:
replaceWith():$("p").replaceWith("<strong>你最不喜欢的球类运动是?</strong>")
replaceAll():$("<strong>你最不喜欢的球类运动是?</strong>").replaceAll("p");
g)包裹节点:wrap()与wrapAll()相同,都是从外部包裹元素
warpInner():从该元素内部开始包裹 不包裹该元素
h)遍历节点:
children():获取匹配元素子元素集合
语法:$(a).children();
next():取得该元素匹配元素的下一个同辈元素 相当于层次选择器
语法:$(a).next()==>>$(a+next)
prev():取得与该元素匹配的前面的同辈元素
语法:$(a).prev()
siblings():取得与该元素匹配的所有同辈元素,自身除外
语法:$(a).siblings();
Closest():取得最近的匹配元素
语法:$(a).closet();
nextAll(String):查找当前元素之后的所有元素。
prevAll(string):查找当前元素之前所有的同辈元素
parent():取得一个包含着所有匹配元素的直接父元素
parents():取得该元素的所有父元素
find():找到所有与指定表达式匹配的元素。
filter():筛选出与指定表达式匹配的元素集合
andSelf():加入先前所选的加入当前元素中
例:
//选取所有div以及内部的p,并加上border类
//HTML 代码:
<div><p>First Paragraph</p><p>Second Paragraph</p></div>
//jQuery 代码:
$("div").find("p").andSelf().addClass("border");
//结果:
<div class="border"><p class="border">First Paragraph</p><p class="border">Second Paragraph</p></div>
end():将匹配的元素列表变为前一次的状态。
例:
//例:选取所有的p元素,查找并选取span子元素,然后再回过来选取p元素
//HTML 代码:
<p><span>Hello</span>,how are you?</p>
//jQuery 代码:
$("p").find("span").end()
//结果:
<p><span>Hello</span> how are you?</p>
2)属性操作:
获取设置属性:$(a).attr(); //获取
$(a).attr("属性名称","值"); //设置
设置多个属性:attr(属性1:值1,属性2:值2,属性n:值n)
删 除 属 性:removeAttr()
语法:$(a).removeAttr(属性名称);
3)样式操作:
a)获取设置: 获取:$(a).attr(样式名); 设置:$(a).attr(样式名,样式);
b)追加样式:$(a).addClass(样式名称)
c)移除样式:$(a).removeClass(样式名); 移除多个:$(a).removeClass(样式1 样式2 样式n)
d)切换样式: toggle():控制行为上的切换 toggleClass():控制样式上的切换
e)判断样式是否存在: hasClass():$(a).hasClass(样式名)==>>$(a).is("."+样式名);
4)设置和获取HTML,文本和值:
html()方法: 相当于javascript中的innerHTML属性 获取或设置某元素中的html内容
text()方法:==>>JS中innertText属性 读取或设置元素的文本内容
val() 方法:==>>JS中value属性 设置和获取元素值
4 CSS DOM
a)css():获取元素样式 传入一个参数 //获取元素样式 传入两个参数 //设置元素样式
b)opacity属性:设置透明度 数值越大可见度越高 透明度越低
c)height(em): em为空值:获取元素高度 反之:设置元素高度
d)offset():浏览器边框的偏移度 仅仅对可见元素有效 包含top和left两个属性
e)position():
f)scrollTop():获取元素滚动条距离顶端的距离
g)scrollLeft():获取元素滚动条距离左侧的距离
jQuery中DOM操作的更多相关文章
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- [置顶] Jquery中DOM操作(详细)
Jquery中的DOM操作 为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...
- JQuery中DOM操作(一)
节点操作 1.插入节点,在JQuery中插入的节点方法很多,可以满足各种不同的节点插入的情况,根据不同的插入方式分为:增加环绕节点.节点内部插入和外部插入三种方式 今天我们要讲的是增加环绕节点,它有三 ...
- jQuery笔记(二)jQuery中DOM操作
前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...
- 第75天:jQuery中DOM操作
一.基础操作 1.html() 使用html()方法读取或者设置元素的innerHTML. 就是相当于javascript里头的innerHTML. 2.text() 使用text()方法读取或者设置 ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- jQuery – 3.JQuery的Dom操作
3.1 JQuery的Dom操作 1.使用html()方法读取或者设置元素的innerHTML 2.使用text()方法读取或者设置元素的innerText 3.使用attr() ...
随机推荐
- BOM和DOM的联系和区别
BOM中的对象 Window对象: 是整个BOM的核心,所有对象和集合都以某种方式回接到window对象.Window对象表示整个浏览器窗口,但不必表示其中包含的内容. Document对象: 实际上 ...
- 武汉科技大学ACM:1006: 华科版C语言程序设计教程(第二版)例题4.17
Problem Description 输入一个整数,求它的素数因子.并按照格式输出. Input 一个整数n.(2<=n<=100) Output n=a*b*c*... (a,b,c为 ...
- Eclipse搭建struts2环境
搭建struts2环境 大的方面分为三步: 1. 加入jar包 2. 在web.xml中配置struts2 3. 添加struts2的配置文件struts.xml 下面是详细步骤: 1. 新建一个Dy ...
- 洛谷 P1316 丢瓶盖
P1316 丢瓶盖 题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想从这些瓶盖里找出B个,使得距离最近的2个距离最大,他想知道,最大可以 ...
- JavaScript不一样的语法
JavaScript除了面向对象的部分,基本语法和C语言类似,但是也有一些自己的特别之处,现总结如下: (1)break和continue后面可以跟label 语法: break labelname; ...
- [算法]动态规划(Dynamic programming)
转载请注明原创:http://www.cnblogs.com/StartoverX/p/4603173.html Dynamic Programming的Programming指的不是程序而是一种表格 ...
- WinForm------DateTime获取月第一天和最后一天取法
转载: http://blog.csdn.net/livening/article/details/6049341/ 代码: /// <summary> /// 取得某月的第一天 /// ...
- HttpClient3.1 警告: Cookie rejected:
四月 , :: 下午 org.apache.commons.httpclient.HttpMethodBase processCookieHeaders 警告: Cookie rejected: : ...
- CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 之 (三)Nginx负载均衡配置
Nginx反向代理到单个PHP-FPM(PHP-FPM可位于不同机器) 0.首先,创建我们的网站根目录[注:须在PHP-FPM所在的那台机器创建](以后网站的代码放到此目录下): mkdir /opt ...
- LINQ 学习笔记(1)
学习资源参考 : http://www.cnblogs.com/lifepoem/archive/2011/12/16/2288017.html 常用方法是 Where, OrderBy, Selec ...