一、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加载页面触发
<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); }); </script>
九、总结