jQuery中DOM常见操作实例小结


Posted in jQuery onAugust 01, 2019

本文实例讲述了jQuery中DOM常见操作。分享给大家供大家参考,具体如下:

DOM属性操作

属性列表

属性 版本 说明
attr() 1.0 设置或返回文档节点的属性。
removeAttr() 1.0 移除文档节点的属性。
prop() 1.6 设置或返回DOM元素的属性。
removeProp() 1.6 移除每个匹配元素的属性。
addClass() 1.0 添加CSS类名。
removeClass() 1.0 移除CSS类名。
toggleClass() 1.2 切换CSS类名(存在就删除,不存在就添加)。
html() 1.0 设置或返回元素的html内容(即innerHTML)。
text() 1.0 设置或返回元素的文本内容(已过滤掉HTML标签,即IE中的innerText )。
val() 1.0 设置或返回元素的值(主要是表单元素的value值)。

DOM文档操作

一、添加元素

1、内部添加

  1. 向当前元素的内部追加内容添加到末尾
append($(selector))
  1. 将当前元素在某元素内部追加。但由于会根据需要对当前元素进行移动,所以jQuery对象更改了,可用end()还原
appendTo($(selector))
  1. 向当前元素的内部前置内容
prepend($(selector))
  1. 将当前元素在某元素内部前置。类似于appendTo(),会改变对象
prependTo($(selector))

2、外部添加

  1. 向当前元素之后插入内容
after($(selector))
  1. 将当前元素插入到某元素之后。类似于appendTo(),会改变对象
insertAfter($(selector))
  1. 向当前元素之前插入内容
before($(selector))
  1. 将当前元素插入到某元素之前。类似于appendTo(),会改变对象
insertBefore($(selector))

二、删除元素

  1. 删除当前元素,该元素包含的文本内容和后代元素会一起删除掉,绑定的事件也不复存在
remove()
  1. 同样是删除当前元素,但是绑定的事件还是存在的
detach()
  1. 清空当前元素,该元素的文本内容和后代元素都将删除,但保留其本身
empty()

三、替换元素

  1. 移动页面上原有的元素来替换当前选定的页面元素,也可以添加新元素来替换
replaceWith($(selector))
replaceWith($(html))
  1. 用当前选定的元素来替换某元素,可以使页面上原有元素,也可以是新元素。同样会根据需要复制当前元素副本,从而更改jQuery对象
replaceAll($(selector))
replaceAll($(html))

DOM样式操作

一丶概要

通过JavaScript获取dom元素上的style属性,我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了

二丶样式操作函数

  1. CSS()

css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值,如果需要删除指定的css属性,使用函数将其值设为空字符串("")

语法格式:

$("selector").css(property [, value ])
$("selector").css( object )
  1. height()

用于设置或返回当前匹配元素的高度
语法格式: $("selector").height( [ value ] )
如果省略了value参数,则表示获取高度;如果指定了该参数,则表示设置高度。

  1. width()

用于设置或返回当前匹配元素的宽度
语法格式: $("selector").width( [ value ] )

  1. innerHeight(),innerWidth()

置或返回当前匹配元素的内宽度或者高度

语法格式:

$("selector").innerHeight( [ value ] )
$("selector").innerWidth( [ value ] )
  1. outerHeight(),outerWidht()

获取当前匹配元素的外高度(外宽度)

语法格式:

$("selector").outerHeight( [ includeMargin ] )
$("selector").outerWidth( [ includeMargin ] )

DOM事件操作

一丶事件API

jQuery对象的核心事件方法,核心事件函数,主要用于为元素的任意事件(包括自定义事件)添加、取消、触发绑定的一个或多个事件处理函数

二丶方法

  1. on()方法

说明:on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
语法:$(selector).on(event,childSelector,data,function,map)

  1. toggle([speed],[easing],[fn])

说明: 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的click事件。如果元素是可 见的,切换为隐藏的;如果元素是隐藏的,切换为可见的.
语法:$(selector).toggle(speed,easing,function)
参数:

  • speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。
  • easing:可选参数。用来指定切换效果,默认是"swing",可用参数"linear"。

fn:在动画完成时执行的函数,每个元素执行一次。

  1. change([[data],fn])

说明:当元素的值发生改变时,会发生change事件.该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生

语法:$(selector).change(data,fn);

  1. click([[data],fn])

说明: 触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
语法:$(selector).click(data,fn);

  1. mouseover([[data],fn])

说明: 当鼠标指针位于元素上方时,会发生mouseover事件。该事件大多数时候会与mouseout事件一起使用。
与mouseenter事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发mouseover事件。只有在鼠标指针穿过被选元素时,才会触发mouseenter事件
语法:$(selector).mouseover(data,fn);

  1. mouseout([[data],fn])

1.说明:当鼠标指针从元素上移开时,发生mouseout事件。该事件大多数时候会与mouseover事件一起使用。
语法:$(selector).mouseout(data,fn);

  1. select([[data],fn])

说明: 当textarea或文本类型的input元素中的文本被选择时,会发生select事件
语法: $(selector).select(data,fn);

  1. submit([[data],fn])

更多关于jQuery相关内容还可查看本站专题:《jQuery操作DOM节点方法总结》、《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery中DOM操作原则实例分析
Aug 01 #jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 #jQuery
jquery.pager.js分页实现详解
Jul 29 #jQuery
jquery.pager.js实现分页效果
Jul 29 #jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 #jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 #jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 #jQuery
You might like
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
php共享内存段示例分享
2014/01/20 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Python tcp传输代码实例解析
2020/03/18 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
信息部岗位职责
2013/11/12 职场文书
高三自我评价
2014/02/01 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
我的收音机情缘
2022/04/05 无线电
青岛市的收音机研制与生产
2022/04/07 无线电
Redis入门基础常用操作命令整理
2022/06/01 Redis