jQuery基本知识点

---

前言

如今三大框架广泛使用，jQuery使用越来越少，但是我们也需要简单了解jQuery
在此通过b站上pink老师所讲jQuery视频，整理出如下笔记，仅供自己复习及学习者简单了解学习，如有做的不好地方，敬请谅解，欢迎指出，持续更新改正

---

jQuery入门导读

一、jQuery概述

1.1 JavaScript库

即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate，hide，show，比如获取元素等。

简单理解：就是一个JS文件，里面对我们原生js代码进行封装，存放的到里面。这样我们就可以快速高效使用这些封装好的功能了。

1.2 常见JS库

• jQuery
• Prototype
• YUI
• Dojo
• Ext JS
• 移动端的zepto

1.3 jQuery的优点

• 轻量级。核心文件才几十kb，不会影响页面加载速度
• 跨浏览器兼容。基本兼容了现在主流的浏览器
• 链式编程，隐式迭代
• 对事件、样式、动画支持、大大简化了DOM操作
• 支持插件扩展开发。有丰富第三方插件
• 免费、开源

二、jQuery基本使用步骤

2.1 jQuery下载

官方网址：https://jquery.com/

2.2 入口函数

等着页面DOM加载完毕后再去执行js代码 （两种方法）

$(document).ready(function() {  
    //这里是运行代码
})

$(function() {                 //通常用第二种
    //这里是运行代码
})

2.3 顶级对象$ (jQuery的别称)

  DOM对象：用原生js获取过来的对象就是DOM对象

var myDiv = document.querySelector('div')
console.dir(myDiv)

  jQuery对象：用jquery方式获取过来的对象是jquery对象。本质：通过$把DOM元素包装
  本质是 利用$对DOM对象包装后产生的对象（伪数组形式存储）

$('div')

jQuery对象只能使用jQuery方法，DOM对象则使用原生Js属性方法

2.4 jq对象和DOM对象相互转换

  DOM对象转换位jQuery对象

$('div')

  jQuery对象转换为DOM对象

$('div')[0].play()
$('div').get(0).play()

---

---

jQuery常用的API

一、jQuery选择器 和css一致

$(‘选择器’)

---

1.隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程叫隐式迭代给匹配到的所有元素进行循环遍历，执行相同的方法，不需要再进行循环

---

2.设置样式

$(‘div’).css(‘属性’,‘值’)

 $('div').css('background', 'pink')

---

3.jQuery筛选选择器

   :first       获取第一个
   :last        获取最后一个
   :eq(index)   按索引获取      $('ul li:eq(2)').css('color','pink')
   :odd         索引为奇数
   :even        索引为偶数
   
   父           parent()
   子           children(selector)只选儿子    find(selector)所有子代
   兄弟         siblings(selector)          所有兄弟元素除了自己
   后辈         nextAll()
   前辈         prevtAll()
   第几个       eq()           $('ul li').eq(2).css('color','pink')
   判断是否有某个类名
   hasClass(class)    返回布尔值

---

4.排他思想

  //         1.隐式迭代    给所有按钮都绑定了点击事件
     $('button').click(function() {
  //         2.当前元素变化变化背景颜色
         $(this).css('background', 'pink')
  //         3.其余兄弟去掉背景颜色   隐式迭代
         $(this).siblings('button').css('background', '')
  })

---

5.Tab栏转换

     //  1.鼠标经过
 $('#left li').mousemove(function() {
     // 2.得到当前小li的索引
     var index = $(this).index()
     // 3.让右侧盒子响应索引号的图片显示出来
     $('#content div').eq(index).show()
     // 4.让其余的图片隐藏
     $('#content div').eq(index).siblings().hide()
 })

jQuery链式编程 节约代码量

$(this).css('color','red').siblings().css('color', '')

---

二、jQuery样式操作

     // 1、参数只写属性名，则返回属性值
 $(this).css("color")
     // 2、参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，数字可以不跟单位
 $(this).css("color","red")
     // 3、参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不加引号
 $(this).css({
     width:400,
     heigth:400,
     backgroundColor:"red"     //复合属性必须采用驼峰命名法，值不是数字则需要加引号
 })

1.添加、删除、切换类

  //添加类 addClass()
 $('div').click(function(){
     $(this).addClass('current')
 })
  //删除类  removeClass()
 $('div').click(function(){
     $(this).removeClass('current')
 })
  //切换类  toggleClass()
 $('div').click(function(){
     $(this).toggleClass('current')
 })

原生js中className会覆盖元素原先的类名，jq只对指定类进行操作，不影响原先类名

---

三、jQuery效果

1、显示和隐藏

   show([speed,[easing],[fn]])        hide()      toggle()相同参数
   
   speed:     三种速度（"slow","normal","fast"）或表示时长的毫秒数值
   easing:    用来指定切换效果，默认是"swing",可用参数"linear"
   fn:        回调函数，在动画完成时执行的函数，每个元素执行一次

---

2、滑动效果

   下滑动      slideDown()     上滑动    slideUp()   
   滑动切换    slideToggle()   参数同show()
   事件切换             是鼠标经过和离开的复合写法
   hover([over,]out)
   over:     鼠标移到元素上要触发的函数（相当于mouseenter）
   out:      鼠标移出元素上要触发的函数（相当于mouseleave）

 $(".nav>li").hover(function() {
     $(this).children('ul').slideDown(200)
 }, function() {
     $(this).children('ul').slideUp(200)
 })

      // 如果只写一个函数，那鼠标经过和离开都会触发这个函数
 $('.nav>li').hover(function() {
     $(this).children('ul').slideToggle()
 })

动画或效果一旦触发就会执行，如果多次触发，就会造成多个动画或效果排队执行
停止排队用 stop() 必须写到动画或效果前面，相当于停止结束上一次动画

---

3、淡入淡出

   淡入fadeIn()   淡出fadeOut()    淡入淡出切换fadeToggle()  参数同显示隐藏
   修改透明度      fadeTo([[speed],opacity,[easing],[fn]])
   opacity透明度必须写，取值0到1之间

---

4、自定义动画

   animate(params,[speed],[easing],[fn])
   params:    想要修改的样式属性，以对象形式传递，必须写，属性名不可以带引号，复合函数用驼峰

---

四、jQuery属性操作

       //prop()获取固有元素属性值
       //element.prop("属性值")    获取属性值
 $("a").prop("herf")
       //element.prop("属性值","属性值")   设置属性值 
 $("a").porp("title","我们都挺好")
       //attr()  获取自定义属性
       //数据缓存  data()   这里数据是存放在元素内存里
 $("span").data("uname","andy")
 console.log($("span").data("uname"));

---

五、 jQuery文本属性值

       //获取设置元素内容  html()
 $('div').html()
       //获取设置元素文本内容   text()
 $('div').text()
       //获取设置表单值   val()
 $('input').val()

---

六、jQuery元素操作

       //遍历元素   each()
 var arr = ['red', 'green', 'blue']
 $('div').each(function(index, domEle) {
     $(domEle).css('color', arr[index])
 })

1.创建元素

$("<li></li>")      //动态创建元素

2.添加元素

内部添加 生成后是父子关系

$("ul").append(li)     //放到内容最后面
$("ul").prepend(li)    //放到内容最前面

外部添加 生成后是兄弟

 $("div").after(div)   //放到内容最后面
 $("div").before(div)  //放到内容最前面

3、 删除元素

  remove()                 //可以删除匹配元素  自杀
  empty()     html("")     //可以删除匹配元素的子节点   孩子

---

七、jQuery尺寸、位置操作

1、jQuery尺寸

       //获取设置元素width和height大小    width()/ height()
 $("div").width()
 $("div").width(300)
       //获取设置元素width和heigh+padding 大小    innerWidth()/ innerHeight()
 $("div").innerWidth()
       //获取设置元素width和heigh+padding + border 大小    outerWidth()/ outerHeight()
 $("div").outerWidth()
		//获取设置元素width和heigh+padding + border + margin 大小 outerWidth(true)/outerHeight(true)
 $("div").outerWidth(true)

---

2、 jQuery位置

    //获取设置距离文档的位置(偏移)  offset   跟父级元素无关
$("div").offset()
$("div").offset().top
$("div").offset({top:300,left:300})
    //获取距离带有定位父级位置(偏移) position  如果父级无定位,则以文档为准 只能获取,不能设置
$("div").position()
    //被卷去的头部   scrollTop()     被卷去的左侧     scrollLeft()

---

---

jQuery事件

一、 jQuery事件处理

1、事件处理on()绑定事件

   在匹配元素上绑定一个或多个事件的事件处理函数
   element.on(events,[selector],fn)
   
   events:       一个或多个用空格分隔的事件类型
   selector:     元素的子元素选择器
   fn:           回调函数

$("div").on({
     mouseenter: function() {
         $(this).css("background", "red")
     },
     mouseleave: function() {
         $(this).css("background", "green")
     }
 })
 $("div").on("mouseenter mouseleave", function() {
     $(this).toggleClass("current")
 })

    //on可以实现事件委托
 $("ul").on("click", "li", function() {     //click是绑定在ul身上的,但触发对象是ul里li
     alert(111)
 })
    //on可以给未来动态创建元素绑定事件
 $("ol").on("click", "li", function() {
     alert(11)
 })
 var li = $("<li>我是后创建的li</li>")
 $("ol").append(li)

---

2、事件处理解绑事件 off()

$("div").off("click")
$("ul").off("click","li")     //解除事件委托
       //只触发事件一次   one()
 $("p").one("click", function() {
     alert(11)
 })

---

3、 自动触发事件 trigger()

      // 1.元素.事件()
 $("div").click()
      // 2. 元素.trigger("事件")
 $("div").trigger("click")
      // 3. 元素.triggerHandler("事件")  不会触发元素默认行为
 $("div").triggerHandler("click")

---

二、jQuery事件对象

$("div").on("click", function(e) {
    console.log(e);
})

  阻止冒泡        e.stopPropagation()
  阻止默认行为    e.preventDefault()

jQuery对象拷贝

  $.extend([deep],target,object1,[objectN])
  deep:        如果设为true为深拷贝(内容)，false浅拷贝(地址)
  target：     要拷贝的目标对象
  object1:     代拷贝到第一个对象的对象
  objectN:     待拷贝到第N个对象的对象

var targetObj = {}
var obj = {
    id: 1,
    name: "andy"
}
$.extend(targetObj, obj)
console.log(targetObj);          //会覆盖