jQuery基础

于 2022-09-09 16:50:38 发布
阅读量507 收藏
点赞数
分类专栏： 前端开发学习笔记 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46121269/article/details/126753710
版权

文章目录

1、认识jQuery

什么是jQuery?

jQuery就是一个JavaScript函数库

内部包含了大量的封装好的、可以直接调用的 JS函数

官方网站：

网址：https://www.jquery.com

主要版本：目前包含三个主要版本

  • 1.x：市场使用最多的是1.11.x、1.12.x；号称兼容所有浏览器
  • 2.x：目前市场主流版本，不再对低版本浏览器保证兼容性
  • 3.x：最新版本

快速入门应用：通过按钮控制div元素的动画效果

<body>
  <button>点击切换div显示/隐藏</button>
  <div id="box"></div>

  <!-- 引入jQuery -->
  <script src="./js/jquery-2.2.4.js"></script>
  <script>
    $(function () { // 等待页面DOM加载完成后执行代码，类似window.onload

      $("button").click(function () { // 给按钮添加一个单击事件

        // 显示或者隐藏的时间，指定3S
        $("#box").toggle(3000) // fast narmal slow
      })

    })
  </script>
</body>

2、页面加载事件

JavaScript中提供了一个window.onload等待页面DOM元素和静态资源加载完成后再去执行事件中的代码，保障代码执行时可以访问页面中的所有数据

jQuery中提供了一个document.ready()等待页面DOM元素加载完成后执行回调函数内部的代码，保障代码执行时可以访问页面中的所有DOM元素

// 完整语法，编写过程过于繁琐
$(document).ready(function() {
  // 等待页面DOM加载完成后执行的代码
})

// jQuery进行了页面加载方式简化
// jQuery提供了/封装了一个jQuery()函数
jQuery(function() {
  // 等待页面加载后执行的代码
})

// 【推荐的最终语法】
// jQuery再次进行封装，将jQuery()封装成了$()
// jQuery = $
$(function() {
  // 等待页面DOM结构加载完成后执行代码
})

备注：jQuery提供了$(fn)等待页面DOM加载完成后再去执行的函数，但是如果需要访问或者等待页面静态资源(如图片)加载完成后再去执行，建议还是使用JS中的window.onload = function() {}

3、标签选择器

jQuery提供了一个选择器语法，可以快捷的根据css选择器选择页面中需要的标签

// 选择并获取到的标签对象：jQuery对象
$("css选择器")

（1） 认识jQuery对象

// 1、认识jQuery对象
// JS语法，选择标签
const _ct = document.querySelector("#container")
// JS选择器：标签对象、DOM对象
console.log('_ct', _ct)

// jQ语法，选择标签
const $ct = $("#container")
// JQ选择器：jQuery对象，是一个类似数组的集合
console.log('$ct', $ct)

// JS对象-> jQ对象：JS对象转换后就可以使用jQuery的函数
const jqObj = $(_ct)
console.log(jqObj)

// jQ对象-> js对象
const jsObj = $ct.get(0)
console.log(jsObj)

（2） 常见选择器

官方文档：https://jquery.cuishifeng.cn/

<body>
  <div id="container">
    <h3>琵琶行 <small>白居易</small></h3>
    <p class="impt">浔阳江头夜送客，枫叶荻花秋瑟瑟。</p>
    <p>主人下马客在船，举酒欲饮无管弦。</p>
    <p>醉不成欢惨将别，别时茫茫江浸月。</p>
    <p>忽闻水上琵琶声，主人忘归客不发。</p>
    <p>寻声暗问弹者谁，琵琶声停欲语迟。</p>
    <p>移船相近邀相见，添酒回灯重开宴。</p>
    <p class="impt">千呼万唤始出来，犹抱琵琶半遮面。</p>
    <p>转轴拨弦三两声，未成曲调先有情。</p>
    <p>弦弦掩抑声声思，似诉平生不得志。 </p>
    <div>
      <p>低眉信手续续弹，说尽心中无限事</p>
    </div>
    <hr>
    <button id="btn1">id选择器</button>
    <button id="btn2">class选择器</button>
    <button id="btn3">标签选择器</button>
    <button id="btn4">包含选择器</button>
    <button id="btn5">子类选择器</button>
    <button id="btn6">伪类选择器</button>
  </div>

  <script src="./js/jquery-2.2.4.js"></script>
  <script>
    $("#btn1").click(function () {
      // id选择器
      const $ct = $("#container")
      $ct.css("border", "solid 1px red")
    })

    $("#btn2").click(function () {
      // class选择器
      const $ps = $(".impt")
      $ps.css("background-color", "pink")
    })

    $("#btn3").click(function () {
      // 标签选择器
      const $p = $("p")
      $p.css("border-bottom", "orangered 2px solid")
    })

    $("#btn4").click(function () {
      // 包含选择器
      const $ps = $("#container p")
      $ps.css("border-bottom", "pink 5px solid")
    })

    $("#btn5").click(function () {
      // 子类选择器
      const $ps = $("#container > p")
      $ps.css("border-bottom", "green solid 2px")
    })

    $("#btn6").click(function () {
      // 伪类选择器
      const $p = $("#container > p:nth-of-type(1)")
      $p.css("border-bottom", "solid 2px red")
    })

    // 其他选择器，请移步官方文档...
  </script>
</body>

4、jQuery动画

jQuery针对网页中的常见的动画效果进行了封装

  • 动画：进入动画、离开动画、切换(显示/隐藏)动画
  • toggle()：显示/隐藏直接切换
  • hide()：隐藏
  • show()：显示
  • fadeIn()：透明度显示
  • fadeOut()：透明度隐藏
  • fadeToggle()：透明度显示/隐藏切换
  • fadeTo(0~1)：透明度切换到某个值
  • slideDown()：卷帘动画显示
  • slideUp()：卷帘动画隐藏
  • slideToggle()：卷帘动画显示/隐藏
  • …
  • animate()：自定义动画

代码操作：

<body>
  <button id="btn1">显示动画</button>
  <button id="btn2">隐藏动画</button>
  <button id="btn3">切换动画</button>
  <button id="btn4">卷帘显示动画</button>
  <button id="btn5">卷帘隐藏动画</button>
  <button id="btn6">卷帘切换动画</button>
  <button id="btn7">透明度显示动画</button>
  <button id="btn8">透明度隐藏动画</button>
  <button id="btn9">透明度切换动画</button>
  <button id="btn10">透明度指定动画</button>
  <button id="btn11">自定义动画</button>
  <div id="box"></div>

  <script src="./js/jquery-2.2.4.min.js"></script>
  <script>
    $("#btn1").click(function () {
      // 显示动画：让隐藏的元素显示
      // $("#box").toggle()
      $("#box").show(2000)
    })
    $("#btn2").click(function () {
      // 隐藏动画：让显示的元素隐藏
      // $("#box").toggle()
      $("#box").hide(1000)
    })
    $("#btn3").click(function () {
      // 切换动画：让显示的元素隐藏
      // $("#box").toggle()
      $("#box").toggle(1000)
    })
    $("#btn4").click(function () {
      // 切换动画：让隐藏的元素显示
      $("#box").slideDown(1000)
    })
    $("#btn5").click(function () {
      // 卷帘动画：让显示的元素隐藏
      $("#box").slideUp(1000)
    })
    $("#btn6").click(function () {
      // 卷帘动画：让显示的元素隐藏
      $("#box").slideToggle(1000)
    })
    $("#btn7").click(function () {
      // 透明度动画：让显示的元素隐藏
      $("#box").fadeIn(1000)
    })
    $("#btn8").click(function () {
      // 透明度动画
      $("#box").fadeOut(1000)
    })
    $("#btn9").click(function () {
      // 透明度动画
      $("#box").fadeToggle(1000)
    })
    $("#btn10").click(function () {
      // 透明度动画
      $("#box").fadeTo(1000, 0.5)
    })
    $("#btn11").click(function () {
      // 自定义动画
      $("#box").animate({ left: "1000px" }, 1000)
        .animate({ top: '200px' }, 500)
        .animate({ left: "100px", top: '100px' }, 1000)
        .animate({ width: "100px", left: "150px" }, 200)
        .animate({ width: "300px", left: "50px" }, 200)
        .animate({ width: "100px", left: "150px" }, 200)
        .animate({ width: "300px", left: "50px" }, 200)
        .animate({ width: "100px", left: "150px" }, 200)
        .animate({ width: "300px", left: "50px" }, 200)
        .animate({ width: "100px", left: "150px" }, 200)
        .animate({ width: "300px", left: "50px" }, 200)
        .animate({ width: "100px", left: "150px" }, 200)
        .animate({ width: "300px", left: "50px" }, 200)
        .animate({ width: "200px", left: 0, top: "50px" }, 500);

    })
  </script>
</body>

5、事件操作

jQuery中提供了事件的绑定方式，也提供了事件拓展功能（阻止冒泡、阻止默认行为）

① 快捷绑定

一般情况下，我们给网页中已经存在的元素进行事件绑定，使用快捷绑定函数；通过回调函数的方式给标签绑定事件

// 当用户点击了id="box"的标签时，执行传递给click()处理单击事件的回调函数
$("#box").click(回调函数)

// $("#box")  选择器，选择了页面中id="box"的标签
// click()    处理单击事件的函数，jQuery是JS函数库，所有的操作都是函数式开发
// click(回调函数)   当单击事件发生了之后，调用回调函数

$("#box").click(function() {
  // 处理单击事件发生后的操作
})

② 常用绑定函数

  • bind() ：给指定的元素绑定事件，3.0版本废弃
    • unbind()：给指定的元素取消绑定的事件
  • live()：给指定的元素绑定事件，支持事件委托；1.7版本废弃
    • die()：给指定的元素取消绑定的事件
  • delegate()：给指定的元素绑定事件，支持事件委托；3.0版本废弃
    • undelegate()给指定的元素取消绑定的事件
  • on()：给指定的元素添加绑定事件，支持事件委托（特殊语法）【推荐】
    • off()给指定的元素取消绑定的事件

代码操作：

<body>
  <div id="box">
    <div id="inner"></div>
  </div>

  <!-- 引入1.x版本的jquery-->
  <script src="./js/jquery-1.12.4.js"></script>
  <script>
    // function handle() {
    //   alert("用户点击了box div")
    // }
    // $("#box").click(handle)

    // 1、快捷绑定
    $("#box").click(function () {
      alert("用户点击了box div")
    })

    // 2、on绑定事件
    // 2-1 直接绑定事件，不支持事件委托
    $("#inner").on("click", function () {
      alert("用户点击了inner div")
    })

    // 2-2 事件委托绑定；支持未来元素
    $("#box").on("click", "#inner", function () {
      alert("用户点击了inner div 2事件委托")
    })
  </script>
</body>

③ 标准规范绑定

PC端项目开发中，jQuery使用的非常频繁，事件的处理一般有两种规范：

规范1：建议页面已有元素的绑定，使用快捷方式；未来元素的绑定使用on()函数进行事件委托绑定

规范2：建议页面中不论是存在的或者未来元素，统一使用on()进行绑定【推荐】，便于提高代码可读性、便于后期的的项目维护

④ 事件拓展

事件执行过程中，需要处理事件冒泡和默认行为的问题，jQuery中如何处理？

遵循JavaScript中处理方式！对原生JS的处理进行了扩展

  • 阻止冒泡：event.stopPropagation()

  • 阻止默认行为：event.preventDefault()

6、BOM / DOM

jQuery/JavaScript对浏览器和网页文档进行数据处理的内建模型，可以通过BOM操作浏览器对象、可以通过DOM操作网页文档对象

（1） BOM

BOM操作，依然使用原生JavaScript中的内建对象进行操作

  • window
  • location
  • history
  • navigator
  • screen
  • document

jQuery中可以将DOM对象转还成jQuery对象进行操作

console.log(window, "BOM对象")
console.log($(window), "jQuery对象,支持使用jQuery提供的功能函数")

案例分析：吸顶菜单

1、滚动事件

  • 原生：window.onscroll = function() {}
  • jQuery: $(window).scroll(function() {...})

2、卷去网页的高度

  • 原生：document.body.scrollTop || document.documentElement.scrollTop
  • jQuery：$(window).scrollTop()

3、修改css样式

  • 原生：obj.style.position = 'absolute';...
  • jQuery：$(obj).css("position", "absolute")

（2） DOM

DOM操作都是对网页文档中标签对象的增删改查

① 查询DOM节点

语法描述
$(css选择器)jQuery选择器

② 新增DOM节点

语法描述
$("<标签名称>")创建一个节点
如：$("<div>")
$box.append($new)将$new节点，追加到$box的子节点的末尾[记]
$new.appendTo($box)将$new节点，追加到$box的子节点的末尾
$box.prepend($new)将$new节点，插入到$box的第一个子节点位置[记]
$new.prependTo($box)将$new节点，插入到$box的第一个子节点位置
$ex1.after($ex2)将$ex2添加到$ex1的后面（同级/兄弟节点）[记]
$ex1.before($ex2)将$ex2添加到$ex1的前面[记]
$ex2.insertAfter($ex1)将$ex2添加到$ex1的后面（同级/兄弟节点）
$ex2.insertBefore($ex1)将$ex2添加到$ex1的前面

③ 查询节点

语法描述
$ps.eq(index)获取索引位置的jQuery对象
$ps.get(index)获取索引位置的JS对象
$ps.first()获取第一个匹配的jQuery对象
$ps.last()获取最后一个匹配的jQuery对象
$ps.children()获取子节点
$ps.parents()获取所有父节点
$ps.parent()获取唯一的直接父节点
$ps.next()获取下一个兄弟节点
$ps.nextAll()获取后面所有兄弟节点
$ps.prev()获取上一个兄弟节点
$ps.prevAll(0)获取前面所有的兄弟节点

④ 删除节点

语法描述
$box.remove()删除当前节点
$box.empty()删除$box中所有的子节点

（3） DOM 属性

语法描述
$box.attr(name, value)给名称为name的属性设置value值[记]
$box.attr(name)获取名称为name的属性值[记]
$box.removeAttr(name)删除名称为name的属性值[记]
$box.prop(name, value)给名称为name的属性设置value值
$box.prop(name)获取名称为name的属性值
$box.removeAttr(name)删除名称为name的属性值

（4） DOM样式

语法描述
$box.css(key, value)给名称为key的样式设置value值
$box.css({k1:v1, k2:v2...})给$box同时设置多个样式
$box.css(key)获取$box中名称为key的样式

（5） DOM内容

语法描述
$box.text(内容)设置文本内容
$box.text()获取文本内容
$box.html(内容)设置富文本内容
$box.html()获取父文本内容

（6） class样式处理

语法描述
$box.addClass(cname)给$box添加一个类名称
$box.removeClass(cname)删除$box上的一个类名称
$box.toggleClass(cname)TODO

7、案例

（1）案例：选项卡

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #container {
      width: 300px;
      height: 200px;
      border: solid #000 2px;
      overflow: hidden;
    }

    #title {
      display: flex;
      height: 50px;
    }

    #title span {
      display: inline-block;
      flex: 1;
      height: 50px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }

    #title span:hover {
      background: #ddd;
    }

    #title span.active {
      background: orangered;
      color: white;
    }

    #content {
      position: relative;
    }

    #content p {
      position: absolute;
      left: 10px;
      top: 70px;
      display: none;
    }

    #content p.active {
      display: block;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="title">
      <span class="active">新闻</span>
      <span>通知</span>
      <span>公告</span>
    </div>
    <div id="content">
      <p class="active">新闻内容</p>
      <p>通知内容</p>
      <p>公告内容</p>
    </div>
  </div>

  <script src="./js/jquery-2.2.4.min.js"></script>
  <script>
    // 等待网页DOM加载完成后再执行代码
    $(function () {

      // 标题上添加单击事件
      $("#title span").click(function () {

        // 移除所有标题高亮
        $("#title span").removeClass("active")
        // 高亮当前标题
        $(this).addClass("active")

        // 隐藏所有选项内容
        $("#content p").removeClass("active")
        // 显示当前对应的内容
        let index = $(this).index()
        $("#content p").eq(index).addClass("active")
      })

    })
  </script>
</body>

</html>

（2）案例：动态菜单

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .nav {
      position: relative;
      display: flex;
      list-style: none;
    }

    .nav li {
      height: 50px;
      padding: 10px 20px;
      text-align: center;
      line-height: 30px;
    }

    /* .nav li:hover {
      background: #ddd;
    } */

    .nav li.active {
      color: white;
    }

    .bg {
      background: orangered;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }
  </style>
</head>

<body>

  <ul class="nav">
    <li class="active">首页</li>
    <li>个人主页</li>
    <li>日志</li>
    <li>相册</li>
    <li>留言板</li>
    <li>说说</li>
    <p class="bg"></p>
  </ul>
  <script src="./js/jquery-2.2.4.js"></script>

  <script>

    // 设置第一个激活的背景宽度
    $(".nav .bg").css({
      width: $(".nav .active").outerWidth(),
      height: $(".nav .active").outerHeight()
    })


    // 背景移动
    $('.nav li').click(function () {
      // 移除所有的active
      $('.nav li').removeClass('active')
      // 给当前点击的标签添加active
      $(this).addClass('active')

      // 获取当前点击li的坐标   offset(): {left: 22, top: 20}
      const left = $(this).offset().left
      const top = $(this).offset().top
      const width = $(this).outerWidth()
      const height = $(this).outerHeight()

      // 设置背景位置
      $(".bg").animate({ left: left + 12, top, width, height }, 50)
        .animate({ left: left - 12, top, width, height }, 50)
        .animate({ left: left + 10, top, width, height }, 30)
        .animate({ left: left - 10, top, width, height }, 30)
        .animate({ left: left + 8, top, width, height }, 20)
        .animate({ left: left - 8, top, width, height }, 20)
        .animate({ left: left + 4, top, width, height }, 10)
        .animate({ left: left - 4, top, width, height }, 10)
        .animate({ left, top, width, height }, 10)
    })

  </script>
</body>

</html>

（3）案例：拖拽效果

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    #box {
      position: absolute;
      width: 400px;
      height: 300px;
      border: solid 1px #123456;
      border-radius: 5px;
      overflow: hidden
    }

    #title {
      width: 100%;
      height: 40px;
      background: #123456
    }
  </style>
</head>

<body>
  <div id="box">
    <div id="title"></div>
  </div>

  <script src="./js/jquery-2.2.4.js"></script>
  <script>
    $(function () {

      // 声明变量，记录鼠标在元素上的偏移距离
      let ox = oy = 0;

      // 鼠标移动的事件函数
      function move({ clientX: cx, clientY: cy }) {
        // 计算box的位置
        let left = cx - ox
        let top = cy - oy

        // 边界判断
        if (left <= 0) {
          left = 0
        }

        // 定位
        $("#box").css({ left, top })
      }

      $("#title").on('mousedown', function ({ offsetX, offsetY }) {
        // 获取鼠标在标签上的偏移距离
        ox = offsetX
        oy = offsetY
        // 鼠标移动:绑定事件
        $(document).on('mousemove', move)
      })

      $("#title").on('mouseup', function () {
        // 接触拖动事件:取消绑定
        $(document).off('mousemove', move)
      })

    })
  </script>
</body>

</html>

（4）案例：放大镜

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    #glass {
      display: flex;
    }
    #small {
      position: relative;
    }
    #small,
    #small img {
      width: 400px;
      height: 400px;
    }
    #small #view {
      width: 200px;
      height: 200px;
      background: #fff;
      opacity: 0.3;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }
    #big {
      position: relative;
      width: 400px;
      height: 400px;
      overflow: hidden;
      margin-left: 20px;
      display: none;
    }
    #big img {
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="glass">
    <div id="small">
      <img src="./images/small.jpg" alt="">
      <div id="view"></div>
    </div>

    <div id="big">
      <img src="./images/big.jpg" alt="">
    </div>
  </div>

  <script src="./js/jquery-2.2.4.js"></script>
  <script>
    $(function () {

      // 1、鼠标移入small，让view 和big显式
      // 鼠标移出small，让view，big消失
      $("#glass #small").on('mouseenter', function () {
        // 让#view和#big显示
        $("#view, #big").css('display', 'block')

        // 鼠标拖动
        $("#glass #view").on('mousemove', function ({ clientX: cx, clientY: cy }) {

          // 计算view的位置
          let left = cx - $("#small").offset().left - $("#view").outerWidth() / 2
          let top = cy - $("#small").offset().top - $("#view").outerHeight() / 2

          // 边界
          if (left <= 0) {
            left = 0
          } else if (left >= $("#small").outerWidth() - $("#view").outerWidth()) {
            left = $("#small").outerWidth() - $("#view").outerWidth()
          }

          if (top <= 0) {
            top = 0
          } else if (top >= $("#small").outerHeight() - $("#view").outerHeight()) {
            top = $("#small").outerHeight() - $("#view").outerHeight()
          }

          // 定位view
          $("#glass #view").css({ left, top })


          // 计算大图坐标
          let _bigLeft = left * $("#big").outerWidth() / $("#view").outerWidth()
          let _bigTop = top * $("#big").outerHeight() / $("#view").outerHeight()

          // 定位大图
          $("#big img").css({
            left: -_bigLeft,
            top: -_bigTop
          })

        })
      })
      $("#glass #small").on('mouseleave', function () {
        // 让#view和#big隐藏
        $("#view, #big").css('display', 'none')
      })
    })
  </script>
</body>

</html>

8、jQuery常见函数

函数描述示例
jQuery(selector)选择器，用来根据css语法选择页面标签jQuery("#box")
$(selector)选择器，jQuery()选择器简化语法$("#box")
$(function() {...})加载函数，等待网页DOM加载完成后执行的函数
是$(document).ready(function() {...})语法简化
show()隐藏的元素显示
hide()显示的元素隐藏
toggle()切换显示状态
slideDown()隐藏的元素卷帘显示
slideUp()显示的元素卷帘隐藏
slideToggle()卷帘动画切换显示状态
fadeIn()透明度显示元素
fadeOut()透明度隐藏元素
fadeTo()透明度变化到指定值
fadeToggle()透明度切换动画
animate()自定义动画
stop()清除动画队列
$(window)操作浏览器窗口对象
$(window).scroll(function() {...})) 滚动条事件
$(window).resize(function() {...}) 窗口尺寸变化事件
注意：原生js bom操作已经很便捷，没有特殊要求没有必要转换
offset()获取元素在页面中的(非绝对定位)位置：{left: 200, top: 100}
获取x坐标：$box.offset().left
获取y坐标：$box.offset().top
position()获取元素在页面中的(绝对定位)位置：{left: 200, top: 100}
获取x坐标：$box.position().left
获取y坐标：$box.position().top
width()
innerWidth()
outerWidth()		获取目标元素的width宽度
获取目标元素的width + padding宽度
获取目标元素的width + padding + border宽度
height()
innerHeight()
outerHeight()		获取目标元素的height高度
获取目标元素的height + padding高度
获取目标元素的height + padding + border高度
$selector.eq(index)获取指定索引位置的jQuery对象
$selector.get(index)获取指定索引位置的JS对象
$selector.parents()获取目标元素的所有先辈节点
$selector.parent()获取目标元素的父节点
$selector.children()获取目标元素的子节点
$selector.prev()获取上一个兄弟节点
$selector.prevAll()获取前面所有兄弟节点
$selector.next()获取下一个兄弟节点
$selector.nextAll()获取后面所有兄弟节点
$("<标签名称>")新增节点$("<div>")
$n1.append($n2)新增子节点，将$n2添加到$n1最后一个子节点
$n2.appendTo($n1)新增子节点，将$n2添加到$n1最后一个子节点
$n1.prepend($n2)新增子节点，将$n2添加到$n1到第一个子节点
$n2.prependTo($n1)新增子节点，将$n2添加到$n1到第一个子节点
$n1.before($n2)前面新增兄弟节点
$n2.insertBefore($n1)前面新增兄弟节点
$n1.after($n2)后面新增兄弟节点
$n2.insertAfter($n1)后面新增兄弟节点
$box.attr(name, value)给$box设置一个值为value的属性name
只能设置标签属性
$box.attr(name)获取$box的属性name的值
$box.prop(name, value)给$box设置一个值为value的属性name，可以设置节点属性
如nodeType
$box.prop(name)获取$box的属性name的值
$box.css(key, value)给$box设置一个样式
$box.css({k1:v1, k2:v2..})给$box设置多个样式
$box.text()
$box.text(内容)		获取文本数据
设置文本数据
$box.html()
$box.html(内容)		获取富文本数据
设置富文本数据
$box.on(fn)给目标元素添加绑定事件
$box.off(fn)给目标元素解除事件

思考一个问题：为什么之前的代码中，出现了这样名称的变量？

  • 前端开发规范中，如果要使用jQuery，一般会推荐通用开发规范，如变量名称下划线开头属于JS对象，如果变量名称是$符号开头属于jQuery对象；方便通过变量直接调用函数
// 变量：下划线开头
const _box = document.querySelector("#box")

// 变量：$符号开头
const $box = $("#box")

9、常用核心函数

（1） $(selector)

选择器，可以用于选择页面中的标签对象，等价于jQuery()；查看源代码

	// Expose jQuery and $ identifiers, even in AMD
	// (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
	// and CommonJS for browser emulators (#13566)
	if (!noGlobal) {
		window.jQuery = window.$ = jQuery;
	}

<script src="./js/jquery-2.2.4.js"></script>
<script>
  // $() 等价于 jQuery()
  console.log(   $("#box")        )
  console.log(   jQuery("#box")   )
</script>

（2） each()

jQuery选择了页面标签对象之后，可以针对选择的标签进行遍历处理，包含隐式迭代和显式迭代两种情况

// each() 隐式和显式迭代
const $ps = $("p")

// 设置样式:隐式迭代
// 尽管我们没有编写循环语法，但是jQuery底层对选择器选择的标签
// 进行了循环遍历完成了样式处理；
// 不由开发人员编写循环，而是`jQuery`自身循环处理的过程：隐式迭代
// $ps.css("border-bottom", "solid 2px orangered")

// 设置样式：显示迭代
for (let i = 0; i < $ps.size(); i++) {
  console.log(getRandColor())
  $ps.eq(i).css("border-bottom", "solid 2px " + getRandColor())
}

// jQuery提供了一个可以直接遍历选择器标签的函数each()
// $ps.each(function (index, ele) {
$ps.each( (index, ele) => {
  $(ele).css("border-bottom", "solid 2px " + getRandColor())
})

// jQuery提供了一个通用的迭代函数
// $.each($ps, function (index, ele) {
$.each($ps, (index, ele) => {
  $(ele).css("border-bottom", "solid 2px " + getRandColor())
})

function getRandColor() {
  return "#" + Math.random().toString(16).substr(2, 6)
}

（3） 插件封装

jQuery本身虽然提供了大量插件，但是项目中的需求千变万化的，不可能满足所有情况；jQuery提供了扩展自己功能函数的方法，让开发人员可以制作JQuery插件

  • jQuery.fn.extend()：函数级插件
  • jQuery.extend()：应用级插件
/** 自定义插件 */

// 函数插件
jQuery.fn.extend({
  trim: function () {
    console.log(this.text().trim(), " 插件中的this")
    return this.text().trim()
  }
})

// 应用插件
jQuery.extend({
  globalTrim: function (value) {
    return value.toString().trim()
  }
})

10、案例：瀑布流开发

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #container {
      width: 90%;
      position: relative;
      margin: 0 auto;
    }

    .outer {
      position: absolute;
      padding: 5px;
      width: 200px;
    }

    .inner {
      padding: 5px;
      width: 190px;
      border: solid 1px #000;
      border-radius: 5px;
      box-shadow: #000 2px 2px 5px;
    }

    .inner img {
      vertical-align: middle;
      width: 180px;
      height: auto;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="outer">
      <div class="inner"><img src="./image/a (1).JPG" alt=""></div>
    </div>
    ......
    <div class="outer">
      <div class="inner"><img src="./image/a (110).JPG" alt=""></div>
    </div>
  </div>
  <script src="./js/jquery-2.2.4.js"></script>

  <script>
    // 瀑布流函数
    function loadImg() {

      // 获取存放所有图片的容器标签
      const $ct = $("#container")
      // 计算一行放多少张图片
      const _col = Math.floor($ct.outerWidth() / 200)

      // 循环遍历所有图片
      const arr = []
      $(".outer").each((index, ele) => {

        if (index < _col) {  // ，存放第一行图片

          $(ele).css({ left: index * 200, top: 0 })
          arr.push($(ele).outerHeight())

        } else { // 其他图片

          // 从数组中找出最小高度
          const minHeight = Math.min.apply(null, arr) // 最小高度
          const minIndex = arr.indexOf(minHeight)       // 对应索引

          // 定位下一张图片
          $(ele).css({ left: minIndex * 200, top: minHeight })

          // 更新当前最小高度
          arr[minIndex] += $(ele).outerHeight()

        }
      })
    }

    window.onload = function () {
      loadImg()
    }

    window.onresize = function () {
      loadImg()
    }
  </script>
</body>

</html>

11、jQuery Ajax

回顾原生js异步请求

const _http = new XMLHttpRequest()

_http.open("GET", "http://www.example.com")

_http.send()

_http.onreadystatechange = function() {
  if(_http.readyState === 4 && _http.status === 200) {
    // 获取数据
    const txt = _http.responseText
    // DOM...
  }
}

jQuery封装了原生JS提供了异步请求操作

// 通用函数
$.ajax({
  url: "http://www.baidu.com",
  methods: "GET",
  data: {参数数据},
  success: function(res) {
    console.log(res, "服务器返回的数据")
  },
  error: function(err) {
    console.log("请求失败")
  }
})

// GET请求
$.get('http://www.baidu.com', {参数}, function(res) => {
      console.log(res, "返回的数据")
 })

// POST请求
$.post('http://www.baidu.com', {参数}, function(res) => {
       console.log(res, "请求到的数据")
})
橘颂_Wendy
关注
专栏目录
15天学会jquery(完整版)
04-28
15天学会jquery(完整版)
【jQuery】入门学习篇
最新发布
2201_75503057的博客
08-09 1514
【jQuery】入门学习篇
jquery基础
zhangxl5232的博客
12-07 246
1.页面中引入jquery 在head中，添加 2.jquery 部分语法  $(selector).action()   selector html元素  action 执行的操作     $(this).hide() //隐藏当前的html元素     $("#text").hide(); //隐藏id为text的原素     $("p").hide(); //隐藏所有元素
JQuery基础
jemery_Z的博客
09-28 422
0814 笔记JQuery基础 JQuery是JavaScript开发的js（函数）库，他并不是一个传统意义上的框架 + 库： 已封装定义好的函数库，只需要学习使用（函数） + 框架： 根据程序开发的设计模式设计的编码规范，需要在框架基础上进行开发。 + jQuery也是个开源项目 jQuery简介 jQuery极大的简化了JavaScript编程 jQuery很容易学习 提
jquery基础教程中文版2015
06-26
**jQuery基础教程中文版2015** jQuery是一款强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程，旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、...
jQuery基础文件
03-30
此“jQuery基础文件”压缩包包含了jQuery的三个主要版本：1.11.3，2.1.4和3.3.1。每个版本都有其特定的发布日期和功能特性，适合不同项目的需求。 1. jQuery 1.11.3： 这是jQuery 1.x系列的一个稳定版本，主要支持...
13jQuery基础使用与样式篇.docx
04-29
**jQuery基础使用与样式** jQuery 是一个广泛使用的 JavaScript 库，它简化了DOM操作、事件处理、动画设计和Ajax交互。在本文中，我们将探讨jQuery的基础使用，特别是关于选择器和样式的应用。 **一、jQuery选择器...
JQuery基础（一）
Simon郎的博客
03-23 594
一、 概念： 一个JavaScript框架。简化JS开发 百度定义：JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScr...
jQuery基础指南
"这是一本关于jQuery的袖珍参考手册，由David Flanagan编写，旨在帮助读者快速理解和掌握jQuery基础。该书由O'Reilly Media出版，适合教育、商业或促销用途。" jQuery是一种广泛使用的JavaScript库，它简化了网页的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值