初始jquery

Posted 2022-07-05 xiao-ran

一、什么是JQuery：

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

二、JQuery的优势：
　　　　1.体积小，压缩后只有100KB左右

　　　　2.强大的选择器

　　　　3.出色的DOM封装

　　　　4.可靠的事件处理机制

　　　　5.出色的浏览器兼容性

　　　　7.使用隐式迭代简化编程

　　　　8.丰富的插件支持

三、JQuery的用途：

　　　　1.访问和操作DOM元素

　　　　2.控制页面样式

　　　　3.对页面事件的处理

　　　　4.方便地使用jQuery插件

　　　　5.与ajax技术完美结合

四、引入Jquery库：

　　JQuery库的类型分为两种，分别是开发版(未压缩版)和发布版(压缩版)

　　<script src="js/jquery-3.4.1.js" type="text/javascript"></script>

五、JQuery语法

　　$(selector).action();

　　　　$()、selector、action() : 工厂函数、选择器、方法

　　工厂函数$():

　　　　美元符号"$"等价于jQuery,即$()=jQuery()。$()的作用是将dom对象转化为jQuery对象，从而使用jQuery方法。

/*JQuery加载页面触发：*/
<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>

　　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>

　　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);
);