初识jQuery

1、什么是JQuery

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

2、JQuery的优势

（1）体积小，压缩后只有100KB左右
（2）强大的选择器
（3）出色的DOM封装
（4）可靠的事件处理机制
（5）出色的浏览器兼容性
（6）使用隐式迭代简化编程
（7）丰富的插件支持

3、引入Jquery库 JQuery加载页面触发

<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*js代码*/
window.onload=function(){
alert('js加载一');
};
/*jquery代码*/
$(document).ready(function(){
alert('Jquery加载一');
});
jQuery(document).ready(function(){
alert('Jquery加载二');
});
/*对Jquery加载上面两种方式的简写*/
$(function(){
alert('Jquery加载三');
});
</script>

4、window.onload和$(document).ready区别

（1）window.onload只能有一个，没有简写方式，必须等待页面所有资源加载完毕之后才能触发
（2）$(document).ready可有多个，简介为$(function(){//代码})，等待页面上所有文档结构（html标签）记载完后触发

5、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>

6、JQuery常用方法和事件

<script type="text/javascript">
$(function(){
/*给显示图片按钮注册一个click事件*/
$("#show").click(function(){
$("#imgs").slideDown(3000);
});
$("#hide").click(function(){
$("#imgs").slideUp(3000);
});
});
</script>

7、隐式迭代

$(function(){
$("li").mouseover(function(){
//不能用$("li")
$(this).css("color","blue");
}).mouseout(function(){
$(this).css("color","black");
});
}); 

8、JQuery对象和Dom对象的相互转换

<script type="text/javascript">
$(function(){
/*js获取dom对象*/
 var dom=document.getElementById("wht5"); 
/alert(dom.innerHTML); 
 alert(dom.innerText); 
/* 获取value属性值*/
 alert(dom.value); 
</script>

9、jquery对象

var $jdom=$("#wht5");
alert(jdom.html()); 
alert(jdom.text()); 
/* 一般用于表单*/
alert($jdom.val());

10、Dom对象转换Jquery对象

var dom=document.getElementById("wht");
var $jdom=$(dom);
$jdom.html();

11、jquery转dom对象

<script type="text/javascript">
var $jdom=$("#wht5");
var dom=$jdom[0];
var dom=$jdom.get(0);
alert(dom.value);
}); 
</script>