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')
            $('.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)

   二、操作元素

===》实例：

作业：
   一：
         $('i1').height()           # 获取标签的高度 纯高度
         $('i1').innerHeight()      # 获取边框 + 纯高度 + ？
         $('i1').outerHeight()      # 获取边框 + 纯高度 + ？
         $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？

         # 纯高度，边框，外边距，内边距

   二、所有实例敲一遍

   三、编辑框
巴特西

jQuery选择器及常见操作

最新文章

热门文章
