JS和JQ知识点、JQ入门、JQ和JS对比、切换效果

x33g5p2x  于2021-08-13 转载在 JavaScript  
字(3.5k)|赞(0)|评价(0)|浏览(172)

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>

在这里插入图片描述

相关文章