JS + HTML + JQUERY + CSS WEB前端技术积累

1. JS中获取元素方法总结   
document.getElementById("标签id");          //获取指定的id标签,是根据控件ID获取这个控件对象，因为控件ID唯一，返回的是一个对象。
document.getElementsByName("标签name属性"); //获取指定的name的标签如果有多个标签的name只相同就获取所有的name相同的标签, 是根据控件名称获取这个控件对象，因为控件名称可以相同，返回的是一个对象数组。 
document.getElementsByTagName("div");       //获取所有的div标签获取 的是一个集合（根据标签类型获取元素）
document.getElementsByClassName('demo');    //根据元素的Class属性来获取元素  


JS:
//根据classname获取网页元素，此处获取的是div元素
var test = document.getElementsByClassName("txt clearfix");
alert(test.length);
//获取div元素中的p标签
var pFlag = test[0].getElementsByTagName("p"); 
//div元素下p标签元素的个数
alert(pFlag.length);
//第一个p标签第三个属性的值
alert(pFlag[0].attributes[2].value);
//第一个p标签显示的文本数据
alert(pFlag[0].innerHTML);


 JQUERY:
js中的$ 是使用在使用jQuery 的函数，jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。
      jQuery 很容易学习。
      使用 jQuery 可以简单方便的实现下面的操作
      --HTML 元素选取
      --HTML 元素操作
      --CSS 操作
      --HTML 事件函数
      --JavaScript 特效和动画
      --HTML DOM 遍历和修改
      --AJAX

      --Utilities

JQUERY和JS搭配使用举例：
//获取classname为txt clearfix的DIV标签（其他标签也可以，此处使用DIV，DIV中加载P标签）
var lDiv = document.getElementsByClassName("txt clearfix");
//获取第一个DIV标签中的P标签
var pFlag = lDiv[0].getElementsByTagName("p");
//使用JQUERY的方法removeClass去除第一个DIV标签中的第一个P标签的clssname为selected的CSS属性

$(pFlag[0]).removeClass('selected');

jQuery1.7(包含1.7版本)事件绑定触发机制(统一使用on):
总结 
jQuery 推出on()的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了，因为它已经处于不推荐使用列表了，随时会被干掉。如果只绑定一次事件，那接着用one()吧，这个没有变化。
(1)语法格式
on(events,[selector],[data],fn)

(2) 举例1
$(document).on('click', '#list li', function() { 
  //function code here. 
}); 
说明:这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用，只有被选中元素的后代元素才会触发事件。

(3) 举例2 
说明:替换1.7版本以前的函数delegate()，目的是通过祖先元素来代理委派后代元素的事件绑定问题，某种程度上和live()优点相似。只不过live()是通过document元素委派，而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。
$('#list').on('click', 'li', function() { 
  //function code here. 
}); 


jQuery中遍历数组的方式 
   Jquery 遍历数组之$().each方法与$.each()方法介绍
(1)$().each方法
$("input[type='checkbox']").each(function(i){
   $(this).attr("checked",true);
});


(2)$.each()方法
$.each(["aaa","bbb","ccc"],function(index,value){
     alert(i+"..."+value);
});

2. 编译外部CSS脚本并引用

   例如：CSS脚本 style.css内容如下

h3{ color:black;font-size:35px;font-family:黑体}
p{ background:orange;color:blue;font-size:25px;font-family:隶书}

 html调用的两种方式