jQuery 速查表

1. 了解jQuery

• 是什么: What?
  • 一个JS函数库: write less, do more
  • 封装简化DOM操作(CRUD) / Ajax
• 为什么用它: why?
  • 强大选择器: 方便快速查找DOM元素
  • 隐式遍历(迭代): 一次操作多个元素
  • 读写合一: 读数据/写数据用的是一个函数
  • 链式调用: 可以通过.不断调用jQuery对象的方法
  • 事件处理
  • DOM操作(CUD)
  • 样式操作
  • 动画
  • 浏览器兼容
• 如何使用: How?
  • 引入jQuery库
    • 本地引入与CDN远程引入

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
。。。
</script>

  * 测试版与生产版(压缩版)
* 使用jQuery
  * 使用jQuery函数: $/jQuery
  * 使用jQuery对象: $xxx
  (执行$()得到的)

2. jQuery的2把利器

jQuery函数: $/jQuery

* jQuery向外暴露的就是jQuery函数, 可以直接使用
* 当成一般函数使用: $(param)
  * param是function: 相当于window.onload = function(文档加载完成的监听)
  * param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
  * param是DOM元素: 将DOM元素对象包装为jQuery对象返回  $(this)
  * param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
  

// 需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
  // 1). 参数为函数 : 当DOM加载完成后，执行此回调函数
  $(function () {//绑定文档加载完成的监听
  //  2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
    $('#btn').click(function () {//绑定点击事件监听
    //  this是什么？发生事件的dom元素（<button>）
    //   alert(this.innerHTML)
    //    3). 参数为DOM对象: 将dom对象封装成jQuery对象
      alert($(this).html())
      //  4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
      $('<input type="text" name="msg3"/><br/>').appendTo('div')
    })

jQuery对象

* 包含所有匹配的n个DOM元素的伪数组对象
* 执行$()返回的就是jQuery对象
* 基本行为:
  * length/size(): 得到dom元素的个数
  * 【index】: 得到指定下标对应的dom元素
  * each(function(index, domEle){}): 遍历所有dom元素
  * index(): 得到当前dom元素在所有兄弟中的下标
        

 // 需求2. 遍历输出数组中所有元素值
  var arr =[2,3,4,5]

    // $.each() : 隐式遍历数组
    $.each(arr,function (index,item) {
    console.log(index,item)
  })
    // 需求3. 去掉"  my atguigu  "两端的空格
    // $.trim() : 去除两端的空格
  var str = ' my confident'
    // console.log('---'+str.trim()+'---')
    console.log($.trim(str))
  })

3. 选择器 分类

* 有特定语法规则(css选择器)的字符串
* 用来查找某个/些DOM元素: $(selector)

(1) 基本选择器

• #id
• tagName/*
• .class
• selector1,selector2,selector3: 并集
• selector1selector2selector3: 交集

(2) 层次选择器

• 找子孙后代, 兄弟元素
• selector1>selector2: 子元素
• selector1 selector2: 后代元素

(3) 过滤选择器

• 在原有匹配元素中筛选出其中一些
• :first
• :last
• :eq(index)
• :lt
• :gt
• :odd
• :even
• :not(selector)
• :hidden
• :visible
• 【attrName】
• 【attrName=value】

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

  /*
   需求:
   1. 选择第一个div
   2. 选择最后一个class为box的元素
   3. 选择所有class属性不为box的div
   4. 选择第二个和第三个li元素
   5. 选择内容为BBBBB的li
   6. 选择隐藏的li
   7. 选择有title属性的li元素
   8. 选择所有属性title为hello的li元素
   */
  $('div:first').css('background','red')
  $('.box:last').css('background','red')
  $('div:not(.box)').css('background','red')
  $('li:gt(0):lt(2)').css('background','red')
  $('li:lt(3):gt(0)').css('background','red')
  $('li:contains("BBBBB")').css('background','red')
  console.log($('li:hidden').length,$('li:hidden')[0])
  $('li[title]').css('background','red')
  $('li[title="hello"]').css('background','red')

</script>

(4) 表单选择器

• :input
• :text
• :checkbox
• :radio
• :checked: 选中的

工具

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
//1. $.each(): 遍历数组或对象中的数据
let arr = [1, 2, 3, 5];
  $.each(arr,function (index,item) {
      console.log(index,item)
    })
  // 2. $.trim(): 去除字符串两边的空格
  // 3. $.type(obj): 得到数据的类型
  console.log($.type($))//function
  // 4. $.isArray(obj): 判断是否是数组
  console.log($.isArray($))//false
  // 5. $.isFunction(obj): 判断是否是函数
  console.log($.isFunction($))//true
  // 6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
  var json = '{"name"："tony","age":"14"}';
  console.log($.parseJSON(json))//json 对象 ===》JS对象
  json = '[{"name"："tom","age":"12"},{"name":"lily","age":"18"}]'
  console.log($.parseJSON(json))//json 数组  ===》JS对象

//  JSON.stringify(jsObj/jsArr) js对象/数组 ===》json字符串
</script>

02_多Tab点击切换

   var $contents = $('#container>div')

   var currIndex = 0 //当前显示的内容div的下标
   //给3个li加监听
   $('#tab>li').click(function () {//隐式遍历
     //隐藏当前已经显示的内容的div
     $contents[currIndex].style.display = 'none'
     //  显示对应内容的div
     //  得到当前点击li在兄弟中的下标
     var index = $(this).index()
     // 找到对应的内容div，并显示
     $contents[index].style.display = 'block'
   //  更新下标
     currIndex = index
   })

4. 属性/文本

• 操作标签的属性, 标签体文本

  * attr(name) / attr(name, value): 读写**非布尔值**的标签属性
  * prop(name) / prop(name, value): 读写**布尔值**的标签属性
  * removeAttr(name)/removeProp(name): 删除属性
  
  * addClass(classValue): 添加class
  * removeClass(classValue): 移除指定class
  * val() / val(value): 读写标签的value
  
  * html() / html(htmlString): 读写标签体文本
  

  伪（类）数组

// 1. 读取第一个div的title属性
  console.log($('div:first').attr('title'))
  // 2. 给所有的div设置name属性(value为atguigu)
  $('div').attr('name','july')
  // 3. 移除所有div的title属性
  $('div').removeAttr('title')
  // 4. 给所有的div设置class='july'
  $('div').attr('class','july')

  // 5. 给所有的div添加class='abc'
  $('div').addClass('abc')

  // 6. 移除所有div的july的class
  $('div').removeAttr('july')

  // 7. 得到最后一个li的标签体文本
  console.log($('li:last').html())
  // 8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
  $('li:first').html('<h1>mmmmmmmmm</h1>')
  // 9. 得到输入框中的value值
  console.log($(':text').val())
  // 10. 将输入框的值设置为atguigu
  $(':text').val('july')
  // 11. 点击'全选'按钮实现全选
  var $checkboxs = $(':checkbox')
  $('button:first').click(function () {
      $checkboxs.prop('checked',true)
    })

  // 12. 点击'全不选'按钮实现全不选
  $('button:last').click(function () {
    $checkboxs.prop('checked',false)
  })

5. CSS模块

(1) style样式

* css(styleName): 根据样式名得到对应的值
* css(styleName, value): 设置**一个**样式
* css({多个样式对}): 设置**多个**样式

// 1. 得到第一个p标签的颜色
  console.log($('p:first').css('color'))
  // 2. 设置所有p标签的文本颜色为red
  $('p').css('color','red')
  // 3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
  $('p:eq(1)').css({
    color:'#ff0011',
    background:blue,
    width:300,
    height:20
  })

(2) 位置坐标

* offset(): 读/写当前元素坐标(原点是页面左上角)
* position(): 读当前元素坐标(原点是父元素左上角)
* scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标

// 1. 点击 btn1
  $('#btn1').click(function () {
  // 打印 div1 相对于页面左上角的位置
    var offset = $('.div1').offset()
    console.log(offset.left,offset.top)
    // 打印 div2 相对于页面左上角的位置
    offset = $('.div2').offset()
    console.log(offset.left,offset.top)
    // 打印 div1 相对于父元素左上角的位置
    var position = $('.div1').position()
    console.log(position.left,position.top)
    // 打印 div2 相对于父元素左上角的位置
    var position = $('.div2').position()
    console.log(position.left,position.top)
  })

  // 2. 点击 btn2
  // 设置 div2 相对于页面的左上角的位置
  $('#btn2').click(function () {
   $('.div2').offset({
     left:50,
     top:100
   })
  })

 // 1. 得到div或页面滚动条的坐标
  $('#btn1').click(function () {
    console.log($('div').scrollTop())
    console.log($('html').scrollTop()+$('body').scrollTop())
  })
  // 2. 让div或页面的滚动条滚动到指定位置
  $('#btn2').click(function () {
    $('div').scrollTop(400)
    $('html,body').scrollTop(300)
  })

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>03_回到顶部</title>
  <style>
    #to_top {
      width: 30px;
      height: 40px;
      font: 14px/20px arial;
      text-align: center;
      background: #06c;
      position: fixed;
      cursor: pointer;
      color: #fff;
      left: 1250px;
      top: 500px;
    }
  </style>
</head>
<body style="height: 2000px;">
<div id="to_top">返回顶部</div>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  $('#to_top').click(function () {
    //way 1 ：瞬间到顶部
    // $('html,body').scrollTop(0)

  // way 2 ： 平滑到顶部
    //  总距离
    var $page = $('html,body')
    var distance =$('html').scrollTop() + $('body').scrollTop()
    //  总时间
    var time = 50
    //  间隔时间
    var intervalTime = 50
    var itemDistance = distance/(time/intervalTime)

    //  使用循环定时器
    var intervalId = setInterval(function () {
      distance -= intervalTime
      //  到达顶部，停止定时器
      if (distance <= 0){
        distance = 0///修正
        clearInterval(intervalId)//清除定时器
      }
      $page.scrollTop(distance)
    },intervalTime)

  })
</script>

</body>
</html>

(3) 尺寸

* width()/height(): width/height
* innerWidth()/innerHeight(): width + padding
* outerWidth()/outerHeight(): width + padding + border

6. 筛选模块

(1) 过滤

* 在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回
* first()
* last()
* eq(index)
* filter(selector): 对当前元素提要求
* not(selector): 对当前元素提要求, 并取反
* has(selector): 对子孙元素提要求

(2) 查找

* 查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回
* children(selector): 子元素
* find(selector): 后代元素
* preAll(selector): 前的所有兄弟
* siblings(selector): 所有兄弟
* parent(): 父元素

7. 文档处理(CUD)模块

(1) 增加

* append() / appendTo(): 插入后部
* preppend() / preppendTo(): 插入前部
* before(): 插到前面
* after(): 插到后面

(2) 删除

* remove(): 将自己及内部的孩子都删除
* empty(): 掏空(自己还在)

(3) 更新

* replaceWith()

8. 事件模块

(1) 绑定事件

* eventName(function(){})
* on('eventName', function(){})
* 常用: click, mouseenter/mouseleave mouseover/mouseout focus/blur
* hover(function(){}, function(){})

(2) 解绑事件

* off('eventName')

(3) 事件委托

* 理解: 将子元素的事件委托给父辈元素处理
  * 事件监听绑定在父元素上, 但事件发生在子元素上
  *　事件会冒泡到父元素
  * 但最终调用的事件回调函数的是子元素: event.target
* 好处
  * 新增的元素没有事件监听
  * 减少监听的数量(n==>1)
* 编码
  * delegate(selector, 'eventName', function(event){}) // 回调函数中的this是子元素
  * undelegate('eventName')

(4) 事件坐标

 * event.offsetX: 原点是当前元素左上角
 * event.clientX: 原点是窗口左上角
 * event.pageX: 原点是页面左上角

(5) 事件相关

* 停止事件冒泡: event.stopPropagation()
* 阻止事件的默认行为: event.preventDefault()

事件传播

·1捕获阶段 – 这一阶段会从window对象开始向下一直遍历到目标对象，如果发现有对象绑定了响应事件则做相应的处理。

•2目标阶段 – 这一阶段已经遍历结束，则会执行目标对象上绑定的响应函数。

• 3 事件冒泡阶段 – 这一阶段，事件的传播方式和捕获阶段正好相反，会从事件目标一直向 上遍历，直至window对象结束，这时对象上绑定的响应函数也会执行。

禁止默认事件：event.preventDefault() 禁止事件冒泡：event.stopPropagation()

9 动画效果

• 在一定的时间内, 不断改变元素样式
• slideDown()/slideUp()/slideToggle()
• fadeOut()/fadeIn()/fadeToggle()
• show()/hide()/toggle()
• animate({结束时的样式}, time, fun)
• stop()

10. 插件机制

• 扩展jQuery函数对象的方法

 $.extend({
      xxx: fuction () {} // this是$
    })
    $.xxx()

• 扩展jQuery对象的方法

 $.fn.extend({
      xxx: function(){}  // this是jQuery对象
    })
    $obj.xxx()