初识JQuery

JQuery是对JavaScript的封装，简化了JS代码，是主流框架的基础(VUE,EasyUI,Bootstrap)  它是2006年推出的

JQuery的优势：

	体积小，压缩后只有100KB左右
	强大的选择器
	出色的DOM封装
	可靠的事件处理机制
	出色的浏览器兼容性
	使用隐式迭代简化编程
	丰富的插件支持
引入Jquery库：
	<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
JQuery加载页面触发：

	/*js代码*/
			window.onload=function(){
				alert('js加载一');
			};
			/*jquery代码*/
			$(document).ready(function(){
				alert('Jquery加载一');
			});
			jQuery(document).ready(function(){
				alert('Jquery加载二');
			});
			/*对Jquery加载上面两种方式的简写*/
			$(function(){
				alert('Jquery加载三');
			});
		</script>
	window.onload和$(document).ready区别：
		window.onload只能有一个，没有简写方式，必须等待页面所有资源加载完毕之后才能触发
		$(document).ready可有多个，简介为$(function(){//代码})，等待页面上所有文档结构（html标签）记载完后触发
	JQuery设置样式：
		<script type="text/javascript">
			/*操作样式addClass()方法*/
			$(function(){
				//其实上就是动态的给标签加了一个class属性
				/* $("#whtdiv").addClass("wht"); */
				//单个设置css
				/* $("#lldiv").css("color","yellow");
				//设置多个
				$("#lldiv").css({"border":"1px solid blue","background-color":"pink"});
				//链式方式
				$("#whtdiv").css("color","green").css("border","1px solid blue"); */
				
				//下一个元素
				$("#whtdiv").css("color","green").next().css("color","pink").next().css("color","orange");
				
			});
			
		</script>

	<script type="text/javascript">
	
JQuery常用方法和事件：详情请见W3C

	$(function(){
			/*给显示图片按钮注册一个click事件*/
			$("#show").click(function(){
				$("#imgs").slideDown(3000);
			});
			$("#hide").click(function(){
				$("#imgs").slideUp(3000);
			});
		});
		----------------------------------------
		$(function(){
			$("li").mouseover(function(){
				//不能用$("li")
				$(this).css("color","blue");
			}).mouseout(function(){
				$(this).css("color","black");
			});
			
		}); 
	JQuery对象和Dom对象的相互转换：
		<script type="text/javascript">
			$(function(){
				/*js获取dom对象*/
				/* var dom=document.getElementById("wht5"); */
				/* alert(dom.innerHTML); */
				/* alert(dom.innerText); */
				/* 获取value属性值*/
				/* alert(dom.value); */
				
				
				/*jquery对象*/
				/* var $jdom=$("#wht5"); */
				/* alert(jdom.html()); */
				/* alert(jdom.text()); */
				/* 一般用于表单*/
				/* alert($jdom.val()); */
				
				/*Dom对象转换Jquery对象*/
				var dom=document.getElementById("wht");
				var $jdom=$(dom);
				$jdom.html();
				
				
				/*jquery转dom对象*/
				var $jdom=$("#wht5");
				var dom=$jdom[0];
				/* var dom=$jdom.get(0); */
				alert(dom.value);
			}); 
		</script>