JS学习日记--jQuery(1)

最新推荐文章于 2022-06-05 16:05:25 发布

风华正茂呀

最新推荐文章于 2022-06-05 16:05:25 发布

阅读量208

点赞数

分类专栏： JS学习日记文章标签： js jquery javascript html

本文链接：https://blog.csdn.net/weixin_42149770/article/details/104210453

版权

JS学习日记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、什么是jQuery

jQuery是一个基于JavaScript的框架，特点是简洁高效，比原生js代码简直方便了太多倍…
这里放上jQuery的下载页面:https://jquery.com/download/,用的是未压缩的开发版

二、$符

学习jQuery首先就要学习一下什么是$,当我们在学习jQuery的时候，会发现里面到处都在使用$符号.其实在jQuery中，$===jQuery，当我们写代码$===jQuery时，会发现输出结果为true，所以$其实就是jQuery的一个简写
而$最经常的用处就是在页面上选取元素，b=$(“选择器”)，这里的b其实是一个伪数组，是jQuery的一个实例

用法：$(“选择器标签”)，比如$(‘li’),就可以选取页面上所有li标签，

三、可以操作的属性

（1）简介

html==>innerHTML
【作用】:设定和取得元素标签内的innerHTML
【用法】：$().html(“设置的内容”)
【设置时】：覆盖所有匹配元素的内容
【返回值】：返回第一个匹配元素的内容
val==>value
【作用】：设定和取得一个input标签value内容
【用法】：$().val(“设置的内容”)
【返回值】：标签内的value值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>页面属性</title>
		<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				//alert($('li').html());
				//$('li').html('li');
				$('input').keyup(function(){
					var v=$(this).val();
					if(v.slice(-2)!=='px')
					$(this).val(v+'px');
				})
			}
		</script>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<input type="text"  />
	</body>
</html>

prop==>property
【作用】:设置或返回被选元素的属性值
【用法】：$().attr(属性名称，属性值)
【返回值】：被选元素的特定属性的值
attr=>attribute
【注】：attr与prop二者作用方法基本相同，这里来说一说其中的不同点

二者本质不同：prop获取的是dom树节点的属性，而attr获取的是dom元素额对应的文档节点的属性
对于表单元素： checked、selected等属性，即使属性发生了更改，attr也只会显示文档加载时的初始状态。
attr设置的属性值只能是字符串类型，prop可以是任意类型

addClass
【作用】：向匹配的元素添加指定的类名
removeClass
【作用】：从所有匹配的元素中删除全部或者指定的类
hasClass
【作用】：检查匹配的元素是否拥有指定的类
toggleClass
【作用】：从匹配的元素中添加或删除一个类；元素中有这个类则删除，没有则添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>页面属性</title>
		<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				//alert($('li').html());
				//$('li').html('li');
				$('input').keyup(function(){
					var v=$(this).val();
					if(v.slice(-2)!=='px')
					$(this).val(v+'px');
				})
				$('input[type=checkbox]').change(function(){
					console.log($(this).prop('checked'));
				})
				$('div').click(function(){
					$(this).toggle('pause');
					$(this).toggle('play');
				})
			}
		</script>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				cursor: pointer;
			}
			.play{
				background-color: green;
			}
			.pause{
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<!--<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<input type="text"  />
		<label>选中<input type="checkbox"></label>
	-->
	<div class="pause">
		
	</div>
	</body>
</html>

上面是对这些属性的简单的测试

（2）实例：全选框的实现

实现全选按钮，勾选全选按钮的时候，所有的按钮都被勾选，反之勾选所有按钮之后全选按钮被勾选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选框</title>
		<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				$('thead input').change(function(){
					var isChecked=$(this).prop('checked');
					$('tbody input').prop('checked',isChecked);
				})
				$('tbody input').change(function(){
					var allCount=$('tbody input').length;
					var checkCount=$('tbody input:checked').length;
					var isAllChecked=allCount===checkCount;
					$('thead input').prop('checked',isAllChecked);
				})
			}
			
		</script>
		
		<style type="text/css">
			table{
				
				background-color: antiquewhite;
				text-align: center;
				
			}
			
		</style>
	</head>
	<body>
		<table class="table" >
				
		<thead>
		<tr >
			<td><input type="checkbox"></th>
			<th>姓名</th>
			<th>年龄</th>
			<th>爱好</th>
		</tr>
		</thead>
			<tbody>
		<tr>
			<td><input type="checkbox"  /></td>
			<td>关羽</td>
			<td>30</td>
			<td>骑马</td>
		</tr>
		<tr>
			<td><input type="checkbox" /></td>
			<td>玉环</td>
			<td>20</td>
			<td>跳舞</td>
		</tr>
		<tr>
			<td><input type="checkbox" /></td>
			<td>鲁班</td>
			<td>3</td>
			<td>打架</td>
		</tr>
			</tbody>
		</table>
	</body>
</html>

逻辑关系不复杂，就不写注释了…

四、jQuery–动画

show、hide
【作用】：显示，隐藏元素
【注】：可以传参数，格式为毫米，会在这个事件内以宽高透明度三种方式同时显示或隐藏
fadeIn fadeOut
【作用】：以透明度方式显示或隐藏，参数同上
slideDown slideUp
【作用】：像窗帘一样，down拉下，up拉上，参数同上
主要是animate
【用法】：$().animate(属性，时长，动画完成后执行的函数名)
【注】：可以选择多个属性,如{width:300,height:400}
【注】：可以选择调用两次，达成先改变高再改变宽。
因为在jQuery中，当我们调用动画函数时，会创造一个动画队列，之后没调用一次都会在动画队列中加一个新元素，所也可以达成先执行一个动画再执行一个动画的效果
stop
【作用】：把队列中当前正在运行的动画停止，如果有多个动画会继续播放下一个

测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>animate</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: #FF0000;
			}
		</style>
		<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function()
			{
				$('button:first').click(function(){
					//$('div').show();
					//$('div').fadeIn();
					//$('div').slideDown();
					$('div').animate({
						width:500
					},3000).animate({
						height:600
					},3000)
				})
				$('button:eq(1)').click(function(){
					//$('div').hide();
					//$('div').fadeOut(3000);
					//$('div').slideUp();
				$('div').animate({
					width:100
				},3000).animate({
					height:100
				},3000)
				})
				$('button:last').click(function(){
					$('div').stop();
				})
			}
		</script>
	</head>
	<body>
		<button type="button">显示</button>
		<button type="button">隐藏</button>
		<button type="button">停止</button>
		<div >
			
		</div>
	</body>
</html>

五、jQuery–遍历

即通过页面上选取某个节点，访问与这个节点相关联的节点

children()
【作用】：返回被选元素的所有直接子元素，返回值是一个伪数组
parent()
【作用】：返回被选元素的直接父元素
parents()
【作用】：返回被选元素的所有祖先元素，直到文档的根元素（html）
【注】：可以添加参数进行过滤，保证我们取得想要的元素，这个参数就是选中的元素
find()
【作用】：返回被选元素的后代元素，一路向下直到最后一个后代
next()
【作用】：返回前一个元素
prev()
【作用】：返回后一个元素
siblings()
【作用】：返回所有兄弟姐妹元素

测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点遍历</title>
		<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		window.onload=function(){
			var $li2=$('li:eq(1)');
			$li2.children().css('background','red');
			$li2.parent().css('color','yellow');
			$li2.parents('div').append('<h2>新元素</h2>')
			$('div').find('p.vip').css({
				background:'black',
				color:'white'
			})
			$li2.next().css({fontSize:'25px'})
			$li2.prev().css({fontSize:'40px'})
			$li2.siblings().css('fontWeight','bold')
		}
	</script>
	
	</head>
	<body>
		<div id="container">
			<ul class="list">
				<li class="item">
					<p>1</p>
				</li>
				<li class="item">
					<p>2</p>
				</li>
				<li class="item">
					<p class="vip">3</p>
				</li>
				<li class="item">
					<p>4</p>
				</li>
				<li class="item">
					<p>5</p>
				</li>
			</ul>
		</div>
	</body>
</html>

风华正茂呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习日记--jQuery(1)

一、什么是jQuery  jQuery是一个基于JavaScript的框架，特点是简洁高效，比原生js代码简直方便了太多倍… 这里放上jQuery的下载页面:https://jquery.com/download/,用的是未压缩的开发版二、$符学习jQuery首先就要学习一下什么是$,当我们在学习jQuery的时候，会发现里面到处都在使用$符号.其实在jQuery中，...
复制链接

扫一扫