8、JS和JQ知识点、JQ入门、JQ和JS对比、切换效果-CSDN博客

本文链接：https://blog.csdn.net/yangbo_csdn/article/details/119616610

web目录标题

1、JavaScript - JS
2、JQuery -> JQ
3、JQ入门
4、JQ和JS对比
5、切换效果

1、JavaScript - JS

ECMAScript -> Java语法相似度99%
DOM -> Node节点
  document: getElement..
			creatElement()
  Element: setAttribute()
		   getAttribute()
		   appendChild()
		   innerHTML
		   childNodes -> 标签+文本(空文本)
  Attribute: 属性 src href value
  Text: 文本
BOM 
  Window -> this 弹窗类 计时器类 打开/关闭
  history -> back() forward()
  location -> href
顶层函数/全局函数 -> eval() encodeURI() decodeURI()
事件\函数\正则表达式\数组
  onclick onsubmit onchange onmouseover onmouseout onblur

2、JQuery -> JQ

JS代码库-提供函数库
CSS选择器: class选择器 id选择器 属性选择器 元素选择器
选择器: 通过一定手段选择一些元素
JQ选择器: 选择一些元素, 调用函数


属性:
  attr  removeAttr  -> attribute
	自定义属性<color>
  prop  removeProp  -> property
	固有属性<a href> <img src> <input checked>


$.each(object,[callback]): 可以循环任何数组(包括普通array, JQ数组)
jq对象.each()

json
 { key1: {
	 key1: {}
 }, key2: {}, key3:{} }
 
 key: {} , ...
 key: value , ...

3、JQ入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQ入门</title>
		<!-- 先引入JQuery代码库 -->
		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// JS的页面加载函数
			onload = function() {
				alert("老张")
			}
			// 再次定义, JS中页面加载函数不能重复定义, 否则会将之前的覆盖掉
			onload = function() {
				alert("老王")
			}
			// JQ的页面加载函数, 不会将JS的页面加载函数覆盖, 而且会先执行
			jQuery(document).ready(function() {
				alert("老李");
			});
			// JQ的页面加载函数可以有多个, 而且按顺序执行
			jQuery(function() {
				alert("老赵");
			});
			// jQuery -> $
			$(function() {
				alert("老刘");
			});
			
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

4、JQ和JS对比

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQ和JS对比</title>
		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function() {
					// JS对象
					var span = document.getElementById("msg");
					// 修改标签体内容
					span.innerHTML = "<font color=red>棒棒哒</font>";
					span.innerText = "萌萌哒";
					// 输入框内容修改
					var input = document.getElementById("text1");
					text1.value = "张无忌";
					console.log(text1.value);
					// JS对象使用了JQ的函数 -> 报错
					// console.log(span.html());
					// this对象是JS对象
					this.innerText = "this改掉了";
				});
				$("#btn2").click(function() {
					// JQ对象
					$("#msg").html("<font color=red>蠢蠢哒</font>");
					$("#msg").text("么么哒");
					$("#text1").val("赵敏");
					console.log($("#text1").val())
					// JQ对象使用了JS的属性 -> 报错
					//console.log($("#msg").innerText);
					
					// -- 掌握
					// JQ对象 转换成 JS对象 $("#msg").get(index)
					console.log($("#msg").get(0).innerText);
					
					// JS对象 转换成 JQ对象
					$(this).html("JQ的this改掉了");
				});
			});
		</script>
	</head>
	<body>
		<span id="msg"></span> <br>
		<button id="btn1">使用JS修改span的内容</button>
		<button id="btn2">使用JQ修改span的内容</button><br/>
		
		<input id="text1" type="text" placeholder="请输入用户名"/>
	</body>
</html>

在这里插入图片描述

5、切换效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>切换效果</title>
		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("#toggleBtn").click(function() {
					$("#img").toggle();
				});
			})
		</script>
	</head>
	<body>
		<img id="img" src="../media/image.jpg" /><br>
		<button id="toggleBtn">切换效果</button>
	</body>
</html>

在这里插入图片描述