前端学习笔记4-jquery

jQuery
 jquery.cuishifeng.cn
 模块 《==》 类库
 DOM/BOM/JavaScript的类库
  PS
   版本  1.x / 2.x / 3.x
   对象转换
    jQuery对象[0] => dom对象
    dom对象 => $(dom对象)
    
 一丶查找元素
  DOM
   10左右
  jQuery
   选择器 直接找到某个或某类标签
   1. id
    $('id')
   2.class
    <div class='c1'></div>
    $('.c1')
   3.标签
    <div>
     <a>f</a>
     <a>f</a>
    </div>
    <div class='c1'>
     <a>f</a>
    </div>
    <div class='c1'>
     <div class='c2'>
      <a>f</a>
     </div>
    </div>
    #('a')
   4.组合标签
    <div id='i10' class='c1'>
     <a>f</a>
    </div>
    <div class='c1'>
     <div class='c2'>
      <a>f</a>
     </div>
    </div>
    $('a')
    $('.c1')
    $('a,.c2,#i10')
   5.层级查找
    $('#i10,a') 向内迭代
    $('#i10>a') 子标签
   6.基本选择器 $('#id>a:first')/:even/:odd/:eq(index 从0开始索引)/:last
   
    7.属性
    $('[自定义]') 具有自定义属性的所以标签
    $('[自定义='xxx']') //
   
    示例：
    选择器
     $('#tb:checkbox').prop('checked'); 获取值
     $('#tb:checkbox').prop('checked'true); 设置值
     jQuery方法内置循环：$('#tb:checkbox').xxx
     $('#tb:checkbox').each(function(k)){
      //k为当前索引下标值
      //this ==>DOM对象 当前循环的元素 $(this)
     }
     var v = 条件？真值：假值
    
    
    
    
   筛选器
    /*
    $(this).parent()
     $(this).parents()
     $(this).parentsUntil()
    $(this).children()
    $(this).next()
     $(this).nextAll()
     $(this).nextUntill()
    $(this).prev()
     $(this).prevAll()
     $(this).prevUntill()
    $(this).sibings()
    $(this).find('xxx') 迭代查找
    $('#xx :xxx').addClass('xx')
    $('#xx :xxx').removeClass('xx')
    $(this).eq()
    $(this).hasClass()
    $(this).last()
    $(this).first()
    */
    /*
    链式编程
    $(this).siblings().removeClass('hide');
    $(this).parent().siblings().find('.content').addClass('hide');
    $(this).siblings().removeClass('hide').parent().siblings().find('.content').addClass('hide');
    */
   文本操作
    $(xx).text(xxx)
    $(xx).html(<x>xx</x>)
    $(xx).val() //获取值
    $(xx).val(xx) //设置值
    $(xx).attr('xx') 获取xx属性的值
    $(xx).attr('xx',"bbb") 增加一个属性
    $(xx).removeAttr('xx') 移除该属性
    $(xx).append() 在末尾添加内容
    $(xx).prepend  在最前添加内容
    $(xx).after  最后面的外层
    $(xx).before 最前面的外层
    .remove  删除内容及标签  .clear 仅删除内容
    .empty .clone
   css处理
    $('t1').css('样式名称','样式值')
   位置
    $(window).scrollTop() 获取值
    $(window).scrollTop(0) 设置值
    scrollLeft([val])
    offset  指定标签在文档中的坐标
    offset().left
    offset().top
    
    $('i1').height //纯高度
    $('i1').innerheight //纯高度+边框高度
    $('i1').outerheight
    $('i1').outerheight(true)
   事件
    DOM
     三种绑定方式
    jQuery
     $(xx).click()
     $(xx).事件
     $(xx).bind('click',function(){
     })  // unbind
     $(xx).delegate('a','click',function(){
     })  // undelegate
     /*委托
     $(xx).on('click',function(){
     })  // off
    阻止事件发生
     return false
     #当页面框架加载完成之后，自动执行
     $(function(){
      $(xx)
     })
    jQuery扩展
     $.extend
     $.fn.extend
    (function(){
     var status = 1;
     //封装变量
    })