发表于 |

结构层 表示层 行为层-网页就是由着三层信息构成的一个共同体

结构层-标签

表示层-CSS

行为层-JS和DOM

style对象，JS通过改变style属性的值来改变元素的显示方式，主要语法为

1
element.style.property

例如color，width等，如果在style中有如像 font-family一律采用驼峰命名法fontFamily。如何设置一个样式的值，我们可以通过element.style.property=value来进行设置例如

1
p.style.color="red";

阅读全文 »

发表于 |

    Ajax是现在前端开发数据交互用得很广的技术，主要的优势就是对页面的请求以异步方式发送到服务器。
==XMLHttpResquest==对象是Ajax的核心
因为不同的浏览器对Ajax支持的不同，尤其是IE浏览器，所以我们在获取XMLHttpResquest对象是要进行不同的处理，我们用一个函数来进行封装，封装好以后就可以直接用一个变量来接收使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getHttpObject(){
        if(typeof XMLHttpResquest == "undefined" ){
            XMLHttpResquest = function(){
                try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0")}
                    catch(e){}
                try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0")}
                    catch(e){}
                try{ return new ActiveXObject("Msxml2.XMLHTTP")}
                    catch(e){}
                return false;
            }
      }
    return new XMLHttpRequest();
}
阅读全文 »

发表于 |

    我们很多时候都要进行动态的添加元素，因为一个页面是从上到下执行的，我们在写CSS时就有很好的体会，如果当一个元素在一定条件下触发后再添加，那么整个页面在开始是就会少加载很多东西，并且也不会影响体验。

动态创建方法：

  1. document.write():

    整个方法可以动态创建元素，但是他也有一定的问题，无法达到：”行为与表现分离”，什么是行为与表现分离？比如：点击（元素 A onclick 和 元素A 显示为剧中红色背景，这就是一个行为和一个表现，怎么分离？就是在一个文件里不包含在同一个文件，这里是粗暴的理解，更多请上网搜索，其实有点类似于封装的作用），此方法还有一个问题就是MIME application/xhtml-xml 与之不兼容

2.innerHTML:

    可以用来读写给定元素的HTML内容，并且是读取一段内容，注意如果你向某个元素中插入一段内容，将会替换掉原来的内容

阅读全文 »

发表于 |
  1. 尽量少访问DOM和尽量减少标记（将元素保存到变量中）
  2. 合并和放置脚本（多个合成一个，脚本放在页面下方body结束之前）

  3. 压缩脚本

    有些时候我们需要在页面一加载完成后就进行加载部分函数这个时候我们一想到的就是window.onload的确这个是可以达到，但是如果我们想同事加载多个要处理的函数的话
    这样最后一个函数将会覆盖掉之前的就像这样

1
2
window.onload = firstfunction();//这个将会被下面的代替
window.onload = secondfunction();//这个有用
阅读全文 »

发表于 |

    我们看看如下的需求，我们有一个A标签，我们需要点击但是不进行A标签默认的事件处理（点击后进行页面跳转）我们怎么来用JavaScript进行屏蔽？
当我们在进行一个事件处理时，触发后js会返回true或者false！用以执行默认的事件，这个时候我们只需将返回false就不会触发元素的默认事件

例如

1
<a href="XX" onclick="show(this);return false;"></a>

另一种方法JS分离方法,应用popUp进行阻止，此方法更好

1
2
3
4
5
6
7
var links = getElementsByTagName("a");
for(var i = 0; i<links.length;i++){
    //do something

          return false;

}

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues

前往LEE的github给他一个Start鼓励一下吧

原创转载请标注出处：https://leehongqiang.github.io

发表于 | 
在之前我们提到了节点，节点很重要，只有理解了节点我们才能对节点进行操作

一、获取元素节点的方法

1
2
3
document.getElementById("id") //（返回一个对象）
document.getElementsByTagName("tag") //（返回一个对象数组）
document.getElementsByClassName("classname")//（返回一个对象数组）

获取一个节点后，其实我们就得到了一个对象或者一个对象数组，我们可以对对象进行各种处理，JS已经对对象进行了各种属性和方法的封装，比如，length，getAttribute,setAttribute, 等等

阅读全文 »

发表于 |

    写在之前，学习HTML前端3个月了，开始学得很快（3天徒手搞定HTMLCSS，然后手写小米官网，当然瞌睡也没怎么睡），因为入门简单！除开入门学习的3天后面的时间可以说是在巩固和学习各方面前端开发知识！可以说前端开发深似海，特别是兼容问题！当然创造一个页面的的快感是毋容置疑的！说到前端开发当然少不了顶顶大名的JS（JavaScript），如果做前端你要是不会JS，就像一个人少了四肢一样，下面我们就来读读DOM编程艺术这本书！为什么选择他，其实我也不知道，因为在某东上购买量比较高，另外本书不具有基础的JS语法，所以对没有基础JS语法的人不适合。

正文开始

  • 一、DOM?

    DOM = document object model

    D-document： 文档，也就是一个网页页面

    O-object ：

    对象，在一个js中对象分为三种：

  1. 用户定义的对象（比如我们自己创建的一个函数等等）
  2. 内建对象（比如array math date等）
  3. 宿主对象（由浏览器提供的对象，比如Window也就是搭建书偶读BOM，他是浏览器自身提供，书中说我们不会与BOM打太多交到）
    阅读全文 »