【JQuery学习笔记三】JQuery学习总结

最新推荐文章于 2019-03-16 23:05:35 发布

public_TIM

最新推荐文章于 2019-03-16 23:05:35 发布

阅读量339

点赞数 1

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

版权

JQuery内容总结

学习JQuery后，发现使用JQuery时首先得加载JQuery相关的js包，使用Jquery的页面加载函数，然后获取元素（选择器和筛选的学习），给元素绑定或加载一个事件（事件的学习，通过函数来实现事件），在函数里面无非就是对节点对象进行处理和文档操作。

如何判断普通js对象和JQuery对象，在实际开发中，Jquery对象一般前面有个$符号，例如：
定义时：var opEle=；（普通）
var $opEle=;(JQuery对象)
获取时：通过选择器选择的是JQuery对象
通过document选择的是普通js对象
this获取的对象通过后面的处理方法决定是什么对象

页面加载：普通加载存在覆盖问题，而且速度慢。而JQuery加载速度快，不存在覆盖问题，按代码顺序执行。

在实际开发中，可以使用JQuery进行属性操作，文档处理，遍历操作，CSS操作，以及JQuery事件处理。

JQuery属性操作Demo

<html>

	<head>
		<meta charset="UTF-8">
		<title>属性操作_html代码</title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
		<script>
			/**
			 * 需求：
			 * 	1.点击按钮获取div中 html
			 * 	2.点击按钮设置div中html
			 */

			/**
			 * 方法分析
			 * 	1.html()方法用于读取innerHTML
			 * 	2.html(val)方法用于设置innerHTML
			 */
			
			/**
			 *代码实现 
			 */
			
			$(function(){
				//1.点击按钮获取div中 html
				$("#btn1").click(function(){
					var divEle = $("div").html();
					alert(divEle);//<p>传智播客</p>
				});
				
				//2.点击按钮设置div中html
				$("#btn2").click(function(){
					$("div").html("Java学院");//覆盖之前此位置的内容
				});
				
			})
		</script>
	</head>

	<body>
		<div><p>你好，世界！</p></div>
		<input type="button" value="获取html" id="btn1" />
		<input type="button" value="设置html" id="btn2" />
	</body>

</html>

JQuery文档处理Demo

html>
	<head>
		<meta charset="UTF-8">
		<title>文档处理_替换操作</title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
		<script>
			$(function(){
				//将B的内容替换掉A处的内容
			 	$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); 
			 	// 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 
			});
		</script>
	</head>
	<body>
		<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
		<ul>
		  <li title='苹果'>苹果</li>
		  <li title='橘子'>橘子</li>
		  <li title='菠萝'>菠萝</li>
		</ul>
	</body>
</html>

JQuery遍历操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用工具类遍历方式</title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
		<script>
			/**
			 * 说明：两种遍历方式，掌握其中一种即可，个人觉得此种方式较容易理解!
			 */
		
			$(function(){
				// 全选/ 全不选
				$("#checkallbox").click(function(){
					var isChecked = this.checked;
					//使用工具类遍历方式，语法：$.each(array，function(i,j){})  其中array代表被遍历的对象，i代表角标，j代表遍历后的内容。
					$.each($("input[name='hobby']"), function(i,j) {
						j.checked = isChecked;
					});
				});
			});
		</script>
	</head>
	<body>
		请选择您的爱好<br/>
		<input type="checkbox" id="checkallbox" /> 全选/全不选 <br/>
		<input type="checkbox" name="hobby" value="足球" /> 足球
		<input type="checkbox" name="hobby" value="篮球" /> 篮球
		<input type="checkbox" name="hobby" value="游泳" /> 游泳
		<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
	</body>
</html>

JQuery事件Demo

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>合成事件hover</title>
		<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
		<script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				$(".head").hover(function() {
					$(this).next().show();
				}, function() {
					$(this).next().hide();
				})
			})
		</script>
	</head>

	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
	</body>

</html>

public_TIM

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JQuery学习笔记三】JQuery学习总结

JQuery内容总结学习JQuery后，发现使用JQuery时首先得加载JQuery相关的js包，使用Jquery的页面加载函数，然后获取元素（选择器和筛选的学习），给元素绑定或加载一个事件（事件的学习，通过函数来实现事件），在函数里面无非就是对节点对象进行处理和文档操作。如何判断普通js对象和JQuery对象，在实际开发中，Jquery对象一般前面有个$符号，例如：定义时：var
复制链接

扫一扫