jQuery基础入门

最新推荐文章于 2024-08-14 15:45:18 发布

菲仔yo

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量1k

点赞数 3

分类专栏： jQuery 文章标签： jquery javascript 原型模式

本文链接：https://blog.csdn.net/m0_67331668/article/details/123495539

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

大家好，没错，时隔几天我又又又来分享了，今天给大家带来的是jQuery的一些基础知识

一.什么是jQuery？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

二.为什么要学习？

查看jQueryLOGO：write less，do more

为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

三.哪些情况下使用？

中大型网页开发

是一些前端框架的基础，比如EasyUI,Bootstrap

四.怎么用？

比如：点击按钮获取输入框中的值（JS对比jQuery）

使用jQuery步骤：

下载jQuery库
引入：将js文件复制到项目中
使用

五.下载jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可以从 jQuery.com 下载。

提示：您可以把下载文件放到与页面相同的目录中，这样更方便使用。

六.jQuery选择器

1.基本选择器

2.层次选择器

3.过滤选择器

4.表单选择

七.实例

一定要引入jQuery

<!-- 引入jQuery -->
<script src="js/jquery-3.5.1.js"></script>

《1》点击改变颜色

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>改变颜色</title>
		<style>
			.conainer{
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
		<!-- 引入jQuery -->
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<div class="conainer"></div>
		<div class="conainer"></div>
		<div class="conainer"></div>
		<div class="conainer"></div>
		<div class="conainer"></div>
		<div class="conainer"></div>
		<div class="conainer"></div>
		<button onclick="fn2()">点我改变颜色</button>
		<script>
			function fn01(){
				let ds=document.getElementsByClassName("conainer")
				//多个元素
				for(let d of ds){
					d.style.background="burlywood"
				}
			}
			
			//jquery 不是一门语言
			//jquery 是js的框架（是js的升级+简化）
			function fn2(){
				//$就是jQuery
				let div=$(".conainer")
				//修改样式
				div.css("background","blue")
			}
		</script>
	</body>
</html>

《2》

jquery本身就支持css选择器

console.log($("#aa"))
console.log($(".bb").eq(0))

css是jQuery的方法只有jQuery对象才能调用

$("bb")[0]拿出来的js中的正常对象

如何将js对象变成jQuery：$(xx)

改变颜色：

$($(".cc")[0]).css("background","blue")

改变字体颜色：

//div中的第一级p标签（子标签）
$("div p").css("color","white")

效果图如下：

所有代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style >
			div{
				width: 100px;
				height: 100px;
				display: inline-block;
				background: #ADFF2F;
			}
		</style>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<p>后天zzz</p>
		<div id="aa">
			<p>今天哈哈</p>
			<p>明天嘻嘻</p>
		</div>
		<div class="bb"></div>
		<div class="cc"></div>
		<script>
			//jquery本身就支持css选择器
			console.log($("#aa"))
			console.log($(".bb").eq(0))
			//css是jQuery的方法  只有jQuery对象才能调用
			//$("bb")[0]拿出来的js中的正常对象
			//如何将js对象变成jQuery：$(xx)
			//$($(".cc")[0]).css("background","blue")
			
			console.log($("div"))
			
			console.log($("*"))
			
			//div中的第一级p标签（子标签）
			$("div p").css("color","white")
		</script>
		<div >
			<a href=""></a>
			<p>
				<a href=""></a>
			</p>
		</div>
	</body>
</html>

《3》表格颜色的设置

第一行（两种写法）

$("tr:first").addClass("aa")
$("tr").first().addClass("aa")

最后一行

$("tr").last().addClass("aa")

奇数偶数行（添加gt(0)是为了第一行不添加颜色）

//奇数
$("tr:gt(0):odd").addClass("aa")
//偶数
$("tr:gt(0):even").addClass("bb")

大于/小于

//大于
//$("tr:gt(3)").addClass("bb")
//小于
//$("tr:lt(3)").addClass("bb")

效果图如下：

全部代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格颜色</title>
		<style type="text/css">
			.aa{
				background: aquamarine;
				color: white;
			}
			.bb{
				background: palegreen;
				color: orange;
			}
		</style>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<table border>
			<tr>
				<td>商品名字</td>
				<td>商品价格</td>
				<td>商品编号</td>
				<td>商品描述</td>
			</tr>
			<tr>
				<td>无敌大苹果</td>
				<td>$99.0</td>
				<td>10001</td>
				<td>无敌好吃，无敌棒棒的大西瓜</td>
			</tr>
			<tr>
				<td>无敌大苹果</td>
				<td>$99.0</td>
				<td>10001</td>
				<td>无敌好吃，无敌棒棒的大西瓜</td>
			</tr>
			<tr>
				<td>无敌大苹果</td>
				<td>$99.0</td>
				<td>10001</td>
				<td>无敌好吃，无敌棒棒的大西瓜</td>
			</tr>
			<tr>
				<td>无敌大苹果</td>
				<td>$99.0</td>
				<td>10001</td>
				<td>无敌好吃，无敌棒棒的大西瓜</td>
			</tr>
			<tr>
				<td>无敌大苹果</td>
				<td>$99.0</td>
				<td>10001</td>
				<td>无敌好吃，无敌棒棒的大西瓜</td>
			</tr>
			<tr>
				<td>无敌大苹果</td>
				<td>$99.0</td>
				<td>10001</td>
				<td>无敌好吃，无敌棒棒的大西瓜</td>
			</tr>
		</table>
		<script>
			//第一个（两种写法）
			//$("tr:first").addClass("aa")
			//$("tr").first().addClass("aa")
			
			//最后一个
			//$("tr").last().addClass("aa")
			
			//奇数
			$("tr:gt(0):odd").addClass("aa")
			//偶数
			$("tr:gt(0):even").addClass("bb")
			
			//大于
			//$("tr:gt(3)").addClass("bb")
			//小于
			//$("tr:lt(3)").addClass("bb")
			
			//从1开始取4行
			//$("tr:gt(1):lt(4)").addClass("bb")
		</script>
	</body>
</html>

好啦，今天就到这里啦，下次再见

菲仔yo

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础入门

大家好，没错，时隔几天我又又又来分享了，今天给大家带来的是jQuery的一些基础知识一.什么是jQuery？jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是&ldquo;write Less，Do More&rdquo;，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化H...
复制链接

扫一扫

专栏目录