Jquery操作与原生js操作对比

       页面加载：

         Jquery ：$（ducument）.ready(function(){

　　});

         原生js：

                   window.onload=(){

                   };

       取值：

                   表单元素：

                                     原生：value

                                     jQuery：val()

                   非表单元素：

　　　　　　　　　　原生：innerHTML || innertext

　　　　　　　　　　jQuery：html（） ||text（）

                   通过id选择器：

　　　　　　　　　　原生：document.getElementById’id值').value

　　　　　　　　　　jQuery：$('# id值').val()

                   通过class选择器

　　　　　　　　　　原生：document.getElementByClassName（’id值')[0].value

                                     jQuery：$('.class值').val()

                   通过标签选择器

　　　　　　　　　　原生：document.getElementsByTagName('标签名')[0].value

         　　　　　　　　多个判断：for(var i=0;i<ini.length;i++){

                   　　　　　　console.log(ipt[i].value)

　　　　　　jQuery：

　　　　　　　　单个标签获取：var ini =$('input');

　　　　　　　　console.log($(ini).val())

　　　　　　　　单个标签获取：

　　　　　　　　var ini =$('input');

        　　　　　　for(var i=0;i<ini.length;i++){

                  　　　　 console.log($(ini[i]).val())

         　　　　　　　}

　　　　　　　　　}

                   　　　　通过属性选择器（例name名）

                                     Jquery：var ji =$(('input[type="text"]').val()

　　赋值：

         　　原生js非表单赋值

                   　　Var div_in = document.getElementById(‘new_div’);

                  　　 Div_in.innerHTML =’这是一个div’

　　　　Jquery  非表单赋值

　　　　　　　　Var str =’登录成功’ ；

　　　　　　　　$（'#tishi’）.hml(str);

　　标签隐藏显示

         原生js

                   Document. getElementById(‘id值’).style.display =’none’   隐藏

                   Document. getElementById(‘id值’).style.display =’block’     显示

         jQuery：$（’#id值’）.hide();     隐藏

                       $（’#id值’）.show();    显示

　　层次选择器

　　一,获取父级下所有的子集       具有穿透性

         $（’父标签 子标签’）

　　二，获取子集下的第一层级标签      不具有穿透性

　　$（’父标签>子标签’）

　　三，获取兄弟标签    只能获取到第一个兄弟标签

　　$（’自身标签名+兄弟标签名’）

　　四，获取所以的相同兄弟标签

　　$（’自身标签名~兄弟标签名’）

　　内容过滤选择器

　　1 :contains(内容)
　　包含内容选择器,获得节点内部必须通过标签包含指定的内容
　　2 :empty
　　获得空元素(内部没有任何元素/文本(空) ) 节点対象
　　3. :has (选择器)
　　内部包含指定元素的选择器
　　4. :parent
　　寻找的节点必须作为父元素节点存在。

　　属性操作

           　　原生js :

      　　<div id="nn" data= "这是一个div">linken love beijing</div>var bq = document. getElementById( 'nn');

      　　获取: getAttr ibute

     　　 var get_ data = document. getAttr ibute( 'data'）;

      　　修改和没置: setAttr ibute

      　　var set_ data = bq. setAttr ibute( 'data',’这是个真div’）;

      　　刪除: removeAttr ibute

      　　bq. removeAttr ibute( 'data’）;

      　　jquery:

      　　<div id="jq_ div" data- flage="这是上海的div">jack loveshanghai</div>

     　　 获取: obj.attr(属性名);

      　　$( '#jq_ div'.attr( 'data- flage'）;

      　　修改和没置: obj.attr(属性名,属性値) ;

      　　sC'#jq_ div'.attr( 'data-flage', 'Bu, 这是上海的茅厠'）;

    　　  刪除: obj. removeAttr (属性名);

      　　$( '#jq_ div'）.removeAttr( 'data- flage'）;

　　Class属性值操作

      　　<div id="jq_ div" class="jack">jack love shanghai</div>

        　　 //添加标签中的class值

      　　var jj = $('. jack '). addClass( 'toney');

      　　console. log($('. jack').attr('class')); //jack toney

        　　 //删除标签中的class值

      　　var jj s $('.jack ').removeClass( 'toney ');console. log($('. jack').attr('class')); //jack

      　　// 开关效果，有就删除，没有就添加

      　　var ii = $('.jack'). toggleClass( 'toney'); .

      　　console. log($('. jack').attr('class');. //jack toney

　　CSS样式操作

        　　 原生js

                  　　 只能对标签内联设置的样式进行设置（行内样式）

　　　　jQuery

         　　　　它可以读取 行内、内部、外部的样式并且进行设置。

　　　　表单不可编辑

        　　 Readonly

         　　Disabled

　　　　<input type="text" value="haha" disabled>