jQuery01

简介: jQuery01

一、jQuery基本介绍

jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。

1.1 JavaScript 库

仓库: 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。

JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。

简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)

常见的JavaScript 库

  • Prototype:是最早成型的JS库之一,对于JS的内置对象做了大量的扩展。
  • Do jo:提供了很多奇特JS库没有提供的功能。例如:离线存储的API,生成图标的组件等等。
  • YUI:是由Yahoo公司开发的一套完备的,扩展性良好的富交互网页程序工作集。
  • Ext JS:原本是对YUI的一个扩展,主要用于创建前端用户界面。
  • Moo Tools:是一套轻量、简洁、模拟化和面向对象的JS框架。
  • jQuery:同样是一个轻量级的库,拥有强大的选择器等更多优点,吸引了更多开发者去学习使用它。
  • 移动端的zepto

这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript 实现的,我们主要学习的是 jQuery。

1.1 What?

jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。

j 就是 JavaScript; Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。

jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

学习jQuery本质: 就是学习调用这些函数(方法)。

jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。

  • jQuery官网:jQuery
  • 一个优秀的 JS 函数库
  • 使用了jQuery的网站超过 90%
  • 中大型 WEB 项目开发首选
  • Write Less,Do More!!!

1.2 Why?

  • 轻量级。核心文件才几十kb,不会影响页面加载速度
  • 跨浏览器兼容。基本兼容了现在主流的浏览器
  • HTML 元素选取(选择器)
  • HTML 元素操作
  • CSS 操作
  • HTML 事件处理
  • JS 动画效果
  • 链式调用 a().b().c()...
  • 读写合一
  • 浏览器兼容
  • 易扩展插件
  • ajax 封装

1.3 Where?

  • 中大型网站开发
  • 是一些前端框架的基础,比如EasyUI,Bootstrap

1.4 How?

1. 引入jQuery

2. 使用jQuery


二、jQuery基本使用

2.1 jQuery版本

jQuery版本有很多,分为 1.x、2.x、 3.x

  • 1.x 版本:能够兼容 IE6, 7, 8 浏览器(不再更新版本)
  • 2.x 版本:不兼容 IE6, 7, 8 浏览器(不再更新版本)
  • 3.x版本:不兼容 IE6, 7, 8,更加的精简(在国内不流行,因为国内使用 jQuery 的主要目的就是兼容 IE6, 7, 8)

1.x 和 2.x 版本 jquery 都不再更新版本了,现在只更新3.x版本

2.2 jQuery下载

官网:jQuery

  • production (压缩过的版本,体积小,上线用)——生产版(压缩版)
  • develepment(未压缩版本,开发时使用,适合查找)——开发版(测试版)

2.3 使用 jQuery

  • 在页面中引入 jQuery 库
<!-- 服务器本地库 -->
<script src="./jquery-3.6.0.js"></script>
<!--
CDN远程库
    项目上线时,一般使用比较靠谱的CDN资源库,减轻服务器负担
    [https://www..cn/](https://www.bootcdn.cn/):搜索`jQuery`,复制`<script>`标签到项目中即可使用
-->
  • 在 script 标签中使用 jquery 语法即可,如:
<div>Content</div>
<script src="./jquery-3.6.0.js"></script>
<script>
    $('div').hide();
</script>

2.4 jQuery 闭包结构

打开jQuery库查看后 有一个基本架构如下

( function( global, factory ) {
} )();
  • 用一个函数域包起来,就是所谓的沙箱
  • 在这里边 var 定义的变量,属于这个函数域内的局部变量,避免污染全局
  • 把当前沙箱需要的外部变量通过函数参数引入进来
  • 只要保证参数对内提供的接口的一致性,你还可以随意替换传进来的这个参数。

jQuery 具体的实现,都被包含在了一个立即执行函数构造的闭包里面,为了不污染全局作用域,只在后面暴露 $ 和 jQuery 这 2 个变量给外界。

2.5 jQuery 的 2 把利器

// jQuery核心代码
(function(window){
    var jQuery = function(){
        return new jQuery.fn.init();
    }
    window.$ = window.jQuery = jQuery
})(window)

jQuery 核心函数

简称:jQuery函数($/jQuery),jQuery库向外直接暴露的就是$/jQuery

引入jQuery库后,直接使用即可

  • 当函数用:$(xxx)
  • 当对象用:$.xxx()
// jQuery函数:直接可用
console.log($, typeof $);  // ƒ ( selector, context ) {}    function
console.log(jQuery === $); // true

jQuery 核心对象

简称:jQuery对象

得到jQuery对象:执行jQuery函数返回的就是jQuery对象

使用jQuery对象:$obj.xxx()

// jQuery对象:执行jQuery函数得到它
console.log($(), typeof $(), $() instanceof Object); // jQuery.fn.init {} "object" true

2.5.1 jQuery 函数的使用

作为一般函数调用:$(param)

  1. 参数为函数:当 DOM 加载完成后,执行此回调函数
  2. 参数为选择器字符:查找所有匹配的标签并将它们封装成jQuery对象
  3. 参数为 DOM 对象:将 dom 对象封装成jQuery对象
  4. 参数为 html 标签字符串(用得少):创建标签对象并封装成jQuery对象

作为对象使用:$.xxx()

  • $.each():隐式遍历数组
  • $.trim():去除两端的空格
// 需求1.点击按钮:显示按钮的文本,显示一个新的输入框
// 1、参数为函数:当 DOM 加载完成后,执行此回调函数
$(function () { // 绑定文档加藏完成的监听
    // 2、参数为选择器字符:查找所有匹配的标签并将它们封装成`jQuery`对象
    $("#btn").click(function () {
        // alert(this.innerHTML); // this是什么?发生事件的dom元素(<button>)
        // 3、参数为 DOM 对象:将 dom 对象封装成`jQuery`对象
        alert($(this).html());
        // 4、参数为 html 标签字符串(用得少):创建标签对象并封装成`jQuery`对象
        $('<input type="text" name="msg3"><br/>').appendTo("div");
    });
    // 需求2.遍历输出数组中所有元素值
    var arr = [3, 7, 4];
    $.each(arr, function (index, item) {
        console.log(index, item); // 0 3    1 7    2 4
    });
})

2.5.2 jQuery 对象的使用

理解

即执行jQuery核心函数返回的对象

jQuery对象内部包含的是 dom 元素对象的伪数组(可能只有一个元素)

jQuery对象拥有很多有用的属性和方法,让程序员能方便的操作 dom

属性和方法

  • 基本行为:操作标签的基本方法
  • 属性:操作内部标签的属性或值
  • CSS:操作标签的样式
  • 文档:对标签进行增删改操作
  • 筛选:根据指定的规则过滤内部的标签
  • 事件:处理事件监听相关
  • 效果:实现一些动画效果

这里我们先学习jQuery对象的基本行为,其他的不放在当前章节中

2.6 入口函数

一般代码写在页面底部,等元素加载完,才能执行 jQuery 代码,或者可以使用下方入口函数解决

<script src="./jquery-3.6.0.js"></script>
<script>
    $(document).ready(function () {
        //
    });
</script>

等待页面 DOM 加载完毕后执行,相当于原生 js 中 DOMContentLoaded

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

<script src="./jquery-3.6.0.js"></script>
<script>
    $().ready(function() {
        //
    });
</script>

jQuery 入口函数与 window.onload 的对比

  • JavaScript 的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
  • jQuery 的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。

三、选择器

jQuery 选择器是 jQuery 为我们提供的一组方法,让我们更加方便的获取到页面中的元素

3.1 基本选择器

名称 用法 描述
ID选择器 $('#id'); 获取指定ID的元素
类选择器 $('.class'); 获取同一类class的元素
标签选择器 $('div'); 获取同一类标签的所有元素
并集选择器 $('div,p,li'); 使用逗号分隔,只要符合条件之一就可。
交集选择器 $('div.redClass'); 获取class为redClass的div元素
属性选择器 $('input[name=username]') 获取 input 标签中 name 属性为 username 的元素

注意:jQuery选择器返回的是jQuery对象。

<script type="text/javascript">
    //常用选择器
    //根据id获取元素 获取到的结果:类数组对象
    console.log( $('#div0') );
    console.log( $('#div0')[0] );
    //根据class获取元素
    console.log( $('.div_1') );
    //根据标签名称来获取元素
    console.log( $('div') );
    //根据属性获取元素
    console.log( $('input[name=username]') );
    //根据表单元素属性获取元素
    console.log( $(':checked') );
</script>

3.2 层级选择器

名称 用法 描述
子代选择器 $('ul > li'); 使用 > 号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器 $('ul li'); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

3.3 过滤选择器

这类选择器都带冒号:

名称 用法 描述
:eq(index) $('li:eq(2)').css('color', 'red'); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
:odd $('li:odd').css('color', 'red'); 获取到的li元素中,选择索引号为奇数的元素
:even $('li:even').css('color', 'red'); 获取到的li元素中,选择索引号为偶数的元素

3.4 jQuery 筛选方法

  • 筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
名称 用法 描述
children(selector) $('ul').children('li') 相当于$('ul>li'),子类选择器
find(selector) $('ul').find('li'); 相当于$('ul li'),后代选择器
siblings(selector) $('#first').siblings('li'); 查找兄弟节点,不包括自己本身。
parent() $('#first').parent(); 查找父亲
parents() $('li').parents(); 查找祖先元素
eq(index) $('li').eq(2); 相当于$('li:eq(2)'),index从0开始
next() $('li').next() 找下一个兄弟
prev() $('li').prev() 找上一次兄弟
closest $('li').closest('ul') 找最近一个祖先元素

3.5 this 和 当前索引

在对象的事件中,(this)表示当前操作的jQuery对象,(this) 表示当前操作的 jQuery 对象,(this).index() 表示当前元素的索引号

$("li").click(function () {
    console.log($(this).index());
}

3.6 案例

案例:点击按钮获取输入框中的值(JS对比jQuery)

案例:分别使用基本选择器,改变元素的背景颜色和字体颜色(div、p、span)

案例:使用层次选择器,选择某个元素下面的所有元素和子元素

案例:使用过滤选择器,选择li中的元素

案例:表格隔行换色

案例:获取表单中的单选、多选、下拉值

案例:下

<!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;
      }
      li {
        list-style-type: none;
      }
      a {
        text-decoration: none;
        font-size: 14px;
      }
      .nav {
        margin: 100px;
      }
      .nav > li {
        position: relative;
        float: left;
        width: 80px;
        height: 41px;
        text-align: center;
      }
      .nav li a {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 41px;
        color: #333;
      }
      .nav > li > a:hover {
        background-color: #eee;
      }
      .nav ul {
        display: none;
        position: absolute;
        top: 41px;
        left: 0;
        width: 100%;
        border-left: 1px solid #fecc5b;
        border-right: 1px solid #fecc5b;
      }
      .nav ul li {
        border-bottom: 1px solid #fecc5b;
      }
      .nav ul li a:hover {
        background-color: #fff5da;
      }
    </style>
  </head>
  <body>
    <ul class="nav">
      <li>
        <a href="#">微博</a>
        <ul>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
        </ul>
      </li>
    </ul>
    <script src="./jquery-3.6.0.js"></script>
    <script>
      $(function () {
        // 鼠标经过
        $(".nav>li").mouseover(function () {
          // 显示元素(this 表示当前元素)
          $(this).children("ul").show();
        });
        // 鼠标离开
        $(".nav>li").mouseout(function () {
          $(this).children("ul").hide();
        });
      });
    </script>
  </body>
</html>
//案例:排他思想
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function() {
                // 2. 当前的元素变化背景颜色
                $(this).css("background", "pink");
                // 3. 其余的兄弟去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
            });
        })
    </script>
</body>
</html>
//链式编程
$(this).css("color", "red").siblings().css("color", "");


目录
相关文章
|
11月前
|
存储 JavaScript 前端开发
JQuery
JQuery
105 0
|
5月前
|
JavaScript 前端开发
jQuery
jQuery 选择器是 jQuery 中的核心功能之一,它允许我们通过 CSS 选择器语法来选择 HTML 文档中的元素。jQuery 选择器比 CSS 选择器更加强大,因为它可以用于查找、筛选、选择和操作 HTML 元素,而且不需要了解浏览器的兼容性问题。
32 2
|
17天前
|
JavaScript 前端开发
JQuery 什么是JQuery?
JQuery 什么是JQuery?
29 0
|
2月前
|
设计模式 JavaScript 前端开发
什么是Jquery?
什么是Jquery?
|
10月前
|
JavaScript
jQuery_01
jQuery_01
42 0
|
JavaScript
|
JavaScript 前端开发 Go
html+js+Jquery(三)
html+js+Jquery(三)
170 1
html+js+Jquery(三)
|
JavaScript 前端开发
用jQuery写一个简单的跑酷游戏
jQuery写一个跑酷游戏,让小车在地面即可得分,代码不复杂,通俗易懂,十分合适拿来入门练手。在文章下面附上代码链接,水平有限,欢迎沟通。
334 0
用jQuery写一个简单的跑酷游戏
|
JavaScript 前端开发 数据安全/隐私保护
jQuery 使用
1. jQuery jQuery的字面意思其实就是JavaScript和查询(Query),即用于辅助开发JavaScript的库。jQuery是继prototype之后的又一个优质的Javascript库,属于开源编程语言。
1838 0
|
JSON JavaScript 前端开发