juqery学习笔记--DOM操作

一、添加节点

$(selector).append()  

向selector选择的元素的里面插入参数参数所指定的dom元素,插入的位置在最后面。参数可以是直接的HTML字符串,也可以是由$()函数创建的DOM元素

如:$(selector).append(“<b>你好</b>”);

或   $dom=$(“<b>你好</b>”);   $(selector).append($dom);

$(HTML).appendTo(selector)

向selector选择的元素里面插入$(HTML)创建的DOM元素,插入的位置在最后面

$(selector).prepend()

向selector选择的元素的里面插入参数参数所指定的dom元素,插入的位置在最前 面。参数可以是直接的HTML字符串,也可以是由$()函数创建的DOM元素

如:$(selector).prepend(“<b>你好</b>”);

或   $dom=$(“<b>你好</b>”);   $(selector).prepend($dom);

$(HTML).prependTo(selector)

向selector选择的元素里面插入$(HTML)创建的DOM元素,插入的位置在最前面

$(selector).after()

在selector选择的元素后面(而不是里面)插入参数所指定的dom元素,参数可以是直接的HTML字符串,也可以是由$()函数创建的DOM元素

如:$(selector).after(“<b>你好</b>”);

或   $dom=$(“<b>你好</b>”);   $(selector).after($dom);

$(HTML).insertAfter(selector)

在selector选择的元素后面插入$(HTML)创建的DOM元素

$(selector).before()

在selector选择的元素前面(而不是里面)插入参数所指定的dom元素,参数可以是直接的HTML字符串,也可以是由$()函数创建的DOM元素

如:$(selector).before(“<b>你好</b>”);

或   $dom=$(“<b>你好</b>”);   $(selector).before($dom);

$(HTML).insertBefore(selector)

在selector选择的元素前面插入$(HTML)创建的DOM元素

-----------------------------------------------------------------------------------------

二、删除节点

  $(selector).remove()

   删除selector选择的元素,remove()里还可以用另外的selector作为参数来再次过滤要删除的元素

----------------------------------------------------------------------------------------

三、清空节点

  $(selector).empty()

清空selector选择的元素里面的所有内容

-------------------------------------------------------------------------------------------

四、复制节点

$(selector).clone()

复制selector选择的元素,如果在这个元素上注册的事件也要一并复制,则使用$(selector).clone(true)

--------------------------------------------------------------------------------------------

五、替换节点

  $(selector).replaceWith(HTML)

   把selector选择的元素替换成指定的HTML,或是由$()创建的DOM元素

 $(HTML).replaceAll(selector)

把selector选择的元素替换成$(HTML)创建的元素

-----------------------------------------------------------------------------------------------------

六、包裹节点

$(selector).wrap(HTML)

用HTML所创建的节点把selector选择的元素包裹起来

如:$("p").wrap("<div></div>")        结果为<div> <p></p> </div>

$(selector).wrapInner(HTML)

用HTML所创建的节点把selector选择的元素的后代元素包裹起来

-------------------------------------------------------------------------------------------------------------

七、节点属性获取或设置

   $(selector).attr("attribute")

获取selector选择的元素的attribute属性

$(selector).attr("attribute","value")

将selector选择的元素的attribute属性设为value

$(selector).removeAttr("attribute")

移除selector选择的元素的attribute属性

--------------------------------------------------------------------------------

八、样式操作

$(selector).addClass("classname")

在selector选择的元素的原有的基础上追加一个calss样式

$(selector).removeClass("classname")

在selector选择的元素上移除classname样式,如果要移除该元素上的所有class样式,则使用$(selector).removeClass()

  $(selector).toggleClass("classname")

  在selector选择的元素上交替的增加classname样式或删除classname样式,每触发一次,就交替一次

$(selector).hasClass("classname")

判断在selector选择的元素上是否有classname样式,有则返回true,否则返回false

-----------------------------------------------------------------------------------------------

九、设置或获取HTML和文本的值

  $(selector).html()

获取selector选择的元素的innerHTML的值

  $(selector).html("HTML")

将selector选择的元素的innerHTML的值设为HTML

$(selector).text()

获取selector选择的元素的innerText/contentText的值

$(selector).text("TEXT")

将selector选择的元素的innerText/contentText的值设为TEXT

$(selector).val()

获取selector选择的元素(一般为文本框、下拉列表、单选框等)的值

$(selector).val("value")

将selector选择的元素的值设为value

---------------------------------------------------------------

十、遍历节点

$(selector).children()

获取selector选择的元素的子元素的集合,注意该方法不会考虑后代元素

$(selector).next()

获取selector选择的元素的下一个兄弟节点

$(selector).prev()

获取selector选择的元素的前一个兄弟节点

$(selector).siblings()

获取selector选择的元素的前后的所有兄弟节点

$(selector).closet("html标签")

例如:$(selector).closet("li")  ,如果li匹配selector则返回selector,否则逐级向selector的父级查找直到找到匹配的元素,没找到则返回一个空jquery对象

……

------------------------------------------------------------------------

十一、CSS操作

$(selector).css("style")

获取selector选择的元素的style样式,不论是内联的还是外部的样式都可以获取,注意style最好写成驼峰的形式,以下也一样

$(selector).css("style","value")

设置selector选择的元素的css样式

$(selector).css({"style1":"value1","style2":"value2",……})

设置多个css样式

可以使用css(opacity[,value])来获取和设置透明度,范围为0~1

$(selector).height()

获取selector的高度,单位为PX

$(selector).height(value)

设置selector的高度,如果不带单位则默认为PX,也可以带上单位

width也有相同的方法

$(selector).offset()

获取selector的offsetLeft和offsetTop的值,结果是两个值,$(selector).offset().left  、  $(selector).offset().top分别来引用这两个值

$(selector).position()

获取selector相对于最近一个设置了动态定位的left和top值,结果有两个值,引用方法同上

$(selector).scrollTop()

获取selector的scrollTop值

$(selector).scrollTop(value)

设置selector的scrollTop值

scrollLeft也有相同的方法

时间: 2024-10-30 03:01:49

juqery学习笔记--DOM操作的相关文章

jQuery学习笔记DOM操作之包含节点方法

jQuery学习笔记DOM操作之替换节点方法

Blender学习笔记 | 02 | 操作

Shift 点击不同图层 同时显示多图层物件 z 切换 Solid / Wireframe 视图模式 点选物件后M 移动到图层选项 Ctrl + 鼠标左键拖动 自由全选物件 B 方形区域圈选物件 Tab Object / Edit Mode 切换 T 开 / 关 侧栏 Ctrl + Tab 编辑状态下切换编辑对象 E Extrude Region 推挤区域.以发现为轴线. X 删除物件菜单 Blender学习笔记 | 02 | 操作,布布扣,bubuko.com

memcached学习笔记5--socke操作memcached 缓存系统

使用条件:当我们没有权限或者不能使用服务器的时候,我们需要用socket操作memcached memcached-client操作 特点: 无需开启memcache扩展 使用fsocketopen()套接字连接memcached 同样执行CRUD require_once(CLASS_PATH.'memcached-client.php');//CLASS_PATH 是我定义的类文件文件夹路径 $mc = new memcached( array( 'servers' => array( '1

树莓派学习笔记——SQLite操作简述

0 前言 本文介绍如何在树莓派中利用SQLite数据库保存CPU温度数据.SQLite是一款轻量级零配置数据库,非常适合在树莓派和其他嵌入式系统中使用.SQLite文档详细资料丰富,本文不会详细解释SQLite数据库操作的方方面面,只能结合具体场景按需说明.本文介绍的SQLite技巧也可以在其他平台使用,并不局限于树莓派. 本文继续折腾树莓派温度,需要从中可以玩出新花样. [相关博文] [树莓派学习笔记--索引博文]--更多博文请关注. [树莓派学习笔记--获取树莓派CPU温度] [树莓派学习笔

计算机操作系统学习笔记_1_操作系统概述

操作系统概述 一.操作系统的概念.特征.功能和提供的服务 1.操作系统的概念     操作系统是计算机系统中最重要.最基本的系统软件,操作系统位于硬件和用户程序之间.    对于用户来讲:它能向用户提供使用计算机的接口;    从资源管理角度来看:它能管理计算机软硬件资源,提高其利用率;    再者,利用虚拟机技术(如WMWare,VirtualBox,Java虚拟机等),扩展了计算机的功能和使用范围.     因此,操作系统的定义为:操作系统是控制和管理计算机软.硬件资源,以尽可能合理.高效的

memcached学习笔记3--telnet操作memcached

方式: 一.telnet访问memcached缓存系统(主要用于教学,不讨论) telnet 127.0.0.1 11211     => telnet IP地址 端口号 //往Memcached中存放数据 add username 0 60 5       => add:添加命令 username:key的名字(是以key/value存放) 0:标示,一般不用管 60:缓存多长时间,超过时间自动删除,单位(秒) s 5: 表示放入的数据大小 注意:如果一个key已经存在,再要添加数据到这个k

JavaScript高级程序设计学习笔记--DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口). Document类型 文档的子节点 虽然DOM标准规定Document节点的子节点可以是DocumentType,Element,ProcessingInstruction或Comment,但还有两个内置的访问其子节点的快捷方式.第一个就是documnetElement属性,该属性始终指向HTML页面中的<html>元素.另一个就是通过childNodes列表访问文档元素,但通过documentElement属性则

html学习笔记-DOM

html学习笔记-DOM Table of Contents 1. 什么是 DOM? 2. DOM 节点 3. DOM 方法 4. DOM 属性 5. DOM 访问 6. DOM 修改 7. DOM 事件 1 什么是 DOM? DOM 是 W3C (万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: “W3C 文档对象模型 ( DOM ) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. ” W3C DOM 标准被分为 3 个不同的部分