当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 基本选择器及样式练习

基本选择器及样式练习

2020年07月22日  | 移动技术网IT编程  | 我要评论

// 1.选择器练习

<head>
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<script type="text/javascript" src="../js/jquery.min.js"></script>

</head>

<body>
	<script>
		// jquery入口函数第三种   
		$(function() {
			var div = $('div');
			console.log(div);
			alert(div);

			//通过id获取元素
			var div = $('#myDiv1');
			console.log(div);

			//通过类名获取元素
			var div = $('.continer');
			console.log(div);
			console.log(div.length);
			console.log(div[1]);

			//获取紧接着第一个选择器的元素
			var span1 = $('.div_01 + span');
			console.log(span1);

			//获取第一个选择器之后的同辈元素
			var span2 = $('.div_01 ~ span');
			console.log(span2);

			//获取一个给定索引值的元素
			var divEq = $('div:eq(1)');
			console.log(divEq);

			//获取匹配的第一个元素
			console.log($('li:first'));

			//查找所有未选中的 input 元素
			console.log($("input:not(:checked)"));

			//匹配所有索引值为偶数的元素,从 0 开始计数
			console.log($("tr:even")); 
			//匹配所有索引值为奇数的元素,从 0 开始计数
			console.log($("tr:odd"));
		})
	</script>
	<div id="myDiv1" class="continer"></div>
	<div id="myDiv2" class="continer"></div>
	<div id="wrap">
		<span>div1上的 span标签</span>
		<div class="div_01">第一个div</div>
		<span id="spanDown">div1下的 span标签</span>
		<span id="spanDown1">div1下的 span标签</span>
		<div>第二个div</div>
		<div>第三个div</div>
	</div>

	<ul>
		<li>list item 1</li>
		<li>list item 2</li>
		<li>list item 3</li>
		<li>list item 4</li>
		<li>list item 5</li>
	</ul>

	<input name="apple" />
	<input name="flower" checked="checked" />

	<table>
		<tr>
			<td>Header 1</td>
		</tr>
		<tr>
			<td>Value 1</td>
		</tr>
		<tr>
			<td>Value 2</td>
		</tr>
	</table>
</body>

//2.样式练习

<head>
	<meta charset="UTF-8">
	<title>练习样式操作</title>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<style>
		.wrap1 {
			width: 50px;
			height: 50px;
			border: 2px solid yellow;
		}
		
		.wrap2 {
			width: 500px;
			height: 500px;
			background: red;
		}
	</style>

</head>

<body>
	<script>
		$(function() {
					//首先获取元素,分开设置样式
					var div = $('.wrap');
					div.css('width', '200px');
					div.css('height', '200px');
					div.css('border', '1px solid red');

					//一起设置样式
					div.css({
						width: '300px',
						height: '300px',
						border: '1px solid blue',
						boxShadow: '5px 5px 10px 5px black',

						//给选中的元素添加class类名;
						$('.wrap').addClass('wrap1');

						//把选中的元素的class类名删除;
						$('.wrap').removeClass('wrap1');

						// 对设置和移除所有 wrap类的 wrap2 类进行切换:
						$('.wrap').toggleClass('wrap2');

					});
	</script>

	<div class="wrap">
	</div>
</body>

本文地址:https://blog.csdn.net/weixin_47720233/article/details/107492402

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网