Jquery常用功能

Jquery

• jquery的作用

  • 操作DOM
  • 使用前先引用
  • 解决了许多兼容问题
  • 稳定版本1.8.3

• 获取元素

  • 基本选择器
    • $("#div")
    • $(".div")
    • $(“div”)
  • 筛选器
    • :first
    • :not(selector)
    • :even
    • :odd
    • :eq(index)
    • :gt(index)

• 元素节点

  • eq(num) 元素节点
  • eq(num).next() eq(num)后一个兄弟节点
  • eq(num).nextAll() eq(num)后面所有兄弟节点
  • eq(num).prev() eq(num)前一个兄弟节点
  • eq(num).prevAll() eq(num)前的所有兄弟节点
  • eq(num).siblings() 除eq(num)外的所有兄弟节点
    • 如果siblings()内写参数，则相当于筛选出元素中有参数的元素

• 属性操作

  • $(“ul li:odd”)：所有li的偶数项元素
  • $(“ul li:even”)：奇数
  • $(“ul li:first”)：第一个
  • $(“ul li:last”)：最后一个

• 克隆

  • clone
    • 不加参数，默认false，不克隆事件
    • 参数true，可以克隆事件

        <button>克隆</button>
    
        <ul>
            <li>111</li>
            <li>222</li>
        </ul>
    
        <script>
    
            $('button').on({
                'click': function () {
                    $('ul li').eq(0).clone(true).appendTo('ul')
                    // 默认是false  
                    // true可以克隆事件
                }
            })
    
            $('ul li').on('click', function () {
                $(this).animate({ "fontSize": 50 })
            })
    
        </script>
    

• 过滤、排除、包含

  • 过滤 filter
  • 排除 not
  • 包含 has

• 添加、删除class

  • addClass() 添加
  • removeClass() 删除

• 特效

  • 三种效果

    • show() hide() 显示隐藏
    • fadeIn() fadeOut() 淡入淡出
    • slideUp() slideDown() 折叠与展开

  • hade的三个参数

    • 第一个:速度，时间（毫秒）fast slow
    • 第二个:匀速，linear 慢快慢（默认）swing
    • 第三个:回调函数

  • 自定义

    • animate(p,[s],[e],[fn])
    • stop([c],[j])：停止动画
    • finish([queue])：完成动画

• jquery链式操作

  • 一行代码同时实现写入html、添加背景、以及添加事件

      $('div').html('jquery').css('background', 'red').click(function () {
          alert(this.innerHTML)
      })
  

• 元素宽度

  • offsetWidth = width+border+padding
  • $(‘div’).width() = width
  • $(‘div’).innerWidth() = width + padding
  • $(‘div’).outerWidth() = width + padding + border
  • $(‘div’).outerWidth(true) = width + padding + border + margin
  • $(window).width() ： 浏览器宽度

• 事件绑定

  • on()：绑定多个事件
  • click() :点击事件
  • off():解除事件
  • one():只执行一次
  • hover:鼠标移入移出
  • toggle:切换
  • blur:失焦
  • dbclick:双击
  • focus:获取焦点
  • keydown:键盘按下
  • select：input被选中触发该事件
  • mousedown([[data],fn])
  • mouseenter([[data],fn])
  • mouseleave([[data],fn])
  • mousemove([[data],fn])
  • mouseout([[data],fn])
  • mouseover([[data],fn])
  • mouseup([[data],fn])
  • scroll:鼠标滚动
  • submit:表单提交

• ajax 请求

  • $.ajax(url,[settings])
  • $.get(url,[data],[fn],[type])
  • $.getJSON(url,[data],[fn])
  • $.getScript(url,[callback])
  • $.post(url,[data],[fn],[type])