選擇元素
//jq
$('.el');
//js
document.queryselector("div");
div.queryselectorall('.el');
//mui
mui(".el")[0];
父、兄弟元素
//jq
$('.el').parent();
$('.el').prev();
$('.el').next();
$('.el').last();
$('.el').first();
//js
document.queryselector('.el').parentnode;
document.queryselector('.el').previouselementsibling;
document.queryselector('.el').nextelementsibling;
document.queryselector(".el").lastelementchild;
document.queryselector(".el").children[0];
獲取元素文字
//jq
$('.el').html();
$('.el').val();
$('.el').text();
$(el).replacewith(string);
//js
document.getelementbyid('el').innerhtml;
document.getelementbyid('el').value;
document.getelementbyid('el').textcontent
document.getelementbyid('el').outerhtml = string;
建立元素
//jq
var newel = $('');
//js
var newel = document.createelement('div');
set/get屬性
//jq
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');
$('.el').addclass('class');
$('.el').removeclass('class');
$('.el').toggleclass('class');
$(el).css('border-width', '20px');
//js
document.queryselector('.el').setattribute('key', 'value');
document.queryselector('.el').getattribute('key');
document.queryselector('.el').classlist.add('class');
document.queryselector('.el').classlist.remove('class');
document.queryselector('.el').classlist.toggle('class');
document.queryselector('.el').style.borderwidth = '20px';
附加//jq
//js
轉殖//jq
var clonedel = $('.el').clone();
//js
var clonedel = document.queryselector('.el').clonenode(true);移除
顯示和隱藏
//jq
$(el).show();
$(el).hide();
//js
el.style.display = '';
el.style.display = 'none';
是否包含某個 class
//jq
$(el).hasclass(classname);
//js
if (el.classlist)
el.classlist.contains(classname);
else
new regexp('(^| )' + classname + '( |$)', 'gi').test(el.classname);
新增 class
//jq
$(el).addclass(classname);
//js
if (el.classlist)
el.classlist.add(classname);
else
el.classname += ' ' + classname;
移除class
//jq
$(el).removeclass(classname);
//js
// removeclass, takes two params: element and classname
function removeclass(el, cls)
如果你只需要支援像ie10+,chrome,firefox,opera和safari這樣較現代的瀏覽器，那麼你可以開始使用html5的classlist功能，它讓增加和刪除類變得更簡單
el.classlist.add(classname);
el.classlist.remove("foo")
el.classlist.contains("foo");
el.classlist.toggle("active");
插入 html
//jq
$(el).before(htmlstring);
$(el).after(htmlstring);
//js
el.insertadjacenthtml('beforebegin', htmlstring);
el.insertadjacenthtml('afterend', htmlstring);
獲取子節點
//jq
$(el).children();
//js
el.children
trim
全選複製放進筆記//jq
$.trim(string);
//js
string.trim();
原生js和Jquery操作DOM
dom元素節點 1 文件節點 2 元素節點 3 屬性節點 4 文字節點 5 注釋節點 1 建立節點 2 選擇 訪問 節點 3 操作 1 節點操作 1 新增節點 2 刪除節點 3 替換節點 4 修改內容 1 文字 text 2 html 3 表單val 4 改變事件 2 css操作 3 動畫 下文 一...
原生JS和JQuery的ajax請求
一 原生js 1 get方法 得到xmlhttprequest 開啟與伺服器的連線 var url xhr.open get url,ture 同步為false，非同步為true 傳送請求,get 請求傳送為空 xhr.send null 接收伺服器的響應 xhr.onreadystatechang...
jQuery原生js實現 trim
中秋節快樂！今天有點空閒，特意找下簡單的jquery方法，但還算是實用的方法，jquery靜態方法trim。該方法能夠清楚字串首尾空格，一般用於輸入框，表單等地方。相信有點正則或者對js原生api有點了解都知道，該方法實現並不難，所以直接上 jquery原生js實現 trim 直接修改原生strin...