day17

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')
    $('.c2')
    
    $('a,.c2,#i10')
    
   5. 层级
    $('#i10 a') 子子孙孙
    $('#i10>a') 儿子
    
   6. 基本
    :first
    :last
    :eq()
   7. 属性
    $('[alex]')       具有alex属性的所有标签
    $('[alex="123"]') alex属性等于123的标签
    
   
    <input type='text'/>
    <input type='text'/>
    <input type='file'/>
    <input type='password'/>
    
    $("input[type='text']")
    $(':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')
    
    <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()
    $('#i1').siblings()
    $('#i1').find()
    $('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
    
  属性操作：
    # 专门用于做自定义属性
    $(..).attr('n')
    $(..).attr('n','v')
    $(..).removeAttr('n')
    
    <input type='checkbox' id='i1'  />
    
    
    # 专门用于chekbox,radio
    $(..).prop('checked')
    $(..).prop('checked', true)
    
    PS:
     index 获取索引位置
     
  文档处理：
    append
    prepend
    after
    before
    
    remove
    empty
    
    clone
  css处理
   
   $('t1').css('样式名称', '样式值')
   点赞：
     - $('t1').append()
     - $('t1').remove()
     - setInterval
     - 透明度 1 》 0
     - position
     - 字体大小，位置
  位置：
   $(window).scrollTop()  获取
   $(window).scrollTop(0) 设置
   scrollLeft([val])
   
   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()      # 获取边框 + 纯高度 + ？
   $('i1').outerHeight()      # 获取边框 + 纯高度 + ？
   $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？
   
   # 纯高度，边框，外边距，内边距
   
  事件
   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)