jquery基础_01

最新推荐文章于 2022-05-15 12:02:14 发布

Junju_

最新推荐文章于 2022-05-15 12:02:14 发布

阅读量370

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/m0_58451019/article/details/124111366

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.jq的选择器

例子如下：

第一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--1,一定要引入 jquery的文件内容-->
		<script type="text/javascript" src="js/jquery-3.6.0.min.js" ></script>
		<!--2.就可以使用了-->
		
		<script type="text/javascript">
			//页面加载完毕后，执行的方法
			$(document).ready( function(){
				alert(111)
				

				$(".c01").click(function(){
					alert(this.innerText)
				})
			})
			//页面加载完毕后，执行的方法
			$(function(){
				alert(222)
				
				$("#d01").click(function(){
					alert( $("#d01").text() )
				})
			})
			
			
		</script>
		
	</head>
	<body>
		<div id="d01">111</div>
		<div  class="c01" >
			222
		</div>
		<span class="c01">
			333
		</span>
		<input type="checkbox" name="pd" id="pd" value="" />
		
		
	</body>
</html>

第二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 先把 jQuery 放到  js文件夹中，然后使用  js的引入外部文件代码，引入对应 的 jQuery 路径 -->		
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			//页面加载后执行
			
			$(function(){
				//找到 id为 shuru的元素内容，设置 失去焦点触发的事件
				$("#import").focusout(function(){
					//js 获取内容 this 单独使用就是  js中的内容，不能使用 jq中的内容
//					 alert( this.value);
					//使用jq  val() 获取到  输入的元素内容
					//jq  中   $(this) 指代的就是当前这一个jq对象，他和 js 对象是两个东西， jq中包含 js 内容，
					//js 中只能使用 js的 属性内容  jq中 只能使用jq自带的方法
//					console.log( this ) 
//					console.log( $(this)[0] ) 
//					console.log( $(this) ) 
					console.log( $(this).val() ) 
				})
				
				//获取多个input 可以通过  类型 标签名
				//js中的事件 jq中都有 只不过是把 js中的on去掉
				$("input").change(function(){
					//谁改变获取谁
					//js中的变量 同样可以获取到 jq中 的值
					var str = $(this).val()
					
					//写入到div  
//					html() 对标 innerHTML  就是写入一段html代码让浏览器解析
					$("#show").html("写入的值："+str)
				})
				console.log( $("input").length )
			})
		</script>
	</head>
	<body>
		//jQuery  都是 $ 开始 后面 小括号 ，小括号中是 选择对应元素内容的选择器  后面为 .方法名 为 需要执行的真正内容，一般方法都有参数的
		语法：
		$(selector).methodName(); 
		
		<input id="import" />
		
		<input  />
		
		<input />
		
		<input />
		
		<div id="show"></div>
		
		
	</body>
</html>

第三：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			$(function(){
				
				$("#afterYear").click(function(){
					//通过   jq的选择器中的  基本选择器 eq 定位到第几个元素
					$("div:eq(0)").html('<img src="img/strawberry1.jpg" />')
					//通过jq的 过滤器 .eq(1)方法 来选取到固定的元素内容
					$("div").eq(1).html('<img src="img/fish1.jpg" />')
				})
				
			})
			
			
		</script>
		
		
		
	</head>
	<body>
		<div><img src="img/strawberry.jpg" />这里种了一颗草莓</div>
		<div><img src="img/fish.jpg" />这里养了一条鱼</div>
		<div> <img src="img/3.jpg" /> 这里养了一条鱼</div>
		
		<input type="button" value="获取页面div数量" id="getCount" />
		<input type="button" value="几年后" id="afterYear" />
	</body>
</html>

第四：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #00FFFF;
				height: 30px;
				width: 100%;
			}
		</style>
		
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				$("button").click(function(){
					//odd 找到一组中的所有奇数  匹配所有索引值为奇数的元素，从 0 开始计数
//					css 为动态的设定 当前元素样式  可以一次设定一个值，也可以设定多个值，两种形式的写法不一样
					
					$("div:odd").html("1").css("background-color","red").css({
						"font-size":"28px",
						"height":"40px"
						})
					
					//匹配所有索引值为偶数的元素，从 0 开始计数
					$("div:even").html("2")
				})
			})
		</script>
		
	</head>
	<body>
		<button>更换一个皮肤</button>
		
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

Junju_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery基础_01

1.jq的选择器例子如下：第一：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>  <script type="text/javascript" src="js/jquery-3.6.0.min.js" ></script&..
复制链接

扫一扫

专栏目录