jQuery第四章DOM

最新推荐文章于 2022-10-21 13:33:39 发布
最新推荐文章于 2022-10-21 13:33:39 发布
阅读量100 收藏
点赞数
分类专栏： jquery 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/t5555666/article/details/108765899
版权

第四章DOM

1：获取值的方法

html()
text()
val()  既可以获取input里面的值/也可以设置值
*  * 如果是下拉菜单 、单选、多选的情况下  val([''])方法  还可以将他们设置成默认选中
prop('checked',true)  专属input默认选中方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		苹果：<input type="checkbox" name="" id="" value="苹果"/>
		香蕉：<input type="checkbox" name="" id="" value="" />
		西瓜：<input type="checkbox" name="" id="" value="" />
	</body>
	<script type="text/javascript">
//		$('input').prop('checked',true)
//		$('input').eq(0).val(['苹果'])
	</script>
</html>

2：操作属性的方法

attr()  获取/设置元素属性的方法
**  attr()还可以设置多个属性 设置多个属性采用对象的模式 attr({'k1':'v1','k2':'v2','k3':'v3'})
removeAttr() 移除属性方法

addClass() 	只能向元素添加class值
removeClass()	删除属性方法

toggleClass() 添加样式切换方法  （方法中不加 .）

hasClass()/is()	检查元素是否包含指定的类  （方法中不加 .）

<body>
		<ul>
			<li class="a" id="b">000000000000</li>
			<li>111111111111</li>
			<li>222222222222</li>
			<li>333333333333</li>
			<li>444444444444</li>
			<li>555555555555</li>
			<li>666666666666</li>
		</ul>
	</body>
	<script type="text/javascript">
//		alert($('li').eq(0).attr('id'))
//		$('li').eq(0).attr('id','box')
//		$('li').eq(1).attr({'class':'box1','id':'box2','name':'box3','style':'color:red'})
//		$('li').eq(0).removeAttr('class')
//		$('li').eq(3).addClass('box');
//		$('li').eq(0).removeClass();
		
	</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.bl{
				width: 100px;
				height: 100px;
				background: #000;
			}
			.red{
				width: 100px;
				height: 100px;
				background: red;
			}
			.blue{
				width: 100px;
				height: 100px;
				background: blue;
			}
		</style>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="bl"></div>
	</body>
	<script type="text/javascript">
//	alert($('div').hasClass('bl'))
		$('div').click(function(){		
			if($(this).hasClass('red')){
				$(this).toggleClass('blue')
			}else{
				$(this).toggleClass('red')
			}
		})
	</script>
</html>

3：遍历方法（each） ：节点内部插入

var box=$('<div id="box">你好</div>')	创建一个标签
append()								插入一个标签
appendTo()								插入到标签里面的后面
prepend('插入一对标签')					           插入到标签里面的前面
prependTo()								插入到标签里面的后面

each遍历

		<script type="text/javascript">
//		$(function(){
//			$('li').each(function(){
//				alert($(this).index())
//			})
//		})	
		$(document).ready(function(){
			$('li').each(function(){
				alert($(this).index())
			})
		})
	</script>
	</head>
	<body>
		<ul>
			<li>000000000000</li>
			<li>111111111111</li>
			<li>222222222222</li>
			<li>333333333333</li>
			<li>444444444444</li>
			<li>555555555555</li>
			<li>666666666666</li>
		</ul>
	</body>

内部插入

	<body>
		<div>大哥</div>
		<p>大姐</p>
	</body>
	<script type="text/javascript">
		var h=$('<h1>小哥哥哥</h1>');
		$('body').append(h)
//		$('div').appendTo($('p'))
//		$('div').appendTo(h)
//		$('div').prepend('<p>小姐姐</p>')
//		$('div').prependTo('p')
//		$('div').append(function(i,html){
//			return '<h1>好傻啊</h1>'+i+html;
//			//i 是下标
//			//html 是被插入标签的内容
//		})
	</script>

5：节点外部插入

after()		向指定元素后插入一个同级标签
before()	向指定元素前插入一个同级标签
insertAfter()将指定元素移入指定元素后面
insertBefore()将指定元素移入指定元素后面

	<body>
		
		<div>真冷！！！</div>
		<em>卡卡卡</em>
		<p>呵呵哈哈哈</p>
	</body>
	<script type="text/javascript">
//		$('div').after('<h1>太冷了</h1>')
//		$('div').before('<span>美丽动人</span>')
//		$('div').after($('em'))
//		$('div').insertBefore('<p>哈哈哈哈</p>')//这个写法不行
//		$('div').insertBefore($('em'))//这个写法不行
//		$('div').insertAfter('em')
//		$('p').insertBefore('div')
	</script>

6：包裹节点方法

wrap()		向指定元素包裹一层代码
wrap(element)	向指定标签包裹指定标签
unwrap()		移除指定元素上一层标签
wrapAll()		包裹所有的指定元素上

wrap()和wrapAll()的区别是：
wrap()方法是把指定标签看成独立体分别包裹
wrapAll()方法是把指定标签包裹成一个独立体

<body>
		<div>
			<p>
				<span>啦啦啦啦</span>
			</p>
		</div>
		<h1></h1>
	</body>
	<script type="text/javascript">
//		$('span').wrap('<em></em>')
//		$('span').wrap('<em>吞吞吐吐</em>')
//		$('span').wrap('<em><span></span></em>')
//		$('span').wrap($('h1'))
//		$('span').unwrap().unwrap();
	</script>

<body>
		
		<em>哈哈哈哈1</em>
		<span>呵呵呵</span>
		<em>哈哈哈哈2</em>
	</body>
	<script type="text/javascript">
//		$('em').wrap('<p></p>')
		$('em').wrapAll('<p></p>')
	</script>

7：操作节点方法

clone(true/false)		克隆节点    
		** 如果克隆里面没有true  那么他是不会克隆事件行为的，有true的话就会克隆事件行为

eg：

<body>
		<button>点击</button>
	</body>
	<script type="text/javascript">
		$('button').click(function(){
			alert('冷啊')
		})
		var btn=$('button').clone(true);
		$('body').append(btn)
	</script>

remove()				删除节点
detach()				删除节点
empty()					删除内容保留标签
replaceWith()			替换节点
replaceAll()			替换节点(先创建再删除)

	<body>
		<div>
			<p>
				<button>点击</button>
			</p>
		</div>
		<em class="aa"></em>
	</body>
	<script type="text/javascript">
//		$('p').detach();
//		$('button').empty();
//		$('p').replaceWith('<h1></h1>')
//		$('button').replaceWith($('em'))
//		$('button').replaceAll('<span>7777777</span>')//这个写法不行

//		$('<span>7777777</span>').replaceAll('button')
//		$('<span>7777777</span>').replaceAll('.aa')
	</script>

8：其他css方法

width()			获取/设置元素的宽度
height()		获取/设置元素的高度
innerWidth()	获取元素的宽,包含内边距（padding）
innerHeight()	获取元素的高,包含内边距（padding）
outerWidth()	获取元素的宽,包含内边距（padding）+边框（border）
**outerWidth(true)	获取元素的宽,包含内边距（padding）+边框（border）+外边距（margin）
outerHeight()	获取元素的高,包含内边距（padding）+边框（border）

	<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				padding: 50px 100px;
				margin: 50px 100px;
				background: red;
				border: 1px solid yellow;
			}
		</style>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div></div>
	</body>
	<script type="text/javascript">
//		alert($('div').width())
//		alert($('div').height())
//		alert($('div').innerWidth())
//		alert($('div').innerHeight())
//		alert($('div').outerWidth())
//		alert($('div').outerWidth(true))
//		alert($('div').outerHeight(true))

	</script>

9：元素偏移方法

offset()		元素相对可视窗口的偏移位置
position()		元素相对父元素的偏移位置
scrollTop(val)		获取/设置垂直滚动条的值
scrollLeft(val)		获取/设置横滚动条的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width:200px;
				height: 200px;
				background: red;
				position:relative;
				margin: 50px 100px;
			}
			span{
				display: block;
				position: absolute;
				top:50px;
				left:50px;
				width: 130px;
				height: 130px;
				border: 1px solid yellow;
			}
		</style>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div>
			<span>哈哈</span>
		</div>
	</body>
	<script type="text/javascript">
//		alert($('div').offset())//[object Object]
//		alert($('div').offset().top)
//		alert($('div').offset().left)
//		alert($('div').offset().bottom)//只有X和Y轴值，没有bottom和right值
//		alert($('div').position().left)
//		alert($('span').position().left)
//		alert($('span').position().top)
	</script>
</html>


<body style="height: 2000px;">
		<div>
		
		</div>
		
	</body>
	<script type="text/javascript">


//		window.οnscrοll=function(){
//			console.log($(window).scrollTop());
//		}

		$('div').click(function(){
			$(window).scrollTop(0);
		})
小涛涛啊！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【练习向】jQuery基础教程第四版章节源码——Book05_jQuery_操作DOM
11-28
【练习向】jQuery基础教程第四版章节源码——Book05_jQuery_操作DOM
DOM 对象所有属性方法介绍，看这一篇就够了！
酷奇的博客
02-22 2238
注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。这些集合属性都源自于 0 级 DOM。很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。
JavaScript之DOM常用属性及方法详解
发果叁
10-21 5278
自定义属性目的∶是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute ('属性〉获取。element.getAttribute(‘属性’)//自己定义的element.setAttribute(‘属性’,‘值’)//主要针对自定义属性removeAttribute(‘属性’)但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性设置H5自定义属性H5规定自定义属性data-开头做为属性名并且赋值。
学习DOM
m0_74217314的博客
10-11 299
DOM的学习
DOM（文档对象模型）
mengfanshaoxia的博客
02-15 2011
1、DOM是什么 DOM（Document Object Model，文档对象模型），是用来呈现以及与任意 HTML 或 XML文档 交互的API（Application Program Interface，应用程序接口）。DOM 是载入到浏览器中的文档 模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如：页面元素、字符串或 注释等等）。 DOM 是万维网上使用最为广泛的 API 之一，它允许运行在浏览器中的代码访问文件中的节点并 与之交互。节点可以被创建，移动或修改
JS DOM
m0_71912776的博客
08-02 122
document.getElementsByName("name名")3TAGdocument.getElementsByTagName("标签名");例如varobj=document.getElementsByTagName("p");1IDdocument.getElementById("ID名");例如varobj=document.getElementsById("one");2．DOM对象(将html的元素转成的JS对象)...
第四章 WEB004-jQuery篇1
08-08
第四章 WEB04_jQuery篇今日任务使用JQuery完成页面定时弹出广告(DOM转换和选择器)使用JQuery完成表格的隔行换色使用JQuery完成复选框
jQuery jQuery第四版PDF
06-09
第7章和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加深入地探讨了jQuery的各种特性及一些高级技术。附录A特别讲解了JavaScript中闭包的概念，以及如何在jQuery中...
JQuery在页面中添加和除移DOM示例代码
12-10
1.before（）:将新节点添加到前面 2.after（）:将节点添加到低部 3.prepend（）:把节点变成第一个节点 4.append（）:把新节点添加到末端,与appendTo（）效果相同，只是语法上有差异 5.remove()：除移节点 示例： ...
jQuery基础教程 第四版
08-12
第 7 章 和第 8 章介绍了 jQuery UI、jQuery Mobile 及利用 jQuery 强大的扩展能力开发自定义插件。随后的几章更 加深入地探讨了 jQuery 的各种特性及一些高级技术。附录 A 特别讲解了 JavaScript 中闭包的概念，...
DOM常用属性和方法
10-21
DOM 入门手册，， 有兴趣的朋友可以下来看看
DOM属性总结
qq_59721336的博客
10-11 989
firstChild 第一个子节点 （文本节点+元素节点）firstElementChild 第一个子元素节点lastChild 最后一个子节点 （文本节点+元素节点）lastElementChild 最后一个子元素节点1.获取元素的属性值1) // element.属性;获取内置属性(元素本身自带的属性)2) // element.getAttribute('属性');主要获得自定义的属性(标准),程序员自定义的属性2.设置元素的属性值1) // element.属性='值';
15.DOM(文档对象模型)-自定义属性操作
Mr_LiuP的博客
02-22 1280
JavaScript -DOM 自定义属性操作
DOM元素的三种属性
三三
12-05 6064
系统属性，自定义属性，临时属性
DOM常见属性
哪有那么可爱的小蝈蝈的博客
10-20 865
DOM常见属性 以下属性必须保证DOM已经添加在页面中，如果没有添加则无法调用 client(客户) offset(偏移) scroll(滚动条) 宽 clientWidth offsetWidth scrollWidth 高 clientHeight offsetHeight scrollHeight client(客户) offset(偏移 scroll(滚动条) 位 clientLeft offsetLeft scrollLeft 置 clien
DOM属性
m0_71859241的博客
08-09 1557
DOM
dom 常用属性
qq_43643182的博客
06-08 1483
DOM常用属性： <!-- 1.nodeName 属性 :节点名称 nodeName 是只读的 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 与属性名相同 文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是 #document 2.nodeValue 属性：节点的值。 元素节点的 nodeValue 是 undefined 或 null 文本节点的 nodeValu
DOM增删改操作
407指导员
10-31 331
dom的增删改操作 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>dom增删改</title> <link rel="stylesheet" type="text/css" href="style/css2.css"/&gt
实现表格的增删改查 在 jquery 中使用 dom 操作节点,对页面中的表格实现增、删、
最新发布
10-12
在jquery中，我们可以使用DOM操作来实现对页面中的表格进行增删改查。 1. 增加表格行: 可以使用.append()方法来实现，在表格中添加一行。例如，假设我们有一个id为"myTable"的表格，可以通过以下代码添加新的一行：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值