jQuery 之 [ DOM操作 ]
2024-06-02 00:31:28
jQuery的DOM操作
查找节点
元素节点
- 可以通过jQuery选择器来查找元素节点
属性节点
- 通过attr()方法来获取指定元素节点的属性节点
文本节点
- 通过text()方法来获取指定元素节点的文本节点
示例代码
<body>
<button id="btn" name="anniu">按钮</button>
<script>/* 定位页面元素 - 获取指定的元素节点 */var $btn = $( '#btn' );console.log( $btn );// 显示 jQuery.fn.init [button#btn, context: document, selector: "#btn"]/* 通过text()方法来获取指定元素节点的文本节点 */console.log( $btn.text() );// 显示 按钮(文本内容)/* 通过attr()方法来获取指定元素节点的属性节点 - 该方法接收的参数为要获取的属性名 */console.log( $btn.attr( 'name' ) );// 显示 anniu(属性值)
</script>
</body>获取父节点
parent()方法
- 表示获取指定元素的父节点
参数 - 可选
- 通过选择器来进一步筛选
<body>
<div class="game"><ul><li id="gwlr">怪物猎人</li><li>天涯明月刀</li><li>绝地求生</li></ul>
</div>
<script>/* 定位页面元素 */var $lr = $( '#gwlr' );console.log( $lr.parent( 'div' ) );// 显示 jQuery.fn.init [ul, prevObject: jQuery.fn.init(1), context: document] - 写参数后显示 jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document]
</script>
</body>parents()方法
- 表示获取指定元素的所有祖先节点
参数 - 可选
- 通过选择器来进一步筛选
<body>
<div class="game"><ul><li id="gwlr">怪物猎人</li><li>天涯明月刀</li><li>绝地求生</li></ul>
</div>
<script>/* 定位页面元素 */var $lr = $( '#gwlr' );console.log( $lr.parents( 'div' ) );// 显示 jQuery.fn.init(4) [ul, div.game, body, html, prevObject: jQuery.fn.init(1), context: document] - 写参数后显示 jQuery.fn.init [div.game, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>closest()方法
- 表示获取指定元素的指定祖先节点，并返回第一个匹配的
参数
- 通过选择器来进一步筛选
<body>
<div class="game"><ul><li id="gwlr">怪物猎人</li><li>天涯明月刀</li><li>绝地求生</li></ul>
</div>
<script>/* 定位页面元素 */var $lr = $( '#gwlr' );console.log( $lr.closest( 'div' ) );// 显示 jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document] - 写参数后显示 jQuery.fn.init [div.game, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>获取子节点
children()方法
- 表示获取指定元素的所有子元素
<body>
<div class="game"><ul><li id="gwlr">怪物猎人<ul><li>古龙种</li><li>鸟龙种</li><li>爬虫种</li></ul></li><li>天涯明月刀</li><li>绝地求生</li></ul>
</div>
<script>/* 定位页面元素 */var $ul = $( 'ul' );console.log( $ul.children() );// 显示 jQuery.fn.init(3) [li#gwlr, li, li, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>find()方法
- 表示获取指定元素的指定后代元素
<body>
<div class="game"><ul><li id="gwlr">怪物猎人<ul><li>古龙种</li><li>鸟龙种</li><li>爬虫种</li></ul></li><li>天涯明月刀</li><li>绝地求生</li></ul>
</div>
<script>/* 定位页面元素 */var $ul = $( 'ul' );console.log( $ul.find( 'li' ) );// 显示 jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document]
</script>
</body>获取兄弟节点
next()方法
- 表示获取指定元素的下一个相邻兄弟元素
<body>
<div class="game"><ul><li>怪物猎人</li><li id="tiandao">天涯明月刀</li><li>绝地求生</li></ul>
</div>
<script>/* 定位页面原元素 */var $td = $( '#tiandao' );console.log( $td.next() );// 显示 jQuery.fn.init [li, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>prev()方法
- 表示获取指定元素的上一个相邻兄弟元素
<body>
<div class="game"><ul><li>怪物猎人</li><li id="tiandao">天涯明月刀</li><li>绝地求生</li></ul>
</div>
<script>/* 定位页面原元素 */var $td = $( '#tiandao' );console.log( $td.prev() );// 显示 jQuery.fn.init [li, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>创建节点
- 通过jQuery对象的工厂函数来进行创建元素节点
- 通过text()方法来创建文本内容
- 通过attr()方法来创建属性
- 也可以通过工厂函数来创建完整HTML代码
<body>
<div class="game"><ul><li id="gwlr">怪物猎人</li><li>天涯明月刀</li><li>绝地求生</li></ul>
</div>
<script>/* 创建元素节点 */var $newLi = $( '<li></li>' );/* 创建文本内容 */$newLi.text( '使命召唤' );/* 创建属性 */$newLi.attr( 'id', 'smzh' );/* 将创建的元素节点添加到指定元素中 */$( '#game' ).append( $newLi );/* 通过工厂函数创建完整的元素 */var $newLi2 = $( '<li id="nsh">逆水寒</li>' );/* 将创建的元素节点添加到指定元素中 */$( '#game' ).append( $newLi2 );
</script>
</body>插入节点
- 分为内部插入和外部插入
内部插入
append()方法
- 表示插入到指定节点中的最后面 - 该方法由被插入的节点调用
appendTo()方法
- 表示插入到指定节点中的最后面 - 该方法由插入的节点调用
prepend()方法
- 表示插入到指定节点中的最前面 - 该方法由被插入的节点调用
prependTo()方法
- 表示插入到指定节点中的最前面 - 该方法由插入的节点调用
<body>
<div class="game"><ul><li id="gwlr">怪物猎人</li><li>天涯明月刀</li><li>绝地求生</li></ul>
</div>
<script>/* 获取页面指定元素 */var $ul = $( 'ul' );/* 创建新元素节点 */var $newLi1 = $( '<li>逆水寒</li>' );/* 内部插入 *//* append()方法插入 */$ul.append( $newLi1 );/* appendTo()方法插入 */$newLi1.appendTo( $ul );/* prepend()方法插入 */$ul.prepend( $newLi1 );/* prependTo()方法插入 */$newLi1.prependTo( $ul );
</script>
</body>外部插入
before()方法
- 表示插入到指定节点前一个相邻位置 - 该方法由被插入的节点调用
insertBefore()方法
- 表示插入到指定节点前一个相邻位置 - 该方法由插入的节点调用
after()方法
- 表示插入到指定节点后一个相邻位置 - 该方法由被插入的节点调用
insertAfter()方法
- 表示插入到指定节点后一个相邻位置 - 该方法由插入的节点调用
<body>
<div class="game"><ul><li id="gwlr">怪物猎人</li><li>天涯明月刀</li><li>绝地求生</li></ul>
</div>
<script>/* 获取页面指定元素 */var $ul = $( 'ul' );/* 创建新元素节点 */var $newLi2 = $( '<li>使命召唤</li>' );/* 外部插入 *//* before()方法插入 */$ul.before( $newLi2 );/* insertBefore()方法插入 */$newLi2.insertBefore( $ul );/* after()方法插入 */$ul.after( $newLi2 );/* insertAfter()方法插入 */$newLi2.insertAfter( $ul );
</script>
</body>删除节点
remove()方法
- 表示删除指定元素
- 该方法为指定元素调用删除自身
empty()方法
- 表示删除指定元素的所有后代元素
示例代码
<body>
<div class="game"><ul><li id="gwlr">怪物猎人</li><li>天涯明月刀</li><li>绝地求生</li></ul>
</div>
<script>/* 获取页面元素 */var $ul = $( 'ul' );var $lr = $( '#gwlr' );/* 通过remove()方法删除指定元素 */$lr.remove();/* 通过empty()方法删除指定元素的所有后代元素 */$ul.empty();
</script>
</body>替换节点
replaceWith()方法
- 表示由被替换的元素调用该方法进行替换“括号中填写用来替换的元素”
replaceAll()方法
- 表示由用来替换的元素调用该方法进行替换“括号中填写被替换的元素”
示例代码
<body>
<div class="game"><ul><li id="gwlr">怪物猎人</li><li>天涯明月刀</li><li>绝地求生</li></ul>
</div>
<script>/* 定位被替换的元素 */var $lr = $( '#gwlr' );/* 创建替换的元素 */var $nsh = $( '<li>逆水寒</li>' );/* 通过replaceWith()方法进行替换 */$lr.replaceWith( $nsh );/* 通过replaceAll()方法进行替换 */$nsh.replaceAll( $lr );
</script>
</body>复制节点
clone()方法
- 表示对指定的元素进行复制
参数 - 布尔值
- true - 表示对指定元素所绑定事件进行复制
- false - 表示不对指定元素所绑定的事件进行复制
- 该事件需要通过jQuery方式进行绑定才可复制
<body>
<button id="btn">按钮</button>
<script>/* 定位被复制元素的位置 */var $btn = $( '#btn' );/* 为指定元素绑定事件 */$btn.click( function(){console.log( '这是按钮...' );} );/* 进行复制并插入到指定元素中 */$btn.clone( true ).appendTo( $( 'body' ) );
</script>
</body>属性和文本操作
属性操作
attr()方法
- 可以通过该方法对指定元素的指定属性进行获取
- 也可以通过该方法对指定元素的指定属性进行设置
removeAttr()方法
- 用于删除指定元素的指定属性
示例代码
<body>
<p id="p" name="text">三步白头</p>
<script>/* 定位页面元素 */var $p = $( '#p' );/* 通过attr()方法获取指定元素的指定属性的属性值 */console.log( $p.attr( 'name' ) );// 显示 text(属性值)/* 通过attr()方法对指定元素的指定属性进行设置 */console.log( $p.attr( 'name', 'wenben' ) );// 显示 <p id="p" name="wenben">三步白头</p>/* 通过removeAttr()方法删除指定元素的指定属性 */console.log( $p.removeAttr( 'name' ) );// 显示 <p id="p">三步白头</p>
</script>
</body>文本操作
text()方法
- 可以通过该方法来获取指定元素的文本内容
- 也可以通过该方法对指定元素添加文本内容
示例代码
<body>
<p id="p" name="text">三步白头</p>
<script>/* 定位页面元素 */var $p = $( '#p' );/* 通过text()方法获取指定元素的文本内容 */console.log( $p.text() );// 显示 三步白头/* 通过text()方法对指定元素文本内容进行设置 */console.log( $p.text( '天道昭彰' ) );// 显示 <p id="p">天道昭彰</p>
</script>
</body>样式操作
<head><meta charset="UTF-8"><title>样式操作</title><style>.d1 {width: 200px;height: 200px;background-color: green;}.d2 {width: 200px;height: 200px;background-color: blue;}</style>
</head>
<body>
<div id="d1" style="width: 100px;height: 100px;background-color: red"></div>
<div id="d2" class="d1"></div>
<div id="d3"></div>
<script src="jquery.js"></script>
<script>/*样式操作attr( ) - 表示获取指定元素的指定样式“括号中填写指定的样式名”addClass( ) - 表示添加指定样式“括号中填写指定的样式名”removeClass( ) - 表示删除样式“括号中填写指定的样式名”* removeClass(样式名) - 删除指定样式名的样式* removeClass( ) - 删除所有的样式toggleClass( ) - 表示切换样式“括号中填写指定的样式名”* 如果指定元素具有指定的样式名，将删除该样式名* 如果指定元素不具有指定的样式名，将添加该样式名hasClass( ) - 表示判断指定元素是否具有指定样式名的样式“括号中必须填写指定的样式名”css( ) - 表示获取当前有效样式“括号中填写指定的样式属性名”* css( 属性名，属性值 ) - 也可以用来设置指定元素的指定样式属性*/var $d1 = $( '#d1' );console.log( $d1.attr( 'style' ) );var $d2 = $( '#d2' );console.log( $d2.attr( 'class' ) );var $d3 = $( '#d3' );$d3.addClass( 'd2' );$d3.removeClass( 'd2' );$d2.toggleClass( 'd1' );var $d2s = $d2.hasClass( 'd1' );console.log( $d2s );var $d2x = $d2.css( 'width' );console.log( $d2x );$d2.css( 'backgroundColor', 'blueviolet' );
</script>
</body>jQuery 之 [ DOM操作 ]相关推荐
- 03-老马jQuery教程-DOM操作(上）
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- jQuery的DOM操作
jQuery的DOM操作 前期:http://blog.csdn.net/goodshot/article/details/20202019 1 , 创建元素节点 传统的javascript方法,创建 ...
- jquery的dom操作之创建节点
1.创建元素节点 创建元素节点就是使用jquery创建纯净的html元素.比如下面 <!doctype html> <html lang="en"> < ...
- jquery的Dom操作查找节点
1.查找元素节点 使用之前的jquery的各种选择器按照语法:"$(选择器)"来定位到文档中的元素,我们定位后得到的是一个jquery对象.我们可以使用juery提供的方法来操作我 ...
- day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、 对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
- JQuery：DOM操作
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构. DO ...
- 2017-6-3 jQuery 事件 DOM操作
1. jQuery 事件: ////hover:相当于相当于把mouseover()mouseout()合二为一//$("#div1").hover(function ()//{/ ...
- jQuery中DOM操作
1.DOM操作的分类 DOM操作一般分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 2.查找节点 2.1查找元素节点 获取元素节点并打印它的文本内容 var $li = $(&q ...
- jquery 进行dom操作
1.使用jqury进行dom操作 (1).新建节点 使用$()包住即可返回值是jquery对象 var $liNode=$("<li></li>") (2) ...
最新文章
- python sqlalchemy中文手册-基于Python的SQLAlchemy的操作
- Android NDK 简单介绍、工具安装、环境配置
- 字符串匹配的KMP算法
- 树形DP入门题目推荐以及解析
- Unity使用陀螺仪控制Camera
- mof格式的文件怎么打开?用什么工具？
- oracle 增长型分区,oracle 11g 分区表创建（自动按年分区）
- 可执行文件组成及内存映射
- 安川g7接线端子图_ABB、KUKA、FANUC、安川四大家族机器人安全回路小结
- xp系统更改计算机名BIOS设置,XP系统如何设置Netbios名|XP系统设置Netbios名的方法...
- python pil怎么调用_python3如何使用pil
- 自动驾驶 11-4: 优化状态估计 Optimizing State Estimation
- Linux总结篇 linux命令 虚拟机 - （二）
- 计算机网络详细笔记【湖科大教书匠，内含B站链接】
- 乐高叉车wedo教案_15乐高教育wedo编程机器人手臂教案
- 参考文献类型标识码--中英文对照
- org.apache.kafka.clients.consumer.OffsetOutOfRangeException: Offsets out of range with no configured
- 候选码、主码、外码、全码、超码
- IOS开发入门（6）－自动布局（１）
- 【AI简报20210604期】意法半导体收购Cartesiam、10个顶级开源AI项目分享
热门文章
- 怎样用VB获得Windows各类系统目录
- 国内首批AI专业毕业生创办的澎思科技，已完成Pre-A轮融资
- 旷视发布3D感知全栈解决方案！现在，AI+3D只差杀手级应用了
- 毕啸南专栏 | 对话王小川：搜狗不是谁的“变量”，是行业主要玩家
- GAN 的渐进式训练方法 PI-REC：手绘草稿迅速重建为完整图像...
- VMware虚拟机环境下配置centos的固定IP并用xshell连接
- 【poj 2891】Strange Way to Express Integers（数论--拓展欧几里德 求解同余方程组 模版题）...
- terminal中常用的rvm指令
- SQL Server中 缓冲和池的不同点
- 子组件调用父组件方法