Jquery总结

Jquery能实现的JS都能实现，JS实现的Jquery未必能实现

事件

常用的基本事件

• 鼠标事件

  • mouseenter 当鼠标进入（穿过）被选元素时

      $("div.enter").mouseenter(function(){
        $(".enter span").text(y+=1);
      });
    

  • mouseover 与mouseenter不同当鼠标穿过任何子元素都会被触发

      $("div.over").mouseover(function(){
        $(".over span").text(x+=1);
      });
    

  • dbclick 双击

       $('ul').dblclick(function(){
           $('li').css('background','red');
       })
    

  • mouseleave 与mouseout不同只有鼠标离开被选元素的时候才会触发

        $("div.leave").mouseleave(function(){
          $(".leave span").text(y+=1);
        });
    

  • mouseout 无论鼠标离开被选元素还是子元素都会触发

        $("div.out").mouseout(function(){
             $(".out span").text(x+=1);
           });
    

  • click 鼠标点击

      $("div.out").click(function(){
           $(".out span").text(x+=1);
         });
    

  • mousewheel

    1. 安装滚轮插件：bootcdn 查找Jquery-mousewheel
    2. 判断滚轮方向： e.originalEvent.wheelDelta
• 键盘事件
  • keyup 按键松开
  • keypress 按键被按下，然后按键被松开并复位
  • keydown 鼠标按下
• 表单事件
  • change 元素的值发生改变
  • blur 元素失去焦点
  • focus 获取焦点
• 系统事件
  • unload 用户离开页面时
    1. unload() 方法将事件处理程序绑定到 unload 事件。
    2. unload() 方法只应用于 window 对象。
  • resize 调整浏览器窗口的时候触发
  • scroll 用户滚动指定元素
  • load 当指定元素（以及子元素）已经加载时，会触发

绑定事件

• 绑定：on/one
• 解绑：off把上面on/one都解除绑定

事件的主动触发 tigger

• 已经给摸个元素绑定了摸个行为
• 通过tigger来满足条件主动触发的这个行为

事件的详细信息

• 事件对象：e
• 事件类型：e.type
• 事件源： e.target
• 鼠标坐标
  • 针对当前可视区的
    1. e.clientX
    2. e.clientY
  • 针对整个页面：
    1. e.pageX
    2. e.pageY
• 阻止默认事件：e.preventDefault
• 阻止冒泡：e.stopPropagation

dom操作

节点关系

• 父节点
  • parent
  • parents
• 子节点
  • children 只能找到儿子级别的
  • find 可以找到子子孙孙
• 上一个哥哥元素 prev
• 下一个弟弟元素 next
• 所有哥哥元素 prevAll
• 所有弟弟元素 nextAll
• 所有兄弟元素 siblings
• 索引 $(this).index()
• 第一个子元素 $(xxx).first()
• 最后子元素 $(xxx).last()

dom动态操作

• 创建元素 $('<div></div>')
• 克隆元素 clone()
• 插入到容器末尾
  • append $(A).append(B) B放到A中
  • appendTo $(A).appendTo(B) A放到B中
• 插入到容器末尾
  • prepend
  • prependTo
• 插入到指定元素后面 insterAfter
• 插入到指定元素前面 insterbefore
• 删除指定元素 remove

dom属性操作

• 获取 attr(一个参数)
• 设置 attr(attr,value)
• 移除属性 removeAttr(attr)

数据交互

$.ajax

url请求地址

type请求方式

• get
• post
• jsonp
  • 可实现跨域请求数据
  • 浏览器同源策略
    1. 协议：http/https
    2. 域名：www.baidu.com
    3. 端口号：http->80
    4. https->443

data请求参数

async是否异步

• true 异步
• false 同步

jsonp

• 如果请求的地址中，全局函数名子不是callback，我们要通过jsonp重新设置函数名

dataType 返回数据类型

• json
• jsonp

cache是否缓存

success:function(data){}

error

选择器

基本选择器

• id
• class
• element

筛选

• 层级选择器
  • :first .first()
  • :last .last()
  • :eq .eq()
  • :lt :gt
  • :odd :even
  • :parent
• 属性选择器 $("div[class^='box']")
• 表单选择器 $(':text').val()

运动

插件扩展