jquey与javascript相通运用查找(全)
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相通运用查找(全)的更多相关文章
- JavaScript自动计算价格和全选
JavaScript自动计算价格和全选,价格自增加减,复选框,反选,全选. 如图: 如图: CSS代码 @charset "gb2312"; /* CSS Document */ ...
- javascript小技巧(非常全)
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
- (网页)javascript小技巧(非常全)
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
- JavaScript引擎LHS查找和RHS查找
要想真正理解Javascript脚本中每一句代码的执行过程,需要弄清楚几个基本概念:1.引擎,从头到尾负责整个 JavaScript 程序的编译及执行过程.2.编译器,引擎的好朋友之一,负责语法分析及 ...
- Javascript实现CheckBox的全选与取消全选的代码(转)
js函数 复制代码 代码如下: <script type="text/javascript"> function checkAll(name) { var el = d ...
- JavaScript案例四:全选练习
JavaScript实现全选,全不选等效果... <!DOCTYPE html> <html> <head> <title>JavaScript全选练习 ...
- javascript实现二分查找
今天做了道笔试题,要求是实现二分查找,当然不难,想了一下,因为没有要求语言就用javascript实现了.当然,期间还是出来了一点问题. ok,上代码 /* * 稳定二分查找 * 作者:吴伟欣 * * ...
- JavaScript基础篇最全
本章内容: 简介 定义 注释 引入文件 变量 运算符 算术运算符 比较运算符 逻辑运算符 数据类型 数字 字符串 布尔类型 数组 Math 语句 条件语句(if.switch) 循环语句(for.fo ...
- 浅析JavaScript的字符串查找函数:indexOf和search
语法 ①indexOf:方法可返回某个指定的字符串值在长字符串中首次出现的位置.如果被查找字符串没有找到,返回-1. indexOf 说明:该方法将从头到尾地检索字符串 stringObject,看它 ...
随机推荐
- Node.js配置And HelloWorld
先从https://nodejs.org/en/上下载Node.js的安装程序 node-v4.4.4-x64.msi 直接双击运行,安装到默认路径 C:\Program Files\nodejs ...
- Windows Locale Codes - Sortable list(具体一个语言里还可具体细分,中国是2052,法国是1036)
Windows Locale Codes - Sortable list NOTE: Code page is an outdated method for character encoding, y ...
- 数字和为sum的方法数
[编程题] 数字和为sum的方法数 给定一个有n个正整数的数组A和一个整数sum,求选择数组A中部分数字和为sum的方案数. 当两种选取方案有一个数字的下标不一样,我们就认为是不同的组成方案. 输入描 ...
- 毕设1--利用Java实现网页的模板功能技术---简要了解
首先,关于我对自己的毕业设计题目的理解,其中没有接触过的技术有怎么用Java实现将原有的Word的模板上传到网页中,在网页中进行相关操作.之所以把这部分放在一开始来进行了解是因为没有接触过这一方面,比 ...
- 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 ...
- cloudera learning6:Hadoop Security
保证Hadoop安全的最有效方法是对cluster进行隔离(isolation,常用方法是把大集群划分若干个小集群). Hadoop安全措施的目的是防止好的人不小心做了坏的事,而非防止坏人坏事. Ke ...
- SVG知识难点
参考资料:http://www.w3cplus.com/css3/clip.html 1.clip:默认值是auto,为不裁剪 <img border="0" src ...
- SpringMVC原理解析-Servlet容器启动时初始化SpringMVC应用的原理
- 扩展映射 Diffusion maps
Diffusion maps接触到扩展映射,高维数据降维的相关东西. 扩展映射是一种非线性方法.
- 关于Java中基本类型的长度相关基础知识
1. 用HeapByteBuffer放int占几个byte? 占4个.而且不论你是放1还是-1还是0xffff. 因为int的长度是4个byte,HeapByteBuffer的存储又是byte数组. ...