标签：bootstra 区别 cto 事件处理机制 window val 获取 boot trap
一、什么是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); });
标签：bootstra 区别 cto 事件处理机制 window val 获取 boot trap
原文地址：https://www.cnblogs.com/xiao-ran/p/11341363.html
