jQuery知识基础

《jQuery知识基础》

一、概述：
 
二、使用：

 1、jQuery语法结构：

  1)、jQuery对象简介：
   var jQuery对象 = $('页面元素');
   其中：
    引用的页面元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等；
    通过$()返回的是一个jQuery对象集合，并且只有该对象才能使用jQuery定义的方法；
    一般的DOM对象可以通过$()方法转换成jQuery对象；
    jQuery对象由于是一个集合对象，通过索引方式获取其DOM对象；
   例子：
   $('#obj');         $(document.getElementById("obj"));
   $("#obj").html();  $("#obj")[0].innerHTML;
   
  2)、jQuery对象集合：
   a)、获取集合选项：
    方法：
     .eq(n)返回的是jquery对象；
     .get(n)和索引[n]返回的是dom元素对象；
    例子：
     $("div").eq(2).html();
     $("div").get(2).innerHTML;
     $("div")[2].innerHTML;
     
   b)、循环遍历集合：
    方法：
     .each(function(i){...});遍历集合；
     直接对$()集合操作；
    例子：
     $("tr").each(function(i){$(this).css('backgroundColor', ['#ccc','#fff'][i%2]);});
     $("p").click(function(){...}) 
  
  3)、jQuery对象方法：
   a)、使用同一个函数名称，不同参数的重载方法来获取(GET)或设置(SET)当前jQuery对象的属性；
    例子：
     $("#obj").html(); / $("#obj").html("<b>new content</b>");
     $("#obj").text(); / $("#obj").text("<b>new content</b>");
     $("#obj").height(); / $("#obj").height("300");
     $("input").val("); / $("input").val("test");
     $("#obj").click(); / $("#obj").click(fn);
     $("#obj").css("background"); / $("#obj").css("background","#ccc");
     
   b)、可以对一个jquery对象连续调用各种不同的方法。
    例子：
    $("a").click(function(){...}).mouseover(function(){...}).each(function(i){...});
    
  4)、jQuery对象样式：
   方法：
    .css(); / .height(); / .width();
    .addClass(); / .removeClass(); / .toggleClass();
   例子：  
    $("#obj").css("background");               //返回元素的背景颜色
    $("#obj").css("background","#ccc")       //设定元素背景为灰色
    $("#obj").height(300); $("#obj").width("200");       //设定宽高
    $("#obj").css({ color: "red", background: "blue" });//以名值对的形式设定样式
    $("#obj").addClass("select");       //为元素增加名称为select的class
    $("#obj").removeClass("select");       //删除元素名称为select的class
    $("#obj").toggleClass("select");       //如果存在（不存在）就删除（添加）名称为select的class
  
 2、jQuery事件处理：
  1)、jQuery对象事件：
   方法：
    .click(fn);注册元素点击事件；
    .hover(fn1,fn2);注册一个模仿悬停事件；
    .ready(fn);当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
    .bind(eventtype,fn);.unbind(eventtype): 事件的绑定与反绑定
    .toggle(evenFn,oddFn);每次点击时切换要调用的函数
    .trigger(eventtype);在每一个匹配的元素上触发某类事件。
   例子：
    $("#obj").click(function(){...});
    $("tr").hover(function(){$(this).addClass("over");},function(){$(this).addClass("out");});
    $(document).ready(function(){...});
    $("p").bind("click", function(){...});
    $("p").toggle(function(){$(this).addClass("selected");},function(){$(this).removeClass("selected");});
    $("p").trigger("click");
    
  2)、jQuery全局事件：
   方法：
    $.browser; 检测浏览器类型，属性有safari, opera, msie, mozilla等；
    $.each(obj, fn); 通用的迭代函数,可用于近似地迭代对象和数组。
    $.map(array, fn); 数组映射。把一个数组中的项目(处理转换后)返回生成的新数组。
    $.merge(arr1,arr2); 合并两个数组并删除其中重复的项目。
    $.trim(str); 删除字符串两端的空白字符。
    
   例子：
    if($.browser.isie){$.browser.version}
    $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
    $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
    var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });tempArr内容为：[2,3]
    $.merge( [0,1,2], [2,3,4] )       //返回[0,1,2,3,4]
    $.trim("   hello China  ");
    

 3、jQuery功能扩展：
  1)、extend扩展： 
 
 
 extend扩展
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
$.extend(settings, options);      
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）

 
 
 4、jQuery常用技巧：
 
解决自定义方法或其他类库与jQuery的冲突
　　很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
　　使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#obj")改为jQuery("#obj")。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery("div   p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';