在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果，这种时候我们经常会用到一些元素位置和尺寸的计算，浏览器兼容性问题也是不可忽略的一部分，要想写出预想效果的JavaScript代码，我们需要了解一些基本知识。 基础概念 为了方便理解，我们需要了解几个基础概念，每个HTML元素都有下列属性offsetWidthclientWidthscrollWidthoffsetHeightclientHeightscrollHeightoffsetLeftclientLeftscrollLeftoffsetTopclientTop...
代码如下: var header1 = document.getElementById("header"); var p = document.createElement("p"); // 创建一个元素节点 insertAfter(p,header1); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法 function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置 var parent = targetElement.parentNode; // 找到指定元素的父节点 if( parent.lastChild =...
代码如下: // 下面的插件部分建议放在js文件中， 方便调用 //-------------- 插件 begin ------------------ (function ($) { //屏蔽，适合单个元素. $.fn.mask = function () { var divHtml = ' '; $(this).wrap(''); $(this).parent().append(divHtml); $(this).data("mask","true"); } //取消屏蔽 $.fn.unmask = function () { $(this).parent().find(".divMask").remove(); $(this).unwrap(); $(this).data("mask", "f...
代码如下: window.onload = function(){ var gaga = document.getElementById( "gaga" ); addClass( gaga,"gaga1" ) addClass( gaga,"gaxx" ); removeClass( gaga,"gaga1" ) removeClass( gaga,"gaga" ) function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 （\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便...
一、元素属性 向XHTML页面中插入JavaScript的主要方法，就是使用元素，该元素有5个属性分别为charset、defer、language、src、type，经常使用的是type、src、defer这三个。 1、type属性的值一般都是text/javascript，该属性是必须的,。 2、src属性的值是*.js外部文件，该属性是可选的,。 在这个例子中，外部文件example.js将被加载到当前页面中。外部文件只需包含通常要放在开始的和结束的之间的那些Javascript代码即可。与解析嵌入...
jquery如何获得页面元素的坐标值 yulutxt是输入经典语录的输入框，feedBackMessage函数见http://www.wesoho.com/article/asp/2765.htm 代码如下: var p = $("#yulutxt"); var yuluoffset = p.offset(); feedBackMessage(msg,yuluoffset.left+p.width()+10,yuluoffset.top,5000); ------------------- 1，获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮，这样创建的新窗口就...
在JS中，你写一个for循环的时候，内部的循环变量I其实是会保存在它运行的函数或类内的，所以你会发现你给元素批量绑定事件的时候，出现i=最后一个循环变量的值，这就很坑爹啊，解决的方案有2钟， 思路就是：把这个循环变量保存起来，不要让它的作用域在整个函数，而是在循环体内 1.使用闭包(如果你不懂闭包，请打开百度：www.baidu.com) 2.使用with关键字，with语法是with( obj ) { //使得可以在此直接访问obj的属性，而不用加obj....
代码如下: var box = document.getElementById( "gaga1" ); /* alert( box.getBoundingClientRect().top ); alert( box.getBoundingClientRect().right ); alert( box.getBoundingClientRect().bottom ); alert( box.getBoundingClientRect().left ) */ function getRect( elements ){ var rect = elements.getBoundingClientRect(); var clientTop = document.documentElement.clientTop; var clientLeft = document.documentElem...
代码如下: function test(){ //createElement() 创建一个指定标签名的元素[比如:动态创建超链接] var createa=document.createElement("a"); createa.id="a1"; createa.innerText="连接到百度"; createa.href="http://www.baidu.com"; //createa.color="green" ////添加颜色(不要忘记style属性，不然没有效果) createa.style.color="green" //添加默认位置--...
代码如下: 1.基本选择器：是jQuery中使用最频繁的选择器，它由元素Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择...
代码如下: 1.层次选择器： 通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过...
代码如下: 内容过滤选择器：根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 标记，并在其中...
一、在元素内部/外部追加元素 append,prepend:添加到子元素 before，after：作为兄弟元素添加 html： 代码如下: 在我的后面追加一条新闻 Javascript: 代码如下: jQuery(function(){ //在元素内部追加内容 $("#content").append("姚明退役了..."); }) 在#content里面添加元素，这是把姚明退役了...作为子元素添加到#content，如果想在元素外部追加元素，需要用到after，这样的话就可以把姚明退役了...作为兄弟元素追加到#co...
一般动态创建元素可以通过两种方式 1、Dom HTml 代码如下: var select = document.createElement("select"); select.options[0] = new Option("加载项1", "value1"); select.options[1] = new Option("加载项2", "value2"); select.size = "2"; testDiv.appendChild(select); }); 通过document的createElement方法创建，然后通过appendChild方法添加到指定的对象中即可 2、JQuery函数创建 $("动态创建的div
代码如下: #p_box包括#p_cont,当点击#p_box区域任何位置时（包括#p_cont），都会触发a事件。想要阻止点击#p_cont区域时触发a事件，需要在#p_cont区域内加入阻止事件冒泡的代码。 变成 代码如下: function a(){ //这里是a事件的代码 } function stopBubble(e) { if (e && e.stopPropagation) {//非IE浏览器 e.stopPropagation(); } else {//IE浏览器 window.event.cancelBubble = true; } }