jquey与javascript相通运用查找（全）

时间：2020-12-26 21:50:52

1、addClass\removeClass\classList(js)

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

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

2、text()\textContent

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

3、attr()\setAttribute 

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

4、:checked\checked

$('#div:checked')=====document.getElementById('div').checked;\\选中效果

 5、removeAttr\removeAttribute   （移除标签属性）

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

6、append\appendChild(append方法被选元素的结尾（仍然在内部）插入指定内容、appendChild() 方法向节点添加最后一个子节点。)

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

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

 7、创建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挂载到头部

8、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已被删除了

2、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!); }

3、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的主要区别是
第一、document.documentElement.offsetWidth的返回值不一样，
参见上面说的，IE9/IE8的document.documentElement.offsetWidth包含滚动条，但是，IE7的document.documentElement.offsetWidth不包含滚动条。
第二、document.documentElement.scrollWidth返回整个文档的宽度，注意，这里和IE9/IE8、FF等浏览器又有不一致，对于IE9/IE8、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没有最小宽度限制。
 

4、JS的一些DOM方法

getElementById()-----返回带有指定 ID 的元素。

getElementsByTagName()------返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

getElementsByClassName()-----返回包含带有指定类名的所有元素的节点列表。

appendChild()------把新的子节点添加到指定节点。

removeChild()-------删除子节点。

replaceChild()-------替换子节点。

insertBefore()-------在指定的子节点前面插入新的子节点。

createAttribute()------创建属性节点。

createElement()-------创建元素节点。

createTextNode()-------用指定的文本创建新的TextNode节点。

getAttribute()-------返回指定的属性值。

setAttribute()-------把指定属性设置或修改为指定的值。

本地查看效果：app/plug/globalPop/index.html

JS获取节点dom操作：http://www.cnblogs.com/seamar/archive/2011/07/25/2116197.html

相关文章