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

jquey与javascript相通运用查找(全)的更多相关文章

  1. JavaScript自动计算价格和全选

    JavaScript自动计算价格和全选,价格自增加减,复选框,反选,全选. 如图: 如图: CSS代码 @charset "gb2312"; /* CSS Document */ ...

  2. javascript小技巧(非常全)

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  3. (网页)javascript小技巧(非常全)

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  4. JavaScript引擎LHS查找和RHS查找

    要想真正理解Javascript脚本中每一句代码的执行过程,需要弄清楚几个基本概念:1.引擎,从头到尾负责整个 JavaScript 程序的编译及执行过程.2.编译器,引擎的好朋友之一,负责语法分析及 ...

  5. Javascript实现CheckBox的全选与取消全选的代码(转)

    js函数 复制代码 代码如下: <script type="text/javascript"> function checkAll(name) { var el = d ...

  6. JavaScript案例四:全选练习

    JavaScript实现全选,全不选等效果... <!DOCTYPE html> <html> <head> <title>JavaScript全选练习 ...

  7. javascript实现二分查找

    今天做了道笔试题,要求是实现二分查找,当然不难,想了一下,因为没有要求语言就用javascript实现了.当然,期间还是出来了一点问题. ok,上代码 /* * 稳定二分查找 * 作者:吴伟欣 * * ...

  8. JavaScript基础篇最全

    本章内容: 简介 定义 注释 引入文件 变量 运算符 算术运算符 比较运算符 逻辑运算符 数据类型 数字 字符串 布尔类型 数组 Math 语句 条件语句(if.switch) 循环语句(for.fo ...

  9. 浅析JavaScript的字符串查找函数:indexOf和search

    语法 ①indexOf:方法可返回某个指定的字符串值在长字符串中首次出现的位置.如果被查找字符串没有找到,返回-1. indexOf 说明:该方法将从头到尾地检索字符串 stringObject,看它 ...

随机推荐

  1. Node.js配置And HelloWorld

    先从https://nodejs.org/en/上下载Node.js的安装程序  node-v4.4.4-x64.msi 直接双击运行,安装到默认路径 C:\Program Files\nodejs ...

  2. Windows Locale Codes - Sortable list(具体一个语言里还可具体细分,中国是2052,法国是1036)

    Windows Locale Codes - Sortable list NOTE: Code page is an outdated method for character encoding, y ...

  3. 数字和为sum的方法数

    [编程题] 数字和为sum的方法数 给定一个有n个正整数的数组A和一个整数sum,求选择数组A中部分数字和为sum的方案数. 当两种选取方案有一个数字的下标不一样,我们就认为是不同的组成方案. 输入描 ...

  4. 毕设1--利用Java实现网页的模板功能技术---简要了解

    首先,关于我对自己的毕业设计题目的理解,其中没有接触过的技术有怎么用Java实现将原有的Word的模板上传到网页中,在网页中进行相关操作.之所以把这部分放在一开始来进行了解是因为没有接触过这一方面,比 ...

  5. mysql 联合查询后update

    SELECT a.user_name,a.avatar,a.nicheng,a.user_rank,b.rank_name,b.rank_img FROM ecs_users a , ecs_user ...

  6. cloudera learning6:Hadoop Security

    保证Hadoop安全的最有效方法是对cluster进行隔离(isolation,常用方法是把大集群划分若干个小集群). Hadoop安全措施的目的是防止好的人不小心做了坏的事,而非防止坏人坏事. Ke ...

  7. SVG知识难点

      参考资料:http://www.w3cplus.com/css3/clip.html   1.clip:默认值是auto,为不裁剪 <img border="0" src ...

  8. SpringMVC原理解析-Servlet容器启动时初始化SpringMVC应用的原理

  9. 扩展映射 Diffusion maps

    Diffusion maps接触到扩展映射,高维数据降维的相关东西. 扩展映射是一种非线性方法.

  10. 关于Java中基本类型的长度相关基础知识

    1.  用HeapByteBuffer放int占几个byte? 占4个.而且不论你是放1还是-1还是0xffff. 因为int的长度是4个byte,HeapByteBuffer的存储又是byte数组. ...