jQuery个人笔记

1. 初识jQuery

1.使用jQuery核心函数：$/jQuery

2.使用jQuery核心对象：执行$()返回的对象

2.jQuery的两把利器

1.jQuery核心函数：直接可用

  $ === jQuery //true

2.jQuery核心对象：执行jQuery对象

    (function(window){
        var jQuery = function(){
            rethrn new xxx()
        }
    })(window)

3.jQuery核心函数

1.作为一般函数调用

$()

参数不同，作用不同：

1)参数为函数：当DOM加载完成后，执行回调函数

$(function(){
    
})

2)参数为选择器字符串：查找标签，返回的是jQuery对象

$(function(){
    $('#btn').click(function(){
        //this 是发生事件的dom元素
        alert(this.innerHTML)
    })
})

3)参数为dom对象：封装dom为jQuery对象

4)参数为html标签字符串：创建标签对象并封装成jQuery对象

    //html代码
    <p>I would like to say: </p>
    <div></div><div></div>
    //代码
    $("p").appendTo("div");
    //结果
    <div><p>I would like to say: </p></div>
    <div><p>I would like to say: </p></div>

遍历数组

    //$.each(参数,函数)
    //index（索引）,item（内容）
    $.each([0,2,2],function(index,item){
        console.log(index,item)
        //0 0 
        //1 2
        //2 2
})

去除两端空格

    //$.trim(str)

2.作为对象调用

$.xxx()

4.jQuery核心对象

理解：执行jQuery函数返回的对象，对象内部包含的是dom对象的伪数组（可能只有一个元素）

.属性/方法:

• ​ 基本行为：

  • size()/length 返回元素的个数

  • [index]/get(index)

  • each()

  • index()

• ​ 属性

• ​ CSS

• ​ 文档

• ​ 筛选

• ​ 事件

• ​ 效果

伪数组：没有数组的特别方法，如 forEach()

5.选择器

语法规则：CSS规则，以及扩展规则

$(“字符串”)

作用：匹配所有标签，返回伪数组

1.基本选择器(CSS)

   // 1. 选择id为div1的元素
  $("#div1").css('background-color','yellowgreen');
   // 2. 选择所有的div元素
  $("div").css({'border':'black solid 1px','margin':'1px'});
   // 3. 选择所有class属性为box的元素
  $(".box").css('font-size','20px');
   // 4. 选择所有的div和span元素
  $('div,span').css('color','blue');
   // 5. 选择所有class属性为box的div元素
  $('div.box').css('background-color','red')

2.层次选择器(CSS)

   // 1. 选中ul下所有的的span
  $('ul span').css('background-color','yellowgreen');
   // 2. 选中ul下所有的子元素span
  $('ul>span').css('background-color','yellowgreen');
   // 3. 选中class为box的下一个li
  $('.box+li').css('background-color','yellowgreen');
   // 4. 选中ul下的class为box的元素后面的所有兄弟元素
  $('ul .box~*').css('background-color','yellowgreen');

3.过滤选择器

在原有的匹配结果中过滤。冒号开头

   // 1. 选择第一个div
  $('div:first').css('background-color','yellowgreen');
   // 2. 选择最后一个class为box的元素
  $('div:last').css('background-color','yellowgreen');
   // 3. 选择所有class属性不为box的div
  $('div:not(.box)').css('background-color','yellowgreen');
   // 4. 选择第二个和第三个li元素
  $('li:gt(0):lt(2)').css('background-color','yellowgreen');//过滤是依次执行的
  $('li:eq(1),li:eq(2)').css('background-color','yellowgreen');
   // 5. 选择内容为BBBBB的li
  $("li:contains('BBBBB')").css('background-color','yellowgreen');
   // 6. 选择隐藏的li
  $("li:hidden").css('display','');
   // 7. 选择有title属性的li元素
  $("li[title]").css('background-color','yellowgreen');
   // 8. 选择所有属性title为hello的li元素
  $("li[title='hello']").css('background-color','yellowgreen')

4.表单选择器

以冒号开头

   // 1. 选择不可用的文本输入框
  $(':text:disabled').css('background-color','#B6E7EE');
   // 2. 显示选择爱好 的个数
  console.log($(':checkbox:checked').length);
   // 3. 显示选择的城市名称
  $(':submit').click(function (){alert($('select option:selected').html())})
  $('select').val()//选择的option的value

9.$工具方法

 $.each(): 遍历数组或对象中的数据
 $.trim(): 去除字符串两边的空格
 $.type(obj): 得到数据的类型
 $.isArray(obj): 判断是否是数组
 $.isFunction(obj): 判断是否是函数
 $.parseJSON(json) : 解析json字符串转换为js对象/数组

10.属性

   // 1. 读取第一个div的title属性
  console.log($('div:first').attr('title'));
   // 2. 给所有的div设置name属性(value为atguigu)
  $('div').attr('name','atguigu');
   // 3. 移除所有div的title属性
  $('div').removeAttr('title');
   // 4. 给所有的div设置class='guiguClass'
  $('div').attr('class','guiguClass');
   // 5. 给所有的div添加class='abc'
  $('div').addClass('abc');
   // 6. 移除所有div的guiguClass的class
  $('div').removeClass('guiguClass');
   // 7. 得到最后一个li的标签体文本
  console.log($('li:last').html());
   // 8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
  $('li:first').html("<h1>mmmmmmmmm</h1>");
   // 9. 得到输入框中的value值
  //console.log($(':text').attr('value'))
  console.log($(':text').val());
   // 10. 将输入框的值设置为atguigu
  //$(':text').attr('value','atguigu')
  $(':text').val('atguigu');
   // 11. 点击'全选'按钮实现全选
  //prop:专门操作属性为布尔值
  //attr:操作属性为非布尔值
  $('button:first').click(function () {
      $('input:checkbox').prop('checked',true)
  });
   // 12. 点击'全不选'按钮实现全不选
  $('button:last').click(function () {
      $('input:checkbox').removeProp('checked')
  })

11.css

   // 1. 得到第一个p标签的颜色
   console.log($('p').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:30
  })

12.offset和position

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

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

13.元素滚动

1. scrollTop():
  读取/设置滚动条的Y坐标
2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
  读取页面滚动条的Y坐标(兼容chrome和IE)
3. $('body,html').scrollTop(60);
  滚动到指定位置(兼容chrome和IE)

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

14.元素的尺寸

1. 内容尺寸
  height(): height
  width(): width
2. 内部尺寸
  innerHeight(): height+padding
  innerWidth(): width+padding
3. 外部尺寸
  outerHeight(false/true): height+padding+border  如果是true, 加上margin
  outerWidth(false/true): width+padding+border 如果是true, 加上margin

15.筛选

  let $lis = $('ul>li');
  // 1. ul下li标签第一个
  $lis.first().css('background-color','red');
  // 2. ul下li标签的最后一个
  $lis.last().css('background-color','red');
  // 3. ul下li标签的第二个
  $lis.eq(1).css('background-color','red');
  // 4. ul下li标签中title属性为hello的
  $lis.filter('[title=hello]').css('background-color','red');
  // 5. ul下li标签中title属性不为hello的
  $lis.filter('[title][title!=hello]').css('background-color','red');
  // 6. ul下li标签中有span子标签的
  $lis.has('span').css('background-color','red');

16.筛选_查找孩子-父母-兄弟标签

  let $ul = $('ul');
  // 1. ul标签的第2个span子标签
  $ul.children('span:eq(1)').css('background','red');
  // 2. ul标签的第2个span后代标签
  $ul.find('span:eq(1)').css('background','red');
   // 3. ul标签的父标签
  $ul.parent().css('background','red');
   // 4. id为cc的li标签的前面的所有li标签
  $('#cc').prevAll('li').css('background','red');
   // 5. id为cc的li标签的所有兄弟li标签
  $('#cc').siblings('li').css('background','red');

17.文档_增删改

1. 添加/替换元素
  * append(content)
    向当前匹配的所有元素内部的最后插入指定内容
  * prepend(content)
    向当前匹配的所有元素内部的最前面插入指定内容
  * before(content)
    将指定内容插入到当前所有匹配元素的前面
  * after(content)
    将指定内容插入到当前所有匹配元素的后面替换节点
  * replaceWith(content)
    用指定内容替换所有匹配的标签删除节点
2. 删除元素
  * empty()
    删除所有匹配元素的子元素
  * remove()
    删除所有匹配的元素

  let $ul1 = $('#ul1');
   // 1. 向id为ul1的ul下添加一个span(最后)
  $ul1.append('<span>这是添加的span</span>');
   // 2. 向id为ul1的ul下添加一个span(最前)
  $ul1.prepend('<span>这是添加的span</span>');
   // 3. 在id为ul1的ul下的li(title为hello)的前面添加span
  $ul1.find('li[title=hello]').before('<span>我是span</span>');
   // 4. 在id为ul1的ul下的li(title为hello)的后面添加span
  $ul1.find('li[title=hello]').after('<span>我是span</span>');
  let $ul2 = $('#ul2');
   // 5. 将在id为ul2的ul下的li(title为hello)全部替换为p
  $ul2.find('li[title=hello]').replaceWith('<p>我是p标签</p>');
   // 6. 移除id为ul2的ul下的所有li
  $ul2.find('li').remove()

18.事件绑定与解绑

1. 事件绑定(2种)：
  * eventName(function(){})
    绑定对应事件名的监听,    例如：$('#div').click(function(){});
  * on(eventName, funcion(){})
    通用的绑定事件监听, 例如：$('#div').on('click', function(){})
  * 优缺点:
    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
    on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑：
  * off(eventName)
3. 事件的坐标
  * event.clientX, event.clientY  相对于视口的左上角
  * event.pageX, event.pageY  相对于页面的左上角
  * event.offsetX, event.offsetY 相对于事件元素左上角
4. 事件相关处理
  * 停止事件冒泡 : event.stopPropagation()
  * 阻止事件默认行为 : event.preventDefault()

   // 1. 给.out绑定点击监听(用两种方法绑定)
  $('.out').click(function () {
      console.log('click out')
    });
  // $('.out').on('click',function () {
  //     console.log('on click out')
  //   });
   // 2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
  // $('.inner')
  //   .mouseenter(function () {
  //     console.log('进入')
  //   })
  //   .mouseleave(function () {
  //     console.log('离开')
  //   })

  // $('.inner')
  //   .on('mouseenter',function () {
  //     console.log('进入')
  //   })
  //   .on('mouseleave',function () {
  //     console.log('离开')
  //   })

  $('.inner').hover(function () {
    console.log('进入')
  },function () {
    console.log('离开')
  });
   // 3. 点击btn1解除.inner上的所有事件监听
  $('#btn1').click(function () {
    $('.inner').off()
  });
   // 4. 点击btn2解除.inner上的mouseleave事件
  $('#btn2').click(function () {
    $('.inner').off('mouseleave')
  });
   // 5. 点击btn3得到事件坐标
  $('#btn3').click(function (event) {
    console.log(event.offsetX,event.offsetY); //相对于事件元素左上角
    console.log(event.clientX,event.clientY); //相对于视口的左上角
    console.log(event.pageX,event.pageY); //相对于页面的左上角

  });
   // 6. 点击.inner区域, 外部点击监听不响应
  $('.inner').click(function (event) {
    event.stopPropagation()
  });
   // 7. 点击链接, 如果当前时间是偶数不跳转
  $('#test4').click(function (event) {
    if (Date.now()%2===0){
      event.preventDefault()
    }
  })

19.事件_面试题

区别mouseover与mouseenter?
   * mouseover: 在移入子元素时也会触发, 对应mouseout
   * mouseenter: 只在移入当前元素时才触发, 对应mouseleave
                        hover()使用的就是mouseenter()和mouseleave()
区别on('eventName', fun)与eventName(fun)
   * on('eventName', fun): 通用, 但编码麻烦
   * eventName(fun): 编码简单, 但有的事件没有对应的方法

20.事件委托

1. 事件委托:
  * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  * 监听回调是加在了父辈元素上
  * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
  * 委托方: 业主  li
  * 被委托方: 中介  ul
3. 使用事件委托的好处
  * 添加新的子元素, 自动有事件响应处理
  * 减少事件监听的数量: n==>1
4. jQuery的事件委托API
  * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
  * 移除事件委托: $(parentSelector).undelegate(eventName)

   // 1. 点击 li 背景就会变为红色
  $('ul').delegate('li','click',function () {
    this.style.background = 'red'
  });
   // 2. 点击 btn1 就添加一个 li
  $('#btn1').click(function () {
      $('ul').append('<li>这是新增的li</li>')
  });
   // 3. 点击 btn2 移除事件委托
  $('#btn2').click(function () {
    $('ul').undelegate('click')
  })

21.淡入淡出

  let $div = $('.div1');
   // 1. 点击btn1, 慢慢淡出
  $('#btn1').click(function () {
    // 无参
    $div.fadeOut();
    // 有参
    // 字符串参数:fast normal slow
    $div.fadeOut('fast');
    // 数字参数
    $div.fadeOut(1000);
  });
  // 2. 点击btn3, 慢慢淡入
  $('#btn2').click(function () {
    $div.fadeIn('slow')
  });
  // 3. 点击btn3, 淡出/淡入切换，动画结束时提示“动画结束了”
  $('#btn3').click(function () {
    $div.fadeToggle('slow',function () {
      alert('动画结束了')
    })
  })

22.滑动

  let $div = $('.div1');
   // 1. 点击btn1, 向上滑动
  $('#btn1').click(function () {
      $div.slideUp()
  })
   // 2. 点击btn3, 向下滑动
  $('#btn2').click(function () {
      $div.slideDown()
  })
   // 3. 点击btn3, 向上/向下切换
  $('#btn3').click(function () {
      $div.slideToggle()
  })

23.显示与隐藏

  let $div = $('.div1');
  // 1. 点击btn1, 立即显示
  $('#btn1').click(function () {
    $div.show()
  });
  // 2. 点击btn2, 慢慢显示
  $('#btn2').click(function () {
    $div.show('slow')
  });
  // 3. 点击btn3, 慢慢隐藏
  $('#btn3').click(function () {
    $div.hide('slow')
  });
  // 4. 点击btn4, 切换显示/隐藏
  $('#btn4').click(function () {
    $div.toggle('slow')
  });

24.自定义动画

jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
1. animate(): 自定义动画效果的动画
2. stop(): 停止动画

  let $div = $('.div1');
  //1.逐渐扩大,宽/高都扩为200px
  $('#btn1').click(function () {
    $div.animate({
      width:200,
      height:200
    })
  });
  //宽先扩为200px, 高后扩为200px
  $('#btn1').click(function () {
    $div
        .animate({
          width: 200
        })
        .animate({
          height: 200
        })
  });

  //2. 移动到指定位置,移动到(500, 100)处
  $('#btn2').click(function () {
    $div.animate({
      left:500,
      top:100
    })
  });

  //3.移动指定的距离
  //1). 移动距离为(100, 50)
  $('#btn3').click(function () {
    $div.animate({
      left:'+=100',
      top:'+=50'
    })
  });
  //2). 移动距离为(-100, -20)
  $('#btn3').click(function () {
    $div.animate({
      left:'-=100',
      top:'-=20'
    },2000)
  });

  //4. 停止动画
  $('#btn4').click(function () {
    $div.stop()
  })

25.扩展插件

需求：

1. 给 $ 添加4个工具方法:
  * min(a, b) : 返回较小的值
  * max(c, d) : 返回较大的值
  * leftTrim() : 去掉字符串左边的空格
  * rightTrim() : 去掉字符串右边的空格
2. 给jQuery对象 添加3个功能方法:
* checkAll() : 全选
* unCheckAll() : 全不选
* reverseCheck() : 全反选

扩展代码 my_jQuery-plugin.js：

(function () {

  // 扩展$的方法
  $.extend({
    min: function (a, b) {
      return a < b ? a : b
    },
    max: function (a, b) {
      return a > b ? a : b
    },
    leftTrim: function (str) {
      return str.replace(/^\s+/, '')
    },
    rightTrim: function (str) {
      return str.replace(/\s+$/, '')
    }
  })

  // 扩展jQuery对象的方法
  $.fn.extend({
    checkAll: function () {
      this.prop('checked', true) // this是jQuery对象
    },
    unCheckAll: function () {
      this.prop('checked', false)
    },
    reverseCheck: function () {
      // this是jQuery对象
      this.each(function () {
        // this是dom元素
        this.checked = !this.checked
      })
    }
  })

})()

html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>25_扩展插件</title>
  <style type="text/css">
    * {
      margin: 0px;
    }

    .div1 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50px;
      left: 10px;
      background: red;
    }
  </style>
</head>
<body>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全　选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="reverseCheckedBtn" value="反选"/>

<!--
1. 扩展jQuery的工具方法
  $.extend(object)
2. 扩展jQuery对象的方法
  $.fn.extend(object)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/my_jQuery-plugin.js"></script>
<script type="text/javascript">
  /*
   需求：
   1. 给 $ 添加4个工具方法:
     * min(a, b) : 返回较小的值
     * max(c, d) : 返回较大的值
     * leftTrim() : 去掉字符串左边的空格
     * rightTrim() : 去掉字符串右边的空格
   2. 给jQuery对象 添加3个功能方法:
     * checkAll() : 全选
     * unCheckAll() : 全不选
     * reverseCheck() : 全反选
   */
  console.log($.min(3, 5), $.max(3, 5))
  var string = '   my atguigu    '
  console.log('-----' + $.leftTrim(string) + '-----')
  console.log('-----' + $.rightTrim(string) + '-----')

  var $items = $(':checkbox[name=items]')
  $('#checkedAllBtn').click(function () {
    $items.checkAll()
  })
  $('#checkedNoBtn').click(function () {
    $items.unCheckAll()
  })
  $('#reverseCheckedBtn').click(function () {
    $items.reverseCheck()
  })
</script>
</body>
</html>

26.多库共存

问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()

<script src="js/myLib.js"></script>
<script src="js/jquery-1.10.1.js"></script>
<script>
  //释放$的使用权
  jQuery.noConflict();
  //调用jQuery
  jQuery(function () {
    console.log('jQuery')
  });
  //调用myLib
  $()
</script>

my lib
jQuery

27.onload与ready区别

区别: window.onload与 $(document).ready()
  * window.onload
    * 包括页面的图片加载完后才会回调(晚)
    * 只能有一个监听回调
  * $(document).ready()
    * 等同于: $(function(){})
    * 页面加载完就回调(早)
    * 可以有多个监听回调