页面加载:
- jQuery :$(ducument).ready(function(){
- });
原生 JS:
- Windows.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 属性值操作
- id="jq_ div" class="jack">jack love shanghai
- // 添加标签中的 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>
来源: http://www.bubuko.com/infodetail-3175885.html