精通jQuery: 快速上手与实战技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46483221/article/details/106603659

jQuery是最优秀，使用最广的JS函数库，它能帮我们程序员简化DOM查询及DOM操作，轻松实现动画效果。在世界前10000个访问最多的网站中，有超过 55 %在使用jQuery。本视频全面深入讲解jQuery库的使用技术，以及基于jQuery的项目开发技巧。

1.伪数组和数组的判别

方法：console.log($数组名 instanceof Array)//结果为false即为伪数组

伪数组含有的方法：length属性，object对象，下标属性index
数组的特别方法：pop(),push(),splice(),forEach

2.属性和方法

在这里插入图片描述

3.选择器分类(不会就查手册)

1）基本选择器
$(’#id’).css(‘color’,‘red’);
2）层次选择器
$(‘div>span’).css();//div下面的span
3）过滤选择器
在这里插入图片描述
1.选择第一个div

$('div:first').css('color','red');

2.选择最后一个div

$('div:last').css('color','red');

3.选择所有div属性不为box的

$('div:not(.box)').css('color','red');

4.选择第二个和第三个li

$('div:gt(0):lt(3)').css('color','red');

5.选择内容为BBBBB的li

$('li:contains("BBBBB")').css('color','red');

6.选择属性为title等于hello的li元素

$('li[title]').css('color','red');

4）表单选择器
这个没有什么好讲的

5）点击按钮添加文本框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	</head>
	<body>
		
		<div id="">
		<button id="btn">测试</button><br />
		<input type="type" name="ip1" id="ip1" value="" /><br />
		<input type="type" name="ip2" id="ip2" value="" /><br />
		</div>
		<script type="text/javascript">
			$(function(){
				$('#btn').click(function(){
					$('<input type="type" name="ip" id="ip" value="" /><br />').appendTo('div')
				})
			});
			$('#btn').css('background','red');
		</script>
	</body>
</html>

4. $工具方法

4.1 $.each();遍历数组或者对象中的数组
4.2 $.trim();去除字符串两边的空格
4.3 $.type(obj);得到数据的类型
4.4 $.isArray(obj);判断是否为数组
4.5 $.isFunction(obj):判断是否为函数
4.6 $.parseJSON(json);解析字符串是否转换成js对象

5.多table点击切换效果

重点语句：链式调用，读写合一，隐式遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#tab li{
				list-style: none;
				width: 80px;
				height: 40px;
				line-height: 40px;
				cursor: pointer;
				float: left;
			}
			#container{
				position: relative;
				
			}
			#content1,#content2,#content3{
				width:180px;
				height: 270px;
				position: absolute;
				padding: 30px;	
				top: 40px;
			}	
			#tab1,#content1{
				background-color: yellow;
			}
			#tab2,#content2{
				background-color: gray;
			}
			#tab3,#content3{
				background-color: coral;
			}
		</style>
	</head>
	<body>
		<ul id="tab">
			<li id="tab1" value="1">A区</li>
			<li id="tab2" value="2">B区</li>
			<li id="tab3" value="3">C区</li>
		</ul>
		<div id="container">
			<div id="content1" style="display:none;background-color: yellow;">
				欢迎来到A区
			</div>
			<div id="content2" style="display: none;background-color: gray;">
				欢迎来到B区
			</div>
			<div id="content3" style="display: none;background-color: coral;">
				欢迎来到C区
			</div>
		</div>
		<script type="text/javascript">
			var $contents=$('#container>div');
			$('#tab>li').click(function(){
				$contents.css('display','none');
				var index=$(this).index();
				$contents[index].style.display='block';
			})
		</script>
	</body>
</html>

小结：
在这里插入图片描述