jQuery 对dom的操作

时间：2022-09-21 21:52:00
<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="jquery-2.2.4.min.js"></script>

		<script>

			$(window).load(function() {

				//获取元素的text,html,val,attr

				$('#bt1').on('click', function() {

					var btn = $('#pID');

					var value = btn.text();

					var html = btn.html();

					var val = $('#inputID').val();

					var href = $('#aID').attr('href');

					alert("text:" + value);

					alert("html:" + html);

					alert("val:" + val);

					alert("href:" + href);

				});

				//改变元素的text, html,attr

				$('#bt2').on('click', function() {

						$('#pChangeID').text("我改了你要咋子");

						$('#pChangeHTMLID').html("改革<a href='http://www.163.com'>网易</a>");

						$('#aAttrID').attr({

							'title': '属性',

							'href': 'http://www.163.com',

						});

					})

					//元素插入 append, preappend,before,after,

				$('#bt3').on('click', function() {

					$('#pAppendID').append('<a href="http://www.163.com">钢结构</a>');

					$('#preAppendID').prepend('<a href="http://www.163.com">preAppend</a>');

					$('#beforeID').before('<a href="http://www.163.com">before</a>');

					$('#afterID').after('<a href="http://www.163.com">after</a>');

					//插入 html元素，jQuery 对象，dom元素

					var html = '<p>html元素的p标签</p>';

					var jQuery = $('<p></p>').text('jQuery Object');

					var domObject = document.createElement('p');

					domObject.innerHTML = 'dom的元素';

					$('body').append(html, jQuery, domObject);

				});

				//元素的删除 remove ,子元素的删除empty

				$('#bt4').on('click', function() {

					$('#removeID').remove();

					$('#emptyID').empty();

				});

			});

		</script>

	</head>

	<body>

		<!--获取元素内容-->

		<button id="bt1">点击获取</button>

		<p id="pID">Jquery获取元素内容<a>html内容</a></p>

		<p><input id="inputID" value="这是一个input" /></p>

		<p><a id='aID' href="http://www.163.com">网易</a></p>

		<!--更改元素内容-->

		<button id="bt2">点击更改</button>

		<p id="pChangeID">奥尔加工加工阿尔</p>

		<p id='pChangeHTMLID'>改变html可以添加标签</p>

		<a id="aAttrID">改变属性</a>

		<!--插入元素内容-->

		<br/>

		<button id="bt3">点击插入</button>

		<p id="pAppendID">插入元素内容</p>

		<p id="preAppendID">插入元素内容</p>

		<p id="beforeID">插入元素内容</p>

		<p id="afterID">插入元素内容</p>

		<!--删除元素的内容-->

		<button id="bt4">点击删除</button>

		<p id="removeID">删除元素内容</p>

		<div id="emptyID" style="width: 200px; height: 200px; border: 1px solid black; background: oldlace;">

			<p>我在div里面，你要咋个</p>

			咋个谔谔

		</div>

	</body>

</html>

　　

jQuery 对dom的操作的更多相关文章

  1. 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  2. jQuery对DOM的操作

    "jQuery中非常重要的部分,就是对DOM的操作!" "jQuery中非常重要的部分,就是对DOM的操作!" "jQuery中非常重要的部分,就是对 ...

  3. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  4. Jquery 对DOM 的操作

     .focus 获取焦点  .blus离开焦点----------------------------------------------------------------------------- ...

  5. jQuery的Dom插入操作图示

  6. Jquery 跨Dom窗口操作

    . 子窗口给父窗口元素赋值 function modifyTheme(id){ $("#parent_dom",window.parent.document).attr(&quot ...

  7. 抛弃jQuery：DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  8. HTML 学习笔记 JQuery（DOM 操作）

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  9. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

随机推荐

  1. Spark connect to Database

    Cannect to Cassandra: 用spark-cassandra-connector, 注意spark,cassandra和connector的版本要配套,Cassandra至少要版本2以 ...

  2. Oracle 课程二之Oracle数据库逻辑结构

    完成本课程的学习后,您应该能够: •数据库总体的逻辑结构 •深入理解数据库最小存储单元block •理解行迁移和行链接 •理解高水位线 •Drop.truncate.delete区别   1.数据库的 ...

  3. 在oc代码中使用swift第三方框架

    swift现在使用越来越多了,一些主流的框架或者效果比较好的demo都陆陆续续使用swift写了.所以,要学会如何在oc的项目中调用swift. 这里主要借助一个桥梁文件,这个桥梁文件一般在你导入sw ...

  4. nanosleep纳秒级延迟

    //函数原型 int nanosleep(struct timespec *req, struct timespec *rem) //参数列表: // req:要求的睡眠时间 // rem:剩余的睡眠 ...

  5. Word查找和替换通配符&lpar;完全版&rpar;

    Word查找栏代码·通配符一览表 序号 清除使用通配符复选框 勾选使用通配符复选框 特殊字符 代码 特殊字符 代码or通配符 1 任意单个字符 ^? 任意单个字符 ? 2 任意数字 ^# 任意数字(单 ...

  6. android 关于LCD背光调节渐变过程引起背光闪烁问题

    如果背光渐变过程会引起背光闪烁,可以采取以下任意一种方法修改:   方法1.减少调节级别时间 http://blog.csdn.net/sergeycao   默认的设计在关闭背光时会有灭屏动画,就是 ...

  7. java容易混淆的15个知识点

    java知识点不多,但是有一些经常会被我们忽略 1.java是强类型的语言,数组也是对象,一旦确定数组的类型,里面就只能存放一个类型的数据. 2.新建的对象都被存放到堆上,如果没有引用,会很快垃圾回收 ...

  8. RNG牛掰！

    2018-05-21 RNG牛掰!Uzi圆梦! 不说了,先去哭了! 2018-07-08 洲际赛后更新,RNG依然牛逼! 2018-08-30 亚运后后更新,UZI加油! 2018-10-22 继续加 ...

  9. Unity3D中Layers和LayerMask解析

    Unity中是用int32来表示32个Layer层.int32表示二进制一共有32位(0—31).在Unity中可编辑的Layer如下图所示:   在Unity中每个GameObject都有Layer ...

  10. 小纪a

    感觉挺好的两段代码:虽然已经存在,但是这是我自己敲出来的,没有照抄,真心话,所以记录下来. 1.菱形代码: #include <stdio.h>void main() { int i, j ...

相关文章