jQuery基本讲解(上)

目录

一.基本介绍

1.基本概念

2.使用步骤

3.选择器

基本选择器

层次选择器

过滤选择器

表单选择器

4.$工具方法

案例:表格隔行换色 

效果展示 

 案例:淘宝商品展示

效果展示 

案例:全选&全不选 

效果展示 


一.基本介绍


1.基本概念

封装了很多JS代码(类库)
jQuery:是一个轻量级的库,拥有强大的选择器等更多优点,吸引了更多开发者去学习使用它
官方地址:http://jquery.com/
优点:可以简化JavaScript开发:选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
是一些前端框架的基础,比如EasyUI,Bootstrap


2.使用步骤

  • .下载jQuery库
    • 开发版本:jquery-3.3.1.js
    • 生产版本:jquery-3.3.1.min.js
      • jQuery版本
        • 1.x版本:能够兼容IE678浏览器(不再更新版本)
        • 2.x版本:不能兼容IE678浏览器(不再更新版本)
        • 3.x版本:不能兼容IE678浏览器,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)
  • .引入:将js文件复制到项目中
  • .使用

自执行函数立执行函数),将函数的声明和调用合并在一起

(function(){
    window.jQuery = window.$ = jQuery
}());

$和$()

  • $代表jQuery对象(Java类),同时也是一个函数对象,即$和jQuery是等价的
  • $()构造了一个jQuery对象。所以,“$()”可以叫做jQuery的构造函数
  • js与jQuery的转换
    • js转换jQuery====》$(js对象)  作用:转换作用 
  • jQuery转换js
    • 1.可以通过下标转换成js对象
  • var $oDiv = $("#oDiv");
     console.log($oDiv[0].innerHTML)
     console.log($oDiv.innerHTML);
    • 2.可以通过get方法+下标获取
  • console.log($oDiv.get(0).innerHTML);

3.选择器


基本选择器

  • ID选择器:#ID  ——单个元素
  • 类选择器:.class  ——元素集合
  • 元素选择器:element  ——元素集合
  • 通配符选择器:*  ——元素集合
  • 群组选择器(并集):selector1,selector2  ——元素集合


层次选择器

  • 后代选择器(交集):selector1 selector2  ——元素集合
  • 子代选择器:>  ——元素集合
  • 兄弟选择器:~  ——元素集合
  • 查找所有元素:空格  --查询子元素


过滤选择器

  • 获取第一个元素:first
  • 最后一个元素:last
  • 获取偶数下标的元素:even
  • 获取奇数下标的元素:odd
  • 获取某一范围元素
  • :gt大于
  • :lt小于
  • 去除所有与给定选择器匹配的元素:not(指定选择器)
  • 匹配一个给定索引值的元素:eq
  • 匹配一个给定索引值的元素:header
  • 匹配所有正在执行动画效果的元素:animated


表单选择器

  • 匹配所有 input, textarea, select 和 button 元素:input
  • 匹配所有的单行文本框:text
  • 匹配所有密码框:password
  • 匹配所有单选按钮:radio
  • 匹配所有复选框:checkbox
  • 匹配所有提交按钮:submit
  • 匹配所有图像域:image
  • 匹配所有重置按钮:reset
  • 匹配所有按钮:button
  • 匹配所有文件域: file
  • 匹配所有不可见元素,或者type为hidden的元素:hidden
  • 表单对象属性
  • 匹配所有可用元素:enable
  • 匹配所有不可用元素:disabled
  • 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option):checked
  • 匹配所有选中的option元素:selected


4.$工具方法

  • 数组和对象操作
    • $.each(object,[callback]):通用例遍方法,可用于例遍对象和数组
    • $.extend([d],tgt,obj1,[objN]):用一个或多个其他对象来扩展一个对象,返回被扩展的对象
    • $.grep(array,fn,[invert]):使用过滤函数过滤数组元素
    • $.sub():可创建一个新的jQuery副本,不影响原有的jQuery对像
    • $.when(deferreds):提供一种方法来执行一个或多个对象的回调函数,延迟对象通常表示异步事件。
    • $.makearray(obj):将类数组对象转换为数组对象
    • $.inarray(val,arr,[from]):确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回 -1 )
    • $.toarray():把jQuery集合中所有DOM元素恢复成一个数组
    • $.merge(first,second):合并两个数组,返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素
    • $.unique(array):删除数组中重复元素。只处理删除DOM元素数组,而不能处理字符串或者数字数组
    • $.parseJSON(json):接受一个JSON字符串,返回解析后的对象
  • 函数操作
    • $.noop:一个空函数
    • $.proxy(function,context):返回一个新函数,并且这个函数始终保持了特定的作用域
  • 测试操作
    • $.contains(container,contained):一个DOM节点是否包含另一个DOM节点
    • $.type(obj):检测obj的数据类型
    • $.isarray(obj):测试对象是否为数组
    • $.isFunction(obj):测试对象是否为函数
    • $.isEmptyObject(obj):测试对象是否是空对象(不包含任何属性)
       

案例:表格隔行换色 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.12.4.js"></script>//引入jQuery文件
		<script type="text/javascript">
			$(function() {
				$("table tr:even").mouseover(function() {//当鼠标移入到指定的要变换颜色的行时,颜色发生变化
					$("table tr:even").css("background", "black");//奇数行的换色(黑色)
				}).mouseout(function(){//当鼠标移出时,颜色发生变化(白色)
					$("table tr:even").css("background", "white");
				})
				
				$("table tr:odd").mouseover(function() {//原理同上
					$("table tr:odd").css("background", "pink");//偶数行的换色(粉色)
				}).mouseout(function(){//当鼠标移出时,颜色发生变化(白色)
					$("table tr:odd").css("background", "white");
				})
			})
		</script>
	</head>
	<body>
		
		<table border="1px" cellspacing="0" cellpadding="0" width=100% id="tab">
			<tr>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
		</table>
	</body>
</html>

效果展示 

 案例:淘宝商品展示

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-size: 12px;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.wrapper {
				width: 250px;
				height: 248px;
				margin: 100px auto 0;
				border: 1px solid pink;
				border-right: 0;
				/* overflow: hidden; */
			}

			.show {
				width: 250px;
				height: 248px;
				margin: 100px auto 0;
				border: 1px solid pink;
				border-right: 0;
				overflow: visible;
			}

			#left,
			#content {
				float: left;
			}

			#left li {
				background: " url(images/lili.jpg) repeat-x";
			}

			#left li a {
				display: block;
				width: 48px;
				height: 27px;
				border-bottom: 1px solid pink;
				line-height: 27px;
				text-align: center;
				color: black;
			}

			#left li a:hover {
				background-image: " url(images/abg.gif)";
			}

			#content {
				border-left: 1px solid pink;
				border-right: 1px solid pink;
			}
		</style>


	</head>

	<body>
		<script src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(function() {
				var aa = $("#left>li");
				// console.log(aa);
				aa.mouseover(function() { //首先获得所有的li标签 并且设置上一个鼠标移入事件
					var myindex = $(this).index(); //拿到我所移入进去的li的下标
					// console.log(myindex);
					var mycontent = $("#content>div").eq(myindex); //根据我所得到的移入进去的li下标去找到相对应的内容
					mycontent.css("display","block");
					// console.log(mycontent);
				})
				
				aa.mouseout(function() { //首先获得所有的li标签 并且设置上一个鼠标移入事件
					var myindex = $(this).index(); //拿到我所移入进去的li的下标
					// console.log(myindex);
					var mycontent = $("#content>div").eq(myindex); //根据我所得到的移入进去的li下标去找到相对应的内容
					mycontent.css("display","none");
					// console.log(mycontent);
				})
				
			})
		</script>
		<div class="wrapper">
			<ul id="left">
				<li><a href="#">女靴</a></li>
				<li><a href="#">雪地靴</a></li>
				<li><a href="#">冬裙</a></li>
				<li><a href="#">呢大衣</a></li>
				<li><a href="#">毛衣</a></li>
				<li><a href="#">棉服</a></li>
				<li><a href="#">女裤</a></li>
				<li><a href="#">羽绒服</a></li>
				<li><a href="#">牛仔裤</a></li>
			</ul>
			<div id="content">
				<div style="display: block;">
					<a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
				</div>
				<div style="display: none;">
					<a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
				</div>
				<div style="display: none;">
					<a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
				</div>
				<div style="display: none;">
					<a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
				</div>
				<div style="display: none;">
					<a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
				</div>
				<div style="display: none;">
					<a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
				</div>
				<div style="display: none;">
					<a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
				</div>
				<div style="display: none;">
					<a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
				</div>
				<div style="display: none;">
					<a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
				</div>

			</div>


		</div>
	</body>

</html>

效果展示 

案例:全选&全不选 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.12.4.js"></script>//引入jQuery文件
		<script type="text/javascript">
	$(function() {
			$("#qx").click(function() { //全选框
				$(".other").prop("checked", $("#qx").prop("checked"));//让其他子复选框的选中状态与全选框一致
			});
			$(".other").click(function() {//其他子复选框
					if ($(".other:checked").length === $(".other").length) {//当其他的子复选框选中的长度等于所有已有的子复选框的长度时
						$("#qx").prop("checked", true);//就把全选框的状态变为选中
					}else {
						$("#qx").prop("checked", false);//否则就把全选框的状态变为未选中
					}
			});
})
		</script>
<body>
		<input name="" id="qx" type="checkbox">全选
		<input name="" class="other" type="checkbox">唱
		<input name="" class="other" type="checkbox">跳</td>
		<input name="" class="other" type="checkbox">rap</td>
</body>

效果展示 

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是辉辉啦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值