jQuery（一）

最新推荐文章于 2024-06-14 11:01:38 发布
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量99 收藏 1
点赞数 1
文章标签： jquery js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhr_beyond/article/details/114991583
版权

jQuery（一）

1.jQuery下载使用

官网地址 https://jquery.com/.
在这里插入图片描述
在这里插入图片描述

复制粘贴

在这里插入图片描述
在这里插入图片描述

引入js文件写一个小案例吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<script src="jquery.min.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script>
			$('div').hide();
		</script>
	</body>
</html>

在这里插入图片描述

把js代码移动到div上方发现不会隐藏，所以jQuery的入口函数是什么呢

2.jQuery入口函数

$ (function (){
	... // 此处是页面 DOM 加载完成的入口
});
$ (document).ready(function(){
	... // 此处是页面 DOM 加载完成的入口
});

推荐第一种写法

3.jQuery顶级对象 $

1. $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $

2. $ 是 jQuery 的顶级对象，相当于原生 JavaScript 的 window 。把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法。

4.jQuery对象和DOM对象

1. DOM 对象：用原生js获取过来的对象就是 DOM 对象

2. jQuery 对象：用jQuery方式获取过来的对象是 jQuery 对象。通过 $ 把 DOM 元素进行了包装，以伪数组的方式进行存储

3. jQuery 对象只能使用 jQuery 方法， DOM 对象则使用原生的 JavaScript 属性和方法

DOM 对象与 jQuery 对象之间是可以相互转换的

因为原生 js 比 jQuery 更大，原生的一些属性和方法 jQuery 没有封装，要想使用这些属性和方法需要 jQuery 对象转换为 DOM 对象才能使用。

1. DOM 对象转换为 jQuery 对象
$('div')
2. jQuery 对象转换为 DOM 对象（两种方式）
$('div')[index] index是索引号
$('div').get(index) index是索引号

5.jQuery常用的API

（1）jQuery 基础选择器

名称用法描述
ID选择器$("#id")获取指定ID的元素
全选择器$(’*’)匹配所有元素
类选择器$(".class")获取同一类class的元素
标签选择器$(“div”)获取同一类标签的所有元素
并集选择器$(“div,p,li”)选择多个元素
交集选择器$(“li.current”)交集元素

（2）jQuery 层级选择器

名称用法描述
子代选择器$(“ul>li”)获取亲儿子层级元素
后代选择器$(“ul li”)获取ul下的所有元素

（3）隐式迭代

jQuery设置样式

$('div').css('属性','值')

遍历内部 DOM 元素（伪数组形式存储）的过程叫做隐式迭代

（4）jQuery 筛选选择器

语法用法描述
:first$(“li:first”)获取第一个li元素
:last$(“li:last”)获取最后一个元素
:eq(index)$(“li:eq(2)”)获取到的li元素中，选择索引号为2元素，索引号index从0开始
:odd$(“li:odd”)获取到的li元素中，选择索引号为奇数的元素
:even$(“li:even”)获取到的li元素中，选择索引号为偶数的元素

（5）jQuery 筛选方法

语法用法描述
:first$(“li:first”)获取第一个li元素
:last$(“li:last”)获取最后一个元素
:eq(index)$(“li:eq(2)”)获取到的li元素中，选择索引号为2元素，索引号index从0开始
:odd$(“li:odd”)获取到的li元素中，选择索引号为奇数的元素
parent()$(“li”).parent();查找父级
children(selector)$(“ul”).children(“li”)相当于$(“ul>li”)，最近一级（亲儿子）
find(selector)$(“ul”).find(“li”)相当于$(“ul li”)，后代选择器
siblings(selector)$(".first").siblings(“li”)查找兄弟节点，不包括自己本身
nextAll([expr])$(".first").nextAll()查找当前元素之后所有的同辈元素
prevAll([expr])$(".last").prevAll()查找当前元素之前所有的同辈元素
hasClass(class)$(‘div’).hasClass(“protected”)检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)$(“li”).eq(2)相当于$(“li : eq(2)”) , index 从0开始

案例：新浪下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style-type: none;
			}
			
			a {
				text-decoration: none;
				font-size: 14px;
			}
			
			.nav {
				margin: 100px;
			}
			
			.nav>li {
				position: relative;
				float: left;
				width: 80px;
				height: 41px;
				text-align: center;
			}
			
			.nav li a {
				display: block;
				width: 100%;
				height: 100%;
				line-height: 41px;
				color: #333;
			}
			
			.nav>li>a:hover {
				background-color: #eee;
			}
			
			.nav ul {
				display: none;
				position: absolute;
				top: 41px;
				left: 0;
				width: 100%;
				border-left: 1px solid #FECC5B;
				border-right: 1px solid #FECC5B;
			}
			
			.nav ul li {
				border-bottom: 1px solid #FECC5B;
			}
			
			.nav ul li a:hover {
				background-color: #FFF5DA;
			}
		</style>
		<script src="jquery.min.js"></script>
	</head>
	<body>
		<ul class="nav">
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="">私信</a>
					</li>
					<li>
						<a href="">评论</a>
					</li>
					<li>
						<a href="">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="">私信</a>
					</li>
					<li>
						<a href="">评论</a>
					</li>
					<li>
						<a href="">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="">私信</a>
					</li>
					<li>
						<a href="">评论</a>
					</li>
					<li>
						<a href="">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="">私信</a>
					</li>
					<li>
						<a href="">评论</a>
					</li>
					<li>
						<a href="">@我</a>
					</li>
				</ul>
			</li>
		</ul>
		<script>
			$(function(){
				//鼠标经过
				$(".nav>li").mouseover(function(){
					// this 当前元素 show显示 hide隐藏
					$(this).children("ul").show();
				});
				//鼠标离开
				$(".nav>li").mouseout(function(){
					$(this).children("ul").hide();
				})
			})
		</script>
	</body>
</html>

在这里插入图片描述

（6）jQuery的排他思想

当前元素设置样式，其他兄弟元素清除样式

案例： 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<script src="jquery.min.js"></script>
	</head>
	<body>
		<button>1</button>
		<button>2</button>
		<button>3</button>
		<button>4</button>
		<button>5</button>
	</body>
	<script>
		$(function(){
			$("button").click(function(){
				// 当前元素变化背景颜色
				$(this).css("background","pink");
				// 其他兄弟取消背景颜色
				$(this).siblings("button").css("background","");
			})
		})
	</script>
</html>

在这里插入图片描述
案例：淘宝服饰精选
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<style>
			* {
				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;
			}
			
			#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>
		<script src="jquery.min.js"></script>
		<script>
			$(function(){
				//经过li
				$("#left li").mouseover(function(){
					//获得索引号
					var index = $(this).index();
					// 右侧盒子对应索引号显示图片
					$("#content div").eq(index).show();
					//隐藏其他图片
					$("#content div").eq(index).siblings().hide();
				})
			})
		</script>
	</head>
	<body>
	    <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>
	                <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
	            </div>
	        </div>
	    </div>
	</body>
</html>

在这里插入图片描述

红人日天
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery案例
WangZhang_521的博客
05-06 2600
01-精品展示案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
jQuery 选择器：淘宝精品服饰
赚钱养自个儿的博客
05-07 228
要求 鼠标经过左侧导航，右侧相应的图片显示，其余图片隐藏 思路 1.鼠标经过左侧盒子某个 li，就让内容区盒子相对应图片显示，其余的图片隐藏。 2.需要得到当前 li 的索引号，就可以显示对应索引号的图片 3.jQuery 得到当前元素索引号 $(this).index() 4.中间对应的图片可以通过 eq(index) 方法去选择 5.显示元素 show() 隐藏元素 hide() &l...
jQuery淘宝精品案例
weixin_30319153的博客
10-17 239
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding:...
商品展示
My_emotions_L的博客
11-06 293
* {             margin: 0;             padding: 0;             font-size: 36px;         }         ul {             list-style: none;         }         a {             text-decoration: non
淘宝精品服饰案例
weixin_30746117的博客
07-11 973
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; ...
jQuery （上）
qq_42316056的博客
08-22 174
jQuery的笔记分享
jQuery（下）
csdn_jwdlh的博客
03-14 105
jQuery下1.1. jQuery 事件注册1.2. jQuery 事件处理1.2.1 事件处理 on() 绑定事件1.2.3. 事件处理 off() 解绑事件1.2.4. 事件处理 trigger() 自动触发事件1.3. jQuery 事件对象1.4. jQuery 拷贝对象1.5. jQuery 多库共存1.6. jQuery 插件1.4.1. 瀑布流插件1.4.2. 图片懒加载插件1.4.3. 全屏滚动插件1.4.4. bootstrap组件1.4.5. bootstrap插件（JS） 1
jquery一款导航条
09-19
一款导航条 太简单 没必要
jquery tree 可编辑节点实现代码(jquery一句话节点菜单)
10-29
jquery tree 可编辑节点，实现的三级菜单实现代码，这里我们将为大家准备了两个。一个是锋利的jquery中的一句话导航菜单实现代码。非常不错。
学习jquery之一
10-30
学习jquery之一
锋利的Jquery一书的源代码
11-30
锋利的Jquery一书的源代码锋利的Jquery一书的源代码锋利的Jquery一书的源代码锋利的Jquery一书的源代码
jquery 一个框里有内容时，屏蔽其他框
03-27
jquery 一个框里有内容时，屏蔽其他框
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 560
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
自制植物大战僵尸：HTML5与JavaScript实现的简单游戏
m0_73367097的博客
06-08 2033
自制植物大战僵尸
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1270
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
JS-12-es6常用知识-async
m0_68467925的博客
06-13 592
关键字async作用：声明一个函数为异步函数，允许函数内部使用await关键字等待 Promise 对象的完成。返回值：异步函数总是返回一个 Promise 对象，无论函数内部是否有显式的return语句。如果没有返回语句，函数会隐式地返回一个已解析（resolved）的 Promise，其值为undefined。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1276
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 813
Vue在表单校验中trigger属性指定何时触发校验规则
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
mqiqe的专栏
06-14 279
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。
jquery一级导航栏
12-29
<title>jQuery一级导航栏示例 /* 样式可以根据需要进行自定义 */ ul { list-style-type: none; margin: 0; padding: 0; } li { display: inline-block; margin-right: 10px; } a { text-decoration: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值