令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。 如今,已经出现了如prototype、Mootools等多个JavaScript库,它们提供了更简便的方法:$(id),参数...
1。编写js函数 function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} 2. 要显示/隐藏的html元素加上 id 属性 控制这个tr的显示/隐藏 3,添加按钮,链接等触发 js 函数 显示/隐藏 javascript显示隐藏层广告 二:javascript控制页面控件隐藏显示的两种方法 javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在...
最近遇到js的效率问题,是关于在页面中新增元素的问题。 假设我们有页面如下: 代码如下: // 脚本位置 现在,我们要往div1中添加对象,大家都知道在为web页面增加一个元素时可以使用如下代码: //方法1 div1.innerHTML = '测试'; 或者: //方法2 var a = document.createElement('a'); a.innertText = '测试'; div1.appendChild(a); 在网上搜索到一个探讨js效率问题的文章,其大概意思是说方法2的效率高,其对比代码如下...
下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的绝对大小和相对大小 首先,要明确两个基本概念。 一张网页的全部面积,就是它的绝对大小。通常情况下,网页的绝对大小由内容和CSS样式表决定。 网页的相对大小则是指在浏览器窗口中看到的那部分网页,也就是浏览器窗口的大小,又叫做viewport(视口)。 下图中央的方框就代表浏览器窗口,每次只能显示一部分网页。(图一 网页的绝对大小和相对大小) 很显然,如果...
jQuery与javascript对照学习(获取父子前后元素) .c1{background-color:green;padding:20px;} .c2{background-color:red;padding:20px;} .c1 div{background-color:gray;} function fNext(obj){//许多时候需要元素之间没有间隙才能取到 //alert(obj.nextSibling.id); alert(jQuery(obj).next().attr("id"));//传递this,通过$(obj)转化为jQuery对象 } function fPrev(obj){ //alert(obj.previousSibling.id); alert(jQuery(...
jquery 扩展函数: 代码如下: (function($) { $.fn.disable = function() { /// /// 屏蔽所有元素 /// /// return $(this).find("*").each(function() { $(this).attr("disabled", "disabled"); }); } $.fn.enable = function() { /// /// 使得所有元素都有效 /// /// return $(this).find("*").each(function() { $(this).removeAttr("disabled"); }); } })(jQuery); 使用方式:装载立即屏蔽: 代码如下: $(document)...
form中又许多元素,是用例如form.element[x] 来表示; 一个元素的类型: 一个元素的类型是用 element.type 来表示 有了上面的一些了解,现在就让我们来解决第一个非隐藏元素获得焦点的方案: 首先定义 一个对象 作为方法的应用者: var f=new Object(); 然后: 代码如下: f.getTheFirstFocus=function(){ if (document.forms.length > 0){ for (var i=0; i < document.forms[0].elements.length; i++) //遍历个元素 { var oField ...
我研究了一下之后发现,jQuery都将事件缓存起来了,其实也是为了防止内存溢出以及页面unload的时候的速度,也包括多函数触发,方便管理等诸多好处,具体可以参考此文。 jQuery会在window.unload的时候卸载所有绑定过的事件,释放内存的。 OK,言归正传。判断元素上是否绑定过事件用如下语句 代码如下: jQuery.data(elem,"events")[type] //老版本也能用 $(elem).data("events")[type] //1.2.3以后才能用 返回值: 一个Object,可...
找了一些现成的插件,发现都不太符合我的需求,于是参考网上的例子自己实现了一个,还没有优化。还是贴代码吧: dragtoreplace DragToReplaceDeom #displayRoom{background:#eee;position:relative;float:left;clear:both;padding:30px 0px 0px 20px;margin-left:20px;margin-top:10px;} .row{display:inline-block;float:left;width:90px;clear:none;top:0;/**//*background:#DFEFFC;*/} .row span{display:inline-block;width...
它返回一个对象,其中包含了left、right、top、bottom四个属性,分别对应了该元素的左上角和右下角相对于浏览器窗口(viewport)左上角的距离。 所以,网页元素的相对位置就是 var X= this.getBoundingClientRect().left; var Y =this.getBoundingClientRect().top; 再加上滚动距离,就可以得到绝对位置 var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; var Y =this.getBoundingC...
这个函数主要是为指定的元素添加样式。相当于Jquery中的addClass(class)--为每个匹配的元素添加指定的类名。 在Jquery中要求 class (String) : 一个或多个要添加到元素中的CSS类名,请用空格分开。而这个函数也是有这样的要求。 代码如下: div{ border:1px solid #ccc; width:200px; height:200px;} .a{ background:#900; } .b{ font-size:30px; font-weight:bold;} 代码如下: function addClass(elements, value) { if (!eleme...
本系列文章分为:基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 本篇讲解::nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法。 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 您可以到jQuery官网来学习更多的有关jQuery知识。 运行后,请刷新下,因为...
这是实现结构伪类type-of-type的部分代码: var ret= ["span","span","strong","span","b"] var norepeat = function(array){ var set = array.join(",")+","; while(array.length){ var el = array.shift(); set = set.replace(el+",",""); if(set.indexOf(el+",") != -1){ set = set.replace(new RegExp(el+",","g"),""); array = set.replace(/,$/g,"").split(","); }else{ set = el+","+set; } } return set.repl...
这两个方法是比较容易搞混的. filter方法表示的是对当前内部的元素进行筛选,这个接受两种参数,一个返回bool的function,或者是JQuery的选择表达式,包装集内的元素只会小于等于当前包装集内的元素,并且含有的元素属于原来包装集内元素的子集: 代码如下: the one the two the three alert($("div").filter(":not(:first):not(:last)").html()); //out putthe two alert($("div").filter(function() { return this.id == "two"; }...
代码如下://获取元素的位置 function getLeft(obj) { if (obj == null) return null; var mendingObj = obj; var mendingLeft = mendingObj.offsetLeft; while (mendingObj != null && mendingObj.offsetParent != null && mendingObj.offsetParent.tagName != "BODY") { mendingLeft = mendingLeft + mendingObj.offsetParent.offsetLeft; mendingObj = mendingObj.offsetParent; } return mendingLeft; }; function getTop(obj) ...