前端学习笔记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;

     //封装变量

    })