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