JQuery基础

1. JQuery包装集和Dom元素的区别.

     dom元素:

          var div = document.getElementById("testDiv"); 

     JQuery包装集:

          var jqDiv = $("#testDiv");

     dom元素转换为JQuery包装集:

          var jqDiv = $(div);

     JQuery包装集是一个集合, 是一个dom元素的集合.也就是说其中的每个元素都是dom元素.比如:

          var dom = $("#testDiv")[0];

          $("#testDiv").each(function(){

               alert(this);//this 是dom元素

               $(this).html("testDIv content"); // 通过$()将dom元素转换为JQuery包装集,才能调用JQuery的方法

          });

2. 选择器和过滤器的区别

     JQuery中的选择器分为选择器和过滤器两种. 选择器没有默认的范围, 而过滤器是必须有范围的. 比如

          $(".bgRed div"); //选中classname为bgRed的元素下的所有子孙div.

          $(".bgRed>div"); //选中classname为bgRed的元素的直接子节点中的div

     这种是选择器. 而下面这种是过滤器

          $("tr:first"); // 表格的第一行.

     过滤器的意思就是说, ":" 前面的是范围, 后面的是过滤条件, 然会结果和":"前面的是一种类型的元素. 而选择器不是这样

3. $(document).ready()即$() 与 window.onload()的区别

     winddow.onload() : 浏览器执行该函数是在构建完dom树之后, 并且是在所有图像及外部资源加载完成以后才执行. 这就导致如果某个外部资源加载有问题时, 函数中依赖对象未完成加载而出现的函数执行出现异常, 而导致页面不完整. 

     $() : 是在dom树构建完成以后, 图像及外部资源加载之前执行的. $() 可以在一个页面中绑定多个函数, 而window.onload却只能调用一个函数

4. 元素属性和dom属性的区别

     <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />

     比如, class是元素属性. 实际在浏览器解析时,会将标签解析成dom对象, 将元素属性解析成dom属性. 在javascript中, 只能直接获取或设置dom属性.如果要设置上面的class则应该这样写:

     img1.className = "classB";

     在javascript中如果要获取元素属性, 要使用getAttribute, Jquery中则使用attr()

4. 操作元素属性

     $("img").attr("src"); //返回文档中第一个图像的src属性值:

     $("img").attr({ src: "test.jpg", alt: "Test Image" });//为所有图像设置src和alt属性:

     $("img").attr("src","test.jpg"); //为所有图像设置src属性:

     $("img").attr("title", function() { return this.src });//把src属性的值设置为title属性的值:

     $("img").removeAttr("src"); //将文档中图像的src属性删除,注意是删除属性值, 即将src属性值设为空

5. 存储数据的两种方式:

     a. 使用自定义的元素属性存储数据

          <div id="testDiv5" customer="customer data 1">获取自定义数据‐1</div> 

     在事件处理中获取数据:

          $("#testDiv5").bind("click", function(event) { alert($(event.ta

rget).attr("customer")); });

     b. 使用脚本将数据传递给事件处理函数

     <div id="testDiv6">获取自定义数据‐2</div> 

     $("#testDiv6").bind("click", { customer: "customer data 2" }, fu

nction(event) { alert(event.data.customer) }); 

     注意,这里bind函数的定义:bind( type, [data], fn ), 中间是需要传送给fn的参数.

6. trigger( event, [data] ) 和 triggerHandler( event, [data] )的区别

     用于在程序中触发动作.主要区别是trigger会出发浏览器默认的动作, 而triggerHandler不会出发.

7. 多播委托

8. $().each() 和$.each()的区别

     $().each()  用于遍历Jquery对象. 而$.each()用于遍历数组和对象. 注意, each() 只能遍历, 无法改变返回后的对象. 如果要改变使用Jquery.map(array, callback);