jQuery基本介绍及使用

一、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

二、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下载

官网:https://jquery.com/

  • production (压缩过的版本,体积小,上线用)——生产版(压缩版)

  • develepment(未压缩版本,开发时使用,适合查找)——开发版(测试版)

2.3 使用 jQuery

  • 在页面中引入 jQuery 库

<!-- 服务器本地库 -->

<scriptsrc="./jquery-3.6.0.js"></script>

<!--

CDN远程库

项目上线时,一般使用比较靠谱的CDN资源库,减轻服务器负担

[https://www.bootcdn.cn/](https://www.bootcdn.cn/):搜索`jQuery`,复制`<script>`标签到项目中即可使用

-->

  • 在 script 标签中使用 jquery 语法即可,如:

<div>Content</div>

<scriptsrc="./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){
    varjQuery=function(){
        returnnewjQuery.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$(), $() instanceofObject); // jQuery.fn.init {} "object" true

2.5.1 jQuery 函数的使用

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

  1. 参数为函数:当 DOM 加载完成后,执行此回调函数

  1. 参数为选择器字符:查找所有匹配的标签并将它们封装成jQuery对象

  1. 参数为 DOM 对象:将 dom 对象封装成jQuery对象

  1. 参数为 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.遍历输出数组中所有元素值
    vararr= [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 代码,或者可以使用下方入口函数解决

<scriptsrc="./jquery-3.6.0.js"></script>
<script>
    $(document).ready(function () {
        //
    });
</script>
等待页面 DOM 加载完毕后执行,相当于原生 js 中 DOMContentLoaded

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

<scriptsrc="./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对象。

<scripttype="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).index() 表示当前元素的索引号

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

供各位猿友参考学习,有错误请私信,感谢指出!!!

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ChatYU.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值