jQuery学习笔记---视频笔记及补充

jQuery

http://jquery.cuishifeng.cn/

模块 《=》类库
DOM/BOM/JavaScript的类库

版本：
   1.x  1.12
   2.x
   3.x

转换：
   jquery对象[0]   => Dom对象
   Dom对象         => $(Dom对象)


一、查找元素
   DOM
      10左右
   jQuery：
      选择器，直接找到某个或者某类标签
      1. id
         $('#id')
      2. class
         <div class='c1'></div>
         $(".c1")
      3. 标签
         <div id='i10' class='c1'>
            <a>f</a>
            <a>f</a>
         </div>
         <div class='c1'>
            <a>f</a>
         </div>
         <div class='c1'>
            <div class='c2'> </div>
         </div>
         
         $('a')
         
      4. 组合a
         <div id='i10' class='c1'>
            <a>f</a>
            <a>f</a>
         </div>
         <div class='c1'>
            <a>f</a>
         </div>
         <div class='c1'>
            <div class='c2'> </div>
         </div>
         
         $('a')   // 找到所有的a标签
         $('.c2')  //找到所有含有c2的标签
         
         $('a,.c2,#i10')    //找到所有的a,c2,i10标签
         
      5. 层级 
         $('#i10 a') 子子孙孙  找到i10下的所有a标签
         $('#i10>a') 儿子     找到i10下的儿子，不找孙子
         
      6. 基本
         :first   $('#i10 a:first') 找到i10下的所有a标签的第一个a标签
         :last
         :eq()  $('#i10 a:eq(1)') 找到i10下的所有a标签的第二个a标签
      7. 属性
         $('[tom]')       具有tom属性的所有标签
         $('[tom ="123"]') tom属性等于123的标签
         
      
         <input type='text'/>
         <input type='text'/>
         <input type='file'/>
         <input type='password'/>
         //找到所有text的标签
         1. $(" input[type='text']")  
         2. $(':text')    //这是表单选择器方法，可以不会，因为通过上面方法就能实现
      
      实例：    
         多选，反选，全选
         - 选择权
         - 
            $('#tb:checkbox').prop('checked');        获取值
            $('#tb:checkbox').prop('checked', true);  设置值
         - 
            jQuery方法内置循环： $('#tb:checkbox').xxxx
            
         - $('#tb:checkbox').each(function(k){
               // k当前索引
               // this，DOM，当前循环的元素 $(this)
               
            })
         - var v = 条件 ? 真值 : 假值
         
         
      筛选
         
         
         $('#i1').next()   //找到下一个标签
         $('#i1').nextAll()    //找到下面所有的（同一层内）
         $('#i1').nextUntil('#ii1')   //一直找到ii1标签，不包过ii1
         
         <div>
            <a>asdf</a>
            <a>asdf</a>
            <a id='i1'>asdf</a>
            <a>asdf</a>
            <a id='ii1'>asdf</a>
            <a>asdf</a>
         </div>
         
         $('#i1').prev() 
         $('#i1').prevAll()  
         $('#i1').prevUntil('#ii1')
         
         
         $('#i1').parent()
         $('#i1').parents()   //以列表形式找出所有的父亲 [第一层父亲，第二层父亲，第三层父亲...]
         $('#i1').parentsUntil()
         
         $('#i1').children()    // $().children('[class="edit"]')     仅儿子辈
                              // 或者配合索引$().children().eq(index)
         $('#i1').siblings()  // 获取所有同一个div下的兄弟标签
         $('#i1').find()     //$(...).find('input[type="text"],input[type="password"]')    子子孙孙辈
         $('li:eq(1)')
         $('li').eq(1)
         first()
         last()
         hasClass(class)

   文本操作：
         $(..).text()           # 获取文本内容
         $(..).text(“<a>1</a>”) # 设置文本内容
         
         $(..).html()
         $(..).html("<a>1</a>")
         
         $(..).val()
         $(..).val(..)
   样式操作：
         addClass
         removeClass
         toggleClass    // $('$i1').toggleClass('hide')  判断 i1 div是否有hide样式，
                       // 如果有，那么去除；没有，则添加
         
   属性操作：
         # 专门用于做自定义属性
         $(..).attr('n')      //获取n属性
         $(..).attr('n','v')   //设置n属性为v，有n属性则覆盖；没有，则添加
         $(..).removeAttr('n')
         
      
         
         # 专门用于chekbox,radio
         //因为再jQuery2版本及以下，如果用attr设置checked属性有问题，所以用prop
          <input type='checkbox' id='i1'  />
         $('#ii').attr('checked','true')   //添加checked属性，并选中
         $('#ii').removeAttr('checked') //不选中
          $('#ii').attr('checked','true') //不能再继续选中了       

         $(..).prop('checked')
         $(..).prop('checked', true)
         
         PS: 
            index 获取索引位置
            
   文档处理：
<ul id="u1">

   <li>1</li>
   <li>2</li>

</ul>
         append    //$('u1').append(<li>3</li>)    添加到2的后面,添加到u1的孩子里
         prepend    //$('u1').append(<li>0</li>)   添加到1的前面
         after     //$('u1').append(<li>0</li>)    添加到u1的后面，变成u1的兄弟标签
         before
         
         remove   //清空内容，及<li>标签在页面上显示的点  $('#u1 li').eq(1).remove()
         empty  //只清空内容
          
         clone   //var v = $('#u1 li').eq(index).clone()//复制对应索引的内容 ; 
// $('#u1').append(v);//然后添加
   
   css处理
      
      $('t1').css('样式名称', '样式值')    //就等同于DOM的$('t1')[0].style.color = 
      点赞：
          - $('t1').append()
          - $('t1').remove()
          - setInterval
          - 透明度 1 》 0
          - position
          - 字体大小，位置
   位置：
      $(window).scrollTop()  获取值
      $(window).scrollTop(0) 设置
      scrollLeft([val])
      
      offset()                      指定标签在html中的左上坐标
      offset().left                 指定标签在html中的左坐标
      offset().top                  指定标签在html中的上 坐标
      
      position()                       指定标签相对父标签(relative)标签的坐标
      <div style='relative'>
         <div>
            <div id='i1' style='position:absolute;height:80px;border:1px'></div>
         </div>
      </div>
      
      
      $('i1').height()           # 获取标签的高度 纯高度
      $('i1').innerHeight()      # 获取 纯高度 + padding的（内边距）？
      $('i1').outerHeight()      # 获取边框 + 纯高度 + padding的（内边距）
      $('i1').outerHeight(true)  # 获取边框 + 纯高度 + padding + 相对父标签（relative的高度）？
      
      # 纯高度，边框，外边距，内边距
      
   事件
      DOM： 三种绑定方式
         jQuery：
            $('.c1').click()
            $('.c1').....
            
            $('.c1').bind('click',function(){
               
            })
            
            $('.c1').unbind('click',function(){
               
            })
            
            *******************
            $('.c').delegate('a', 'click', function(){
            
            })
            $('.c').undelegate('a', 'click', function(){
            
            })
            
            $('.c1').on('click', function(){
            
            })
            $('.c1').off('click', function(){
            
            })
            
         阻止事件发生
            return false
            
         # 当页面框架加载完成之后，自动执行
         $(function(){
            
            $(...)
            
         })
         
   jQuery扩展：
      - $.extend        $.方法
      - $.fn.extend     $(..).方法
      
      (function(){
         var status = 1;
         // 封装变量
      })(jQuery)
      
      (function(args){
         var status = 2;
      args.extend({
         'p2':function(){
         return 'p2: ' + status;
         }
         })
      })(jQuery)
      
         
二、操作元素

===》实例：

作业：
一：
      $('i1').height()           # 获取标签的高度 纯高度
      $('i1').innerHeight()      # 获取边框 + 纯高度 + ？
      $('i1').outerHeight()      # 获取边框 + 纯高度 + ？
      $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？
      
      # 纯高度，边框，外边距，内边距
      
二、所有实例敲一遍

三、编辑框