前端路线--JQuery（day01）

最新推荐文章于 2024-09-04 20:18:34 发布
最新推荐文章于 2024-09-04 20:18:34 发布
阅读量890 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/123740724
版权

JQuery的引入方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//1.本地引入:script标签中的src='本地JQuery'
		
		//2.CDN引入:script标签中的src='CDN地址
		//去JQ官网-->CDNJS-->版本-->复制标签
		//<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	</script>
</html>

02-JQuery和window对比

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="https://blog.51cto.com/ganbing/2056654 " >
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript">
	//JS最后一个覆盖前面，页面所有元素加载完成才执行
		window.onload=function () {
			console.log('JS加载1');
		}
		window.onload=function () {
			console.log('JS加载2');
		}
		window.onload=function () {
			console.log('JS加载3');
		}
	</script>
	
	<script type="text/javascript">
		//初始化工厂函数
		//1.最常用
		$(function () {
			console.log('工厂函数1');
		})
		//2.
		$(document).ready(function () {
			console.log('工厂函数2');
		})
		//3.
		$().ready(function () {
			console.log('工厂函数3');
		})
		//三个初始化工厂函数都会执行,DOM读取完毕立即执行,不等待所有元素加载完
	</script>
</html>

03-基本选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">
			<h1>静夜思</h1>
			<p class="content">床前明月光</p>
			<p class="content">疑是地上霜</p>
			<p class="content">举头望明月</p>
			<p class="content">低头思故乡</p>
		</div>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//需要先写工厂函数
		$(function() {
			/*基本选择器:$('选择器')  */
			$('.box').css('color','red')
			//返回JQuery对象，而不是JS对象
			// console.log($('.box'));
			
			//多重选择器
			$('h1,p').css('color','blue');
			
		})
	</script>
</html>

04-子代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">
			<h1>静夜思</h1>
			<p class="content link">床前明月光</p>
			<p class="content">疑是地上霜</p>
			<p class="content">举头望明月</p>
			<p class="content">低头思故乡</p>
		</div>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//需要先写工厂函数
		$(function() {
			//子代选择器:
			// $('.box h1').css('color','pink')
			//直接子代
			// $('.box>p').css('color','orange');
			//紧挨着下一个兄弟元素
			// $('.link+p').css('color','blue');
			//.link下的所有兄弟
			// $('.link~p').css('color','skyblue');
		})
	</script>
</html>

05-属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">
			<h1>静夜思</h1>
			<p class="content" id="link">床前明月光</p>
			<p class="content">疑是地上霜</p>
			<p >举头望明月</p>
			<p class="content">低头思故乡</p>
		</div>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//需要先写工厂函数
		$(function() {
			//选中P标签中有class属性的
			// $('p[class]').css('color','purple')
			//选中P标签中有class='content的
			// $('p[class=content]').css('color','green')
			//开头、结尾、包含con的
			// $('p[class^=c]').css('color','yellow')
			// $('p[class$=t]').css('color','red')
			// $('p[class*=nt]').css('color','orange')
			//p属性不是content的
			// $('p[class!=content]').css('color','green')
			//p中有id属性的，且有class属性值包含c的
			$('p[id][class*=con]').css('color','gray');
		})
	</script>
</html>

06-位置选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
			//第一个
			// $('li:first').css('color','pink')
			//最后一个
			// $('li:last').css('color','pink')
			//偶数
			// $('li:odd').css('color','yellow')
			//奇数
			// $('li:even').css('color','orange')
			//第n个(索引)
			// $('li:eq(1)').css('color','pink')
			//小于2的(索引)
			// $('li:lt(1)').css('color','pink')
			//大于2的(索引)
			$('li:lt(3)').css('color','orange')
		})
	</script>
</html>

07-子元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
		</div>
		
		<div>
			<p>1</p>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
		</div>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
			//第一个子元素
			// $('div span:first-child').css('color','pink')
			// $('div span:first-of-type').css('color','pink')
			//最后一个子元素
			// $('div span:last-child').css('color','pink')
			// $('div span:last-of-type').css('color','yellow')
			//第n个孩子
			 // $('div span:nth-child(2)').css('color','pink')
			//第n个类型
			// $('div span:nth-of-type(2)').css('color','pink')
		})
	</script>
</html>

08-表单元素过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="">
			<p>姓名:<input type="text"></p>
			<p>
				<select name="">
					<option value="郑州" selected="selected">郑州</option>
					<option value="南阳">南阳</option>
					<option value="安阳">安阳</option>
				</select>
			</p>
			<input type="radio" name="sex" value="男"  checked="checked"/>男
			<input type="radio" name="sex" value="女" />女
			<br>
			<button type="button" disabled="disabled">提交</button>
		</form>
	</body>
	<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
			//选择处于选中状态的表单
			$(':enabled');
			console.log($(':enabled'));
			//选中禁用的表单
			console.log($(':disabled'));
			//选中处于selected状态的option-->针对下拉框
			console.log($(':selected'));
			//复选框、单选框、下拉列表
			console.log($(':checked'));
		})
	</script>
</html>

09-内容过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
			<div>4545</div>
			<div></div>
			<div>我们</div>
			<div>的<span>九分</span>裤</div>
			<div><span class="c1">分割</span></div>
			<div>疯狂<span>赶快</span></div>

	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
			//选中内容有我们的div
			// $('div:contains("我们")').css('color','skyblue')
			//选中内容为空的div
			// $('div:empty').css('border','1px solid #ccc')
			//选中div下有.c1的元素
			// $('div:has(.c1)').css('color','orange')
			//选中子元素span不包含.c1的的其他所有span元素
			$('span:not(.c1)').css('color','pink')
			//选中所有非空的div
			// $('div:parent').css('color','orange')
		})
	</script>
</html>

10-JQ对象与Dom对象的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">222</div>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
			var box=document.getElementsByClassName('box')[0];
			console.log(box);
			//把DOM对象转化为JQ对象
			var jobj=$(box);
			console.log(jobj);
			//把JQ对象转化为DOM对象
			//1.JQ对象索引值
			var domObj1=$('.box')[0];
			console.log(domObj1);
			//2.JQ对象get(0)索引值
			var domObj2=$('.box').get(0);
			console.log(domObj2);
		})
	</script>
</html>

11-操作JQ集合遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
		</div>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
			// .each(function (index,ele) { })  遍历JQ集合
			$('p').each(function (index,ele) {
				console.log(index);
				console.log(ele);
			})
		})
	</script>
</html>

12-根据元素查询在集合中的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<p>1</p>
			<p>2</p>
			<p id="d1">3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
		</div>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//1.根据元素查询在集合的位置
		var i=$('#d1').index('p');
		console.log(i);
		/* 
		$('#d1').index('ele')		
		 ele:查询d1在ele中的位置索引
			 如果无参数,则就是默认在所有元素中的索引
		 */
		
		//2.集合转数组
		//.toArray()
		console.log($('p').toArray());	
	</script>
</html>

13-过滤方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<p>1</p>
			<p ><span class="n1">2</span></p>
			<p id="d1">3</p>
			<p>4</p>
			<p class="c1">5</p>
			<p class="c2">6</p>
		</div>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//1.返回集合中指定索引的元素    
		//返回后成为DOM对象  若想使用JQ方法，需要转为JQ对象
		//.get(index)	index:索引  如果不指定index则是返回所有的元素
		// console.log($('p').get(2));
		
		/* 
		2.返回包含第一个元素的新集合 
		.first()
		 */
		// $('p').first().css('color','red');
		
		/* 
		3. 返回包含最后元素的新集合 
		.last()
		 */
		// $('p').last().css('color','blue');
		
		/* 
		 4.返回指定索引的元素
		 .eq(index)
		 */
		// $('p').eq(3).css('color','orange');
		
		//5.p中class为c1 c2的元素
		//filter(selector)
		// $('p').filter('.c1,.c2').css('color','pink');
		
		//6.返回包含指定子元素的父元素
		// .has('selector')
		// $('p').has('.n1').css('color','blue');
		
		//7.返回不是c1 c2的其他元素
		//.not('selector')
		// $('p').not('.c1,.c2').css('color','yellow');
		
		//8.元素中是否包含指定的选择器
		//.is('selector')
		//返回:true/false
		// console.log($('#d1').is('.c1'));;
		
		//9.截取指定索引元素
		// slice(start, end)	前闭后开
		// $('p').slice(1,3).css('color','yellow');
		
		//10.
		/* 遍历JQ集合
		 map(function (index,value) {})
		 */
		$('p').map(function (index,value) {
			console.log(index);
			console.log(value);
		})
	</script>
</html>
喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端捕捉轨迹_jQuery模拟抛物线轨迹动画
weixin_32348697的博客
12-31 381
本文作者html5tricks，转载请注明出处利用jQuery和HTML5 Canvas正弦波动画。今天我们要介绍一个用jQuery实现简单的模拟抛物线轨迹的插件，可以开始和暂停抛物线的运动，以及重新设置抛物线的参数。下面简单了解一下实现这个jQuery抛物线运动的过程。HTML代码：runresetstopsetOptionsCSS代码：.btns{text-align:center;}.btn...
前端-jQuery开发：案例
qq_57210034的博客
05-21 323
前端-jQuery开发：案例 目录 1.图片的放大和缩小功能 2.自动更新-当地时间 3.反选 List item 4.商品图片局部放大（放大镜）效果 1.图片的放大和缩小功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片的放大和缩小功能</title> <style type="text/css">
利用jquery制作滚动到指定位置触发动画
高先生的猫
06-25 1273
利用CSS3的 animation 动画特性来完成的，对IE的兼容性不是太好，适用与手机端。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>sas</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js">&l
Work-Day-Scheduler-Jquery:使用jquery和时刻制作的调度程序
04-04
【标题】"Work-Day-Scheduler-Jquery:使用jquery和时刻制作的调度程序"是一个项目，它利用了jQuery和Moment.js库来创建一个实用的工作日程安排工具。这个工具旨在帮助用户高效地管理他们的时间，特别是在工作日中。 ...
15day-study-jquery-.rar_JavaScript/JQuery_Java_
08-11
在本资源"15day-study-jquery-.rar"中，你将踏上一个为期15天的快速学习jQuery的旅程。jQuery是一个强大的JavaScript库，它极大地简化了JavaScript编程，特别是对于网页上的DOM操作、事件处理、动画效果以及AJAX交互...
web前端--Bootstrap(day5)
qq_42981466的博客
09-01 236
今日任务 使用JQuery发送请求局部刷新页面 使用BootStrap制作一个响应式的页面 使用BootStrap制作网站的首页 教学目标 掌握什么是响应式及响应式的原理 掌握BootStrap的栅格系统 了解BootStrap的其他组件及JS控件 上次课内容: 什么JQ : write less do more 写更少的代码,做更多的事情 javascript函数库 基本选...
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 388
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2511
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1380
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 493
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 487
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
vue part 5
E___V___E的博客
08-29 936
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
Nginx部署前端Vue项目
不会代码的小林
09-03 793
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
基于Java+Springboot+Vue+elememt宠物用品商城系统设计实现
央顺科技官方博客
08-31 1372
随着信息技术的不断发展，我们现在已经步入了信息化的时代了，而信息时代的代表便是网络技术的日渐成熟，而现在网络已经和我们的生活紧密的联系起来了，我们不敢想象没有网络我们的生活会像怎么样，也许就像食物中没有调料现在的生活离开了网络会变得索然无味。通过网络我们可以足不出户的做许多事情，例如工作、娱乐、学习，交友和购物等等许多我们数之不尽的事情，而就是因为网络我们的生活变得多姿多彩，或许有时甚至帮我们省下不少的时间和给予了我们更多的机遇。宠物网上商城对我们来说就有这些意义。
ES配合高德地图JS-API实现地理位置查询
maohe的博客
08-29 1244
使用高德地图组件获取商户详细地址和地理坐标（经纬度）存入ES中，然后获取当前用户的地理坐标位置，用户可定义查询半径，用来搜索以用户位置为中心点，指定半径构成搜索圆形区域，搜索出包含在圆形区域内的商户（信息包含排序后的距离）。
【HTTP、Web常用协议等等】前端八股文面试题
Una的博客
09-01 1232
前端面试中，会被问到网络协议等问题。 欢迎大家订阅 我创作的《前端八股文面试题》专栏。
Nuxt3入门：样式的注入、定义和使用（第3节）
沐爸的博客
08-31 1189
在 Nuxt3 中，如何在本地或全局注入本地样式表？如何注入本地字体？如何分发NPM的样式表？单文件组件的动态样式、作用域样式、CSS模块、预处理器如何使用？
JS设计模式之“语言之魂” - 原型模式
前端梦工厂
09-02 1381
当我们学习JavaScript的时候，经常会听到原型（prototype)、原型链（）和原型模式（）这些概念，它们之间有什么关联呢？怎么样才能使用好原型模式呢？原型模式是JavaScript语言的核心机制之一，同时也是JavaScript中最基本的设计模式，因此被称为“语言之魂”，通过对象的原型实现对象的继承和属性共享，同时基于原型链的机制实现对象的创建和属性的继承，原型模式在JavaScript中具有广泛的应用场景，使用原型模式可以节省内存，增加灵活性和可扩展性等。
Chapter 07 watch侦听器
2302_80253507的博客
08-30 1499
在 Vue 中，`watch` 侦听器是一个非常实用的工具，用于处理自定义数据的变化。本文详细讲解了 `watch` 侦听器的基本用法、深度侦听和常见应用场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值