jQuery学习笔记

原创 于 2023-06-26 22:05:23 发布 · 447 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #javascript #学习

Author：@德玛玩前端
Date: 2023-06-26

jQuery

一、jQuery 概述

  • JavaScript类库的出现，是为了简化JavaScript的开发。
    • DOM步骤多，功能弱，兼容性差，函数名长，jq封装好了函数和对象，直接使用，并且可以兼容大部分浏览器，让前端更专注交互。
  • JavaScript类库封装了预定义的对象和实用的函数，可以帮助开发人员来创建有高难度交互的web2.0特性的富客户端页面，并且兼容各大浏览器。
  • JavaScript类库可以简称为JS库
  • 目前比较流行的JavaScript类库有
    • jQuery
    • MooTools
    • Prototype
    • Dojo
  • jQuery是一个优秀的轻量级的JavaScript类库，是由John Resig创建于2006年1月的开源项目。
  • jQuery可以兼容CSS3，及各种浏览器。
  • 使开发人员更方便地处理HTML页面，处理事件，操作DOM，实现动画效果，并且方便地为网站提供AJAX交互
  • 使用户的HTML页面保持代码和HTML内容分离。

【注意】 jQuery 2.x开始不再支持Internet Explorer 6，7，8

  • jQuery的核心理念是 write less，do more (写更少的代码，做更多的事情)

二、jQuery编程步骤

  • jq是一套封装好的类库
  • jq封装的方法都是基于DOM操作
  • jq的特点
    • 一切基于方法
    • 会自动的遍历
  • 例如， b t n = btn= btn=(‘button’)
  • 总结
    jq获取元素，都是在调用封装好的方法，值都是作为参数写在括号里
    $(this) 表示当前元素

jq其实还是dom，只不过对dom的每一步进行简化，那么dom四步是怎样的呢?

  • 获取出发事件函数的元素
  • 触发事件函数
  • 找到需要修改的元素
  • 修改元素

jq的使用步骤：

  • 引入jQuery的js文件
  • 使用选择器定位要操作的节点
  • 调用jQuery的方法进行操作

三、jQuery对象

工厂函数$()

  • 在jQuery中，无论使用哪中类型的选择符，都要从一个美元符号$和一对圆括号开始$()
  • 所有样式表中使用的选择符，都是能放到这个圆括号中的引号内。

什么是jQuery对象

  • jQuery对象就是通过jQuery包装DOM对象后产生的对象
  • jQuery对象是jQuery独有的，如果一个对象是jQuery对象，就可以使用jQuery的方法。
  • 在jQuery对象中无法使用DOM对象的任何方法，反之，Dom对象也无法使用jQuery的任何方法
    如:$('div')和$('#d1')都是jQuery对象。

【规范】：如果获取的是jQuery对象，那么要在变量的前面加上$

Dom对象转换成jQuery对象

  • 使用$()把DOM对象包装起来，就可以转换成jQuery对象
  • 语法 $(DOM对象)
      function f(){
      var obj=document.getElementById('d1')
      // DOM=>jQuery对象
      var $obj=$(obj)
      $obj.html('hello jQuery')
  }

jQuery对象转换成DOM对象

  • jQuery是一个类数组对象，自带遍历，所以可以把里面的dom对象再取出来。
    • 语法:DOM对象=jQuery对象.get(index)
  • jquery对象是一个数组对象，可以通过[index]方式，得到对应的DOM对象
    • 语法:DOM对象=jQuery对象[index]
     function f(){
    var $obj=$('#d1')
    // jQuery对象->DOM
    var obj=$obj.get(0)
    obj.innerHTML="hello jQuery"
 }

四、jQuery选择器

  • 1.jQuery选择器
  • 2.基本选择器
  • 3.层次选择器
  • 4.过滤选择器
  • 5.表单过滤器

1.jQuery选择器

jQuery选择器概述
  • jQuery 选择器类似于css选择(定位元素，施加样式)能够实现定位元素，施加行为。
  • 使用jQuery选择器能够将内容与行为分离
  • 学习使用选择器是学习jQuery的基础
jQuery选择器的种类

  • 简洁的写法

    • $()工厂函数在很多javaScript类库中都被作为一个选择器函数使用

  • 支持CSS1到CSS3选择器

    • jQuery选择器支持CSS1,CSS2和CSS3选择器，同时拥有少量独有的选择器用法
    • 使用jQuery选择器时，无需考虑浏览器是否支持这些选择器

  • 完善的处理机制

2.基本选择器

ID选择器

  • 特点：最快，尽量使用id选择器

  • 作用：返回匹配id属性值的所有元素

  • 用法：$('#myDiv')

  • 说明：返回HTML页面中id为myDiv的所有元素

     //选择id为one的元素
 $('#btn1').click(function(){
    $('#one').css("background","#bfa"))
 })
类选择器

  • 作用：返回匹配class属性值的所有元素

  • 用法：$('.className')

  • 说明：返回HTML页面中class为className的所有元素

     //选择class为mini的所有元素
 $('#btn2').click(function(){
    $('.mini').css("background","#bfa")
 })
通配符选择器

  • 作用： 返回当前HTML页面的所有元素

  • 用法：$('*')

  • 说明：返回HTML页面中所有元素

     //选择class为mini的所有元素
 $('#btn3').click(function(){
    $('*').css("background","#bfa")
 })
复合选择器

  • 复合选择器，即所有选择器的合集

  • 将每一个选择器匹配到的元素合并后一起返回

      //选择 所有的span元素和id为two的div元素
  $('#btn5').click(function(){
     $('span,#two').css('background','#bfa')
  })

3.层次选择器

  • 根据select1找到节点后，再去寻找子节点或孙节点中符合select2节点

    select1 select2

     //选择 body内的所有div元素
 $('#btn1').click(function(){
     $('body div').css('backgroud','#bbffa')
 })

  • 根据select1找到节点后，再去寻找子节点符合select2节点

    select1 > select2

     //选择 body内的所有div元素
 $('#btn1').click(function(){
     $('body > div').css('backgroud','#bbffa')
 })

  • 选取紧接在select1元素后的select2元素

    select1 + select2

     //选择 所有class为one的下一个div元素
 $('#btn1').click(function(){
     $('.one + div').css('backgroud','#bbffa')
 })

  • 选取select1 元素之后的所有select2元素

    select1 ~ select2

     //选择 所有class为one的所有div兄弟元素
 $('#btn1').click(function(){
     $('.one ~ div').css('backgroud','#bbffa')
 })

4.过滤选择器

  • 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素
  • 过滤选择器的特点都是以":"开头
  • 按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过渡和表单过渡选择器等。
基本过滤选择器
  • 先将所有符合条件的元素都取出来，集中放在一个集合中统一顺序编号且编号从0开始。
  • 过滤选择器以":" 或 "[]"开始

-:first                   第一个元素
-:last                    最后一个元素
-:not(selector)           把selector排除在外
-:even                    挑选偶数行
-:odd                     挑选奇数行
-:eq(index)               下标等于index的元素
-:gt(index)               下标大于index的元素
-:It(index)               下标小于index的元素
内容过滤选择器
-:contains(text)           匹配包含指定文本的元素
//$('div h3:contains('德玛')').css('color','red')
-:empty                    匹配所有不包含子元素或文本的空元素
-:has(selector)            匹配含有选择器所匹配的元素
-:parent                   匹配含有子元素或者文本的元素
可见性过滤选择器

-:hidden                   匹配所有不可见元素，或者type为hidden的元素
// console.log($('div.container>:hidden'))
-:visible                  匹配所有的可见元素
// $().is(":visible") 判断当前元素是否显示,返回true和false
属性过滤选择器

-[attribute]               匹配具有attribute属性的元素
-[attribute=value]         匹配属性等于value的元素
-[attribute!=value]        匹配属性不等于value的元素
-[attribute^=value]        匹配属性以某些值开始的元素
-[attribute$=value]        匹配属性以某些值结尾的元素
-[attribute*=value]        匹配属性以包含某些值得元素
-[attribute1][attribute2]  复合属性过滤选择器，需要同时满足多个条件时使用
子元素过滤选择器

-:nth-child(index/even/odd)index从1开始算
-:first-child              选取每一个父元素的第一个子元素
-:last-child               选取每一个父元素的最后一个子元素
-:only-child               如果某个元素是它父元素中唯一的子元素，那么将会被匹配
//$('#btn1').click(function(){$('div .one :nth-child(2).css('background','red')')})
表单属性过滤选择器

-:enabled                  选取所有可用的元素
-:disabled                 选取所有不可用元素
-:checked                  选取所有被选中的元素(单选框或多选框)
-:selected                 选取所有被选中的元素(下拉列表)

// $('#btn1').click(function(){ 
//      $('#form1 input:enabled').val('这里变化了')   
//})

5.表单过滤器


-:input                    选取所有的表单元素，input/textarea/select/-:button
-:text                     选取所有的单行文本框
-:password                 选取所有的密码框
-:radio                    选取所有的单选框
-:checkbox                 选取所有的复选框
-:submit                   选取所有的提交按钮
-:image                    选取所有的图像按钮
-:reset                    选取所有的重置按钮
-:button                   选择所有的按钮
-:file                     选取所有的上传域
-:hidden                   选取所有不可见元素

五、jQuery控制DOM

  • 1.基本操作
  • 2.属性操作
  • 3.样式操作
  • 4.遍历节点
  • 5.创建，插入，删除
  • 6.替换和复制

1.基本操作

  • html()

    读取或修改节点的html内容，类似于JavaScript中innerHTML属性

    // 获取<p>元素的HTML代码
$('p'),html()

// 设置<p>元素的HTML代码
$('p').html("<strong>你喜欢的水果是？</strong>")

  • text()

    读取或修改节点的文本内容，类似js中的textContent属性

    
// 获取<p>元素的文本
$('p').text()

// 设置<p>元素的文本
$('p').text('你最喜欢的水果是？')

  • val()

    读取或修改节点的value属性值，类似于js中的value属性

    
// 获取按钮的value值
$('input:eq(5)').val()

// 设置按钮的value值
$('input:eq(6)').val('我被点击了')

因为表单元素没有开始标签，所以无法使用html()/innerHTML

2.属性操作

  • attr()

    读取或者修改节点的属性

    
// 获取id="bj"的标签
var $obj=$('#bj') 

// 获取北京节点的name属性值
$obj.attr('name')

// 设置北京节点的name属性值
$obj.attr('name','beijing')

  • removeAttr()

    删除节点的属性值

    
// 获取id="bj"的标签
var $obj=$('#bj') 
$obj.removeAttr('name')

  • prop()

    标签里原生属性没办法获取到，通过js设置的自定义属性可以获取

    
//获取属性
console.log($(‘#d1’).prop(‘class’))
//修改/添加属性值
Console.log($(‘#d1’).prop(‘class’，‘btn1’))

3.样式操作


attr('class','')              获取和设置
addClass('')                  追加样式
removeClass("")               删除样式
removeClass()                 删除所有样式
toggleClass("")               切换样式  自动切换类名
hasClass("")                  是否有某个样式
css("")                       读取css的值
css("","")                    设置多个样式

4.遍历节点

  • jq有自动遍历的功能
  • 原生中 给每个子元素添加样式需要手动遍历=》写for循环
  • jq中不用写 自动完成遍历
  • 括号中都可以再次添加选择器，进行二次筛选
  • 父元素不会重复获取 parent（）
  • find()获取后代元素满足选择器的元素，必须给参数，不然会失效

children() / children(selector)    只考虑直接子节点
next() / next(selector)            下一个兄弟节点
prev() / prev(selector)            上一个兄弟节点
siblings() / siblings(selector)    其他兄弟
find(selector)                     查询满足选择器的所有后代
parent()                           父节点(没有选择器)
preAll()                           之前所有兄弟元素
nextAll()                          之后所有兄弟元素

5.创建，插入，删除

创建dom节点
  • jQuery使用$()工厂函数来创建节点，向$()工厂函数传递的是HTML代码字符串。
  • jQuery允许通过HTML代码字符串直接创建元素节点，文本节点及属性节点。

// 创建一个li元素，包括元素节点和文本节点和属性节点
var $li=$('<li title="香蕉">香蕉</li>')

// 获取<ul>节点<li>的父节点
var $parent=$('ul')

// 添加到<ul>节点中，使之能在网页中显示
$parent.append($li)



// 内部插入节点

append()                    作为最后一个子节点添加进来
prepend()                   作为第一个子节点添加进来

// 外部插入节点

after()                     作为下一个兄弟节点添加进来
before()                    作为上一个兄弟节点添加进来

// var $li_1=$('<li tile="香蕉">香蕉</li>')
// var $li_2=$('<li title="雪梨">雪梨</li>')
// $parent.append($li_1)
// $parent.append($li_2)
删除DOM节点

在原生dom中，只有父元素才可以删除节点，例如ul.removeChild(li)


remove()                    移除
remove(selector)            按选择器定位后删除
empty()                     清空节点

示例：


// 获取第二个<li>元素节点后，将它从网页中删除
$('ul li:eq(1)').remove()

// 把<li>元素中属性title不等于"菠萝"的<li>元素删除
$('ul li').remove("li[title!=菠萝]")

// 获取第二个<li>元素节点后，清空此元素里的内容
$('ul li:eq(1)').empty()
替换和赋值

replaceWith()           将所有匹配的元素替换成为指定的HTML或DOM元素
replaceAll()            颠倒了的replaceWith()方法

案例


   ← ← ← ← 替换 ← ← ← ← ← ←  ← 
   ↓                         ↑
$('p').replaceWith('<strong>你最不喜欢的苹果</strong>')



    → → → →  替换    → → → → →
    ↑                        ↓
$('<strong>你最不喜欢的苹果</strong>').replaceAll('p')

// 注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
复制DOM节点

相当于创建一个新元素，所以不会在原来的位置消失，克隆的元素不具备之前元素的行为，但是传入参数true就会将之前的行为也克隆出来。


clone()              复制DOM节点，节点没有之前元素的行为      
clone(true)          复制DOM节点，节点有之前元素的行为（时间处理）

案例


$('ul li').click(function(){
    //复制当前点击的节点，并将它追加到ul元素
    $(this).clone().apeendTo('ul')
})

$('ul li').click(function(){
    //可以复制自己，并且他的副本也有同样的功能
    $(this).clone(true).appendTo('ul')
})

六、jQuery事件

  • 1.页面加载后的事件
  • 2.事件绑定和移除绑定
  • 3.事件冒泡
  • 4.事件委托（性能–降低内存泄漏）
  • 5.事件对象
  • 6.模拟操作

1. 页面加载后执行

  • $(document).ready()

    • 和 window.onDomContentLoaded 相似，不同于window.onload()
    • window.onload事件是在网页上所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行
    • $(document).ready()是在DOM完全加载后就可与调用。
    • 需要注意的是，$(document).ready()方法操作网页中的元素，可能关联文件未加载完毕。

  • $(window).load()

    • 在页面上的标签，图片，img都加载完后才会执行,同于window.onload()

  • 基于一个页面执行多个脚本

    • 通过JavaScript 注册事件处理程序的传统机制，是把一个函数指定给DOM元素的对应属性

    • <body onload="start()"> / window.onload=start

    • 但如果指定第二个函数的话那么就会取代第一个函数

    • 因为jquery里的所有事件都是采用addEventListerner方式来添加的，所以不会取代

         
   window.onload=function(){
      $('#btn1').click(function(){}) 
   }
   
   window.onload=function(){
      $('#btn2').click(function(){.....})
   }
   
   //第二个onload里的函数会覆盖第一个onload里的函数

   //---------------------------------------------------       

   $(window).load(function(){
    // .addEventListener('load',function(){...})
    $('#btn1').click(function(){
        alert('000')
    })
  })

  $(window).load(function(){
    // .addEventListener('load',function(){...})
    $('#btn2').click(function(){
        alert('111')
    })
  })

  //不会覆盖btn1的情况，因为jq底层使用addEventListener添加的事件函数

    • ready() 每次都会向内部的行为队列中添加一个新的函数，当页面加载完成后，所有函数都将执行

      
$(document).ready(function(){
    firstFun()
})

$(document).ready(function(){
    secondFun()
})

  • 简写代码

    • $(document).ready()实际上是在基于document这个元素构建而成的jQuery对象，调用了ready()方法

    • $()工厂函数为我们提供了一种简写方式，即调用这个函数而不用传递函数，该函数的行为就是传递了document参数

    • 也可以直接向工厂函数$()中传递一个函数，此时，jQuery会在内部执行对ready()隐式调用


$(document).ready(function(){
   //代码
})

// 也可以写成

$().ready(function(){
  //代码
})

$(function(){
   //代码
})

2. 事件绑定和移除绑定

  • $obj.bind(事件类型,事件处理函数)

    • 如: $obj.bind('click',fn)
    • 通过this引用处理事件的DOM元素
    • 简写形式$obj.click(fn)
     $('.p1').click(fn)
 $('.p1').off('click',fn)

  • $obj.unbind(事件名)

    • 删除绑定事件
    • 和addEventListener相同，如果后期需要删除的事件，使用$obj.bind()去绑定事件时，在外部声明具名函数

  • 简单事件的绑定

    • jQuery提供了一种简化事件操作的方式–简写事件方法，其原理与bind()相同，但可以减少代码编写量。如通过 ( o b j ) . c l i c k ( f n ) 取代 (obj).click(fn)取代 (obj).click(fn)取代(obj).bind(‘click’,fn)
    
 blur()      keydown()      mouseover()
 change()    keypress()     mouseout()
 click()     keyup()        resize()
 dbclick()   load()         scroll()
 error()     mousedown()    select()
 focus()     mouseover()    submit()
 unload()

3.事件冒泡

父节点依次向下到子节点进行事件捕获，绑定事件处理函数
子节点产生的事件会依次向上抛给父节点

取消事件冒泡

e.stopPropagation() 可以取消事件冒泡


$('div').click(function(e){
     alert('点击了div') 
})

$('div').click(function(e){
     alert('点击了一个链接')
     e.stopPropagation()
})

4.事件委托

  • 当子元素过多，每一个子元素都需要触发事件函数，函数是引用类型数据，占用的是堆内存，函数过多，会造成大量内存泄漏，而且，一个一个添加事件处理函数，过于低效，代码十分笨重。所以就可以使用事件委托，将子元素的事件通过事件冒泡传递给父元素统一处理，这样既不占用内存，又能拥有大量的事件处理函数。

  • dom原生的写法

    
  var list = document.getElementById('list'); //ul
  list.onclick = function(e){
      console.log(e);
      //点击的子元素
      e.target.style.color = 'blue';
  }

  • jQuery中，delegate()方法

    • $('父选择器').delegate('子选择器',事件名，callback)
    • delegate()方法为指定的元素(属于被选元素的子元素)，添加一个或多个事件处理程序。
    • 每个目标元素自己不处理事件，利用"冒泡机制"，传递给父元素来处理
    • 使用对当前尚未存在的元素生效
      • 可以对当前尚未存在的元素生效(父元素通过e.target访问子元素)
      • 可以减少监听函数的数量
    
 $('#btn').click(function(){
     $li=$('<li>'+$('input:text').val()+'</li>')
     $('ul').append($li)
     $('input:text').val('')

     $('ul').delegate('li','dbclick',function(){
         $(this).remove()
     })
 })

5.事件对象

  • 事件是一种JavaScript结构，他会在元素获得处理对象的机会时被传递给被调用的事件处理程序。这个对象中包含与事件相关的信息，也提供了可以影响事件在dom中传递进程的一些方法。

  • 在处理程序中使用事件对象，需要为函数增加一个参数

    
 $(obj).click(function(event){})

  • 事件对象是事件发生时自动创建的，封装事件相关信息，并且提供了影响事件行为的，这样的对象。

  • event对象的所有属性列表可以在浏览器控制台中输出查看。

    
 $('#btn').click(function(e){
    console.log(e)
 })
    • 事件对象记录事件发生时的鼠标位置，键盘按键状态和触发对象等信息，事件对象的常用属性。
      • srcElement/target 事件源对象
      • eventPhase 事件所处的传播阶段
      • clientX/offsetX/pageX/screenX/x 事件发生的X坐标
      • clientY/offsetY/pageY/screenY/y 事件发生的Y坐标
      • which/keyCode/charCode 键盘事件中按下的按键
      • button 鼠标那个按键被按下了
      • cancelButton 是否取消事件冒泡
      • returnValue 是否阻止默认行为
阻止默认行为

  • 所谓默认行为，就是指页面中默认具有一些行为，例如表单提交，链接跳转等效果

    $('#sub').bind('click',function(e){
   var username=$('#username').val()
   if(username===""){
       $('#msg').html("<p>文本框的值不能为空</p>")
       event.preventDefault()
   }
})

6.模拟操作

  • 所谓模拟操作，就是比如用户点击按钮触发某种效果，而当页面加载完毕后模拟用户点击按钮，直接触发某种效果的方式。
  • 语法
    • $obj.trigger(事件类型)
    • 如:$obj.trigger('focus')
    • 简写形式 $obj.focus()

没有点击按钮，也可以让这个按钮触发事件。

先绑定单击事件，然后让后面的才做去模拟这个单击事件的操作。

这样当作一个搜索框时，当点击按钮，回车，都可以触发点击事件，减少代码。

案例
比如百度搜索框，当input触发事件的同时也可以触发点击事件，这样只需要在button点击事件的时候写一次axios发送请求即可。

$('button').click(function(){
  var kw=$(':text').val().trim()
  if(kw!==""){
      console.log('search is continuing')
  }
})

$(':text').keyup(function(e){
    if(e.keyCode=="enter"){
        $('button').click()
    }
})

$('#btn').bind('click',function(){
   $('button').click()
})

七、类数组操作

  • 类数组对象就是结构上类似于数组的对象，该对象具备数组的一些特性属性或方法，同时具有自己独特的一些属性或方法
  • jQuery对象中封装了多个DOM对象，jQuery对象本就是类数组对象
  • 数组与类数组对象的区别
    • 数组的类型是Array
    • 类数组对象的类型是Object，所有数组的api，类数组不能用，但是可以使用object上继承的api。
  • JQuery中类数组的操作

    • length 属性

    • eq(index) 将下标等于index的DOM对象取出来

    • get() 返回一个dom对象组成的数组

    • index(obj) 返回dom或者jquery对象在类数组中的下标

      • 从类数组中找寻指定元素
      • 若找到则返回指定元素在类数组中的下标
      • 找不到则返回-1
      • index(this)查找当前元素对象在类数组中的位置
         // 点击事件中 $("ul>li").index(this)

    • each(fn) 遍历类数组 fn用来处理dom对象，在fn中this代表正在被遍历的那个dom对象，fn函数可以添加一个参数i用于表示正在被遍历的DOM对象的下标(从0开始)

      • 绑定事件时可以自动遍历，但是获取元素则需要手动遍历用each（）
      • each()中，$(this)正在被遍历的每一个元素对象
      • each()中，i每一个正在被遍历每一个元素对象的下标
      <ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
<script>
   var $obj=$('ul li')
   $obj.each(function(i){
      if(i==0){
          $(this).css('font-size','30px')
      } 
   })
</script>

八、jQuery的动画效果

  • 1.封装好的动画
  • 2.自定义动画
  • 3.并发和排队效果

如果实际项目中，一个动态效果，可以用js做，也可以做css做，js会触发回流，reflow，渲染性能效率比较低.而使用css只会发生重绘，渲染性能较高。

1. 显示和隐藏

  • show() / hide() 显示和隐藏的效果

    • 作用：通过同时改变元素的宽度和高度来实现显示或者隐藏。

    • 用法：
      $obj.show(执行时间，回调函数)

      • 执行时间：slow，fast，normal或毫秒数
      • 回调函数：动画执行完毕之后要执行的函数
      
// 将div元素显示
$('div').show(600)

// 将div元素隐藏
$('div').hide(600)

    • show和hide在不加时间参数时，是欸有性能损耗的，只是瞬间的显示和隐藏，相当于display:none和display:block，例如在网页中的收起和展开按钮

  • slideDown() / slideUp() 滑动式动画效果

    • 作用: 通过改变高度实现显示或隐藏的效果

    • 用法同 show() / hide()

      
 //将div元素显示
 $('div').slideDown(600)

 //将div元素隐藏
 $('div').slideUp(600)

  • fadeIn() / fadeOut() 淡入淡出动画效果

    • 通过改变不透明度opacity来实现显示或者隐藏

    • 用户同show/hide

      
//将div元素显示
$('div').fadeIn(600)

//将div元素隐藏
$('div').fadeOut(600)

2. 自定义动画

  • animate()
  • 用法：animate(js对象，执行时间，回调函数)

    • js对象：{}描述动画执行之后元素的样式

    • 执行时间：毫秒数

    • 回调函数: 动画执行结束后要执行的函数

      $('div').click(function(){
    $(this).animate({'left':'500px'},4000);
    $(this).animate({'top':'300px'},2000).fadeOut('slow')
})

animate的第一个参数只支持单个数值的css属性
数值可以不加单位，这是jq里独有的功能，后面的框架都需要加
例如1,width,height,let,right,bottom,top,padding,margin等
例如2,在第一个参数添加transform:rotate(40deg),因为rotate()不是数值，所以animate()不识别。

$('#btn1').click(function(){
   $('#d1').aniamte({
        borderRadius：25%
   },4000)
})

animate的优势：可以设置排队，并发，延迟等交互效果。

3. 并发效果

  • 并发效果就是指多个动画效果同时执行

    //斜线
 $('div').click(function(){
    $(this).animate({
       "left":"500px",
       "top":"300px"
    }，4000)
 })

  • 当为同一组元素使用多重效果时，可以通过连缀这些效果实现排队。

    //排队
$('div').click(function(){
    $(this).animate({'left':'500px'},4000);
    $(this).animate({'top':'300px'},4000)
})

  • 案例: 元素发生动画效果后，消失，所以消失要写在第三个参数callback中

$('#s4').click(function(){
    $(this).aniamte({
      width:172,
      height:180,
      opacity:0
    },3000,function(){
      $(this).hide()
    })
})

九、开发jQuery插件

  • 1.添加新的全局函数
  • 2.添加jQuery对象方法

1.添加新的全局函数

先添加一个对象，防止命名控件的风险

  • 全局函数，实际上就是jQuery对象的方法。从实践角度看，他们是位于jQuery命名空间内部的函数。

  • jQuery内置的某些功能是通过全局函数实现的

  • $.ajax() 函数就是典型的全局函数

  • 向jQuery命名空间添加一个函数，只需要将这个新函数指定jQuery的一个属性

     jQuery.globalFunction=function(){
     alert('This is a global function')
 }

    • 如果要使用该全局函数时，可通过以下代码调用

      jQuery.globalFunction()

    • 也可以通过别名来调用

      $.globalFunction()

  • 【添加多个函数】如果我们想在插件中提供多个全局函数，可以独立的声明这些函数

     jQuery.functionOne=function(){
    alert('This is only a test')
 }
 jQuery.functionTwo=function(param){
    alert('The param is' + param)
 }
    • 还可以通过$.extend()函数来使函数定义更加清晰
      jQuery.extend({
     functionOne:function(){
        alert('function one')
     },
     functionTwo:function(){
        alert('function two')
     }
  })

    • 通过以上的方式能够添加全局函数，但是代码存在有关命名空间的风险

    • 即便jQuery命名空间屏蔽了多数JavaScript函数和变量名，但仍然有同其他插件定义的函数名冲突。

    • 我们最好是把属于一个插件的所有全局函数封装到一个对象中

      
jQuery.myPlugin={
   functionOne:function(){},
   functionTwo:function(param){}
}

      • 通过以上代码，其实是为了全局函数创建了另一个命名空间–jQuery.myPlugin

      • functionOne和functionTwo已经成为了myPlugin对象的方法，而myPlugin对象则是全局jQuery对象的一个属性，因此，在调用函数的时候必须包含插件的名称

        $.myPlugin.functionOne();
$.myPlugin.functionTwo(param)

  • 【创建实用方法】

    • 核心jQuery库提供的许多全局函数都是实用方法，如$.each()

    • 下面代码添加一个新的$.sum函数，演示如何创建实用方法

      
// jQuery用$.each('类数组'，function(i,n){})的方式来统一对类数组对象，普通数组的遍历操作，字符串不能遍历。

jQuery.sum=function(array){
   var total=0
   jQuery.each(array,function(){
       total+=value
   })
   return total
}

    • 创建方法案例

      //在jquery对象中创建一个自定义对象，然后在对象中再组自定义一个方法
$.vrv={
  sum:function($jq){
     var sum=0;
     $.each($jq,function(i,val){
       //console.log(val)
       //如果当前遍历的元素是一个DOM中的HTML元素对象，则对元素内容求和
       if(val instanceof HTMLElement){
          sum+=parseInt($(val).html())
       }else{//否则如果当前遍历到的元素不是DOM中的HTML元素对象，则直接对当前元素值求和
          sum+=parseFloat(val)
       }
     })
  }
}
console.log($.doudou.sum($('ul>li'))))

function add(){
  return $.doudou.sum(arguments)
}

console.log(add(1,2,3).add(1,2,3,4,5))

var arr=[1,2,3,4,5]
console.log($.dongodng.sum(arr))

在这里插入图片描述
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sgocWIgw-1687787548006)(image.png)]

2.添加jQuery对象方法

  • jQuery中大多数内置功能都是通过其对象的方法提供的，而这些方法也是插件之所以诱人的关键。

  • 当函数需要操作DOM元素时，就是创建为jQuery对象方法的好机会

  • 添加全局函数需要以新方法来扩展jQuery对象。添加实例方法即对象方法即对象方法也类似，但扩展的是jQuery.fn对象。

     jQuery.fn.method=function(){
    //操作代码
 }

  • 1.封装一个函数-给所有的jQuery家的孩子使用

    • 在任何插件方法内部，关键字this引用的都是当前的jQuery对象。因此可以this上面调用任何内置的jQuery方法，获取提取他们的DOM节点并操作该操作该节点。

      // fn是prototype的别名
  jQuery.fn.changeBgColor=function(color){
    this.css('background','color')
  }

在这里插入图片描述
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0KvYtr91-1687787548009)(https://note.youdao.com/yws/res/6/WEBRESOURCE02954c7c8fdcd0867eb90bba3491d066)]

  • 案例

    
// 封装自定义的函数
// 创建只能被jquery家孩子使用的sum函数-->放进jquery对象的原型对象中
var $lis=$('ul>li')
console.log($lis.__proto__==$.fn) //true
jQuery.fn.sum=function(){
  var sum=0；
  //外面的this指向调用该方法前的对象
  this.each(function(){
    //里面this是each给的，是当前正在遍历到的dom对象中的某一个对象
    sum+=parseFloat($(this).html())
  })
  return sum
}
console.log($lis.sum())

  • 2.自定义封装一个插件

注释：插件就是独立的功能区域，jquery的插件用的越来越少了

  • 编写一个插件，用于完成对li的样式进行切换，该插件中方法接受两个参数，即两个类名的名称，如果元素已经具备第一个类样式，则切换到第二个，否则，切换到第一个。

    • 插件库封装步骤

    • 新建一个文件夹，即插件库

    • 新家一个css文件，为了避免插件中的class冲突，所有的选择器都以统一的父元素选择器名开头

    • 新建一个js文件

       
 jQuery.fn.myAccordion=function(){
    this.addClass('accordion')
        .children(':nth-child(2n+1)')
        .addClass('title')
        .next()
        .addClass('content fade')
        .first()
        .addClass('in')

    $('.accordion').on('click','title',e=>
      $(e.target).next('.content').toggleClass('in')
        .sibilings('.content').removeClass('in') 
        
    )
 }

    • 在需要使用该插件库的页面中，将插件库里的css文件和js文件中引入，找到父元素，调用插件函数myAccordion,直接出效果。

3.第三方jquery方法

1.引入文件

https://jqueryui.com/jQuery 插件的官方网站

使用__下载文件：

  • jquery-ui.css
  • jquery-1.11.3.js
  • jquery-ui.js

2.找到元素，调用插件函数，直接出效果

缺点：使用插件后，当检查元素时，发现元素被改的面目全非，这是因为发生了侵入性现象，jquery函数会根据自身的需要在元素上自动添加class，好在简介，容易实现效果，不好在于维护困难。

十、jQuery中封装的Ajax

  • 1.AJAX的增强操作

    • 1.jQuery对AJAX的支持
    • 2.表单操作

  • 2.AJAX跨域请求

    • 1.AJAX跨域概述
    • 2.AJAX跨域实现

1.1、jQuery对AJAX的支持

  • load() 加载头部

    • 作用：将服务器返回的数据字节添加到符合要求的节点之上

    • 用法：$obj.load(请求地址，请求参数)

    • 请求参数

      • "username=tom & age=22"
      • {'username':'tom','age':22}

    • 有请求参数时，load方法发送POST请求，否则发送GET请求

    • 案例

      $(function(){
   $('#header')
    .load(
       'http://localhost:5000/header.html',
       function(){
          //创建一个Link元素
          $('<link rel="stylesheet" href="css/header.css">')
          // 将link元素添加head元素
          // 在请求结束后，自动帮助添加header.css到<head>结尾
          // 无需手动添加<link>
          .appendTo('head')
       }
       
    )
})

  • get() 发送get请求

    • 用法：$.get(请求地址，请求参数，回调函数，服务器返回的数据类型)

    • 说明：

      • 回调函数添加的参数是服务器返回的数据
      • 服务器返回的数据类型
        • html: HTML文本
        • text：文本
        • JSON：js对象
        • xml：XML文档
        • script：JavaScript

    • 案例

       $.get(
   "http://vrvserver.applinzi.com/index",//url
   function(result){ //回调函数  result是返回的结果
      console.log(result)
   },
   "json" 
   // 返回结果的数据类型，如果写json，就会自动调用JSON.parse将服务器端返回的结果自动转为js程序直接可用的数组或对象
 )

  • post() 向指定的URL发起异步的POST请求，响应成功调用指定的回调函数，处理响应主题数据

    • 用法：$.post('url',k1=v1&k2=v2/{k1:v1,k2:v2},fn)
    • 说明：
      • 请求主体数据可以直接写为对象，jQuery会转换为k-v对形式
      • jQuery会自动设置Content-Type请求头，为application/x-www-form-urlencoded
      • jQuery提供了一个表单序列化函数 $('#form1').serialize()
    
 用户名：<input><br/>
 密码：<input type="password"></br>
 <button>登录</button>

 <script>
    $('button').click(function(){
       var uname=$(':text').val()
       var upwd=$(':password').val()
       
       $.post(
           'http://vrvserver.applinzi.com/users/signin',
           `uanme=${uname}&upwd=${upwd}`,
           function(result){
              if(result.ok=1){
                 alert(`登录成功!欢迎${result.uname}`)
              }else{
                 alert('登录失败！')
              }
           }

       )

    })
 </script>

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A2KKfLac-1687787548011)(https://note.youdao.com/yws/res/1/WEBRESOURCEdb7abb05fe707384b5bcc7fc28196311)]
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wZbqokWe-1687787548013)(https://note.youdao.com/yws/res/4/WEBRESOURCEd21b4c5f9ab88b53e41c9e2a5170e094)]

  • getScript() 通过HTTP GET 请求载入并执行JavaScript 文件

    • 用法：$.getScript(url,success(reponse,status))

      • url: 将要请求的URL字符串
      • success(response,status)：可选，规定请求成功后执行的回调函数

        • response : 包含来自请求的结果数据

        • status ：包含请求的状态

          • success
          • notmodified
          • error
          • timeout
          • parsererror

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q1gB61Qw-1687787548015)(https://note.youdao.com/yws/res/2/WEBRESOURCE8f69b06ed6f8a3d323a2af645f2c2822)]

  • getJSON()

  • $.getJSON()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据

  • 使用$.getJSON()方法实现跨域请求，需要在请求路径URL后增加callback=?,jQuery将自动替换"?"为正确的函数名，以执行回调函数。

    
 $.getJSON('myurl?callback=?',function(data){
     //处理data数据
 })

  • ajax()

  • 用法:$.ajax({})

  • {}内可以设置的选项参数

    • url:请求地址
    • type：请求方式
    • data：请求参数
    • dataType：服务器返回的数据类型
    • success：服务器处理正常对应的
    • error：服务器出错对应的回调函数
    • async：true（缺省），当值为false时发送同步请求。

  • ajax()代替post()

     $.ajax({
   url:"http://vrvServer.applinzi.com/users/signin",
   type:'post',
   data:`uname=${uname}&upwd=${upwd}`
   dataType:'json',
   success:fucntion(result){
      if(result.ok==1){
         alert(`登录成功，欢迎${result.uname}`)
      }else{
        alert(`登录失败，${result.msg}`)
      }
   }
 })

  • ajax()代替get()

     $.ajax({
    url:baseURL+'/details',
    type:'get',
    data:{lid:5},
    dataType:'json',
    success:function(result){
       console.log(result)
    }
 })

  • ajax()代替load()

     $(function(){
    url:"http://localhost:4050/header.html",
    //type:"get",
    success:function(result){
        $('#header').html(result);
        $('<link rel="stylesheet" href="css/header.css">')
          .appendTo('head')
    }
 })

1.2、表单操作

以前都是form方式整页面提交，而且是同步的方式，如果客户端响应过慢，会整个页面空白。

  • 使用AJAX提交数据

    • 步骤1：获取表单元素，通过document.getElementById或者jQuery的工厂函数页面的元素值。

      • jquery获取表单元素
      
  loginname=$('#txtLoginName').val()
  password=$('#txtLoginPwd').val()
  hobbys=$('input[name=bobby]:checked') 
  gender=$('input[name=rdoGender]:checked').val()

    • 步骤2：将获取的页面元素值拼凑成字符串或者JSON字符串。

      • 拼凑字符串
        
  var logininfo="loginname="+loginname+'&password='+password+"&gender="+gender;
  for(var i=0;i<hobbys.length;i++){
     logininfo+='&hobby[]='+hobbys.get(i).value
  }

    • 步骤3：使用AJAX异步提交表单。

       
 $.ajax({
   url:'/user/login',
   type:'post',
   data:logininfo,
   success:function(data){
       alert(data)
   }
 })

  • 表单的序列化 serialize() 、 serializeArray()

    • 序列化：将对象状态转换为可保持或传输的格式过程。

    • 表单序列化：将表单元素转换为可提交的字符传或者JSON字符串。

    • 通过序列化可以轻松的实现数据存储和传输

    • 在jQuery中可以通过serialize()方法将表单元素序列化成普通字符串，通过serializeArray()方法将表单元素序列化成JSON字符串。

    • serailize()

      • 格式：var data=$(‘#formId’).serialize()
      • 功能：将表单内容序列成一个字符串
      • 这样在ajax提交表单数据时，就不用一一列举出每一个参数，著需要将data参数设置为logininfo=$('#formLogin').serialize()
      $('button').click(function(e){
    e.preventDefault()
    var search=$('form').serialize()
    console.log(search)
})

  • 使用AJAX提交数据(表单序列表方式)

    • 可以通过AJAX异步的提交表单，从而获得良好得用户体验
    • 步骤一：获取表单提交方式，服务器地址，序列化表单
    • 步骤二：通过AJAX异步的将内容给服务器
    • 步骤三：表单提交方法中返回false，即阻止表单默认提交
     $('button').click(fucntion(e){
    e.preventDefault()
    var search=$('form').serialize()
    console.log(search)

    $.ajax({
      url:'http://localhost:3000'
      data:search,
      success:(res)=>{
        console.log(res)
      }
    })
 })

2.1、AJAX跨域请求概述

同源策略是浏览器的默认行为，是浏览器接收服务器返回的响应数据的大门，跨域请求的资源进不来。

同源策略和跨域请求
  • 源(Origin)：指页面中数据的来源，由三部分指定
  • 协议名
  • 域名或IP地址
  • 端口号

  • 同源策略(Same Orgin Policy) 是浏览器的一个安全功能，不同源(协议名/域名/端口任一项不同)的客户端JS脚本在没有明确授权的情况下，不能读取对方的资源–称为禁止JS的"跨域请求"。所以a.com下的JS脚本采用AJAX读取b.com里面的文件数据是会报错的。

  • 【注意】跨域问题证针对的是JS和AJAX,HTML本身没有跨域问题，比如a标签，是script标签，link标签，iframe标签，甚至form标签（可以直接跨域发送数据并接收数据）等

  • 发送请求时，可以发送，甚至响应结果也可以回来，但是在回来的路上，客户端浏览器cors policy 会拦截，它会先检查当前网页所在的协议，地址，端口号是多少。然后再检查响应的数据包裹(服务器响应的数据都会像包裹一样传输回来)，服务器会把源头origin贴在包裹上，最后浏览器会自动比对包裹的源地址端口协议和客户端现在网页的地址端口协议，有一个不一样，包裹都会进不来。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ywT8nSaO-1687787548016)(https://note.youdao.com/yws/res/7/WEBRESOURCE3d7ce7af0b65b2e4058dea8b9cfc4867)]

2.2、AJAX跨域实现

  • 很多项目中，为了实现前后端应用服务器的分离，会特意把前端静态资源（HTML/CSS/JS等）与后台接口分处于不同服务器上(域名/ip/端口必然不同)，从而出现跨域请求问题。

  • 为了解决浏览器默认禁止js跨域请求得问题，有很多种解决方案

  • 代理请求方案

  • JSONP方案

  • CORS方案

代理请求方案

  • 客户端浏览器禁止跨域请求，而服务器请求另一个服务器上的资源是没有限制的，可以再当前服务器上为原本的跨域请求设置一个代理请求。

  • 任何服务器端技术都可以将可以将自己作为客户端向其他服务器发送http请求，例如在Nodejs中可以使用

      const http=requrie('http')
  var req=http.request(options,(res)=>{..})
  req.write(postData)
  req.end()
    • 代理请求方案的优点
      • 可以解决任意类型的跨域请求问题
      • 对跨域资源的请求可以实现 “单一入口” 控制
    • 代理请求方案的不足
      • 增大了当前服务器的运行压力
      • 因为多了一次请求和响应过程，最终客户端访问效率受影响

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Mn7R86B-1687787548017)(https://note.youdao.com/yws/res/3/WEBRESOURCEaf05d1d60132d8c54b1bd4edb5a43653)]

JSONP方案
  • JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。
  • 由于同源策略，浏览器禁止js跨域，但是script标签是允许跨域请求的，利用此特性，客户端使用script代替XHR发起跨域请求，服务器在JSON响应数据前后填充一些额外的内容，就称为"填充式JSON" —JSONP

var fn=req.query.callback  //获取客户端提交的回调函数名
res.setHeader('Content-Type','application/javascript')
res.write(`${fn}(${jsonData})`)//此处填充的方法fn的定义由客户端提供
res.end()

  • $.getJSON()

    • $.getJSON()方法允许通过JSONP形式的回调函数来加载其他网域的JSON数据
    • 使用$.getJSON()方法实现跨域请求，需要在请求路径URL后增加"callback=?“,jQuery会自动替换”?"为正确的函数名，以执行回调函数
     $.getJSON('myurl?callback=？',fucntion(data){
      //处理data数据
 })

  • 案例：

后端

router.get('/',(req,res)=>{
   var fn=req.query.callback
   var sql="SELECT * FROM `xz_index_product` where seq_recommended!=0 order by seq_recommended";
   pool.query(sql,[],(err,result)=>{
       res.end()
   })
})

前端

$.ajax({
   url:"http://localhost:5050/index";
   dataType:'jsonp',
   success:function(result){
       console.log(result)
   }
})

前端

$.getJSON('http://localhost:5050/index?callback=?',
   function(data){
    console.log(data)
   }

)
CORS方案
  • 跨域资源共享：Cross Origin Resource Sharing，是W3C标准，允许浏览器向跨域服务器，发出了XHR请求，从而克服了AJAX只能同源使用的限制。
  • 基本上目前所有的浏览器都实现了CORS标准，其实目前几乎所有的浏览器ajax请求都是基于cors机制的。
  • 对于客户端发起的简单请求，跨域的服务器需要在响应消息头部中添加 允许不同源访问控制头

 // 明确指定允许请求源头
 res.setHeader('Access-Control-Allow-Orign','http://127.0.0.1')

 // 允许所有的请求源
 res.setHeader('Access-control-Allow-Origin','*')

 res.writeHead(200,{
    "Content-Type":"text/plain;charset=utf-8",
    "Access-Control-Allow-Orgin":'*'
 })
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值