摘抄自《锋利的jQuery》
一、查找节点
1、查找元素节点
var li_txt = $li.text();
2、查找属性节点
var p_txt = $para.attr("title");
二、创建节点
1、创建元素节点
2、创建文本节点
3、创建属性节点
三、插入节点
1、append()
$("<p>我想说:</p>").append("<b>你好</b>");
<p>我想说:<b>你好</b></p>
2、appendTo()
$("<b>你好</b>").appendTo("<p>我想说:</p>");
<p>我想说:<b>你好</b></p>
3、prepend()
$("<p>我想说:</p>").prepend("<b>你好</b>");
<p><b>你好</b>我想说:</p>
4、prependTo()
$("<b>你好</b>").prependTo("<p>我想说:</p>");
<p><b>你好</b>我想说:</p>
5、after()
$("<p>我想说:</p>").after("<b>你好</b>");
<p>我想说:</p><b>你好</b>
6、insertAfter()
$("<b>你好</b>").insertAfter("<p>我想说:</p>");
<p>我想说:</p><b>你好</b>
7、before()
$("<p>我想说:</p>").before("<b>你好</b>");
<b>你好</b><p>我想说:</p>
8、insertBefore()
$("<b>你好</b>").insertBefore("<p>我想说:</p>");
<b>你好</b><p>我想说:</p>
四、删除节点
1、remove()
$("ul li:eq(1)").remove();
or
$("ul li").remove("li[title!=菠萝]");
2、detach()
与remove相同用法, 区别是如果重新追加后, 之前的绑定事件还在
3、empty()
$("ul li eq(1)").empty();
清空元素里的内容
五、复制节点
$(this).clone().appendTo("ul");
or
$(this).clone(true).appendTo("ul")
一个不带事件一个带事件
六、替换节点
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
or
$("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
完全替换所选节点内容(原先事件会失效)
七、包裹节点
1、wrap()
$("strong").warp("<b></b>");
符合的元素一个一个包括<b></b>
2、wrapAll()
$("strong").warpAll("<b></b>");
所有符合的元素最外层包括一个<b></b>
3、wraplnner()
$("strong").wrapInner("<b></b>");
符合的元素内容中包括<b></b>
八、属性操作
1、获取属性
var p_txt = $para.attr("title");
2、设置属性
$("p").attr("title", "your title");
$("p").attr({"title": "your title", "name": "test"});
3、删除属性
$("p").removeAttr("title");
九、样式操作
1、获取样式(同上)
2、设置样式(同上)
3、追加样式
$("p").addClass("another");
4、移除样式
$("p").removeClass("high");
$("p").removeClass("high another");
$("p").removeClass();
5、切换样式
$("p").toggleClass("another");
如果有就移除, 没有就附加
6、判断是否含有某个样式
$("p").hasClass("another");
返回true或false, 等价于$("p").is(".another");
十、设置和获取HTML、文本和值
1、html()
获取整段元素的HTML代码
2、text()
获取元素中的文本内容
3、var()
获取元素的value值
十一、遍历节点
1、childern()
获取匹配元素的所有子元素的个数
2、next()
获取匹配元素后面紧邻的同辈元素
3、prev()
获取匹配元素前面紧邻的同辈元素
4、sibings()
获取匹配元素前后所有的同辈元素
5、closest("xxx")
获取最近的匹配元素, 没有则返回空jQuery对象
6、其他
parent(), parents(), find(), filter(), nextAll()和prevAll()等
十二、css-dom
1、offset()
获取元素在当前视窗的相对偏移
2、position()
获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移
3、scrollTop()、scrollLeft()
获取元素的滚动条距顶端的距离和距左侧的距离
jQuery—DOM操作的更多相关文章
-
jQuery DOM操作之结点转移复制
jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...
-
JQuery DOM操作(属性操作/样式操作/文档过滤)
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
-
Jquery DOM 操作列表
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...
-
JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
-
事件冒泡及事件委托的理解(JQuery Dom操作)
jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
-
jquery DOM操作(一)
上一篇文章是记录了jquery中选择器的作用,这里只要记录下jquery中的DOM操作,还是按照上篇的格式来. 下面是测试用的html代码,接下来DOM的操作会在下面的代码下进行. <body& ...
-
JQuery -- Dom操作, 示例代码
1.内部插入节点 * append(content) :向每个匹配的元素的内部的结尾处追加内容 * appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 * ...
-
JQuery dom 操作总结
DOM 操作之获取值 获得内容 - text():设置或返回所选元素的文本内容 $("#btn1").click(function(){ alert("Text: &qu ...
-
Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
-
jQuery DOM操作
对节点的操作 查找节点 查找节点可以直接利用jQuery选择器来完成,非常便利. 插入节点 jQuery提供了8种插入节点的方法. 序号 方法 描述 实例 1 append() 向每个匹配的元素内部追 ...
随机推荐
-
storm学习
一 storm 相关术语 . Nimbus storm 集群主节点,负责资源分配和任务调度.(相当于namenode) . supervisor storm集群工作节点,接受Nimbu分配任务,管理w ...
-
PHP 进行数据庫对比工具
<?php /** * author jackluo * net.webjoy@gmail.com */ class IMysqlDiff { private $master,$slave; p ...
-
深入理解asp.net里的HttpModule机制
刚工作的时候看<asp.net深入解析>,第一次知道HttpModule和HttpHandler.当时对我而言,它们不过就是两个新名词而已,仅仅知道工作原理但是理解的不深刻.随着经验的累积 ...
-
user is not in the sudoers file.This incident will be reported
我用普通用户ssk登陆,想让ssk成为拥有超级用户的权限的普通用户 开始提示输入密码错误 ,然后就这样了 解决方法如下: 1>.进入超级用户模式.也就是输入"su -", ...
-
百度之星 1004 Labyrinth
Labyrinth Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...
-
Swift の 函数式编程
Swift 相比原先的 Objective-C 最重要的优点之一,就是对函数式编程提供了更好的支持. Swift 提供了更多的语法糖和一些新特性来增强函数式编程的能力,本文就在这方面进行一些讨论. S ...
-
Volley网络框架完全解析(缓存篇)
在上一篇中讲完了Volley框架怎么使用,那么这篇就来讲讲Volley框架的缓存机制 我们看Volley内部源码发现: Volley框架内部自己处理了DiskBasedCache硬盘缓存,但是没有处理 ...
-
【python进阶】深入理解系统进程1
前言 之前程序执⾏都是⼀条腿⾛路,甚⾄是⽤⼀杆枪来打天下. 通过系统编程的学习,会让⼤家有“多条腿”⼀起⾛路,就好⽐有了⼀把机关枪. 此篇为深入理解进程第一篇,下面开始今天的说明~~~ 进程 多任务的 ...
-
4月22日MySQL学习
前面学习的知识基本都是概念知识没有什么代码,然后还有图形界面来辅助学习. 今天学习了MySQL的存储引擎,最常用的两种 MYISAM:不支持事务,也不支持外键,但是访问速度快. INNODB:支持事务 ...
-
简单SQL注入
既然是简单的,估计也就是''字符型把,输入'or'1 以下是输出结果,or没被过滤,单引号也没有 呢么用union联合注入试试,提交了'-1 union/**/select 1 and '1,发现回显 ...