jquery_03基础

最新推荐文章于 2022-08-30 11:08:16 发布
最新推荐文章于 2022-08-30 11:08:16 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58451019/article/details/124205083
版权

 

一、

1.

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			$(function(){
				// 对元素的属性进行操作
				$('img').click(function(){
					//1. 获取到img  src 属性中的值
					// attr  可以获取到页面中 元素的 属性  必须是在页面加载的时候就手动写入的属性值
					// 比如，  复选框有默认的属性 checked（元素自有属性）  为是否选中，如果不写改属性，就获取不到值
					// 如果写一个原本元素不存在的值， 是可以获取到的
					console.log( $(this).attr("src") )
					$(this).attr("src","img/2.jpeg")
					
					console.log( $(this).attr("Custom") )
					
					console.log( $("input").attr("checked") )
					
					$("input").attr("checked","checked")
				})
				
				
				
			})
			
		</script>
		
		
	</head>
	<body>
		
		页面上有一张图片，  隐藏 完毕后  换一张图片， 然后再显示
		
		<input  type="checkbox"  />
		<img src="img/1.jpeg" Custom="自定义属性" />
		
		
		
	</body>
</html>

2.

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function(){
				$("#AllSelect").click(function(){
					//prop 只能获取到  该元素自身 固有的属性，且会进行互动，他不能获取到 自身不存在的值。
					//如何获取到元素的选中状态
					console.log(  $(this).prop("checked")  )
					if( $(this).prop("checked") ){
						$("[name='hobby']").prop("checked",true)
					}else{
						$("[name='hobby']").prop("checked",false)
					}
				})
				
				//反选 应该判定到每一个元素
				$("#Inverse").click(function(){
					
//					$("[name='hobby']:checked").prop("checked",false)
//					$("[name='hobby']:not(:checked)").prop("checked",true)
					$.each( $("[name='hobby']"), function(){
//					   if( $(this).prop("checked") ){
//							$(this).prop("checked",false)
//						}else{
//							$(this).prop("checked",true)
//						}
						$(this).prop("checked",!$(this).prop("checked"))
					});
					
							
					for (var i = 0; i < $("[name='hobby']").length; i++) {
						console.log( $($("[name='hobby']")[i]) )
					}
				})
				
			})
		</script>
	</head>
	<body>
		<input type="checkbox" id="AllSelect" custom="ccc" /> 全选/全不选    <input type="checkbox" name="" id="Inverse" value="" />反选
		<hr>
		<input type="checkbox" name="hobby" id="" value="吃" />吃 <br>
		<input type="checkbox" name="hobby" id="" value="吃" />喝 <br>
		<input type="checkbox" name="hobby" id="" value="吃" />玩 <br>
		<input type="checkbox" name="hobby" id="" value="吃" />乐 <br>
		<input type="checkbox" name="hobby" id="" value="吃" />睡 <br>
	</body>
</html>

3.

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			img{
				width: 300px;
			}
		</style>
		
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function(){
				$("img").click(function(){
					//发现 好像代码不是顺序执行的
					//其实 代码还是顺序执行的  但是代码不会等待
					// 涉及动画的代码 执行到相关代码时 会告知浏览器进行执行，多个 动画会在浏览器中 依次等待
					// 其他代码 并不会等待动画执行完毕后 才去执行，而上在 动画告知浏览器后，就执行了
					// 可以通过回调函数来 解决此问题
					$(this).fadeOut(1000,function(){
						$(this).prop("src","img/1.jpg")
					});
					
					$(this).fadeIn(1000)
				})
				
			})
		</script>
		
	</head>
	<body>
		
		页面上有一张图片，  隐藏 完毕后  换一张图片， 然后再显示
		<hr />
		<img src="img/2.jpg"/>
		
		
	</body>
</html>

4.

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			img{
				opacity:1;
			}
		</style>
		
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function(){
				$("img").click(function(){
					//更改透明度到多少
					$(this).fadeTo(1000,0.33);
				})
				
			})
		</script>
		
	</head>
	<body>
		
		<img src="img/1.jpg"/>
		
	</body>
</html>

5.

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			div{
				width: 100px;
				height: 100px;
				border-width: 5px ;
				border-style: dashed;
				border-color: red;
				background-color: chartreuse;
			}
			
		</style>
		
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function(){
				$("div").click(function(){
					//animate  允许我们设置另一个css样式 ， 由第一个默认的样式，自己去计算，在规定的时间内，变为另外一个样式，
					//只能改变带数值的内容，不能改变颜色及其他内容
					$(this).animate({
						"margin-left":"300px",
						"border-radius":"100%",
						"width":"300px",
						"height":"300px",
						"border-width":"15px"
					},3000).animate({
						"margin-top":"300px",
						"border-radius":"100%",
						"width":"500px",
						"height":"500px",
						"border-width":"15px"
					},3000).animate({
						"margin-left":"0px",
						"margin-top":"0px",
						"border-radius":"1px",
						"width":"100px",
						"height":"100px",
						"border-width":"5px"
					},3000)
				})
				$("button").click(function(){
					//对于 动画的停止就是  stop 
//					$("div").stop()
					//停止所有
					$("div").stop(true)
				})
			})
		</script>
		
	</head>
	<body>
		<button>停止</button>
		<div></div>
		
		
	</body>
</html>

7.打地鼠小游戏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			#main{
				width: 400px;
				margin: 0 auto;
			}
			#main > div{
				width: 100px;
				height: 100px;
				padding: 10px;
				float: left;
				border: solid 1px magenta;
			}
			#main img{
				width: 100px;
				display: none;
			}
			#show{
				font-size: 130px;
				color: red;
				text-align: center;
				font-weight: bold;
			}
			#cz{
				width: 50px;
				position: absolute;
				z-index: 999;
				display: none;
			}
		</style>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//定义全局变量
			var count = 0;
			$(function(){
				//随机展示一个
				setInterval(function(){
					$("div img").eq( Math.floor( Math.random()*$("div img").length  ) ).fadeIn(1000).fadeOut(100)
				},500)
				//打到
				$("div img").click(function(){
					count++;
					$("#show").html(count)
				})
				
				$(document).mousemove(function(e){
					$("#cz").show()
					$("#cz").css("top",e.clientY+5+"px")
					$("#cz").css("left",e.clientX+5+"px")
				})
				
				$(document).mousedown(function(){
					$("#cz").prop("src","img/2.jpeg")
				})
				$(document).mouseup(function(){
					$("#cz").prop("src","img/1.jpeg")
				})
			})
		</script>
	</head>
	<body>
		<img src="img/1.jpeg" id="cz" />
		
		<div id="show" >0</div>
		<div id="main">
			
			<div> <img src="img/2.jpg" draggable="false" /> </div>
			<div> <img src="img/2.jpg" draggable="false" /> </div>
			<div> <img src="img/2.jpg" draggable="false" /> </div>
			<div> <img src="img/2.jpg" draggable="false" /> </div>
			<div> <img src="img/2.jpg" draggable="false" /> </div>
			<div> <img src="img/2.jpg" draggable="false" /> </div>
			<div> <img src="img/2.jpg" draggable="false" /> </div>
			<div> <img src="img/2.jpg" draggable="false" /> </div>
			<div> <img src="img/2.jpg" draggable="false" /> </div>
			
			
		</div>
		
		
	</body>
</html>

Asher呢
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery $(this).attr $(this).val方法使用介绍
12-10
$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法 $(this).attr(key, value); 设置节点属性的值，相当于setAttribute(key,value)方法 eg: var diywidgetid = $(‘#w_1’).attr(‘diywidgetid’); //获取节点属性的值 $(this).val();获取某个元素节点的value值，相当于$(this).attr(“
$(this).attr(key)；方法使用
ruoyu8836的博客
04-01 1677
$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法 (this).attr(key,value);设置节点属性的值，相当于setAttribute(key,value)方法eg:<divid="w1"class="widget"diywidgetid="(this).attr(key, value); 设置节点属性的值，相当于setAttribute(key,value)方法 eg:<div id="w_1" class="widget" di
$(this).attr $(this).val方法使用介绍
yue
02-26 5285
$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法 $(this).attr(key, value); 设置节点属性的值，相当于setAttribute(key,value)方法 eg: var diywidgetid = $('#w_1').attr('diywidgetid'); //获取节点属性的值 $(this).v
$(this).attr $(this).val
menu_520的博客
11-14 6022
jquery attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。 1. attr(属性名)        //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回
$(this).attr('checked')得到的值为undefined
www.wangpeng.cn
01-08 3066
当导入&lt;script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"&gt;&lt;/script&gt;时 $(this).attr('checked')可以正常获取true|false，但是， 当导入&lt;script type="text/javascript" src="ht.
JQuery each attr()基本用法总结
WeiOpOp
12-01 2737
具体用法 var $cat= $("select[id^='cat']"); $cat.each(function(i){   if($(this).val() == ""){ $(this).focus(); return false;   }   }); 获取以input 框id以cat打头的集合并循环，i是循环的下角标（0,1,2...）， $(this)当前循环的对象
html table 怎么隐藏多出来文字 $($this).attr(“title“,$this.innerText)；
A18726809770的博客
05-29 288
html table 隐藏多出来的文字 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> </head> <body> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesh
jquery $(this).attr $(this).val方法
hssdxh的专栏
10-08 824
$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法  $(this).attr(key, value); 设置节点属性的值，相当于setAttribute(key,value)方法  eg:       var diywidgetid = $('#w_1').attr('diywidgetid');  //获取节点属性的值 $
$(this).val()、this.id、$(this).attr(idCard)和复选框
热门推荐
qq_23927391的博客
11-02 1万+
页面复选框 value="${var.id}" idCard='${var.cont_id_card}' name="subBox" type="checkbox" style="position:relative;opacity:100;"> js方法获取id的值，获取idCard的值 全选方法 $(function(){ $("#qu
Jquery $(this).attr和$(this).val用法示例
weixin_34220834的博客
08-16 499
以下是个人心得整理，有兴趣朋友可以参考参考 $(this).attr(key);　　获取节点属性名为key的值，相当于getAttribute(key)方法 $(this).attr(key,value);　　设置节点属性名为key的值，相当于setAttribute(key,value)方法 示例： <input class="radio" name="orgType" id="d...
jquery第03天.zip
最新发布
12-21
在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师，还是只是想了解一些基本概念和...
jquery基础教程03
08-23
jquery基础教程，总共分为10章，内容全面，讲解详细，是入门精通的好教程。
jQuery基础教程视频与源码（9集）
07-22
教程名称：jQuery基础教程视频与源码（9集）课程目录：【】jQuery基础教程-Exercise Files【】jQuery... Retrieving Page【】jQuery基础教程03. Manipulati 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
jQuery源码分析
10-10
jQuery源码分析 ...03 构造jQuery对象-源码结构和核心函数 03 构造jQuery对象-工具函数 05 异步队列 Deferred 08 队列 Queue 09 属性操作 10 事件处理-Event-概述和基础知识 15 AJAX-前置过滤器和请求分发器
jquery插件使用方法大全
05-24
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理...
jquery报错$(this).attr(‘checked‘)undefined/checkbox无法改变其状态:
SunPeng的博客
08-30 347
jquery报错$(this).attr('checked')undefined/checkbox无法改变其状态:
jquery select change $(this).attr("displaytype")写法错误
张玉龙
02-24 240
[code="js"] $(function(){ $('select[name="question.types"]').change(function(){ //var qtype=$(this).attr("displaytype"); var tdid=$(this).attr("value"); var qtype=$(this).attr(...
js/plugin/jquery_ajax_document.js
08-26
js/plugin/jquery_ajax_document.js是一个使用jQuery库的插件，用于处理Ajax请求和处理文档对象的操作。 该插件提供了一些方法来发送Ajax请求，可以将请求发送到服务器并获取响应数据。通过使用这些方法，我们可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值