多选参数

  • 首页
  • 我们
  • 作者区
  • 内容区

微信扫一扫
关注该公众号

前端

jQuery学习

  • 阳哥
发布于 2020-04-25

什么是 jQuery

1.jQuery 是一个快速、简洁的 JavaScript 框架,是继 Prototype 之后又一个优秀的 JavaScript 代码库(或 JavaScript 框架)。
2.jQuery 设计的宗旨是 “write Less,Do More”,即倡导写更少的代码,做更多的事情。
3.优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

体验 jQuery

原生 js 代码:

1
2
var div = document.getElementsByClassName("mydiv");
div.style.backgroundColor = "red";

使用 jQuery 后

1
2
3
4
$(document).ready(function () {
// 查询,操作CSS一步到位
$(".mydiv").css('background', 'red');
});

为什么要使用 jQuery

  1. 强大的选择器:能够快速找到 DOM 元素

    · 如上面实例所展示一样,通过 jQuery 查找 DOM 元素要比原生 js 快捷很多

  2. 链式调用: 可以通过.不断调用 jQuery 对象的方法

    · jQuery 可以通过.(点)不断调用 jQuery 对象的方法,而原生 JavaScript 则不一定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
       
    // 1.原生JavaScript
    var div = document.getElementsByClassName("mydiv");
    // 报错,必须分开写
    div[0].style.backgroundColor = "red".width = 200+"px";
    // div[0].style.width = 200+"px";

    // 2.jQuery
    $(document).ready(function () {
    // 不报错,后面还可以接着继续写
    $(".mydiv").css('background', 'yellow').css('width', '200px');
    });

    · 隐式遍历(迭代): 一次操作多个元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
    // div.style.backgroundColor = "red";// 无效
    for(var i = 0; i<div.length; i++){
    div[i].style.backgroundColor = "red";
    }

    // 2.jQuery
    $(document).ready(function () {
    // 隐式遍历(迭代)找到的所有div
    $("div").css('background', 'yellow');
    });

    · 读写合一: 读数据/写数据使用是一个函数

    1
    2
    3
    4
    5
    6
    7
    8
       
    $(document).ready(function () {
    // 读取数据
    var $tx = $("div").eq(0).text();
    alert($tx);
    // 写入数据
    $("div").eq(0).text("新的数据");
    });

    · 事件处理

    · DOM 操作(增改删)

    · 样式操作

    · 动画

    · 丰富的插件支持

    · 浏览器兼容(前端开发者痛点)

jQuery 的安装

1.网页中添加 jQuery

​ ·直接从 CDN 引用(推荐使用)

1
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

2.从官网下载 jQuery

下载后在 html 文件中直接引用,注意存放文件的地址要写对。

1
<script src="jquery-1.10.2.min.js"></script>
  • 阳哥
Newer

jQuery学习

Older

新手村:Redis进阶篇三——主从复制

天水茫茫工作室 © 2021 MultiParam

浙ICP备19031106号