锋利的jqeuy学习笔记

锋利的jquery学习

1: jquery与dom对象之间的转换:
    1> jquery对象是一个数组，可以通过[index]的方法得到相应的dom对象.
    2> jquery --> dom: 两种方式:[index] || get(index)
        如: var $obj = $("#id");   //jquery对象
            var obj = $obj[0];     //dom对象
            var obj2 = $obj.get(0);
    3> dom --> jquery:
        var obj = document.getElementById("id");   //dom对象
        var $o = $(obj);   //jquery对象

2: 解决jQuery和其他库的冲突
    在其他库和jquery库加载完毕后,调用jQuery.noConflict();

3:jquery 开发工具
   eclipse插件:
   jqueryWTP  http://www.langtags.com/jquerywtp/index.html
   Spket      http://spket.com

4:常用的css选择器
  标签选择器   如: td {font-size:14px}
  id选择器     如: #id{...}
  类选择器     如: div.className{.......}
  群组选择器   如: td,p,div{....}
  后代选择器   如: #id a {}
  通配选择器   如: *{....}

5: 判断jquery对象:
    $("#id") 不管id是否存得到的都是obj对象
    1> 根据长度判断   $("#id").length >0
    2> 转化成dom对象来判断  $("#id")[0]
6: jquery 选择器
   1> 基本选择器
      id:         $('#id')   
      class:      $('.class')
      element:    $('div') 
      *    $('*')
      s1,s2..sn 如: $('span,#id')
   2> 层次选择器
 $('body div').css('','');     改变body内所有div 的样式
        $('body > div').css('','');   改变body内子div元素的样式
        $('.one + div').css('','');   改变class=one的下一个div元素样式
        $('#two ~ div').css('','');   改变id=two元素后面的所有div兄弟元素的样式
   3> 过滤选择器
       a: 基本过滤选择器
           :first , :last , :not(selector) , :event , :odd , :eq(index) ,
    :gt(index) , :lt(index) , :header  , :animated
       b: 内容过滤选择器
           :contains    $('div:contains(di)').css('',''); 改变含有文本di的div元素的样式
    :empty      选取不包含子元素或者文本的空元素
     :has(selector)  选取含有选择器所匹配的元素
    :parent        选取含有子元素或者文本的元素
       c: 可见性过滤选择器
           :hidden
           :visible
       d:属性过滤选择器
       e: 子元素过滤选择器
   4> 表单选择器

====================================================================

第三章  jquery中的dom操作

dom定义： 文档对象模型
dom操作的分类: dom core(S核心),html-dom,css-dom

$(this).clone(true).append("");   clone方法中增加true表明复制元素同时也复制元素中所绑定的事件

替换节点：replaceWith(); replaceAll();
包裹节点:  wrap();   wrapAll(); wrapInner();

 

==============================================================================
第四章   jquery中的事件

1: 加载DOM  
    window.onload与 $(document).ready() 方法的区别:          
   1> 执行时机
 window.onload  
          方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的.
 $(document).ready()方法注册的事件处理程序，在dom完全就绪时就可以被调用.
     $(window).load(function(){})  等价于  window.onload = function(){}
   2> 多次使用
      window.onload 事件一次只能保存对一个函数的引用,它会自动用后面的函数覆盖前面的函数.
      $(document).ready()每次调用此方法都会在现有的行为上追加新的行为,根据注册的顺序依次执行.
   3>简写方式
      $(document).ready(function(){});
      $(function(){});
      $().ready(function(){});
     三者等同
2:  事件绑定
       在文档加载完成后，如完元素来绑定事件，可用bind("事件类型","event.data属性值","绑定处理              函数");
3:合成事件
   hover("fn1","fn2")  用于模拟光标悬停事件,光标移到元素时，会触发 "fn1",移开元素时，
   会触发 “fn2”。
   toggle(fn1,fn2,..fnN)  用于模拟标连续单击事件. 第1次触发fn1,第2次触发fn2,n次触发fnN
4: 事件冒泡
   事件对象 event
   停止事件冒泡:  event.stopPropagation();
   阻止默认行为:  event.preventDefault(), 默认行为: 如单击超连接跳转，点击按钮表单提交时
5: 事件对象的属性
   event.type              事件类型
   event.preventDefault()  阻止默认行为
   event.target()   获取触发事件的元素
   event.relatedTarget()
   event.pageX || event.pageY
   event.which  1=标左键,2=中键，3=右键
   event.metaKey 获到ctrl按键
   event.originalEvent() 指向原始的事件对象
6:移除事件
  1> $("#id").unbind("click");
  2> $(function(){
           $("#id").bind("click",myfun1 =function(){})
                    .bind("click",myfun2 =function(){})
      });
   $("#id").unbind("click",myfun1);
  3> $("#id").one("click",function(){});

7:模拟事件
   1>常用模拟
   $("#id").trigger("click"); 页面加载完就触发此事件 或 $("#id").click();
   2> 触发自定义事件
      $("#id").bind("myClick",function(){});
      $("#id").trigger("myClick");
   3>传递数据
      $("#id").trigger("事件类型",[param1,param2,..]);
8: 其它用法
  1>绑定多个事件类型
  2>添加事件命名空间，便于管理
    如: $(function(){
       $("#id").bind("click.plugin",function(){})
   .bind("click",function(){})
    .bind("mouseover.plugin",function(){})
    .bind("dbclick",function(){});
  // $("#id").unbind(".plugin");//将删除带。plugin 的 click,mouserover事件
   //  $("#id").unbind("click!");//将删除不带.plugin的 click事件
  // $("#id").unbind("click");//将删除两个 click事件
 
      });