初识jQuery

VaporGas

已于 2024-09-05 15:22:50 修改

阅读量433

点赞数 11

分类专栏：前端文章标签： jquery 前端 javascript ecmascript 学习

于 2024-09-05 15:08:57 首次发布

本文链接：https://blog.csdn.net/weixin_52937170/article/details/141924704

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery简介

jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more

例：实现隔行变色效果，只需一句关键代码

<!DOCTYPE html>
<html>
<head>
    <title>订单表格</title>
</head>
<!-- 导入jQuery库 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
	$(function(){
		$("tr:even").css("background-color","#ccc");
	})
</script>
<body>
    <table border="1px solid red" cellspacing=0>
        <thead>
            <tr>
                <th>序号</th>
                <th>订单号</th>
                <th>商品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1001</td>
                <td>商品A</td>
                <td>$10.00</td>
            </tr>
            <tr>
                <td>2</td>
                <td>1002</td>
                <td>商品B</td>
                <td>$20.00</td>
            </tr>
            <tr>
                <td>3</td>
                <td>1003</td>
                <td>商品C</td>
                <td>$15.00</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

jQuery能做什么

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合

总结：jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持

获取jQuery

进入jQuery官网：jQuery官网

jQuery库文件

jQuery库分开发版和发布版

名称	大小	说明
jquery-1.版本号.js（开发版）	约268KB	完整无压缩版本，主要用于测试、学习和开发
jquery-1.版本号.min.js（发布版）	约91KB	经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

在页面中引入jQuery

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>

jQuery基本语法

例：第一个jQuery程序（为页面加载事件绑定方法）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<title>第一个jQuery程序</title>
		<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
	</head>
	<script type="text/javascript">
	$(document).ready(function(){
		alert("Hello jQuery！");
	});
	</script>
	<body>
	</body>
</html>

$(document).ready()

$(document).ready()与window.onload类似，但也有区别

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){ //执行代码 }) ;

扩展：

DOM模型

浏览器可以把HTML文档显示成可视图形
浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构

把这些节点对象按照一定顺序绘制到浏览器窗口中
- 以对象描述文档的方式就是DOM
- 节点对象就被称为DOM对象

节点类型

元素节点：文档中的所有元素

<h2>……</h2>

文本节点：元素节点内的文本内容

<p>你最喜欢的食品是？ </p>

属性节点：元素节点的子节点

<p title="提示">……</p>

DOM对象和jQuery对象

DOM对象：直接使用JavaScript获取的节点对象

var objDOM=document.getElementById("title"); 

var objHTML=objDOM.innerHTML;

jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

$("#title").html( );
等同于
document.getElementById("title").innerHTML;

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

jQuery初体验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<title>jquery初体验</title>
		<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
	</head>
	<script type="text/javascript">	
		$(function(){
			// alert(document.getElementById("btn").value);
			alert($("#btn").val());
			// alert(document.getElementsByTagName("a").length);
			alert($("a").size());
			alert($(".txt").size());
			// alert(document.getElementById("title").innerHTML);
			alert($("#title").html());
		})
	</script>
	<body>
		<div id="title"><h3>示例2.1</h3></div>
		<a href="www.baidu.com">百度</a>
		<a href="www.163.com">网易</a>
		<input type="text" class="txt" value="1"/>
		<input type="text" class="txt" value="2" />
		<input type="button" id="btn" value="ok" />
	</body>
</html>

jQuery语法结构

语法：

$(selector).action() ;

工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

jQuery代码风格

“$”等同于“ jQuery ”

$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...})

操作连缀书写

 $("h2").css("background-color","#CCFFFF")
.next().css("display","block");

常用语法举例

语法	说明
css("属性","属性值")	为元素设置CSS样式的值
addClass()	为元素添加类样式
next()	获得元素其后紧邻的同辈元素

例1：使用jQuery变换网页效果

实现思路
- 在新建的HTML文档中引入jQuery库
- 使用$(document).ready()创建文档加载事件
- 使用$(选择器)选取所需元素
- 使用css( )方法为所选取的元素添加CSS样式

示例代码：需要自行导入图片和jquery.js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js"></script>
	</head>
	<script>
		$(function(){
			$("h2").click(function(){
				$("h2").css("color","red").css("font-size","50px");
				$("#p1").css('color',"red");
			});
			
			$("#a1").click(function(){
				document.getElementById("p1").innerText= "北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝";
				$("p1").css("font-size","20px").css("color","#e6005c");
				
			})
		})
	</script>
	<body>
		<h2>沁园春·雪</h2>
		<p id="p1">北国风光，千里冰封，万里雪飘。
			望长城内外，惟余莽莽；大河上下，顿失滔滔。
			山舞银蛇，原驰蜡象，欲与天公试比高。
			须晴日，看红装素裹，分外妖娆。
			江山如此多娇...</p>
			<a href="javascript:void(0)" id="a1">点击查看全部</a><br />
			<img src="img/毛选.jpg" alt="毛泽东选集" width="400px" />
	</body>
</html>

例2：使用addClass()为图片添加边框

需求说明：点击页面中的图片后，图片外围加上边框

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js"></script>
	</head>
	<script>
		$(function(){
			$("img").click(function(){
				$("img").css("border","2px solid #CCCCCC");
			})
		})
	</script>
	<body>
		<img src="img/雪花宝宝.png" alt="雪花宝宝" width="400px"/>
	</body>
</html>

例3：制作帮助中心问答特效

需求说明：点击标题后，显示回答的内容，同时标题加上背景色

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js"></script>
		<style>
			p{
				display: none;
			}
		</style>
		<script>
			$(function(){
				$(".h1").click(function(){
					$(".h1").css("color","#000080")
					$(".c1").css("display","block").css("color","#e63995");
				});
				
				$(".h2").click(function(){
					$(".h2").css("color","#000080")
					$(".c2").css("display","block").css("color","#e63995");
				});
				$(".h3").click(function(){
					$(".h3").css("color","#000080")
					$(".c3").css("display","block").css("color","#e63995");
				});
			})
		</script>
	</head>
	<body>
		<h2 class="h1">问：地球的大气层有几层？</h2>
		<p class='c1'>答：地球的大气层通常分为五层，分别是对流层、平流层、中间层、热层和外层空间。</p>
		
		<h2 class="h2">问：人类的DNA和黑猩猩的DNA有多少相似？</h2>
		<p class="c2">答：人类的DNA大约有98.7%与黑猩猩的DNA相似。</p>
		
		<h2 class="h3">问：太阳系中最大的行星是哪一颗？</h2>
		<p class="c3">答：太阳系中最大的行星是木星，它的体积和质量都远远超过其他行星。</p>

	</body>
</html>

each( )简化表单验证

需求：表单项必须全部填写才能提交

未使用jQuery的表单验证（原生的表单验证）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js"></script>
	</head>
	<script>
		function check(){
			var txtArray=document.getElementsByTagName("input");
			for(var j=0;j<txtArray.length;j++){
			if(txtArray[j].type!="submit")
			{
				if(txtArray[j].value==""){
				alert("所有的文本框都必须填写！");
				return false;
			}
				}
		}
}


	</script>
	<body>
			<table width="35%" height="160" border="0" align="center">
				<tr>
					<td height="32" colspan="2" align="center">用户登录</td>
				</tr>
				<tr>
					<td width="29%" height="36">登录名称：</td>
					<td width="71%"><input class="text" type="text"/></td>
				</tr>
				<tr>
					<td height="38">登录密码：</td>
					<td><input class="text" type="password" /></td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="submit" id="btn" value="登录" onclick="check()"/></td>
				</tr>
			</table>
	</body>
</html>

使用jQuery的表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js"></script>
	</head>
	<script>	
		$(function(){
			$("#btn").click(function(){
				$(".text").each(function(){
					if($(this).val()==""){
						alert("所有的文本框都必须填写！");
						return false;
					}
				})
			})
		})

	</script>
	<body>
			<table width="35%" height="160" border="0" align="center">
				<tr>
					<td height="32" colspan="2" align="center">用户登录</td>
				</tr>
				<tr>
					<td width="29%" height="36">登录名称：</td>
					<td width="71%"><input class="text" type="text"/></td>
				</tr>
				<tr>
					<td height="38">登录密码：</td>
					<td><input class="text" type="password" /></td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="submit" id="btn" value="登录" /></td>
				</tr>
			</table>
	</body>
</html>

DOM对象转jQuery 对象

使用$()函数进行转化：$(DOM对象)

var txtName =document.getElementById("txtName"); //DOM对象

var $txtName =$(txtName);   //jQuery对象

var $txtName=$("#txtName");  //简化形式

jQuery对象命名一般约定以$开头在事件中经常使用$(this)，this是触发该事件的对象

jQuery对象转DOM对象

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var $txtName =$ ("#txtName");      //jQuery对象

var txtName =$txtName[0];            //DOM对象

通过get(index)方法得到相应的DOM对象

var $txtName =$("#txtName");        //jQuery对象

var txtName =$txtName.get(0);       //DOM对象

总结

jQuery的基本语法结构是
$(selector).action() ;
常用选择器
ID选择器
标签选择器
类选择器
设置样式的方法
css()
addClass()
DOM对象和jQuery对象可以相互转化

VaporGas

关注

11
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
初识jQuery

jQuery的基础用法；对比原生JavaScript对于DOM元素的操作，jQuery操作DOM元素的优势；快速入门jQuery；理解jQuery对象和JavaScript对象的区别；基于jQuery对象和JS对象的转换
复制链接

扫一扫

专栏目录