初识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>