Javascript与jQuery谁才是前端霸主？

原生和jQuery使用对比

1.等待文档加载完成

   原生JavaScript: window.ofsnload=function(){}
   jQuery:  $(function(){}) 

2.操作元素

-------原生JavaScript操作元素属性 -------
   var 变量 = 元素.属性名 读取属性
   元素.属性名 = 新属性值 改写属性

   ​属性名在js中的写法： 
   1、html的属性和js里面属性写法一样
   2、“class” 属性写成 “className”
   3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

   <script type="text/javascript"> 
     window.onload = function(){ 
         var oInput = document.getElementById('input1'); 
         var oA = document.getElementById('link1');

        // 读取属性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href; 

        // 写(设置)属性 

        oA.style.color = 'red'; 
        oA.style.fontSize = sValue; 
  }  
 </script>

  ​<script type="text/javascript"> 
      window.onload = function(){ 
         var oDiv = document.getElementById('div1');
          //读取
         var sTxt = oDiv.innerHTML;
         alert(sTxt);

           //写入
          oDiv.innerHTML = '<a href="http://www.baidu.com">百度<a/>'; 
        } 
 </script>
 <div id="div1">这是一个div元素</div>

------- jQuery操作行间样式 ------

// 获取div的样式 
   $("div").css("width"); 
   $("div").css("color");

​//设置div的样式
   $("div").css("width","30px"); 
   $("div").css("height","30px");
   $("div").css({fontSize:"30px",color:"red"}); 
特别注意 :
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素

        // 取出html内容 
        var $htm = $('#div1').html();

        // 设置html内容
        $('#div1').html('<span>添加文字</span>');

        //prop() 取出或设置某个属性的值
        // 取出图片的地址 
        var $src = $('#img1').prop('src');

        // 设置图片的地址和alt属性
        $('#img1').prop({src: "test.jpg", alt: "Test Image" });


3.绑定事件格式

   原生JavaScript：oBtn.οnclick=function(){}
   jquery-->$btn.click(function(){})       
   jQuery常用的:blur(失去焦点)focus(获得焦点)submit(提交)等；

   **注意同样的事件原生的,会在事件前面加上"on" 如onmouseover\onmouseout等**


4.jQuery操作样式

   $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
   $("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
   $("#div1").removeClass("divClass divClass2") //移除多个样式


5.jQuery特殊效果

     fadeIn() 淡入
     $btn.click(function(){
         $('#div1').fadeIn(1000,'swing',function(){
             alert('淡入效果'); 
             });
     });

​     fadeOut() 淡出
     fadeToggle() 切换淡入淡出
     hide() 隐藏元素
     show() 显示元素
     toggle() 切换元素的可见状态
     slideDown() 向下展开
     slideUp() 向上卷起
     slideToggle() 依次展开或卷起某个元素

6.jQuery的链式调用
   jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

     $('#div1') // id为div1的元素 

       .children('ul') //该元素下面的ul子元素 
       .slideDown('fast') //高度从零变到实际高度来显示ul元素 
       .parent()  //跳到ul的父元素，也就是id为div1的元素 
       .siblings()  //跳到div1元素平级的所有兄弟元素 
       .children('ul') //这些兄弟元素中的ul子元素 
       .slideUp('fast');  //高度实际高度变换到零来隐藏ul元素