jQuery基础大全

_小影_
204 阅读6分钟

概述

jQuery 是一个快速、简洁的 JavaScript 库，把js中的DOM操作做了封装

入口函数

$(function(){})

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

特点：

  • 等待文档加载完成，保证能够获取到元素
  • 形成一个沙箱，防止全局变量污染

与window.onload(function(){})相比：

  1. 可以多次声明使用
  2. 不存在方法覆盖问题
  3. 在页面结构（DOM）加载完毕后执行

jQuery的顶级对象

jQuery和$:

是jQuery的别称，在代码中可以使用jQuery代替是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 。。 是jQuery 的顶级对象，把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

注：只有jQuery对象才能调用jQuery封装的方法

jQuery对象和DOM对象相互转换

  • DOM对象转jQuery对象
$('DOM对象')
  • jQuery对象转DOM对象
$('div') [index]       index 是索引号 

$('div') .get(index)    index 是索引号  

jQuery选择器

$(“选择器”) // 里面选择器直接写 CSS 选择器即可，记得加引号

名称用法描述
ID选择器$("#id")获取指定ID的元素，id是指定的id选择器名称
类选择器$(".class")获取同一类class的元素，class是指定的class选择器名称
标签选择器$("div")获取同一类标签的所有元素
并集选择器$("div,p,li")使用逗号分隔，只要符合条件之一就可
交集选择器$("div.redclass")获取class为redClass的div元素
子代选择器$("ul>li")使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器$("ul li")使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

注：jQuery选择器返回的是jQuery对象，所以可以直接调用jQuery提供的api

jQuery筛选选择器

名称用法描述
:eq(index)$(“li:eq(2)”).css(“color”, ”red”);获取到的li元素中，索引号index从0开始
:odd$(“li:odd”).css(“color”, ”red”);获取到的li元素中，选择索引号为奇数的元素
:even$(“li:even”).css(“color”, ”red”);获取到的li元素中，选择索引号为偶数的元素
:first$(“li:first”).css(“color”, ”red”);获取到的li元素中的第一个
:last$(“li:last”).css(“color”, ”red”);获取到的li元素中的最后一个

注：index（）方法取值是参照元素所在的兄弟中的索引

jQuery筛选方法*

名称用法描述
children(selector)*$(“ul”).children(“li”)获取当前元素的所有子元素中的li元素
find(selector)$(“ul”).find(“li”)获取当前元素中的后代元素中的li元素
siblings(selector)**$(“#first”).siblings(“li”)查找兄弟节点，不包括自己本身
parent()$(“#first”).parent()查找父亲
parents()$(“#first”).parents()查找祖先
eq(index)*$(“li”).eq(2)相当于$(“li:eq(2)”),index从0开始，得到jq对象
next()$(“li”).next()找下一个兄弟
prev()$(“li”).prev()找上一个兄弟

重点：children() siblings() eq() next()

案例：手风琴

需求：鼠标单击导航标题的时候，展开当前导航项，同时需要将其它可能展开的导航结构收起

主要知识点：

  1. 基础选择器获取元素
  2. 筛选选择器获取元素
  3. 链式编程的初体验

样式：

<style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }
​
    ul {
      list-style-type: none;
    }
​
    .parentWrap {
      width: 200px;
      text-align: center;
    }
​
    .menuGroup {
      border: 1px solid #999;
      background-color: #e0ecff;
    }
​
    .groupTitle {
      display: block;
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
    }
​
    .menuGroup>div {
      height: 200px;
      background-color: #fff;
      display: none;
    }
  </style>

结构：

 <ul class="parentWrap">
    <li class="menuGroup">
      <span class="groupTitle">标题1</span>
      <div>我是弹出来的div1</div>
    </li>
    <li class="menuGroup">
      <span class="groupTitle">标题2</span>
      <div>我是弹出来的div2</div>
    </li>
    <li class="menuGroup">
      <span class="groupTitle">标题3</span>
      <div>我是弹出来的div3</div>
    </li>
    <li class="menuGroup">
      <span class="groupTitle">标题4</span>
      <div>我是弹出来的div4</div>
    </li>
  </ul>

jQuery：

 $(function () {
      //给标题添加点击事件，$('.groupTitle')是伪数组对象会隐式迭代绑定事件
      $('.groupTitle').on('click', function () {
        // next（）下一个兄弟元素的方法、slideToggle（）展开和收起切换，siblings所有兄弟元素 ，children('div')标签为div的子元素
    $(this).next().slideToggle(500).parent().siblings().children('div').slideUp(500)
      })
    })

jQuery样式操作

css方法

  • 单个样式

语法：

$(选择器).css(样式名称，样式值); // 设置元素的单个样式

例：

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

设置样式的时候，属性名称必须加引号，值如果是数字可以不用跟单位和引号

  • 多组样式

语法：

$(选择器).css(｛样式名称1：样式值1，样式名称2：样式值2｝); // 设置元素的多个样式

例：

$(this).css({ "color":"white","font-size":"20px"});

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性名称可以不用加引号

  • 获取元素样式

语法：

$(选择器).css(样式名称); // 获取指定样式属性所对应的值
如：$("div").css("background-color"); 获取div元素的背影色

注：获取样式操作只会返回满足条件的第一个元素对应的样式值

类名操作

  • 添加类：
$(“div”).addClass(''current'');
  • 移出类
$(“div”).removeClass(''current'');
  • 切换类
$(“div”).toggleClass(''current'');
  • 判断元素是否有指定类样式
$(“div”).hasClass(''current'');     // 返回true/false,true代表有这个类样式

jQuery动画效果

显示隐藏

方法用途
show（）显示
hide（）隐藏
toggle（）显示隐藏切换

语法

show|hide([speed,[easing],[fn]])

参数

  • 参数都可以省略， 如省略则无动画直接显示。
  • speed：三种预定速度之一的字符串(slow(200)、normal(400)、fast(600))或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

滑动

方法用途
slideDown（）向下滑动显示
slideUp（）向上滑动隐藏
slideToggle（）上下滑动切换

语法

slideDown|slideUp|slideToggle([speed,[easing],[fn]])

参数与显示隐藏相似

淡入淡出

方法用途
fadeIn（）淡入
fadeOut（）淡出
fadeToggle（）淡入淡出切换
fadeTo（）淡出到指定透明度

语法

fadeIn|fadeOut|fadeToggle[speed,[easing],[fn]])

参数与显示隐藏相似

特殊：fadeTo

语法

fadeTo([[speed],opacity,[easing],[fn]])

参数：

  1. opacity 透明度必须写，取值 0~1 之间。
  2. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写

自定义动画animate

语法

animate(params,[speed],[easing],[fn])

参数

params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。**其余参数都可以省略。

动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

停止队列中的动画

stop（）方法
  • stop（）方法用于停止动画或效果
  • 注意：stop（）写到动画或者效果的前面，相当于停止结束上一次的动画

jQuery属性操作

设置或获取元素固有属性值prop()

获取固有属性语法

prop（“属性”）

设置固有属性语法

prop(''属性'', ''属性值'')

设置或获取元素自定义属性attr()

获取自定义属性语法

attr(''属性'')      // 类似原生 getAttribute()

设置自定义属性语法

attr(''属性'', ''属性值'')   // 类似原生 setAttribute()

attr（）可以设置、获取固有属性，但操作状态值的时候(如'checked','selected','disabled'等)只能使用prop,否则无法获取到想要的结果

建议：设置、获取固有属性用prop（）方法，设置、获取自定义属性用attr（）

数据缓存data（）

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

附加数据语法

data（‘name’，‘value’）// 向被选元素附加数据  

获取数据的语法

data()  //   获取元素所有自定义属性，返回一个对象
data(''name'')             //   向被选元素获取指定名称的自定义属性数据  

jQuery属性操作

设置或获取元素固有属性值prop()

获取固有属性语法

prop（“属性”）

设置固有属性语法

prop(''属性'', ''属性值'')

设置或获取元素自定义属性attr()

获取自定义属性语法

attr(''属性'')      // 类似原生 getAttribute()

设置自定义属性语法

attr(''属性'', ''属性值'')   // 类似原生 setAttribute()

attr（）可以设置、获取固有属性，但操作状态值的时候(如'checked','selected','disabled'等)只能使用prop,否则无法获取到想要的结果

建议：设置、获取固有属性用prop（）方法，设置、获取自定义属性用attr（）

数据缓存data（）

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

附加数据语法

data（‘name’，‘value’）// 向被选元素附加数据  

获取数据的语法

data()  //   获取元素所有自定义属性，返回一个对象
data(''name'')             //   向被选元素获取指定名称的自定义属性数据  

jQuery内容文本值

html（）相当于原生innerHTML

html()             // 获取元素的内容

html(''内容'')   // 设置元素的内容

text()相当于原生innerText

text()                     // 获取元素的文本内容

text(''文本内容'')   // 设置元素的文本内容

val表单的值相当于原生value

val()              // 获取表单的值

val(''内容'')   // 设置表单的值

注：val（）只适用于表单元素

jQuery元素操作

  • 遍历
  • 创建
  • 添加
  • 删除

遍历元素

jQuery中有隐式迭代可以对同一类元素进行同一操作。要想进行不同操作只能遍历元素

语法：

$("div").each(function (index, domEle) { xxx; }）      
  • each() 方法遍历匹配的每一个元素。主要用DOM处理。
  • 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
  • 使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

例：

      $lis.each(function (index, elem) {
        $(elem).css({
          backgroundImage: `url('./images/${index + 1}.jpg')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        })
      })

创建元素

语法

$(htmlstr) // htmlStr是指html格式的字符串
如：$(''<li></li>'');    动态的创建了一个 <li>

添加元素

内部添加语法

element.append('内容') 把内容放入匹配元素内部最后面，类似原生appendChild

element.prepend('内容') 内容放入匹配元素内部最前面

外部添加语法

element.after('内容')  //  把内容放入目标元素后面

element.before(''内容'')    //  把内容放入目标元素前面

注：

  • 内部添加元素，生成之后，他们就是父子关系
  • 外部添加元素，生成之后，他们是兄弟关系

删除元素

语法

element.remove()   //  删除匹配的元素（本身）

element.empty()    //  删除匹配的元素集合中所有的子节点

element.html('''')   //  清空匹配的元素内容

注：

  • remove删除元素本身
  • empty（）和html("")作用等价，都可以删除元素里面的内容，只不过html 还可以设置内容

jQuery尺寸、位置操作

尺寸

语法用法
width()/height()获取匹配元素宽度和高度值 只算width/height
innerWidth()/innerHeight()获取匹配元素宽度和高度值 包含padding
outerWidth()/outerHeight()获取匹配元素宽度和高度值 包含padding 、border
outterWidth(true)/outerHeight(true)获取匹配元素宽度和高度值 包含padding 、border、margin

注：

  • 以上参数为空，则是获取相应值，返回的是数字型
  • 如果参数为数字，则是设置相应值
  • 参数可以不必写单位

位置

位置主要有三个：offset()、position()、scrollTop()/scrollLeft()

offset()设置或获取元素偏移

  1. offset()方法设置或返回被选元素相对文档的偏移坐标，跟父级没有关系
  2. 该方法有2个属性left、top、offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左边的距离
  3. 设置元素的偏移：offset（{top:10,left:30}）

posittion()获取元素偏移

  1. position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
  2. 该方法有2个属性left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
  3. posittion()只能获取

scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

  1. scrollTop() 方法设置或返回被选元素被卷去的头部
  2. 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部

jQuery事件机制

jq事件发展的历程：简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐）

简单事件注册

  • 语法：事件类型(事件处理函数)如，click（function（）{}）
  • 不能同时注册多个事件,同时也不能实现委托事件

bind方式注册事件

  • 语法：$(jq).bind(‘事件类型’，事件处理函数)
  • 不支持动态事件绑定

delegate注册委托事件

  • 语法：$(jq).delegate(‘子元素选择器’，‘事件类型’，事件处理函数)
  • 只能注册委托事件，因此注册时间需要记得方法太多了

on注册事件*

on注册事件的语法
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events,[selector],[data],handler);

on可以注册简单事件和委托事件

在jq中，可以手动的通过代码方式触发事件

$(selector).事件类型()
如：$(jq).click()手动的触发指定jq对象的click事件

$(selector).trigger事件类型()
如：$(jq).trigger(‘click’)手动的触发指定jq对象的click事件

jQuery补充知识

多库共存

jQuery使用作为标示符，但是如果与其他框架中的作为标示符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权 jQuery可以使用noConflict()释放控制权

如：

let c = $.noConflict()//释放$的控制权，并且把$的能力给c

链式编程

链式编程的原理：设置性操作会返回一个jQuery对象，因此可以继续调用jQuery的方法,但是在使用的时候要注意一些细节：

  • 设置操作的时候，可以放心使用链式编程，因为设置操作会返回当前的jq对象
  • 获取操作的时候，谨慎使用链式编程，因为获取操作会返回获取的结果，有可能改变了最初的this(jq对象)的指向，链式编程可能不能得到正确的效果

小点：end()//上一次返回的jq对象

使用插件

jQuey并没有封装所有的原生js的操作，也没有实现开发时所有的场景需求，当有需要的时候，我们可以引入其它的插件来实现。 如果一个插件是基于jQuery来开发的，那么这个插件就可以称为JQuery插件，名称一般会以jquery做为前缀，它的插件使用步骤：

  1. 引入jQuery文件
  2. 引入插件
  3. 使用插件

jquery.color.js插件的使用

jQuery封装的animate方法不能实现元素的颜色变化，想要这个效果，就可以使用jquery.color.js插件来实现

jquery.lazyload.js

jquery.lazyload.js可以实现图片的懒加载

avatar
文章
阅读
粉丝