jquery

jquery

第一天

• jquery基本概念

官网：

1. https://jquery.cuishifeng.cn/
2. 官网地址: https://jquery.com/
3. 版本地址: https://code.jquery.com/

介绍：

1. js库是一个封装好的特定的集合包含大量的方法，从封装函数的角度就是在js库中，封装了很多预先定义好的函数在里面，本质就是一个js文件，原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
2. JQuery就是这样的一个js文件: 本质上就是对我们之前原生js代码封装后的一个js文件

jquery的优点：

免费、开源、操作网页 减少代码量、 链式编程 隐式迭代
跨浏览器兼容。基本兼容了现在主流的浏览器**
对事件、样式、动画支持，大大简化了DOM操作**
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等**

使用：

1. 官网下载
2. 引入（推荐压缩版）
3. 调用jquery中提供的方法操作网页

• 入口函数

入口函数本质就是jquery中提供的一个内置函数，当整个页面加载完成后，程序自动执行入口函数中的代码 在script、DOM中如果在HTML结构之前写JS代码,需要设置加载事件和获取HTML元素、JQ如果在HTML结构之前写js代码,需要设置加载事件(入口函数)：路径、引入
// 如果将JQ代码写到HTML结构后面,则可以设置入口函数也可以不用设置

语法：

1. $(function(){})
2. $(document).ready(function(){})

JQ入口函数与js中的load事件区别
☞ js中的load事件是整个页面都加载完成后包括外部的资源文件都加载完毕后才执行
☞ jQuery中的入口函数是整个文档加载完成后就立即执行代码
☞ js中的load事件只能写一个,如果写多个会被覆盖掉
☞ Jquery中的入口函数可以写多个(一般只写一个)

• $符号（不仅是jquery的别名，还是jq顶级对象）
• jq对象和dom对象 JQ就是对JS的封装,可以通过原生的JS获取页面元素,那么也可以通过JQ获取页面元素

1. jquery对象：通过jquery($)获取元素

   $('标签名') 本质上是一个伪数组

2. dom对象 通过 document 方式获取到的元素都叫DOM对象 键值对

JQ对象中的方法或者属性原生DOM对象是不能使用的,反过来原生DOM对象中的方法或者属性JQ对象也无法使用 jq对象转换为dom对象 jq对象[索引] jq对象.get(索引)
dom对象转换为jq对象 $(DOM对象)

• 获取页面元素api

$('css选择器')

1. 在css选择器中可以跟css伪选择器

   jq提供的伪类选择器获取元素有：

• ：first
  //获取第一个元素
• ：last
  //获取最后一个元素
• ：odd
  //获取索引是奇数的元素
• ：even
  //获取索引是偶数的元素
• ：eq(索引)
  //获取第n个元素,从0开始,

2. 通过方法筛选
   标签之间的关系获取元素不用再次转换。已经默认转换了

• 通过父标签获取对应的子标签

父jq元素.$(find)('子选择器')

父jq元素.children([(选择器)]) 小括号内不写选择器是全部直接子元素有选择器是指定的子元素

两者本质区别find所有满足条件的后代元素children是直接子元素

• 通过子元素获取父元素

$('元素').parent(); //获取当前元素的直接父元素

$('元素').parents([选择器]); //获取所有的父元素或者指定父元素得到的是jq对象伪数组

• 根据标签获取兄弟元素

  $('元素').siblings([选择器]); //获取当前元素的所有同级兄弟元素或者指定兄弟元素是没有直接和间接关系

  $('元素').nextAll([选择器]); // 获取当前元素后面所有同级兄弟元素或者指定兄弟元素

  $('元素').prevAll([选择器]); //获取当前元素前面所有同级兄弟元素或者指定元素

• 通过索引获取元素

$('元素').eq(值); //获取第几个元素,这是一个方法 从0开始

eq伪类和eq方法区别：相同点都是从0开始、不同点：看搭配伪类选择器搭配选择器，方法搭配jq对象

技巧：eq（）和index()两个方法

• 隐式迭代 JQ内部自动遍历DOM元素的过程

• 链式编程

1. 给元注册事件,可以在当前元素后面连着继续写 jq对象.方法().方法()……
2. 链式编程核心,给具体的对象设置,如果不是一个具体对象,则不能使用链式编程写法
   优化，jq用hover方法代替鼠标进入和鼠标离开
   jq对象.hover（function（）{}，function（){}）
   一般排他思想其他siblings （）

• 注册事件 语法 this

JQ对象.事件名称(function(){处理程序})、事件名称是webapi的事件类型

事件中的this是dom对象指向事件源

获取页面中的所有按钮后,给按钮注册事件,JQ不需要我们手动遍历注册,自己内部就可以遍历注册事件
隐式迭代
JQ内部自动遍历DOM元素的过程

• JQ方式操作元素样式
• 行内样式

1. $('元素').css('属性'，'值') 如果要设置多个像是还要用链式但是代码冗余
2. 语法:
   $('元素').css({
   '属性': '值',
   '属性': '值',
   ...
   })

放一个由多个键值对组成的对象有单位的加上用引号包含，纯数字不用加

jquery中的this（事件源）是dom对象事件不能是箭头函数 如果设置的值是数字,可以不用带有引号 如果属性是按照CSS的属性方式设置,需要带有引号 . 例如 'background-color' 或者 backgroundColor

• 类样式

1. 回顾之前dom类操作样式是classname和classlist classname添加在引号内空格隔开，classlist.add('类名'，‘类名2’)用逗号分隔每个类名

2. 先定义类名，操作类名的时候都是用空格隔开的

3. $('元素').addClass('类名');
   添加类 addClass中设置的是类名,不是类选择器 不加点是类名是类名是类名
   通过addClass如果需要设置多个类名可以调用多次,在引号内用空格隔开 添加的类名不会覆盖原来的类名的

   移除类名 $('元素').removeClass('类名');
   如果不写类名，就会移除全部类名这一点和dom的classlist.remove() 不写不移除不同 移除多个的话也是用空格隔开

   切换类名 $('元素').toggleClass('类名');
   如果标签有对应的类名，切换的时候要移除类名，如果标签没有对应的类名。切换的时候添加类名，可以同时切换多个类名，比classlist跟高级

动画

• 内置动画
  jq对象.show() 显示
  jq对象.hide() 隐藏
  jq对象.toggle() 切换
• 如果小括号没有任何参数没有任何动画效果

•   三个参数
  		speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    		easing:(Optional) 用来指定切换效果，默认是"swing"，摇摆的   可用参数"linear"
    		fn:在动画完成时执行的函数，每个元素执行一次。
  

第二天

动画

内置动画效果控制元素的显示和隐藏是已经设置好的

• $(对象).show([speed, [easing], [fn]])

• $(对象).hide([speed, [easing], [fn]);

• $(对象).slideDown([speed],[easing],[fn]);

  • slideDown() 显示元素(通过改变元素高度)

• $(对象).slideUp([speed,[easing],[fn]])

  • 通过高度变化（向上减小）来动态地隐藏所有匹配的元素

• slideToggle([speed],[easing],[fn])

  • 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

• $(对象).fadeIn([speed],[easing],[fn])

  • 通过透明度的变化来实现所有匹配元素的淡入效果[显示]

• $(对象).fadeOut([speed],[easing],[fn])

  • 通过透明度的变化来实现所有匹配元素的淡出效果[隐藏]

• $(对象).fadeTo([[speed],opacity,[easing],[fn]]) 四个参数

  • 设置元素透明度

• 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间

• 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'

• 第三个参数表示回调函数,动画完成后执行

• 3个参数可以不用设置, 显示元素没有动画效果

自定义动画

• 一个对象有多个动画就会有执行顺序机制排队执行 动画队列

  • 先进先出

  • 动画如果是多个属性是同时进行

    • 序列清除

      • stop（）

        • 在所有动画前加 stop()方法停止动画排队**

      • clearQueue()

  • 如果是链式结构是按照和顺序执行

• 单独的属性,可以使用驼峰命名法 ('marginLeft' 替代 'margin-left')

• $(对象).animate(params,[speed],[easing],[fn]);

• 1.params 一组包含作为动画属性和终值的样式属性和及其值的集合 [必须设置]

  • 必须是对象形式属性和值都加引号

• 2.speed 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

• 3.easing 默认jQuery提供"linear" 和 "swing".

  • 切换效果

• 4.fn:在动画完成时执行的函数

  • this指向已完成的动画源

• 自定义动画也会出现动画队列特点，需要停止动画队列stop()

  • 动画内不支持与颜色相关的属性需要单独下载插件实现不支持transform属性）无法直接实现css中转化效果,如果需要实现,则可以通过

    • 依赖jquery库注意顺序
    • 推荐使用rgb和十六进制

• 添加类名得的方式实现 （css类样式全部支持

操作标签属性

• 操作标准属性（内置属性）
  class id

  • 获取: $(对象).prop('属性名');

  • 设置: $(对象).prop('属性名', 值);

    • 还可以写对象的格式

      • 正因如此返回的是一个jq对象

• 操作自定义属性 属性名记得加data-
  除了可以操作自定义属性还可以用attr优先使用prop

  • 回顾

    • DOM.dataset 返回的是一个对象

    • ☞ 获取自定义属性值:   DOM.dataset.属性名
      

    • ☞ 设置自定义属性值:   DOM.dataset.自定义属性名 = 值;
      

  • 获取: $(对象).attr(自定义属性名);

  • 设置: $(对象).attr(自定义属性名, 值);

• 获取表单控件中的值

  • $(对象).val()

  • $(对象).val(值);
    

• 操作普通标签中的文本内容

  • $(对象).text(值);  
    

    • 括号内没值就是获取,特点与原生js中的innerText一样

  • $(对象).html(值);

    • 括号内没值就是获取 // 特点与原生js中的innerHTML一样

创建元素

• $对象.html('html标签名'); 直接在标签中添加新标签

• let res = $('html标签'); 创建标签, 返回: JQ标签对象

• 添加元素

  • $父元素.append(元素); 将创建元素添加到父元素末尾
  • $父元素.prepend(元素); 将创建元素添加到父元素开始 预先，前置的意思
  • $父元素.before(元素)
  • $父元素.after(元素)

删除元素

• $对象.remove(); 从页面中将当前标签删除
• $对象.empty(); 将标签中的所有内容清空
• $对象.html(''); 将标签中的所有内容清空
• $对象.text(''); 将标签中的所有内容清空

遍历jq对象（数组）

• jq对象.each(function(index,item){}) 认真分析遍历的对象及结果

  • 此时的参数和js中的foreach位置相反
    名字是each
  • 第一个参数表示索引，第二个参数表示数组中的每一个值，也是dom对象。所以要用jq的方法还要转$()如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

• $.each(要遍历的数组(不加引号)function(index,item){}))

• 区别

  • 第一种只能遍历jq对象的数组，第二种可以遍历任何数组，最好用变量接受数组

扩展

• toFixed(2)

  • 最后结果保留两位小数

• number

  • 转为数字

第三天

• 通过常规方式注册事件

  • 事件源.事件类型(function(){});

    • 只能给事件源注册一个事件
    • 如果注册多个事件,重复设置,不符合JQ的特性(do more do less)

• 事件源.on('事件类型', function(){}); 同一对象注册多个事件
  $('.box').on({
  click: function(){
  $(this).css('background','blue');
  },
  mouseenter: function(){
  $(this).css('background', 'pink');
  }
  })

• 通过委托方式注册事件

  • 父事件源.on('事件类型', '子选择器', function(){})

    • 如果页面中的元素是动态创建的,给元素注册事件,需要使用委托的方式同时也可以用来注册已经创建的元素事件一般运用于动态创建的元素
    • 选择器参数用来选中子元素（事件源）
    • 选择器不能是复合选择器必须是简单选择器
    • this指向目标子元素

• 两者区别

  • 直接调用对应的事件方法
    一次只能注册一个事件
  • 通过on方法传递参数实现的注册事件
    可注册多个事件，逗号分隔

• $对象.off(’事件类型‘，‘选择器’);

• $对象.off(’事件类型‘，‘选择器’);

  • 解绑事件

    • 1. 如果off() 中没有设置任何参数,代表将所有的事件移除
    • 2. 如果要移除对应的事件,在off方法中设置对应的方法名称即可

  • $父元素对象.off('事件类型', '选择器');

    • $('.box').off('click', '.one');

获取元素的大小和位置

• 大小

  • 设置元素大小css

  • $对象.width(); //获取当前元素大小,只包含内容区域大小$对象.height(); //获取当前元素高度,只包含内容区域高度

    • $对象.width(值)$对象.height(值)

      • . 在设置值的时候可以带单位px也可以不用带单位px

  • $对象.innerWidth(); //获取当前元素宽度 = 内容区域大小 + 内边距$对象.innerHeight(); //获取当前元素高度 = 内容区域大小 + 内边距

    • $对象.innerWidth(值)$对象.innerHeight(值)

      • 此时设置的值中已经包含内边距,内边距默认为0,如果在css中给当前元素设置内边距,则元素大内容区域大小会发生改变

  • $对象.outerWidth(); //获取当前元素宽度 = 内容区域大小 + 内边距 +边框

    • $对象.outerWidth(值)$对象.outerHeight(值)

      • 1. 此时设置的值是包含外边距的,如果通过css给当前元素设置外边距,则元素内容区域大小会发生改变可选。布尔值，规定是否包含 margin。

• 位置
  如果要给元素设置位置还是要通过css设置 ，这只是读取

  • $(对象).offset();

    • 1. $对象.offset() 返回的是一个Object对象只有两个属性
    • 2. $对象.offset() 返回对象中包含 left 属性 和 top属性
      • $('.one').offset().left
      • $('.one').offset().top
    • 3. 获取当前元素的位置是相对整个页面
      • 4. 类似于固定定位

  • $(对象).position();

    • 1. $对象.position() 返回的是一个对象
    • 2. $对象.position() 返回对象中包含 left 属性和 top属性
      • $('.one').position().left
      • $('.one').position().top
    • 3. 获取当前元素的位置,如果当前父元素没有定位,相对整个页面,如果父元素有定位,参照父元素
      • 4. 类似于绝对定位

  • $(对象).scrollTop();
    获取滚动距离

• 1. 获取当前元素(内容)滚动出去的距离
     • 2. 如果希望在程序中获取当前距离大小,需要在scroll事件中 获取$(window).scoll()
          设置在括号内输入参数作为值

       \(('.box').scroll(function(){ console.log(\)(this).scrollTop());
       });

• window不加引号代表jq对象，加了表示查找对应的选择器标签

通过jQuery监听表单提交

• submit事件：当表单数据提交的时候触发submit事件

  • 给表单域注册事件

    • 当表单域注册submit事件阻止程序默认提交事件

      • HTML 标签本身具有数据提交的能力，然而现实中更常见的是通过监听 DOM 事件获取表单的数据，然后通过 Ajax 将表单的数据提交至服务端。

        • // ev.preventDefault();
          

          • // 阻止 HTML 表单的默认提交

        • // ev.preventDefault() 在 jQuery 中可以
          // 被简写成 return false阻止默认行为

表单序列化

获取用户输入内容

• $.(from).serialize（）最后结果是一个字符串
  连载，连续 序列化

  • HTML 标签默认提交表单时会自动根据表单项的 name 属性将用户在表单中填写的数据提交至服务端，然而采用监听 DOM 事件对表单提交时，需要开发者自行获取表单项中用户填写的数据，其用户uname=21&pwd=31321如下代码所示：

    昵称:
    密码:
    提交

• $.(from).serializeArray() 结果是一个数组
  数组内是对象反序列化

案例

        // let tr = $('<tr></tr>')
        // $.each(heads, function (index, item) {
        //     let th = $('<th></th>')
        //     th.html(item)
        //     tr.append(th)
        // })
        // $('thead').append(tr)
        // $.each(datas, function (index, item) {
        //     let tr = $('<tr></tr>')
        //     tr.html(`
        //         <td>${item.name}</td>
        //         <td>${item.age}</td> 
        //         <td>${item.gender}</td>
        //         <td>${item.stuId}</td>
        //         <td>${item.salary}</td>
        //         <td>${item.city}</td>
        //         `)
        //     $('tbody').append(tr)
        // })

自定义动画有动画序列stop()停止 随机数结合颜色最好是rgb格式 $(window).scrollTop(0)