jQuery

一、简介

1.1 简介

jQuery是一个优秀的JavaScript库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。

1.2 导入方式

下载或使用CDN链接，通过<script></script>标签导入html文档内

一般使用jquery.min.js版本导入，而jquery.js适用于源码研究

1.3 jquery函数

jQuery库只提供了一个叫jQuery的函数，该函数中以及该函数的原型中定义了大量的方法，方便jQuery对象和jQuery函数调用

• 参数为选择器（字符串）

  $('#id')
  $('.class')

  通过选择器获取相应的DOM对象，然后将其封装进一个jQuery对象中

• 参数为Element元素

• 参数为HTML文本字符串

  $('<div>hhh</div>')

  函数根据传入的文本创建html元素并将其封装到jQuery对象中。

• 参数为匿名函数

  $(function(){})
  //当文档结构加载完毕后再执行函数中的内容
  //是$(document).ready(fuction(){})的简写

1.4 jQuery对象

是一个类数组对象，数组中存放的是DOM对象（Node的实例）。

jQuery对象是jQuery函数的实例，该对象可以调用jQuery原型中的方法。

对jQuery对象的操作实际上是对数组中DOM对象的批量操作。这两个对象可以相互转化。

二、jQuery选择器

2.1 基本选择器

• 所有选择器

  *

• 标签选择器

  标签名

• ID选择器

  #ID

• 类选择器

  .className

• 群组选择器 selector1,selector2

  多个选择器使用逗号分割，取并集

• 复合选择器 selector1selector2

  多个选择器组合使用，取交集

2.2 层次选择器

• 后代选择器 selector1 selector2

  两个选择器使用空格隔开，表示可以获取当前元素的子代以及孙子代等等后代元素。

• 子代选择器 selector1>selector2

  两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。

2.3 兄弟选择器

• 下一个兄弟选择器 selector1+selector2

  两个选择器使用+隔开，表示可以获取当前元素下一个兄弟元素，下一个兄弟元素要能符合selector2。

• 之后所有兄弟选择器 selector1~selector2

  两个选择器使用~隔开，表示可以获取当前元素之后的所有兄弟元素，之后所有兄弟元素要能符合selector2。

2.4 过滤器

jQuery的过滤器必须用在jQuery选择器后，表示对通过前面的jQuery选择器选择到的内容的过滤。

2.4.1 基本过滤器

• selector:first 获取所有已选择到的元素中的第一个元素
• selector:last 获取所有已选择到的元素中的最后一个元素
• selector:even 获取所有已选择到的元素中的索引为偶数元素
• selector:odd 获取所有已选择到的元素中的索引为奇数元素
• selector:eq(index) 获取所有已选择到的元素中的索引为index的元素
• selector:lt(num) 获取所有已选择到的元素中索引值小于num的元素
• selector:gt(num) 获取所有已选择到的元素中索引值大于num的元素
• selector1:not(selector2)获取所有已选择到的元素中除了selector2的元素
• selector:header 获取所有已选择到的元素中的标题元素

2.4.2 内容过滤器

• elector:contains(text)

  获取所有已选择到的元素中文本包含text的元素

• selector:empty

  获取所有没有子节点的元素

• selector:parent

  获取所有有子节点的元素，如$("div:parent")

• selector:has(selector2)

  获取所有已选择到的元素中包含selector2的元素，如$("div:has('span')")

2.4.3 可见性过滤器

• :visible 选择所有占据屏幕空间的元素

  • visibility:hidden

  • opacity:0

• :hidden 选择所有不占据屏幕空间的元素

  • display:none

  • <input type="hidden">

2.4.4 属性过滤器

• selector[attrKey]

  获取所有已选择到的元素中具有属性attrKey的元素

• selector[attrKey=attrVal]

  获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素

• selector[attrKey^=attrVal]

  获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素

• selector[attrKey$=attrVal]

  获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素

• selector[attrKey*=attrVal]

  获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素

• selector[attrKey!=attrVal]

  获取所有已选择到的元素中具有属性attrKey，并且属性值不为attrVal的元素或者没有属性attrKey的元素

2.4.5 后代过滤器

• selector :nth-child(index)

  获取每个selector元素中索引为index的子元素【注意】index从1开始

• selector :first-child
• 获取每个selector元素中第一个子元素（每个父元素的第一个子元素）注意与selector:first的区别，获取所有selector元素的子元素中的第一个（只有一个）
• selector :last-child

  获取每个selector元素中最后一个子元素（每个父元素的最后一个子元素）

• selector :only-child

  获取每个selector元素中独生子子元素（每个父元素如果只有一个孩子元素，获取该元素）

• selector :first-of-type

  获取每个selector元素中每种类型子元素中的第一个

• selector :last-of-type

  获取每个selector元素中每种类型子元素中的最后一个

2.4.6 表单过滤器

• :checked 选取所有被选中的元素，用于复选框和单选框，下拉框
• :selected 选取所有被选中的选项元素，该选择器只适用于<option>
• :focus 选择当前获取焦点的元素
• :text 选取所有的单行文本框（<input type="text">）
• :password 选取所有的密码框
• :input 选取所有的<input><textarea><select><button>元素。注意：$(“:input”)是选择可以让用户输入的标签元素；而$(“input”)是选择名字为input的标签元素
• :enabled 选取所有可用元素，该选择器仅可用于选择支持disabled属性的HTML元素(<button>, <input>,<optgroup>,<option>, <select>, <textarea>)
• :disabled 选取所有不可用的元素该选择器，也是仅可用于支持disabled属性的HTML元素
• :radio 选取所有的单选框
• :checkbox 选取所有的多选框
• :submit 选取所有的提交按钮
• :image 选取所有input类型为image的表单元素
• :reset 选取所有input类型为reset的表单元素
• :button 选取所有input类型为button的表单元素
• :file 选取所有input类型为file的表单元素

三、DOM操作

3.1 查找节点

通过jQuery选择器完成

3.2 创建节点

• 创造元素节点

  var newTd = $('<td></td>')

• 创造文本节点

  var newTd = $('<td>文本内容</td>')        //写出文本内容

3.3. 插入节点

• $(A).append(B)

  在匹配元素里面的末尾插入参数内容

• appendTo()
• prepend()

  在匹配元素里面的末前面插入参数内容

• prependTo()
• before()

  在匹配元素的前面插入内容（外部插入）作为其兄弟节点插在集合中每个匹配元素前面。

• insertBefore()
• after()

  在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点插在每个匹配元素的后面。

• insertAfter()

3.4 删除节点

• remove([selector])

  删除所匹配的元素和其绑定的事件，返回一个被删除的节点的引用

• detach([selector])

  删除节点但保存被移走的元素相关联事件

• empty()

3.5 复制节点

返回节点的引用，参数默认为false

• $('#id').clone(false)//浅复制，即不复制元素中所绑定的事件

• $('#id').clone(true)//深复制，即复制元素中被绑定的事件

3.6 替换节点

• $('#id').clone(false)

• replaceWith(newContent)

  返回被删除元素的集合，会删除相关联的数据和事件处理程序

• replaceAll(target)

  效果与replaceWith(newContent)相反

3.7 包裹节点

• wrap([wrappingElement])

  在每个匹配的元素外层包上一个html元素。

• wrapAll([wrappingElement])

  将所有匹配的元素用一个元素来包裹，在所有匹配元素外面包一层HTML结构。这种结构可以嵌套多层，但是最内层只能有一个元素。

• wrapInner([wrappingElement])

  每个匹配元素里面所有子节点都会被这种结构包裹。

3.8 节点遍历

使用这些方法去解析html文档和xml文档都是可以的，因为html文档和xml文档都可以转换为dom模型。(也就是说在ajax中，如果后台传过来的是xml文档，那么我们使用jquery也可以用下面方法解析)。

• children([selector])

  用于取得匹配元素的子元素集合（只考虑子元素而不考虑任何后代元素）。

  $(".content").children(".inner");        //等同于$(".content .inner")

• find(selector)

  在当前元素对象中的子元素中查找，和参数所匹配的所有的后代元素

• next([selector])

  取得匹配的元素集合中每一个元素紧邻的后面兄弟元素。

• nextAll([selector])

  查找当前元素之后所有的同辈元素。

• prev([selector])
  取得匹配元素前面紧邻的兄弟元素
• prevAll([selector])

  查找当前元素之前所有的同辈元素

• siblings([selector])

  取得匹配元素前后所有的兄弟元素

• closest( selector)

  取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素

  $('td:contains("删除")').click(function(){
       $(this).closest($('tr')).remove()
   })        //删除本行
  //但是需要时间代理才能将新增加的行也具有此功能

• filter(selector)

  把当前所选择的所有元素再进行筛选过滤

• parent([selector])

  取得匹配元素集合中，每个元素的父元素

• parents([selector])

  获得集合中每个匹配元素的祖先元素

3.9 属性操作

• attr( key|key,val|{key:val,key2:val2} )

  获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。

• prop( key|key,val|{key:val,key2:val2} )

  获取匹配的元素集中第一个元素的属性值或设置每一个匹配元素的一个或多个属性，常用于单值属性、布尔值。

  var a = $('.one').prop('disabled')
  var b = $('.one').attr('disabled')
  console.log(a)                    //true
  console.log(b)                    //disabled

• removeAttr( attributeName )

  为匹配的元素集合中的每个元素中移除一个属性(attribute)。

• removeProp( propertyName )

  为集合中匹配的元素删除一个属性（property）。一般来说，只需要移除自定义的属性。

• css( key|key,val|{key:val,key2:val2} )

  获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。

• addClass( className )

  为每个匹配的元素添加指定的样式类名。

• hasClass( className )

  确定任何一个匹配元素是否有被分配给定的（样式）类。

• removeClass([className ])

  移除集合中每个匹配元素上一个，多个或全部样式。

四、事件机制

4.1 事件

• on( events,selector,handler(eventObject))

  在选定的元素上绑定一个或多个事件处理函数。

  $('div').on({
      click:function(){
          console.log('点击')
      },
      mouseover:function(){
          console.log('鼠标事件')
      }
  })//绑定多个事件
  $('div').on('click',function(){
      
  })
  //快捷绑定
  $('div').click(function(){})

• off( events [, selector ] [, handler ] )

  移除一个事件处理函数。

  $("div").off("click")            //只解绑click事件

• trigger( eventType[,extraParameters])

  根据绑定到匹配元素和给定的事件类型执行对应的事件。

  $('span').click(function(){
      $('span').css('background-color','red')
  })
  // 模拟span的点击事件
  $('.btn').click(function(){
      $('span').trigger('click')
  })

4.2 事件类型

• 鼠标事件

  • click() 鼠标单击事件
  • dblclick() 鼠标双击事件
  • hover() 鼠标悬停事件
  • mousedown() 鼠标按下事件
  • mouseup() 鼠标抬起事件
  • mouseenter() 鼠标进入事件 不支持子元素
  • mouseleave() 鼠标离开事件 不支持子元素
  • mouseout() 鼠标离开事件 支持子元素
  • mouseover() 鼠标进入事件 支持子元素
  • mousemove() 鼠标移动事件

• 键盘事件

  • keypress() 按键按下事件
  • keyup() 按键抬起事件
  • keydown() 按键按下事件

• 表单事件

  • focus() 聚焦事件
  • blur() 失去焦点事件
  • change() 当元素的值发生改变时激发的事件
  • select() 当 textarea 或文本类型的 input 元素中的文本被选择时触发的事件
  • submit() 表单提交事件，绑定在 form

4.3 常用API

• get()/toArray()【无参】

  将类数组对象转换为数组

  调用这个方法将会返回所有匹配的DOM节点，这些节点包含在一个标准的数组中。

• eq(index)

  参数 index：用于指示元素的索引，当为负数时从集合中的最后一个元素开始倒数；

  返回指定索引位置上的【jQuery对象】。

• filter() 过滤器函数

  参数：选择器字符串
  返回值：jQuery对象。

• map()
• not()

  从匹配的元素集合中移除匹配参数的元素。

• each()

  遍历一个jQuery对象，为每个匹配元素执行一个函数；

  参数：function(index, Element) 。

• first()【无参数】

  获取匹配元素集合中第一个元素。

• last()【无参数】

  获取匹配元素集合中最后一个元素。

• is()

  判断当前匹配的元素集合中，是否有能够满足给定参数的元素

  返回值：boolean类型。

• has()

  筛选匹配元素集合中的那些拥有与参数相匹配的后代元素的元素。

• slice()

  根据指定的下标范围，过滤匹配的元素集合，并生成一个新jQuery对象。

• .width()/.height()

  返回一个不带单位的数值

  $(window).height()    //浏览器视口的高度

• .innerWidth()/.innerHeight()

  +padding

• .outerWidth()/.outerHeight()

  +border

五、ajax

• $.ajax({
      url:"http://localhost:7788/user/login",
      method:'post',
      contentType:'application/json',
      data:JSON.stringify(obj),
      success:function(res){
          $(location).attr('href','./login.html')
      },
      error:function(e){
          console.log(res)
      }
  })

• $.ajaxSetup({
      headers:{
          "Authorization":token
      }
  })

• localStorage

  • setItem('属性名','属性值)

    将某数据放入本地存储

  • getItem('属性名')

• load 定向加载页面

  <div id="main"></div>
  $('.main').load()

• 速写形式

  $.get(url,function(res){})
  $.post(url,data,function(res){})