新增选择器/ jQuery加载/ jQuery选择器/ 选择集转移/ jQuery样式操作

新增选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新增选择器</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.querySelector('#div1');
			alert(oDiv);//弹出[object HTMLDivElement],表示选择了该Div

			//如果要选择多个元素用querySelectorAll
			var aLi = document.querySelectorAll('.list li');
			alert(aLi.length);//8
		}
	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</body>
</html>

jQuery加载

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery加载</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		// alert($);//弹出function (a,b){return new n.fn.init(a,b)}表示JQuery已经引进来了,这是它的一个构造函数

		//JS写法
		window.onload = function(){
			var oDiv = document.getElementById('div');
			alert(oDiv.innerHTML);//这是一个div元素
		}

		//jQuery的完整写法
		//比上面JS写法先弹出,因为window.onload是把页面元素加载、渲染完才弹出,而ready()是把所有页面的节点加载完之后就弹出了,不用等渲染了
		/*$(document).ready(function(){
			var $div = $('#div');
			alert('jQuery:' + $div.html());//jQuery:这是一个div元素
		})*/

		//简写方式
		$(function(){
			var $div = $('#div');//CSS样式怎么写,这里就怎么写
			//html()方法相当于原生JS的innerHTML
			alert($div.html() + 'jQuery');
		})
	</script>
</head>
<body>
	<div id="div">这是一个div元素</div>
</body>
</html>

jQuery选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery选择器</title>
	<style type="text/css">
		#div1{
			color: red;
		}
		.box{
			color: green;
		}
		.list li{
			margin-bottom: 10px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//选择元素的规则和css样式相同
			$('#div1').css({color: 'pink'});
			$('.box').css({fontSize: '30px'});
			$('.list li').css({
				background: 'green',
				color: '#fff',
				fontSize: '20px',
				marginBottom: '10px'
			});
		})
	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
	<div class="box">这是第二个div元素</div>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</body>
</html>

选择集转移

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择集转移</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//prev()是同级的上一个元素,prevAll()是同级的上面所有的元素
			//next()是同级的下一个元素,nextAll()是同级的下面所有的元素

			//修改#div1的下一个元素的样式
			$('#div1').next().css({color: 'red'});

			//修改#div1的下面所有p标签设置样式
			$('#div1').nextAll('p').css({color: 'red'});

			//选择上一级的父元素
			/*$('#span01').parent().css({
				width:'100px',
				height:'100px',
				background:'gold'
			})*/

			//获取祖级用$('#span02').parent().parent()不可取,可用closest('div')获取离span02最近的div
			//closest可以选择离自己最近的元素,元素可以是父级,也可以是子集
			$('#span01').closest('div').css({
				width:'200px',
				height:'200px',
				background:'pink'
			})

			/*
			$('.list li')与$('.list').children()的区别:
				原始的选择集不一样
				$('.list li')不能通过end()回到父级
				$('.list').children()可以通过end()回到父级
			*/
			$('.list').children().css({
				background:'gold',
				height:'30px',
				marginBottom:'10px'
			}).end().css({
				background:'green'
			})

			//eq(2)是选择索引等于2的第三个li,siblings()表示除第三个之外的其它兄弟li
			$('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});

			//find()是选择div内的class等于link1的元素
			$('#div2').find('.link1').css({color:'red'});
		})
	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
	<div>这是第二个div元素</div>
	<p>这是一个p元素</p>

	<div>
		<p>
			<a href="#">腾讯网</a>
			<span id="span01">span元素</span>
		</p>
	</div>

	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>

	<ul class="list2">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

	<div id="div2">
		<p>
			<a href="#" class="link1">腾讯网</a>
		</p>
	</div>
</body>
</html>

jQuery样式操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery样式操作</title>
	<style type="text/css">
		.div2{
			color: red;
		}
		.big{
			font-size: 30px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			/*jQuery用同一个函数即可以取值、也可以赋值*/
			//读取样式
			alert($('#div1').css('fontSize'));//16px
			//设置(写入)样式
			$('#div1').css({background:'gold'});

			//增加行间样式
			$('#div1').addClass('big');
			//减少行间样式,多个样式用空格分开
			$('#div1').removeClass('div2 big');
		})
	</script>
</head>
<body>
	<div id="div1" class="div2">这是一个div元素</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_43152725/article/details/86483138
今日推荐