jQuery

jQuery

什么是jquery

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

基础语法：

$(*selector*).*action*()

jQuery对象与js对象互相转换

var p1 = $("#p1");   // 得到jq对象
var p2 = document.getElementById("p1");  // 得到js对象

var jsp = p1[0];   // 将jq对象转成js对象
var jqp = $(p2);   // 将js对象转成jq对象

jQuery 选择器

选择器	描述
$("id")	id选择器
$("class")	类选择器
$("tagName")	标签选择器
$("div.d1")	配合选择器（类为d1的div标签）
$("*")	所有元素选择器
$("#id, .className, tagName")	组合选择器
$("x y")	后代选择器
$("x > y")	子类选择器
$("x + y")	毗邻选择器
$("x ~ y")	兄弟选择器

筛选器

筛选器	描述
:first	第一个
:last	最后一个
:eq(index)	索引等于index的标签
:even	匹配索引为偶数的标签，包括0
:odd	匹配索引为奇数的标签
:gt(index)	匹配索引大于index的标签
:lt(index)	匹配索引小于index的标签
:not(元素选择器)	匹配不满足条件的标签
:has(元素选择器)	匹配后代中有一个或多个满足添加的标签

属性选择器

• [attribute = value]：属性等于
• [attribute != value]：属性不等于

表单筛选器

包括但不限于：

筛选器	描述
:text	匹配文本框
:password	匹配密码框
:radio	匹配单选框
:checkbox	匹配多选框
:submit	匹配提交按钮
:reset	匹配重置按钮
:button	匹配普通按钮
:file	匹配文件选择框

筛选方法

• 父元素

  $("#id").parent()  // 返回被选元素的直接父元素
  $("#id").parents()  // 返回被选元素的所有祖先元素，它一路向上直到文档的根元素
  $("#id").parentsUntil() // 返回介于两个给定元素之间的所有祖先元素
  

• 兄弟元素

  siblings()  // 返回被选元素的所有兄弟元素
  next()   // 返回被选元素的下一个兄弟元素
  nextAll()   // 返回被选元素下面跟随的兄弟元素
  nextUntil()  // 返回介于给定参数之间的所有跟随的兄弟元素
  prev()   // 返回被选元素的上一个兄弟元素
  prevAll()   // 返回被选元素下面跟随的兄弟元素
  prevUntil()  // 返回介于给定参数之间的所有跟随的兄弟元素
  

• 后代元素

  children()  // 方法返回被选元素的所有直接子元素
  find()  // 返回被选元素的后代元素，一路向下直到最后一个后代
  

• 查找指定元素

  $("div").find("p")  // div下的所有p标签
  

• 筛选自定元素

  $("div").filter(".p1")  // 从结果集中过滤出有p1类的标签
  

操作标签

样式操作

• 操作类

  .addClass()  // 添加指定的类名
  .removeClass()  // 移除指定的类名
  .hasClass()  // 判断样式是否存在
  .toggleClass()  // 判断类名是否存在，存在移除，不存在添加
  

• 操作css

  .css("color", "red")  // 添加单个样式
  .css({"color": "red", "font-size": 36})  // 添加多个样式
  

位置操作

offset()  // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()  // 获取匹配元素相对父元素的偏移
scrollTop()  // 获取匹配元素相对滚动条顶部的偏移
scrollLeft()  // 获取匹配元素相对滚动条左侧的偏移

尺寸

height()   // content的高度
width()   // content的宽度
innerHeight()  // content+padding的高度
innerWidth()  // content+padding的宽度
outerHeight()  // content+padding+border的高度
outerWidth()  // content+padding+border的宽度

获取值

• text

  .text()  // 设置或获取text值
  

• html

  .html()  // 设置或获取html值
  

• val

  .val()  // 设置或获取val值，表单值
  .val([val1, val2])  // 设置多选的checkbox、多选select的值
  

属性操作

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
// 单选框和多选框请使用
prop() // 获取属性
removeProp() // 移除属性

文档处理

• 将元素添加到指定元素的内部

  • 内部的后面

    A.append(B)  // 把B追加到A内部  A为jquery对象
    A.appendTo(B)  // 把A追加到B内部  A为jquery对象
    

  • 内部的前面

    A.prepend(B)  // 把B前置到A  A为jquery对象
    A.prependTo(B)  // 把A前置到B  A为jquery对象
    

• 将元素添加到指定元素的外部

  • 外部的后面

    A.after(B)// 把B放到A的后面  A为jquery对象
    A.insertAfter(B)// 把A放到B的后面  A为jquery对象
    

  • 外部的前面

    A.before(B)// 把B放到A的前面  A为jquery对象
    A.insertBefore(B)// 把A放到B的前面  A为jquery对象
    

• 移除和清空元素

  • 移除

    A.remove()  // 将A对象移除  A为jquery对象
    

  • 清空

    A.empty()  // 将A对象的子元素全部移除，保留当前对象  A为jquery对象
    

• 替换

  • replaceWith

    A.replaceWith(B)  // 将B替换成A  A为jquery对象
    

  • replaceAll

    $("<h1>Hello World!</h1>").replaceAll(A)  // 替换成新的 HTML 元素。  A为jquery对象
    

• 克隆：clone

  A.clone()  // 克隆一个jq对象  不包括事件处理程序
  A.clone(true)  // 克隆一个jq对象  包括事件处理程序
  

事件

• 常见事件

  事件	详细信息
  click	单击事件
  dblclick	双击事件
  mouseenter	鼠标移入
  mouseleave	鼠标移出
  hover	鼠标移入和移出
  	键盘按住
  keydown	键盘按下
  keyup	键盘弹起
  submit	表单提交时
  change	域内容被改变
  focus	元素获取焦点
  blur	元素失去焦点
  load	当页面全部加载完毕
  resize	当调整页面大小时
  scroll	滚动指定元素时（select）
  unload	当离开页面时

• 事件绑定

  .on("事件"，事件函数)
  // 示例：
  $("p").on("click", function(){
  	$(this).animate({fontSize: "+=1px"});
  });
  

• 事件移除

  .off("事件")
  // 示例：
  $("button").on("click",function(){
      $("p").off("click");
  });
  

• 阻止后续事件执行

  return false;  // 一般用于阻止表单提交
  e.preventDefault();