jquey與javascript相通運用查找（全）

時間 2019-11-06

標籤 jquey javascript 相通運用查找欄目 JavaScript 简体版

原文原文鏈接

一、addClass\removeClass\classList(js)javascript

jQ：$('#div').addClass('hover')=====document.getElementById('div').classList.add('hover')css

jQ:$('.div').removeClass('hover')=====document.getElementsByClassName('div').classList.remove('hover')html

二、text()\textContentjava

jQ:$('#div').text()=====document.getElementById('div').textContentweb

三、attr()\setAttribute chrome

jQ:$('#div').attr('disabled','disabled')=====document.getElementById('div').setAttribute('disabled','disabled')windows

四、:checked\checked數組

$('#div:checked')=====document.getElementById('div').checked;\\選中效果瀏覽器

五、removeAttr\removeAttribute （移除標籤屬性）app

JQ:$('#div').removeAttr('class')=====document.getElementById('div').removeAttribute('class'); //移除屬性

六、append\appendChild(append方法被選元素的結尾（仍然在內部）插入指定內容、appendChild() 方法向節點添加最後一個子節點。)

ar newImg=document.createElement('img');

JQ:$('div').append('<div></div>>')=====document.getElementById('div').appendChild(newImg)

七、建立script插入head中

var object={id: "J_prismPlayer",autoplay: true,width: "562px",height: "490px",vid:res.data.data.vid,playauth:res.data.data.playauth};
var html='var player = new prismplayer('+JSON.stringify(object)+')';
var myScript = document.createElement('script');
    myScript.type = 'text/javascript';  
    myScript.id="playerId";
    myScript.defer = true;              
    myScript.innerHTML = html;
document.getElementsByTagName("head")[0].appendChild(myScript);      //把dom掛載到頭部

八、js：removeChild刪除節點

document.getElementsByTagName("head")[0].removeChild(document.getElementById('playerId'));

注意：.classList屬性擁有length屬性、(item、add、remove、contains、toggle)方法，其中：

length：靜態屬性。獲取元素類名的個數；var len = document.body.classList.length;

item:方法。獲取元素的類名，接受一個參數，即數字索引；var cls = document.body.classList.item(index); //若是index超出範圍，則返回null

add:方法。用於增長元素的類，接受一個參數，即類名；document.body.classList.add('myclass');//它一次性只能增長一個類

remove:方法。用於刪除元素的類，接受一個參數，即類名。和add同樣，它一次性只能刪除一個類；document.body.classList.remove('myclass');

contains：方法。用於檢測元素是否包含某個類，返回Boolean值。document.body.classList.contains('myclass'); //返回true或者false

toggle:方法。這個傢伙是add、remove、contains的三合一版，不只能檢測元素是否包含某個類，並且還具有增刪功能，即若是存在某個類，就remove掉，若是不存在，就add一下。返回一個Boolean值。document.body.classList.toggle('classtest'); //true //若是body不存在classtest的類名，就會給body增長一個classtest的類

document.body.classList.toggle('classtest'); //false //再執行一遍，classtest已被刪除了

二、createElement/setAttribute

setAttribute(class, value)中class是指改變class這個屬性，因此要帶引號。vName表明對樣式賦值。

JS:建立一個彈窗圖層

var maskArrow = document.createElement("div");
maskArrow.setAttribute('class','new-abtn-slid');其中，element.setAttribute(className, value); //for IE
maskArrow.setAttribute('style','z-index:88888889;left:auto;right:185px;');
maskArrow.setAttribute('id','_maskArrow');

(document.body||document.documentElement).appendChild(maskArrow);

另外：

爲達到兼容各類瀏覽器的效果，能夠用點符號法來設置Element的對象屬性、集合屬性和事件屬性。
document.getElementById(testbt).className = bordercss;
document.getElementById(testbt).style.cssText = color: #00f;;
document.getElementById(testbt).style.color = #00f;
document.getElementById(testbt).onclick= function () { alert(This is a test!); }

三、document.documentElement.clientwidth餘document.body.clientwidth區別（連接）

Document對象是每一個DOM樹的根，可是它並不表明樹中的一個HTML元素，document.documentElement屬性引用了做爲文檔根元素的html標記，document.body屬性引用了body標記

咱們這裏獲取常見的三個值（scrollWidth、offsetWidth和clientwidth）來比較一下

document.documentElement.scrollWidth返回整個文檔的寬度
document.documentElement.offsetWidth返回整個文檔的可見寬度
document.documentElement.clientwidth返回整個文檔的可見寬度（不包含邊框），clientwidth = offsetWidth - borderWidth
不過通常來講，咱們不會給document.documentElement來設置邊框，因此這裏的clientwidth 與 offsetWidth一致

document.body.scrollWidth返回body的寬度
注意，這裏的scrollWidth有個不一致的地方，基於webkit的瀏覽器（chrome和safari）返回的是整個文檔的寬度，也就是和document.documentElement.scrollWidth一致，
opera和FF返回的就是標準的body 的scrollWidth，我的以爲opera和FF算是比較合理的。
document.body.offsetWidth返回body的offsetWidth
document.body.clientwidth返回body的clientwidth（不包含邊框），clientwidth = offsetWidth - borderWidth

咱們看上面的例子，會發現body和documentElement的有些值是相等的，這並非表示他們是等同的。而是由於當咱們沒有給body設置寬度的時候，document.body默認佔滿整個窗口寬度，因而就有：
document.body.scrollWidth = document.documentElement.scrollWidth
document.body.offsetWidth = document.documentElement.offsetWidth
document.body.clientwidth = document.documentElement.clientwidth - document.body.borderWidth（body的邊框寬度）
當咱們給body設置了一個寬度的時候，區別就出來了。

IE9/IE8
這兩個差很少，惟一的區別是IE9包含windows.innerWidth屬性，而IE8不包含windows.innerWidth屬性。
document.documentElement.scrollWidth返回整個文檔的寬度，和FF等瀏覽器一致
document.documentElement.offsetWidth返回整個文檔的可見寬度（包含滾動條，值和innerWidth一致），注意，這裏和FF等瀏覽器又有點區別。
document.documentElement.clientwidth返回整個文檔的可見寬度（不包含邊框），和FF等瀏覽器一致。clientwidth = offsetWidth - 滾動條寬度

document.body.scrollWidth返回body的寬度，注意，這裏的scrollWidth和FF等瀏覽器有點區別，這裏並不包括body自己的border寬度。
所以例子中，相比FF少了10px。
document.body.offsetWidth返回body的offsetWidth，和FF等瀏覽器一致
document.body.clientwidth返回body的clientwidth（不包含邊框），和FF等瀏覽器一致，clientwidth = offsetWidth - borderWidth

IE7
IE7與IE9/IE8的主要區別是
第1、document.documentElement.offsetWidth的返回值不同，
參見上面說的，IE9/IE8的document.documentElement.offsetWidth包含滾動條，可是，IE7的document.documentElement.offsetWidth不包含滾動條。
第2、document.documentElement.scrollWidth返回整個文檔的寬度，注意，這裏和IE9/IE八、FF等瀏覽器又有不一致，對於IE9/IE八、FF等瀏覽器，scrollWidth最小不會小於窗口的寬度，可是在IE下沒有這個限制，文檔有多小，這個就有多小
其餘卻是挺一致的。

最後是IE6了
IE6的document.documentElement返回值與IE9/IE8沒有區別（因而可知，對於document.documentElement，IE7就是個奇葩）。
話說回來，IE的document.body就是個奇葩，當沒有給body設置寬度的時候，body是默認佔滿整個文檔的（注意，其餘的瀏覽器都是佔滿整個窗口），固然，最小值是整個窗口的大小，就是說body指向了根元素。
所以，在算上IE6在解析width方面的bug，和其餘的瀏覽器的區別就淋漓盡致了。
document.body.scrollWidth返回body的寬度，和IE9/IE8/IE7一致
document.body.offsetWidth返回body的offsetWidth，注意，因爲body的不一樣，這裏的offsetWidth = scrollWidth + borderWidth
document.body.clientwidth返回body的clientwidth（不包含邊框）clientwidth = offsetWidth - borderWidth
另外，有一點和IE7一樣，就是document.documentElement.scrollWidth沒有最小寬度限制。