ZTE_MY_1: 学习笔记

1. <a>标签中调用 js 的几种方式：

我们常用的在超链接 <a> 标签中有点击事件：

1. a href="javascript:js_method();"

这也是我们平台上常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句

2. a href="javascript:void(0);" οnclick="js_method()"

这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

3.a href="javascript:;" οnclick="js_method()"

这种方法跟跟2种类似，区别只是执行了一条空的js代码。

4.a href="#" οnclick="js_method()"

这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

5.a href="#" οnclick="js_method();return false;"

这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。

我看了下taobao的主页，他们采用的是第2种方法，而alibaba的主页是采用的第1种方法，和我们的区别是每个href里的javascript方法都用try、catch包围。

综合上述，在a中调用js函数最适当的方法推荐使用：

<a href="javascript:void(0);" οnclick="js_method()"/> 

<a href="javascript:" οnclick="js_method()"/>

<a href="#" οnclick="js_method(); return false;"/>

2. jQuery css 操作： css() 方法：

css() 方法 返回 或 设置 匹配的元素的一个或多个样式属性。

返回一个元素的属性值：

$("p").css("background-color");

设置一个元素的样式属性：

$("p").css("background-color","yellow");

设置一个元素的多个样式属性值：

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery 中的css方法等价于Dom方法：

$("p").css("background-color"); 
//等价于
var pObj = document.getElementByTagName("p")[0];
var pBackColor = pObj.style.backgroundColor;

3. jQuery 属性 操作方法： attr() 方法：

1. attr(attribute)  方法设置或返回被选元素的属性值。

$(selector).attr(attribute)
$("img").attr("width")

2. attr( attribute, value) 方法设置被选元素的属性和值。

$(selector).attr(attribute,value)
$("img").attr("width","180")

3. attr( attribute, function(index, oldvalue))  使用函数设置属性值。

$(selector).attr(attribute,function(index,oldvalue))
$("img").attr("width",function(n,v){
      return v-50;
});

    function(index,oldvalue)

        规定返回属性值的函数。

        该函数可接收并使用选择器的 index 值和当前属性值。

4.  attr( attribute1: value1, attribute2: value2,...) 方法设置被选元素的多个属性和值。

$(selector).attr({attribute:value, attribute:value ...})
$("img").attr({width:"50",height:"80"})

jQuery 中 attr() 方法等价的Dom 方法：

$("img").attr("width","180"); 
//等价于
var imgObj = document.getElementByTagName("img")[0];
imgObj.setAttribute("width","180");

css() 和 attr() 对比分析：

1. attr()是操作元素的 属性。

2. css()是操作元素的 style属性。

前者可以修改<img> 的 src 属性，可以修改 <a> 的 href 属性， 可以修改 <input> 的 title 属性。然而后者却不行，他它只能修改样式相关的特征，也就是只对 style这个特定的属性进行操作。

例如：

<div style="color:red; font-weight:bold;" id="a" data-id="1" class="mystyle">Hello</div>
<script type="text/javascript">

$(function(){
    //css()
   var color = $("#a").css("color"); //只有一个参数时，是获取div#a的color，返回red

               $("#a").css("color","blue"); //两个参数时,是设置对应的 样式属性，这里是这只文本color为blue
              // $("#a").css({"color":"blue","fontWeight":"normal"});//也支持对象形式进行设置样式
              
   //attr()           
   var id   = $("#a").attr("data-id"); //获取div#a 上面的data-id属性的值；当然，style,class,id这三个都可以获取到，因为这些都是Html元素的 属性
              //$("#a").attr("data-id",2);//设置div#a上面的data-id属性为2，假如是一个不存在的属性，使用这个代码，就会添加这个属性到匹配到的元素上面 ，如$("#a").attr("data-width","100px");,使用这个，div#aHtml元素上面就会新增一个data-width的属性            
});

</script>

4. 页面加载完时间 onload 和 addOnloadEvent(fun) 的区别：

假如我们希望某个函数在网页加载完毕之后就立即执行。网页加载完毕时会触发一个onload事件，所以我们可以利用onload事件来加载这个函数。Onload事件与window对象相关联。如： 把 myfunction 函数绑定到这个事件上：

window.onload = myfunction(); 

一个函数我们可以利用上面的解决, 那两个、三个甚至更多呢？怎么解决？？

   假如我们有firstFunction和secondFunction两个函数，是不是就是下面这样写呢：

window.onload = firstFunction;
window.onload = secondFunction;

但是每个处理函数只能绑定一条 指令。所以上面的不行。因为secondFunction函数将会取代firstFunction函数。

解决上面问题：即我们先创建一个匿名函数来容纳这两个函数，然后把那个匿名函数绑定到onload事件上，如下：

window.onload = function(){
    firstFunction();
    secondFunction();
};

但是每个处理函数只能绑定一个最佳的解决方案：不管你打算在页面加载完毕后加载多少个函数，利用该函数都可以很好的实现。

该函数名为 addLoadEvent。该函数仅一个参数：该参数指定了你打算在页面加载完毕后需要执行的函数的函数名。

         addLoadEvent() 函数代码如下：

[javascript] view plain copy

1. function addLoadEvent(func){  
2.         var oldonLoad = window.onload;  
3.         if(typeof window.onload!='function'){  
4.                 window.onload = func;  
5.         }  
6.         else{  
7.             window.onload = function(){  
8.                 oldonload();  
9.                 func();  
10.             }  
11.         }  
12. }  

  addLoadEvent函数主要是完成如下的操作：

           1、把现有的window.onload事件处理函数的值存入到oldonload中。

           2、如果在这个处理函数上还没有绑定任何函数，就将该函数添加给它。

           3、如果在这个处理函数上已经绑定了一些函数，就把该函数追加到现有指定的末尾。

  通过addLoadEvent函数，只需要调用该函数就可以进行绑定了。

[javascript] view plain copy

1. addLoadEvent(firestFunction);  
2. addLoadEvent(secondFunction);  

 所以这个函数非常有用，尤其当代码变得很复杂的时候。无论你打算在页面加载完毕时执行多少个函数，只需要多写几条这样的语句就可以解决了。方便、实用。

5.  jQuery 获取 url 参数

UrlParm.parm("urlParaName")

示例如下：

在 A.html 页面中：

<script type="text/javascript">
    function lookVehiclePassReocrd(id){
        window.location.href="../page/B.html?id="+id;
    }
</script>

<img id="check" title="查看" src="../../../images/icon_search.png"
	οnclick="lookVehiclePassReocrd(${id})" >
</img> 

在 B.html 页面中：

<script type="text/javascript" src="../js/getUrlParam.js"></script>
<script type="text/javascript">
    addOnloadEvent(init);
    function init(){
        //使用getUrlParam.js 中的 UrlParm.parm("urlParaName") 获取url中的参数；
        var id=UrlParm.parm("id");
    }
</script>

getUrlParam.js 如下：

UrlParm = function() { // url参数  
  var data, index;  
  (function init() {  
    data = [];  
    index = {};  
    var u = window.location.search.substr(1);  
    if (u != '') {  
      var parms = decodeURIComponent(u).split('&');  
      for (var i = 0, len = parms.length; i < len; i++) {  
        if (parms[i] != '') {  
          var p = parms[i].split("=");  
          if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p=  
            data.push(['']);  
            index[p[0]] = data.length - 1;  
          } else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c | =  
            data[0] = [p[1]];  
          } else if (typeof(index[p[0]]) == 'undefined') { // c=aaa  
            data.push([p[1]]);  
            index[p[0]] = data.length - 1;  
          } else {// c=aaa  
            data[index[p[0]]].push(p[1]);  
          }  
        }  
      }  
    }  
  })();  
  return {  
    // 获得参数,类似request.getParameter()  
    parm : function(o) { // o: 参数名或者参数次序  
      try {  
        return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);  
      } catch (e) {  
      }  
    },  
    //获得参数组, 类似request.getParameterValues()  
    parmValues : function(o) { //  o: 参数名或者参数次序  
      try {  
        return (typeof(o) == 'number' ? data[o] : data[index[o]]);  
      } catch (e) {}  
    },  
    //是否含有parmName参数  
    hasParm : function(parmName) {  
      return typeof(parmName) == 'string' ? typeof(index[parmName]) != 'undefined' : false;  
    },  
    // 获得参数Map ,类似request.getParameterMap()  
    parmMap : function() {  
      var map = {};  
      try {  
        for (var p in index) {  map[p] = data[index[p]];  }  
      } catch (e) {}  
      return map;  
    }  
  }  
}();  

6. jQuery 选择器以及其与 document.getElementById("id") 的区别

元素选择是一切操作的前提，jQuery中 $( ) 函数最强大最常用的功能之一就是使用选择器选择DOM元素。常见的如下：更详细的请参考：jQuery 选择器参考手册，

$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

关于 jQuery 的 $() 和 document.getElementById("id") 的详细区别可以参考 区别对比分析，以下为简答总结：

document.getElementById()返回的是DOM对象，而$()返回的是jQuery对象

jQuery对象就是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，其可以使用jQuery 里的方法

例如：如果想获取 id 为 test 元素中的 html 代码，使用jQuery 和 document.getElementById() 如下：

jQuery方法：

$("#test").html();

document方法：

document.getElementById("test").innerHTML();

虽然 jQuery 对象是包装 DOM 对象后产生的，但是 jQuery 无法使用 DOM 对象的任何方法，同理 DOM 对象也不能使用 jQuery 里的方法.乱使用会报错。

jQuery 对象和 DOM 对象的相互转换：

1、alert($("#div"))得到的是[object Object]

2、alert(document.getElementById("div"))得到的是[object HTMLDivElement]

3、alert($("#div")[0])或者alert($("#div").get(0))得到的是[object HTMLDivElement]

从上面我们可以看出 jQuery 选择器得到的是一个数组对象；因此我们可以通过数组的下标来转换成DOM 对象；

jQuery 对象 转换成 DOM 对象：

(1) jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。 
 如：var $v =$("#v") ; //jQuery对象 
        var v=$v[0]; //DOM对象 
        alert(v.checked) //检测这个checkbox是否被选中 
(2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象 
  如：var $v=$("#v"); //jQuery对象 
    ·    var v=$v.get(0); //DOM对象 
        alert(v.checked) //检测这个checkbox是否被选中

DOM 对象转换成 jQuery对象：

对于已经是一个DOM对象，只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象了。 $(DOM对象) 
如：var v=document.getElementById("v");  //DOM对象 
      var $v=$(v);  //jQuery对象 转换后，就可以任意使用jQuery的方法了。

7. $(function() {});是$(document).ready(function(){ })的简写

$(document).ready() 里的代码是在页面内容都加载完才执行的，如果把代码直接写到<script type="text/javascript"> </script>标签里，当页面加载完这个 <script> 标签就会执行里边的代码了，此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错，当然如果你把 <script> 标签放到页面最后面那么就没问题了，此时和ready效果一样。

例如：

点击段落后此段落隐藏

<head>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"/>
    <script type="text/javascript"> 
        document.ready(function(){
            $("p").click(function(){
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <p> if you click me, i will hide. </p>
</body>

如果把$(document).ready(function() {});去掉后，无法隐藏段落：

<head>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"/>
    <script type="text/javascript"> 
        $("p").click(function(){
                $(this).hide();
        });
    </script>
</head>
<body>
    <p> if you click me, i will hide. </p>
</body>

但是把script放到页面最后的话，就可恢复隐藏效果：

<head>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"/>
</head>
<body>
    <p> if you click me, i will hide. </p>
</body> 
   <script type="text/javascript"> 

 $("p").click(function(){
     $(this).hide();
 });
</script>
</html>

关于 html css js 三者的加载顺序：

详细内容可以参考：html js css 加载顺序

JS 页面加载事件 document.ready() 和 window.onload() 的区别：

1. ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；

2. onload，指示页面包含图片等文件在内的所有元素都加载完成。