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