web前端基础 - 08 JQuery介绍和使用

最新推荐文章于 2024-09-29 10:43:45 发布
最新推荐文章于 2024-09-29 10:43:45 发布
阅读量173 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shandy_liunian/article/details/104994584
版权
本文介绍了JQuery的基础知识，包括如何引入JQuery库，详细阐述了选择器的使用，如id、类和属性选择器，并讨论了过滤选择器和选择集转移。此外，还讲解了JQuery中的属性操作，如获取标签属性和操作类名样式，以及事件处理。同时，文章重点探讨了JQuery的特殊效果和动画，如fade、slide系列方法，展示了如何通过动画改变元素的宽度。
摘要由CSDN通过智能技术生成

一、JQuery引入

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。

下载方式：https://code.jquery.com/jquery-3.4.1.min.js

打开当前链接，右键选择另存为即可。

引入方式

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

加载方式

<script>
	window.onload = function(){
		var $div = $("#test");
		alert($div);
	}
</script>

<script>
	$(document).ready(function(){
		var $div = $("div");
		alert($div);
	})
</script>

<script>
	$(function(){
		var $div = $("div");
		alert($div);
	})
</script>

$是javascript中封装的一个函数，专门用来获取DOM元素。

二、选择器详解

2.1 JQuery选择器

1.id选择器

<style>
	#test{
		color: red;
	}
</style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		var $div = $("#test");
		alert($div.css("color"));
	})
</script>

<body>
	<div id="test">这是一个div元素</div>
</body>

2.类选择器

<style>
	.box{
		color: green;
		font-size: 30px;
	}
</style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
	$(function(){
		var $box = $(".box");

		// 只显示行内样式的属性值
		alert($box.css("font-size"));
	})
</script>

<body>
	<div class="box" style="font-size: 20px;">hello world</div>
</body>

3.包含选择器

<style>
	.list li{
		background-color: pink;
	}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
	$(function(){
		var $lis = $(".list li");
		alert($lis.css("background-color"))

		// 修改li标签的样式
		$lis.css({'background-color':'gray','color':'red'});
	})
</script>

<body>
	<ul class="list">
		<li>美元</li>
		<li>欧元</li>
		<li>人民币</li>
		<li>日元</li>
	</ul>
</body>

4.name属性选择器

<style>
	input[name="username"]{
		background-color: green;
	}
</style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
	$(function(){
		var $username = $("input[name='username']");
		alert($username.css("background-color"))
	})
</script>

<body>
	<form action="">
		<input type="text" name="username" value="">
	</form>
</body>

2.2 过滤选择器

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		$('div').css({"backgroundColor":"red"});

		// 选择含有p标签的div元素
		$('div').has('p').css({backgroundColor:"gray"});


		// 选择类名不是MyClass的div元素

		$('div').not(".myclass").css({backgroundColor:"yellow"});

		// 选择类名为myClass的div元素
		$('div').filter(".myclass").css({backgroundColor:"green"});

		// 选择第6个div元素-->下标从0开始

		$('div').eq(5).css({"font-size":"30px"});
	})
</script>

<body>
	<div>1</div>
	<div><p>2</p></div>
	<div class="myclass">3</div>
	<div class="myclass">4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>	
</body>

2.3 选择集转移

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		// 获取被选择div元素之前的一个同辈元素
		$('div').eq(5).prev().css({"font-size":"20px"});

		// 获取被选择div元素之前的所有同辈元素
		$('div').eq(5).prevAll().css({"backgroundColor":"red"});

		// 获取被选择div元素之后的一个同辈元素
		$('div').eq(5).next().css({"font-size":"30px"})

		// 获取被选择div元素之后的所有同辈元素
		$('div').eq(5).nextAll().css({"backgroundColor":"gray"})

		// 获取被选择div元素的父元素
		alert($('div').eq(5).parent());

		// 获得被选择元素所有子元素
		$('div').has('p').children().css({backgroundColor:"gray"});

		// 获得被选择div元素的子元素中类名为myClass的元素
	    $('div').not('.myclass').find('.myclass').css({"backgroundColor":"pink"});
	})
</script>

<body>
	<div>1</div>
	<div><p>2</p></div>
	<div class="myclass">3</div>
	<div class="myclass">4</div>
	<div><h1 class="myclass">5</h1></div>
	<div>6</div>
	<div>7</div>
	<div>8</div>	
</body>

JQuery的容错机制

jquery有容错机制所以即使没有找到元素,也不会出错。

可以用length属性来判断是否找到了元素。

length=0->没选择到。l
ength大于0->选择到了

三、属性操作

3.1 获取标签属性

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
	$(function(){

		// 覆盖式修改标签内容--->百度一下修改为链接
		$a=$('a');
		$a.html("链接")

		// 获取标签的值
		$inp = $('input')
		console.log($inp.val());


		// 获取标签的官方指定属性
		$img = $('img');
		// src属性值为绝对路径
		console.log($img.prop("src"));
		// 修改官方指定属性的值
		$img.prop({"src":"F:\\Amyweb\\魏无羡.jpg"})
		console.log($img.prop("src"));

		// 获取自定义属性的值
		console.log($img.attr("xxx"))
		// 添加自定义属性的值
		$img.attr({"mmm":"nnnn"})
		console.log($img.attr("mmm"))
		// 修改自定义属性的值
		$img.attr({"xxx":"nnnn"})
		console.log($img.attr("xxx"))

	})
</script>

<body>
	<a href="http://www.baidu.com">百度一下</a>
	<img src="123.jpg" alt="" xxx="yyy">
	<input type="text" value="123">
</body>

3.2 操作类名样式

<style>
	.box{
		width: 200px;
		height: 200px;
		background-color: orange;
	}

	.box1{
		font-size: 30px;
	}
	.box2{
		color: blue;
	}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
	$(function(){
		// 为div添加class为box1的css样式
		$div = $('.box');
		// $div.addClass('box1');
		// 为div添加class为box1,box2的css样式
		$div.addClass('box1 box2');
		

		// 移除div中class为box1的css样式
		$div.removeClass('box1');
		// 移除iv中class为box1，box2的css样式
		$div.removeClass('box1 box2');
	}
</script>

<body>
<div class="box">我是robot</div>
</body>

选项卡案例

<style>
	.btns input{
		width: 100px;
		height: 40px;
		border: 0;
	}
	.btns .current{
		background-color: pink;
	}
	.box div{
		width:400px;
		height: 300px;
		background-color: pink;
		display: none;
		text-align: center;
		font-size: 40px;
		line-height: 300px;
	}
	.box .active{
		display: block;
	}
</style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		var $btn = $('.btns input');
		var $div = $('.box div')
		$btn.click(function(){

			// $(this) 当前点击的input按钮
			$(this).addClass('current');
			// 同级元素移除current样式
			$(this).siblings().removeClass('current');

			// 和他下标相同的div元素添加active类名样式
			// 当前div同级的其他div元素移除active类名样式
			$div.eq($(this).index()).addClass('active').siblings().removeClass('active');
		})


	})
</script>

<body>
	<div class="btns">
		<input type="button" value="我的关注" class="current">
		<input type="button" value="导航">
		<input type="button" value="收藏">
	</div> 

	<div class="box">
		<div class="active"><span>选项卡内容1</span></div>
		<div><span>选项卡内容2</span></div>
		<div><span>选项卡内容3</span></div>
	</div>		
</body>

四、事件

<style>
	.box{
		background-color: yellow;
		width: 200px;
		height:200px;
	}
	.box .son{
		background-color: blue;
		width:100px;
		height: 100px;
	}
</style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		var $inp1 = $('#inp1');
		// 直接聚焦到input输入框
		$inp1.focus();
		var $inp2 = $('#inp2');

		// 内容修改+失焦-->触发change事件
		$inp2.change(function(){
			$val = $(this).val();
			alert($val)
		})


		var $div=$('.box');

		鼠标悬停到父子元素都会触发mouseover事件
		$div.mouseover(function(){
			alert('移入');
		})
		// 鼠标移出父子元素都会触发
		$div.mouseout(function(){
			alert('移出');
		})


		鼠标悬停到子元素不会触发mouseenter
		$div.mouseenter(function(){
			alert('移入')
		})
		// 鼠标移出子元素不会触发mouseleave
		$div.mouseleave(function(){
			alert('移出')
		})


		同时完成mouseenter和mouseleave事件
		$div.hover(function(){
			alert('移入');
		},function(){
			alert('移出');
		})

		// 捕获窗口大小
		$(window).resize(function(){
			var $w = $(window).width();
			document.title = $w
		})

	})		
</script>

<body>
	<div class="box">
		<div class="son"></div>
	</div>

	<form action="">
		<!-- autofocus属性 自动聚焦到inp1输入框 -->
		<input type="text" id="inp1">
		<input type="text" id="inp2">
	</form>
</body>

五、特殊效果

fadeOut() // 淡出
fadeToggle() // 切换淡入淡出
hide() // 隐藏元素
show() // 显示元素
toggle() // 切换元素的可见状态
slideDown() // 向下展开
slideUp() // 向上卷起
slideToggle() // 依次展开或者卷起某个元素

<style>
	.box{
		width: 300px;
		height: 300px;
		background-color: gold;
		display: none;
	}
</style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		var $div = $('.box')
		var $btn = $('.btn')
		$btn.click(function(){
			// 淡入 css样式-->display：none
			$div.fadeIn();
			// 淡出 css样式--》不添加display
			$div.fadeOut();
			// 淡入淡出交替执行
			$div.fadeToggle();

			// 向下展开 css样式-->display：none
			$div.slideDown();
			// 向上收起 css样式--》不添加display
			$div.slideUp();
			// 交替执行展开收起
			$div.slideToggle();
		})
	})
	
</script>

<body>
	<div class="box"></div>
	<button class="btn">渲染效果</button>
</body>

六、动画

通过动画实现增加div元素的宽度

<style>
	.box{
		width: 300px;
		height: 300px;
		background-color: gold;
		/*display: none;*/
	}
</style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		var $div = $('.box')
		var $btn = $('.btn')
		$btn.click(function(){
			$div.animate({'width':'400px'},1000)
			
			// 先自动增减高400px,再增加宽400px
			$div.animate({'height':'400px'},1000,function(){
					 $div.animate({'width':'400px'});
			});
		})
	})
	
</script>

<body>
	<div class="box"></div>
	<button class="btn">渲染效果</button>
</body>
shandy_liunian
关注
HTML+CSS+JS+jQuery学习笔记
weixin_48778425的博客
10-08 521
HTML 一、基本标签 标题标签：<h1>标题标签</h1> 注释标签：<!-- --> 换行标签：<br/> 段落标签： <p>段落标签</p> 分隔线标签：<hr/> 加粗标签： <strong>加粗</strong> or <b>加粗</b> 倾斜标签： 倾斜 or &lt
Web前端--折叠菜单（Jquery版）
helloWolrldApe的博客
03-31 2698
Web前端–折叠菜单（Jquery版） 先上效果图 背景可以自己设置。 以下是代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="//libs...
前端笔记-通过jQuery获取input数据及html中name的使用
IT1995的博客
03-01 6652
在前端开发中，使用表单会进行跳转，有时候并不需要这个的。这里通过jQuery，使用AJAX直接发送Json数据。 运行截图如下： 界面如下： 这里可以看到 div里面是group1，然后后面都是input1,input2等等。 并且有一个group2 name和上面group1一样。 通过这种方式，获取，如下，group1下的input[name=input1]的...
【前端】-jQuery（带你让你深入了解学习使用jQuery）
2301_81253185的博客
09-29 3973
是一个轻量级的，自 2006 年发布以来，它迅速成为 Web 开发中不可或缺的工具。它通过，简化了的实现。jQuery 允许开发者以更少的代码实现复杂的任务，提升开发效率。此外，jQuery 还具备良好的跨浏览器兼容性，使得开发者无需关注不同浏览器间的差异，能够专注于构建更好的用户体验。无论是初学者还是经验丰富的开发者，jQuery 都是实现现代 Web 应用的强大助手。
黑马程序员---jQuery前端开发实战教程思维导图整理
weixin_45692360的博客
02-25 2701
第6章jQuery的Ajax操作
JavaWeb--------jQuery基础
詹煜彪9527
03-07 7732
一. 概念 1.1 简介 jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。jQuery是一个快速、简洁的JavaScript框架，能够兼容各种浏览器，核心理念是write less,do more(写得更少,做得更多)。jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML...
Web前端开发——JQuery基础梳理
Aldeo
12-09 3265
JQuery是由美国人John Resig于2006年创建的一个开源项目，随着人们的熟知，越来越多的程序高手加入其中， 完善和壮大其项目内容；如今已发展成为JavaScript、CSS、DOM、AJAX于一体的强大框架体系。jQuery是一个兼容多 浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。
基于jQuery的web前端mqtt消息监听和消息发送
杨威的博客
01-08 1871
最近做了一个项目，用到了mqtt，觉得特别好用，可以把消息直接推送到web端，手机端等不同的终端，太方便了，于是专门写了个简单的demo，代码比较简单，但是包括了mqtt消息的发送和监听，我用的是jQuery来实现的，所以引用了mqttws31.js这个文件，该文件一并放到源码里面，大家可以下载。
web前端--下拉菜单（jquery版)
helloWolrldApe的博客
03-31 2728
web前端–下拉菜单（jquery版) 这个要注意一下每次动画调用前记得.stop()一下。可以解决动画队列问题。 效果图入下 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
web前端javascript+jquery知识点总结
weixin_44924238的博客
02-15 9865
1.Javascript 语法.用途 javascript 在前端网页中占有非常重要的地位，可以用于验证表单，制作特效等功能，它是一种描述语言，也是一种基于对象（Object）和事件驱动并具有安全性的脚本语言 ...
JavaScript+jQuery交互式Web前端开发-源代码.zip
04-16
JavaScript 和 jQuery 是现代 Web 前端开发中的两个核心工具，它们共同为创建动态、交互式的网页提供了强大的功能。在本教程中，我们将深入探讨如何将这两种技术与 HTML 和 CSS 结合，以实现高效的网页设计。 ...
jQuery-Lerning.zip_Jquery 基础教程_javascript 教程_jquery_web前端
09-22
《jQuery Learning.zip - Jquery 基础教程_javascript 教程_jquery_web前端》 在Web前端开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个...
前端项目-jquery-smart-web-app-banner.zip
09-03
【前端项目-jquery-smart-web-app-banner.zip】是一个前端开发资源包，主要目的是为了帮助开发者在网站上实现一种智能的Web应用横幅功能。这种功能可以让用户方便地将网站保存到他们的设备主屏幕上，如同安装了一个...
52680JavaScript+jQuery交互式Web前端开发-源代码
06-08
《52680JavaScript+jQuery交互式Web前端开发》是一个深入探讨JavaScript和jQuery在创建动态、交互式网页方面的教程。这个课程旨在帮助开发者掌握这两种技术的核心概念，并将其应用于实际项目中，提升Web前端的用户...
前端web-jQuery.md
07-23
前端
酒店预订管理系统 SSM毕业设计 附带论文.zip
最新发布
11-07
酒店预订管理系统 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
【超强组合】基于VMD-麻雀搜索优化算法SSA-Transformer-BiLSTM的光伏预测算研究Matlab实现.rar
11-07
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
花鸣B2C电子商务平台 SSM毕业设计 附带论文.zip
11-07
花鸣B2C电子商务平台 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
【超强组合】基于VMD-哈里斯鹰优化算法HHO-Transformer-BiLSTM的光伏预测算研究Matlab实现.rar
11-07
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
jQuery基础教程：简化Web前端开发的高效工具
jQuery基础教程是一份深入浅出的教程，针对JavaScript开发者尤其是Web前端开发人员设计。JavaScript作为Web开发的基础语言，尽管功能强大，但其原生API在处理复杂的DOM操作和异步数据请求时显得繁琐。Ajax技术框架...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值