jQuery

总结了jQuery基本用法，包括常用的方法和属性，还举了例子，方便理解和使用。

jQuery

• jQuery API中文文档
  • https://www.jquery123.com/
• 初始化函数
  • 当网页中的dom元素(不包含图片、视频等)全部加载完毕后，立即执行
  • 可以写多个
  • $等价于jQuery
  • $(document).ready(function(){});
  • $(function(){});
• DOM对象与jQuery对象
  • DOM对象：js取的对象
    • 例：var title = document.getElementById('myTitle');
    • 只能用DOM方法，例如title.innerHTML;
  • jQuery对象：jQuery取的对象
    • 例：var $title = $("#myTitle");
    • 只能用jQuery方法，例如$title.html();
    • jQuery对象默认是一个数组或集合
  • DOM对象->jQuery对象
    • $(DOM对象)
      • 例：$(title).html();
  • jQuery对象->DOM对象
    • jQuery[0]或jQuery.get()
      • 例：$title[0].innerHTML $title.get(0).innerHTML
• 选择器
  • 基本选择器
    • 标签选择器
      • $("标签名")
    • 类选择器
      • $(".class值")
    • ID选择器
      • $("#ID值")
    • 并集选择器
      • 逗号(,)
        • 例：$(".myStyle, #myTitle")
    • 交集选择器
      • 连续直接写
        • 例：既是p标签，且class名为myStyle $("p.myStyle")
    • 全局选择器
      • $("*")
        • 选中一切元素
  • 层次选择器
    • 相邻选择器：+
      • $("选择器+元素类型")
        • 取选择器后面的该类型的元素
          • 例：$("#1+li");取id为1的对象后面的li元素
    • 同辈选择器：~
      • $("选择器~元素类型")
        • 取选择器后面所有同辈的该类型的元素
    • 后代选择器：空格
      • $("选择器 元素类型")
        • 取选择器的所有后代中的该类型元素
    • 子代选择器：>
      • $("选择器>元素类型")
        • 取选择器的下一代中的该类型元素
  • 属性选择器
    • $("[href]")
      • 选取所有带有href属性的元素
    • $("[href=#]")
      • 选取所有带有href值等于#的元素
    • $("[href!=#]")
      • 选取所有带有href值不等于#的元素
    • $("[href^=#]")
      • 选取所有带有href以#开头的元素
    • $("[href$=#]")
      • 选取所有带有href以#结尾的元素
    • $("[href*=#]")
      • 选取所有带有href包含#的元素
  • 过滤选择器
    • :first
      • 开头那个
        • 例：$("ul>li:first")html()
    • :last
      • 最后那个
    • :even
      • 偶数
    • :odd
      • 奇数
    • :eq(index)
      • 第index个
    • :gt(index)
      • >index的全部元素
    • :lt(index)
      • <index的全部元素
    • :not(选择器)
      • 除了...以外的元素
    • :header
      • 选中所有的标题元素，如h1、h2等
        • 例：$(":header")
    • :focus
      • 获取当前焦点(光标所在)的元素
  • 可见选择器
    • :visible
      • 选取所有可见的元素
    • :hidden
      • 选取所有隐藏的元素
• 事件
  • $(选择器).事件类型(function(){});
  • Windows事件
    • ready()
  • 鼠标事件
    • .click()
      • 鼠标单击
        • 例：$("h1").click(function(){ alert("hello"); });
    • .mouseover()
      • 鼠标悬浮
    • .mouseout()
      • 鼠标离开
    • ...很多，见文档
  • 键盘事件
    • .keydown()
      • 按键按下
    • .keypress()
      • 按键按到底
    • .keyup()
      • 按键释放
    • event.keyCode
      • 返回按键的ASCII码值
        • 例：$("body").keydown(function(event){ console.log(event.keyCode); });
  • 表单事件
    • .focus()
      • 获得光标时触发
    • .blur()
      • 失去焦点时触发
  • 绑定事件
    • .bind("事件名",[数据,函数])
      • 绑定一个
        • 例：$("#uid").bind("click",function(){ alert("bind"); });
    • .bind({"事件名":函数, "事件名":函数, ...})
      • 绑定多个
  • 移除事件
    • .unbind("事件名",[数据,函数])
  • 复合事件
    • .hover(f1,f2)
      • f1应用于mouseover()，f2应用于mouseout()
    • .toggle(f1,f2,...fn)
      • 第一次click()，执行f1，第二次执行f2，以此类推
      • jquery1.9之前版本支持
  • 显示效果
    • .hide([速度，回调函数])
      • 隐藏
    • .show([速度，回调函数])
      • 显示
    • .fadeIn([速度，回调函数])
      • 淡入
    • .fadeOut([速度，回调函数])
      • 淡出
    • .slideDown([速度，回调函数])
      • 上拉至消失
    • .slideUp([速度，回调函数])
      • 下拉显示
• 表单校验
  • 获取值
    • .val()
      • 获取value值，多用于input标签
    • .val(v)
      • 将value设置为v
  • 触发
    • .blur(function(){})
      • 失去焦点时触发
    • .submit(function(){})
      • 点击表单的提交按钮时触发，如果返回true则正常跳转，否则中止
  • 表单选择器
    • 根据input标签中的type值进行匹配
    • :input
      • 匹配所有input、textarea、select、button元素
    • :text
      • 匹配所有单行文本框
        • 例：$(":text")
    • :password
      • 匹配所有密码框
    • :radio
      • 匹配所有单项按钮
    • :checkbox
      • 匹配所有复选框
    • :submit
      • 匹配所有提交按钮
    • :image
      • 匹配所有图像
    • :reset
      • 匹配所有重置按钮
    • :button
      • 匹配所有按钮
    • :file
      • 匹配所有文件域
    • :hidden
      • 匹配所有不可见元素
• 操作DOM
  • 样式操作(css)
    • 设置CSS
      • jQuery对象.css("属性名","属性值")
        • 设置单个属性
      • jQuery对象.css({"属性名":"属性值", "属性名":"属性值", ...})
        • 设置多个属性
      • 具体设置
        • 不带参数：获取值；带参数，设置值
        • .height()
          • 高度值
        • .width()
          • 宽度
        • .offset()
          • 该元素以网页左上角为准的偏移量(横纵坐标)
        • .offset(function(index,oldOffset){})
          • 设置偏移量
            • 例：var $myDivOffset = $("divid").offset(function(index, oldOffset){ var newOffset = new Object(); newOffset.left = oldOffset.left + 100; newOffset.top = oldOffset.top + 100; return newOffset; });
    • 设置class
      • .addClass("x")
        • 给对象添加名为x的class，不带点(.)
          • 例：$("#color1").addClass("mystyle");
      • .addClass("x x x...")
        • 添加多个class
      • .removeClass("x")
        • 移除名为x的class
      • .removeClass("x x ...")
        • 移除多个class
      • .removeClass()
        • 移除所有样式
  • 内容操作
    • .html()
      • 获取元素的全部内容，包括元素内部的各种标签
    • .html("...")
      • 将元素中的内容替换为"..."，先渲染再显示
    • .text()
      • 获取元素的全部文本内容
    • .text("...")
      • 将元素中的内容替换为"..."，不渲染，原样显示
  • 节点操作
    • 创建节点
      • var e = $("<li>xxx</li>")
    • 插入节点
      • 内部插入
        • $(A).append(B)
          • 将B追加到A中
            • 例：var $e = $("<li>xxx</li>"); $("ul").append($e);
        • $(A).appendTo(B)
          • 将A追加到B中
        • $(A).prepend(B)
          • 将B前置插入到A中
        • $(A).prependTo(B)
          • 将A前置插到B中
      • 外部插入
        • $(A).after(B)
          • 将B插入到A之后
        • $(A).insertAfter(B)
          • 将A插入到B之后
        • $(A).before(B)
          • 将B插入至A之前
        • $(A).insertBefore(B)
          • 将A插入到B之前
    • 替换节点
      • $(A).replaceWith(B)
        • 用B替换A
      • $(A).replaceAll(B)
        • 用A替换B
    • 删除节点
      • .remove()
        • 彻底删除
      • .empty()
        • 只删除节点的内容
    • 克隆节点
      • .clone(true|false)
        • 如果为true：克隆节点及其事件等；如果为false：只克隆节点
  • 属性操作
    • 获取属性值
      • .attr("属性名")
        • 取该属性名的值
    • 修改属性值
      • .attr("属性名","属性值")
        • 设置该属性名的值
      • .attr({"属性名1":"属性值","属性名2":"属性值",...})
        • 批量设置
    • 删除属性
      • .removeAttr("属性名")
  • 集合操作
    • 获取集合
      • 子节点集合
        • .children("元素类型")
          • 选中子节点中所有为该类型的元素
      • 后代集合
        • .find("元素类型")
      • 同辈集合
        • .next()
          • 后一个同辈元素
        • .prev()
          • 前一个同辈元素
        • .siblings()
          • 所有同辈元素
        • .siblings("元素类型")
          • 特定同辈元素
      • 前辈集合
        • .parent()
          • 父辈元素
        • .parents()
          • 所有祖先元素
        • .parent("元素类型")
          • 特定祖先元素
    • 过滤集合
      • 很多方法的()就是一个过滤选择器
        • 例：$("ul>li:eq(1)").siblings(":odd");
    • 遍历集合
      • .each(function([index,element]){});
        • 将集合中的每个元素都应用function
          • 例：$("ul>li").each(function(){ alert($(this).html()); });
        • index和element可选，可随意命名
        • index：当前元素的序号
        • element：当前元素，可在function中用this代替