【JQuery学习笔记一】理解JQuery对象含义和JQuery选择器的使用！

最新推荐文章于 2022-04-21 11:20:32 发布

public_TIM

最新推荐文章于 2022-04-21 11:20:32 发布

阅读量684

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/public_TIM/article/details/78606824

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.JQuery是什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

可以简单地理解为JQuery是对js的封装扩展。

二.如何获得JQuery对象（比较JQuery对象和DOM对象）由于JQuery是一个库，所以要想使用该框架，首先得引入js包：

jquery-1.8.3.js：一般用于学习阶段。jquery-1.8.3.min.js：用于项目使用阶段。

引入js包代码：<scriptsrc="../../js/jquery-1.8.3.js"></script>

1.js获取对象的方式和JQuery获取对象的方式不一样：

JS获取对象:document.getElementById();

JQ获取对象:$(“#id”);其中$相当于JQuery，实际开发中简写成$.

在实际开发中由于不同对象的使用方法不一样，而且JQuery无法操作js对象，js无法操作JQuery对象。因此可以通过js对象和JQuery对象之间的转换来解决此问题，便于开发。

2.JQuery对象与DOM对象转换。

<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
       <script>
           function JSWrite(){
              //document.getElementById("span1").innerHTML="美美哒！";
			   //JS对象转换为JQuery对象
              var spanEle = document.getElementById("span1");
              $(spanEle).html("美美哒！");
           }
           
           $(function(){
              /*document.getElementById("btn1").οnclick= function(){
                  document.getElementById("span1").innerHTML="帅帅哒！";
              }*/
              $("#btn1").click(function(){
                  //JQ对象转换成DOM对象的第一种方式
                  //$("#span1")[0].innerHTML="呵呵哒！";
                  //JQ对象转换成DOM对象的第二种方式
                  $("#span1").get(0).innerHTML="呵呵哒！";
              });
              
           });
       </script>
    </head>
    <body>
       <input type="button" value="JS写入" οnclick="JSWrite()"/>
       <input type="button" value="JQ写入" id="btn1"/><br /><br />
       <span id="span1">sssss</span>
    </body>

注意：JQ对象只能操作JQ里面的属性和方法

JS对象只能操作JS里面的属性和方法。

3.JQuery入门之Toogle的使用。

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("#img1").toggle();
				});
			});
			
		</script>
	</head>
	<body>
		<input type="button" value="显示/隐藏" id="btn1"/><br />
		<img src="../img/registImg.jpg" id="img1" />
	</body>
</html>

Toogle方法，若目标对象显示，则修改为隐藏，反之则修改成显示。

二.JQuery的选择器。

JQuery选择器用来选择操作对象，对于选择器的学习和使用可以参考JQuery1.4.1中文参考文件，其中：

1.基本选择器种类分为：

id选择器:$("#id");

元素选择器：$("元素");

类选择器：$(".类名");

通配符：*

多个选择器共用（并集）

Demo代码：

<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</title>
		<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("#one").css("background-color","pink");//设置id为one的元素背景颜色为粉色
				});
				$("#btn2").click(function(){
					$(".mini").css("background-color","pink");//设置类名为mini的元素背景颜色为粉色
				});
				$("#btn3").click(function(){
					$("div").css("background-color","pink");//设置所有的div元素的背景颜色为粉色
				});
				$("#btn4").click(function(){
					$("*").css("background-color","pink");//设置所有元素的背景颜色为粉色，包括body
				});
				$("#btn5").click(function(){
					$("#two .mini").css("background-color","pink");//设置id为two并且类名为mini的元素背景颜色为粉色。
				});
			});
		</script>		
	</head>
	<body>
		<input type="button" id="btn1" value="选择为one的元素"/>
		<input type="button" id="btn2" value="选择类名为mini的元素"/>
		<input type="button" id="btn3" value="选择所有的div元素"/>
    <input type="button" id="btn4" value="选择所有元素"/>
       <input type="button" id="btn5" value="选择id为two并且类名为mini的元素"/>
       <hr/>
       <div id="one">
           <div class="mini">
              111
           </div>
       </div>
       
       <div id="two">
           <div class="mini">
              222
           </div>
           <div class="mini">
              333
           </div>
       </div>
       
       <div id="three">
           <div class="mini">
              444
           </div>
           <div class="mini">
              555
           </div>
           <div class="mini">
              666
           </div>
       </div>
       
       <span id="four">
           
       </span>
    </body>
</html>

2.层级选择器：
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

Demo代码：

<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" href="../../css/style.css" />
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("body div").css("background-color","pink");//body元素下的所有div子元素
				});
				$("#btn2").click(function(){
					$("body>div").css("background-color","pink");//body元素下的一级div子元素
				});
				$("#btn3").click(function(){
					$("#two+div").css("background-color","pink");//id为two的元素后面的div元素（同一级）
				});
				$("#btn4").click(function(){
					$("#one~div").css("background-color","pink");//id为one元素之后的所有div兄弟元素（同一级）
				});
			});
			
		</script>
		
		
	</head>
	<body>
		<input type="button" id="btn1" value="选择body中的所有的div元素"/>
		<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
		<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
		<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

3.基本过滤选择器
$('li').first() 等价于：$(“li:first”)

Demo代码：

<html>
	<head>
		<meta charset="UTF-8">
		<title>基本过滤选择器</title>
		<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("div:first").css("background-color","pink");//第一个div元素
				});
				$("#btn2").click(function(){
					$("div:last").css("background-color","pink");//最后一个div元素
				});
				$("#btn3").click(function(){
					$("div:odd").css("background-color","pink");//索引值为奇数的div元素（从0开始）
				});
				$("#btn4").click(function(){
					$("div:even").css("background-color","pink");//索引值为偶数的div元素（从0开始）
				});
			});
		</script>
		
	</head>
	<body>
		<input type="button" id="btn1" value="body中的第一个div元素"/>
		<input type="button" id="btn2" value="body中的最后一个div元素"/>
		<input type="button" id="btn3" value="选择body中的奇数的div"/>
		<input type="button" id="btn4" value="选择body中的偶数的div"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

4.属性选择器。

Demo代码：

<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" href="../../css/style.css"  type="text/css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("div[id]").css("background-color","pink");//选择有id属性的div元素
				});
				$("#btn2").click(function(){
					$("div[id='two']").css("background-color","pink");//选择有id属性并且id为two的div元素
				});
			});
			
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择有id属性的div"/>
		<input type="button" id="btn2" value="选择有id属性的值为two的div"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

5.表单选择器。

Demo代码：

<html>
	<head>
		<meta charset="UTF-8">
		<title>表单选择器</title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$(":input").css("background-color","pink");//选择所有input元素
				});
				$("#btn2").click(function(){
					$(":text").css("background-color","pink");//选择所有text元素
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择所有input元素" />
		<input type="button" id="btn2" value="选择文本框" />
		<br/>
		<form>
			<input type="text" /><br />
			<input type="checkbox" /><br />
			<input type="radio" /><br />
			<input type="image" /><br />
			<input type="file" /><br />
			<input type="submit" />
			<input type="reset" /><br />
			<input type="password" /><br />
			<input type="button" /><br />
			<select><option/></select><br />
			<textarea></textarea><br />
			<button></button>
		</form>
	</body>
</html>

三，使用JQuery完成表格的全选和全不选。
需要使用jquery的选择器(id选择器、类选择器)
需要使用jQuery的属性操作方法 prop()
步骤：第一步：引入jquery文件
第二步：书写页面加载函数
第三步：为上面的复选框绑定单击事件
第四步：将下面所有的复选框的选中状态设置成跟上面的一致！
代码：

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
	$(function(){
		//找到下面所有的复选框并设置属性checked()
		/*if($("#select")[0].checked==true){
			$(".selectOne").attr("checked",true)
		}*/
		$("#select").click(function(){
			$(".selectOne").attr("checked",this.checked);
		});
	});
</script>

public_TIM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JQuery学习笔记一】理解JQuery对象含义和JQuery选择器的使用！

一.JQuery是什么？jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理
复制链接

扫一扫

专栏目录