JQuery第四章DOM

最新推荐文章于 2023-03-21 19:06:30 发布

LW0512

最新推荐文章于 2023-03-21 19:06:30 发布

阅读量142

点赞数

分类专栏： jq 文章标签： jquery

本文链接：https://blog.csdn.net/LW0512/article/details/108918947

版权

jq 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了JQuery中关于DOM的各种操作，包括获取值、操作属性、遍历、节点插入、包裹、节点操作、CSS方法及元素偏移等，通过实例展示了每种方法的用法。

摘要由CSDN通过智能技术生成

DOM

1：获取值的方法

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

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" name="" id="" value="" />
		<input type="checkbox" name="" id="" value="" />
		<input type="checkbox" name="" id="" value="" />
		<input type="checkbox" name="" id="" value="" />
		<input type="checkbox" name="" id="" value="" />
		<button>全选</button>
		<button>不选</button>
		<button>反选</button>
	</body>
	<script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('button').eq(0).click(function(){
			for(var i=0; i<$('input').length; i++){
				$('input').eq(i).prop('checked',true)
			}
		})
		
		$('button').eq(1).click(function(){
			for(var i=0; i<$('input').length; i++){
				$('input').eq(i).prop('checked',false)
			}
		})
	</script>
</html>

2：操作属性的方法

 attr()  获取/设置元素属性的方法
 attr()还可以设置多个属性 设置多个属性采用对象的模式 attr({'k1':'v1','k2':'v2','k3':'v3'})
 removeAttr() 移除属性方法
 addClass() 	只能向元素添加class值
 removeClass()	删除属性方法
 toggleClass() 添加样式切换方法  （方法中不加 .）
 hasClass()/is()	检查元素是否包含指定的类  （方法中不加 .）

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="a" id="b" name='c'>通天塔</div>
		<p class="as">哈哈哈</p>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
//		alert($('div').attr('id'))
//		$('div').attr('id','bb')
//		$('div').attr({
//			'class':'aaa',
//			'id':'bbb',
//			'name':'ccc'
//		})
//		$('div').removeAttr('class')
//-----------------------------------------------------
//		$('p').addClass('op')//addclass可以往标签后面追加class名
//		$('p').removeClass()
	</script>
</html>

3：遍历方法：

each()   元素的遍历方法
$().each()  用来操做dom
$.each(arr,function(下标，内容){})    比如遍历数组

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var arr=[
		   ['html','css','js','java','c++'],
		   ['html2','css2','js2','java2','c++2'],
		   ['html3','css3','js3','java3','c++3']
		]
		$.each(arr, function(i) {
			if(i<arr.length){
				$.each(arr[i], function(a) {
					if(a<arr[i].length){
						document.write(arr[i][a]+'<br>')
	</script>
</html>

4:节点内部插入

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

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<em>PPP</em>
		</div>
		<p>通天塔</p>
	</body>
	<script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			var op=$('<p>斤斤计较</p>');
			$('div').append(op)
//			$('div').appendTo(op)  这个不对
//			$('div').appendTo($('p'))//p标签包裹了div标签
//			$('p').appendTo($('div'))
//---------------------------------------------------
//			$('div').prepend($('<h1>卡卡卡</h1>'))
			$('p').prependTo($('div'))
		})
	</script>
</html>

5：节点外部插入

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

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>吞吞吐吐</h1>
		<div>
			<em>PPP</em>
		</div>
		<p>通天塔</p>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
//			$('div').after($('<span>哦哦哦</span>'))//在div后面紧跟一个同级标签span
//			$('div').before($('<span>哦哦哦</span>'))
//--------------------------------------------------
//			$('p').insertBefore($('div')

			$('h1').insertAfter($('div'))
		})
	</script>
</html>

6：包裹节点方法

wrap()		向指定元素包裹一层代码
wrap(element)	向指定标签包裹指定标签
unwrap()		移除指定元素上一层标签
wrapAll()		包裹所有的指定元素上
wrap()和wrapAll()的区别是：
wrap()方法是把指定标签看成独立体分别包裹
wrapAll()方法是把指定标签包裹成一个独立体

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>吞吞吐吐</h1>
		<div>吞吞吐吐也一样
			<em>PPP</em>
		</div>
		<p>通天塔1</p>
		<p>通天塔2</p>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
//			$('h1').wrap($('<div></div>'))//向h1标签外面包裹了一层div标签
//			$('em').unwrap()//移除em上面的标签
//			$('p').wrapAll($('<div></div>'))
			$('p').wrap($('<div></div>'))
		})
	</script>
</html>

7：操作节点方法

clone(true/false)		克隆节点     如果克隆里面没有true  那么他是不会克隆事件行为的，有true的话就会克隆事件行为
remove()				删除节点
detach()				删除节点
empty()					删除内容保留标签
replaceWith()			替换节点
replaceAll()			替换节点(先创建再删除)

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button>点击</button>
		<h1>卡卡卡</h1>
	</body>
	<script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$('button').click(function(){
				alert(1234)
			})
			var but=$('button').clone(true);
			$('body').append(but);
			var h=$('h1').clone(false);
			$('body').append(h)
		})
	</script>
</html>

8：其他css方法

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

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				background: blue;
				padding: 20px;
				margin: 40px;
				position: absolute;
				top:300px;
				left:340px;
			}
		</style>
	</head>
	<body style="height: 3000px;">
	<div></div>
	<button style="position: fixed;bottom:0;">点击回到顶部</button>
	</body>
	<script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
//			alert($('div').width())
//			$('div').width('300px')
//			$('div').height('300px')
//			alert($('div').innerWidth())240  宽是200 内边距是20
//			alert($('div').innerHeight())
//			alert($('div').outerWidth())
//			alert($('div').outerHeight())///padding+宽+border
//			alert($('div').outerHeight(true))//padding+宽+margin+border
//------------------------------------------------------------
//			alert($('div').offset().left)
//			alert($('div').offset().top)
//			alert($('div').position().top)
//			alert($('div').position().left)

//			$('div').css({
//				left:'500px',
//				top:'100px'
//			})
//---------------------------------------------------------------
//			$(window).scroll(function(){
//				console.log($(window).scrollTop())//获取到侧边滚动条的值
//			})
//			$('button').click(function(){
//				$(window).scrollTop(0)
//			})
		})
	</script>
</html>

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>

LW0512

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery第四章DOM

DOM1：获取值的方法html()text()val() 既可以获取input里面的值/也可以设置值如果是下拉菜单、单选、多选的情况下 val([''])方法还可以将他们设置成默认选中prop('checked',true) 专属input默认选中方法实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>
复制链接

扫一扫