JavaScript进阶内容——jQuery

我们在前面的文章中已经掌握了JavaScript的全部内容，现在让我们了解一下JavaScript库

这篇文章主要是为了为大家大致讲解JavaScript库以及使用方法，本篇不会完全讲解jQuery的全部语法

如果希望完全掌握，可以参考网站jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

JavaScript库

JavaScript库：

• 即library，是一个封装好的特定的集合（包括许多属性和方法）。
• 从封装一大堆函数的角度来理解库，就相比于Java的类，里面封装了许多方法，我们可以直接导入并且调入其方法
• 简单理解：就是一个JS文件，里面对我们的原生JS代码进行了封装，存放在里面，这样我们就可以快速高效的使用这些封装好的功能
• 比如jQuery，就是为了快速操作DOM对象，里面封装的基本都是函数（方法）

常见的JavaScript库：

• jQuery
• Prototype
• YUI
• Dojo
• Ext JS
• zepto

jQuery概述

jQuery概念：

• jQuery是一个快速，简洁的JavaScript库，其设计的宗旨是：“Write Less，Do More”，即提倡更少的代码做更多的事

jQuery优点：

• 轻量级，核心文件只有不到100kb，不会影响页面加载速度
• 跨浏览器兼容，基本兼容所有浏览器
• 链式编程，隐式迭代
• 对事件，样式，动画，大大的简化了DOM操作
• 支持插件开发拓展，支持第三方软件
• 免费且开源

jQuery基本格式：

• $(选择器).action()

jQuery使用顺序

jQuery是开源的JS文件代码，我们需要先获得其JS文件，才能够使用

1. 在官网中下载jQuery的JS文件，或者复制其代码，自定义一个jQuery代码

2. 在我们需要使用jQuery的文件中导入该JS文件

jQuery入口函数

jQuery的使用位置和JavaScript的使用位置一样，都是在script中进行，同样存放在body底部

$(function(){
	...//页面DOM加载完成后进行
})

$(document),ready(function(){
	...//页面DOM加载完成后进行
})

上述两种方法可以使jQuery的书写位置任意存放

• 等待DOM结构渲染完毕后即可执行内部代码，不必等到所有外部资源加载完毕，jQuery帮我们完成了封装
• 相当于原生JS中的DOMContentLoaded
• 更推荐第一种方法（简单快捷）

代码展示：

jQuery的顶级对象$

我们在这里介绍一下jQuery出场率最高的$符号：

• $是jQuery的别称，在代码中我们可以用$代替jQuery，但一般为了方便，我们习惯写$
• $是jQuery的顶级对象，类似于JavaScript中的window对象，把元素利用$包装成jQuery对象，就可以调用jQuery的方法

代码展示：

jQuery对象和DOM对象以及互相转换

我们需要注意jQuery对象和DOM对象是两种完全不同的对象：

• 用原生JS获得来的对象就是DOM对象
• 用jQuery获得来的对象就是jQuery对象
• jQuery对象的本质是： 利用$对DOM对象包装后产生的对象（伪数组形式存储）

代码展示：

虽然两种对象不尽相同，但我们仍旧可以进行转换：

• DOM对象 -> jQuery对象

$('选择器') == $(DOM对象)

• jQuery对象 -> DOM对象

$('选择器')[index]
$('选择器').get(index)

注意：因为原生JS比jQuery更大，原生的一些属性和方法jQuery并没有封装，所以如果想使用这些属性和方法就需要把jQuer对象转换为DOM对象才能使用

代码展示：

jQuery选择器

jQuery的选择器与CSS的选择器完全相同：

• 标签选择器
• 类选择器
• ID选择器
• 层次选择器
• 兄弟选择器

代码展示：

如果想要了解更多选择器，可以访问页面：https://jquery.cuishifeng.cn/index.html

jQuery事件

jQuery的鼠标事件和键盘事件与JavaScript原生代码事件完全相同：

代码展示：

    
    
    
    
    

    
    


    mouse: 
    


    

如果想要了解更多事件，可以访问页面：https://jquery.cuishifeng.cn/index.html

jQuery操作DOM元素

对于DOM元素的操作分为许多种，下面仅做出实例介绍：

1. 节点文本操作：

   // 这里获得值
   $('').text();
   // 这里设置值
   $('').text('');
   // 这里获得值
   $('').html();
   // 这里设置值
   $('').html('');
   

2. CSS操作：

   $('').css(''，'');
   $('').css({'':'','':''});
   

3. 元素的显示和隐藏（本质是display：block/none）

   //元素隐藏
   $('').hide();
   //元素显示
   $('').show();
   

代码示例：

    
    
    
    
    


    

        
Java
        
JavaScript
    

    

如果想要了解更多操作，可以访问页面：https://jquery.cuishifeng.cn/index.html

结束语

关于jQuery的内容我们仅做出相关介绍，后期我会出一期jQuery的常用操作，希望可以为你带来帮助！