jQuery

最新推荐文章于 2023-07-07 14:28:52 发布
最新推荐文章于 2023-07-07 14:28:52 发布
阅读量109 收藏 2
点赞数
分类专栏： JavaEE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42142477/article/details/89277080
版权

目录

1. jQuery简介

2. jQuery的开发步骤

3. jQuery与JavaScript

4. jQuery的动画效果

5. jQuery的基本选择器

6. jQuery的层级选择器

7. jQuery的基本过滤器

8. jQuery的属性选择器

1. jQuery简介

jQuery是一个快速、简洁的JavaScript框架，是一个JavaScript代码库,优化HTML文档操作（DOM）、事件处理、动画设计和Ajax交互。

Ajax 即异步 JavaScript 和 XML，是指一种创建交互式网页应用的网页开发技术，简单来说就是前端向后端传递数据的技术。Ajax无需重新加载网页便可更新部分网页。

JavaScript代码库提供了大量的api（应用程序接口） ，有很多内置方法，比如：click()  dbclick()

2. jQuery的开发步骤

  1. 导入js核心库
  2. 确定页面载入事件
  • 注意：
    • jQuery中，两个方法名相同的方法，不会互相覆盖。
<script src="js/jquery-1.11.0.js"></script>
<script>
    //ready是页面载入事件
    //方式1：
    jQuery(document).ready(function(){
    	alert("jQuery(document).ready(function()1");
    }) ;

    //方式2：
    //$("选择器")
    $(document).ready(function(){
    	alert("$(document).ready(function()2") ;
    }) ;

    //简写方式:
    $(function(){
        alert("页面载入事件触发了,简化方式的写法");
    });
</script>

3. jQuery与JavaScript

  • jQuery比JavaScript的onload优先执行
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Jquery的入门</title>
            <script src="js/jquery-1.11.0.js"></script>

            <script>
                function init(){
                    alert("js的页面载入事件");
                }
                //页面载入事件
                $(function(){  //相当于onload事件
                    alert("jq的页面载入事件") ;
                }) ;
            </script>
	</head>
	<body onload="init()">	
	</body>
</html>
  • 两者使用函数的比较
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery入门</title>
		<script src="js/jquery-1.11.0.js"></script>
		<script>
			//js
			function jsclick(){
				alert("js点击了");
			}
			//jq中不需要指定onclick，可以只通过id使用id选择器来实现
			$(function(){
				//点击事件
				//寻找事件源
				$("jqb").click(function(){
					alert("jq点击了");
				})
			});
		</script>
	</head>
	<body>
		<input type="button" value="js点击" onclick="jsclick()" />
		<input type="button" value="jq点击" id="jqb" />
	</body>
</html>
  • 两者之间的相互转换
    • js -> jq 在js对象前加上$符号，即 $(js对象)-->jQuery对象
    • jq -> js 通过get()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js与jq的转换</title>
	</head>
	<script src="js/jquery-1.11.0.js"></script>
	<script>
		//js
		function jsChange(){
			var ele=document.getElementById("div1");
			//转换为jq对象
			var $ele=$(ele);
			//相当于js中的innerHTML
			$ele.html("js -> jq");
		}
		
		//jq
		$(function(){
			$("#btn2").click(function(){
				var ele=$("#div1").get(0);
				ele.innerHTML="jq -> js";
			});
		});
	</script>
	<body>
		<input type="button" onclick="jsChange()" value="这是js更改下面div文本内容的方式" id="btn1" /><br />
		<input type="button"  value="使用jq的方式更改下面div文本内容" id="btn2" /><br />
		<div id="div1">
	  		 被Js/jQuery的方式更改掉
		</div>
	</body>
</html>

4. jQuery的动画效果

  • show()方法：显示隐藏的匹配元素
  • hide()方法：隐藏元素
  • show(speed, [callback])
  • hide(speed, [callback])
    • speed：三种速度"slow"、"normal"或 "fast" / 表示动画时长的毫秒数值
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画效果</title>
		<script src="js/jquery-1.11.0.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					//普通显示
//					$("img").show(3000);
					//从上向下显示
//					$("img").slideDown(2000);
					//淡出
//					$("img").fadeIn(2000);
					//自定义显示
					$("img").animate({width:"500px",opacity:"1"},2000) ;
				});
			});
			
			
			$(function(){
				$("#btn2").click(function(){
					//普通隐藏
//					$("img").hide(2000);
					//从下向上隐藏
//					$("img").slideUp(2000);
					//淡入
//					$("img").fadeOut(2000);
					//自定义隐藏
					$("img").animate({width:"500px",opacity:"0.1"},2000) ;
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="显示" id="btn1" />
		<input type="button" value="隐藏" id="btn2" />
		<br />
		<img src="img/海景1.jpg" width="500px" />
	</body>
</html>

5. jQuery的基本选择器

  • 基本选择器
    • id选择器
    • class选择器 
    • element元素选择器
    • 通配符选择器：*
    • 并集选择器 selector 1,selector 2..seletor n..
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</title>
		<!--引入样式 rel指定层级样式表-->
		<link href="css/style.css" rel="stylesheet" />
		<script src="js/jquery-1.11.0.js"></script>
		<script>
			$(function(){
				//id选择器
				$("#btn1").click(function(){
					$("#two").css("background-color","darksalmon");
				})
				
				//class选择器
				$("#btn2").click(function(){
					$(".mini").css("background-color","powderblue");
				})
				
				//元素选择器
				$("#btn3").click(function(){
					$("div").css("background-color","lightgoldenrodyellow");
				})
				
				//通配符选择器
				$("#btn4").click(function(){
					$("*").css("background-color","plum");
				})
				
				//并集选择器
				$("#btn5").click(function(){
					$("。mini,span").css("background-color","chartreuse");
				})
			})
		</script>
	</head>
	<body>
		<input type="button" value="选中id为two的div元素"  id="btn1"/><br />
		<input type="button" value="选中当前页面中所有的mini类的元素"  id="btn2"/><br />
		<input type="button" value="选中当前页面中div元素"  id="btn3"/><br />
		<input type="button" value="通配符选择器"  id="btn4"/><br />
		<input type="button" value="选中mini类元素和span元素"  id="btn5"/><br />
		<div id="one">
			<div class="mini">1-1</div>
		</div>
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		<div id="four">
			<span>span</span>
		</div>
	</body>
</html>

6. jQuery的层级选择器

  • 层级选择器
    • 子元素选择器 ：selector1 selector2 （并集选择器）
    • 后代选择器：selector1 > selector2
    • 相邻兄弟选择器：selector1 + selector2
    • 所有兄弟选择器：selector1 ~ selector2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link href="css/style.css" rel="stylesheet" />
		<script src="js/jquery-1.11.0.js"></script>
		<script>
			$(function(){
				//子元素选择器
				$("#btn1").click(function(){
					$("body div").css("background-color","#FFE0E9");
				});
				//后代选择器
				$("#btn2").click(function(){
					$("body > div").css("background-color","aquamarine");
				});
				//相邻兄弟选择器
				$("#btn3").click(function(){
					$("#one + #two").css("background-color","blanchedalmond");
				});
				//所有兄弟选择器
				$("#btn4").click(function(){
					$("#one ~ div").css("background-color","plum");
				})
			});
		</script>
	</head>
	<body>
		<input type="button" value="选中body中所有的div"  id="btn1"/><br />
		<input type="button" value="选中body中的子div"  id="btn2"/><br />
		<input type="button" value="选中one的相邻兄弟"  id="btn3"/><br />
		<input type="button" value="选中one的所有兄弟"  id="btn4"/><br />
		<div id="one">
			<div class="mini">1-1</div>
		</div>
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		<div id="four">
			<span>span</span>
		</div>
	</body>
</html>

7. jQuery的基本过滤器

  • 基本过滤器
    • 过滤出当前元素中第一个，选择器：first   /first()
    • 过滤出索引值为偶数的，选择器：even
    • 过滤出索引值为奇数的，选择器：odd
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本过滤器</title>
		<link href="css/style.css" rel="stylesheet"/>
		<script src="js/jquery-1.11.0.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("div:first").css("background-color","paleturquoise");
//					$("div").first().css("background-color","paleturquoise");
				});
				
				$("#btn2").click(function(){
					$("div:even").css("background-color","lightblue");
				});
				
				$("#btn3").click(function(){
					$("div:odd").css("background-color","plum");
				});
			});
		</script>
	</head>
	<body>
		<input id="btn1" type="button" value="选中第一个div元素" /><br />
		<input id="btn2" type="button" value="选中索引值是偶数的div元素" /><br />
		<input id="btn3" type="button" value="选中索引值是奇数的div元素" /><br />
		
		<div id="one"><!--0-->
			<div class="mini">1-1</div><!--1-->
		</div>
		<div id="two"><!--2-->
			<div class="mini">2-1</div><!--3-->
			<div class="mini">2-2</div>
		</div>
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
<span id="four">span</span>
	</body>
</html>

8. jQuery的属性选择器

  • 格式
    • 标签[属性名称]
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<script src="js/jquery-1.11.0.js"></script>
		<script>
			$(function(){
				//单个属性，选中带有href属性的标签
				$("a[href]").css("background-color","palegoldenrod");
				//多个属性
				$("a[href][title]").css("background-color","peachpuff");
				//多个属性并有确定值
				$("a[href][title='test']").css("background-color","plum");

				//选中文本框
				$("input:text").css("background-color","lightsalmon");
				
				//下拉菜单
			    $("#btn1").click(function(){
			    	//选中option元素是否能选中:  :selected配所有选中的option元素
			    	$("option:selected").css("background-color","paleturquoise");
			    	//size():jQuery 对象中元素的个数
			    	alert($("option:selected").size()) ; 
			    });
			});
		</script>
	</head>
	<body>
		<a href="">超链接1</a><br />
		<a href="" title="test">超链接2</a>
		
		<input type="button" value="button" />
		<input type="text" />
		<!--mutiple属性:表示选中多个值的，多选-->
		<select multiple="multiple">
			<option>option1</option>
			<option>option2</option>
			<option>option3</option>
		</select>
		<input type="button" value="点击" id="btn1" />
	</body>
</html>

 

cerf-volant
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery选择器
m0_57774967的博客
06-16 4640
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
Jquery遍历元素
qq_43781887的博客
07-12 4984
在讲这个之前，建议先看一下jquery的隐式迭代，这个就不多说了，隐式迭代的缺点在于它只能集体进行操作不能只针对某个元素进行操作，可以看下面的代码： 如果想要依次对遍历的元素进行操作需要用each方法，语法是：$('div').each(function(index,domEle){})1.each()方法遍历匹配每一个元素。2.里面的回调函数有两个参数分别是index和domEle，index是每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象，所以如果要用jquery的方法必须
JQuery的引用
zwjl1017的博客
04-01 4022
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery 遍历对象
m0_67458498的博客
03-28 4209
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3674
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jquery在线引用
jiufu_的博客
07-15 5031
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 5184
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jQuery-3.4.1下载
cheng1a的博客
02-11 5346
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery引入方式
m0_67388537的博客
07-07 3145
jQuery的两种引入方式
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-1.9.1.js
最新发布
09-07
jquery-1.9.1版本
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery验证码
10-19
jQuery实现web开发验证码，无需后台验证。简单方便实用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值