专栏首页cwl_Java前端基础-jQuery简介

前端基础-jQuery简介

jQuery

第1章 jQuery简介

1.1 JavaScript库的概念

JavaScript开发的过程中,处理浏览器的兼容很复杂而且很耗时,于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)

常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是最常用的一个

jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。

1.2 jQuery的优点好处

jQuery设计的宗旨是'Write Less,Do More',即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的操作,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。
极大地简化了 JavaScript 编程。

1.3 jQuery的版本

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

1.x版本:能够兼容IE678浏览器
2.x版本:不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。
3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)

国内多数网站还在使用1.x的版本

[jQuery官网](http:// jquery.com)

1.4 体验jQuery

案例:显示与设置内容

	<input type="button" value="显示" id="btn1">
	<input type="button" value="结束" id="btn2">

    <div>请欣赏动画</div>
	<div>千呼万唤始出来</div>
	<img src="img/1.jpg" style="display:none">
	<img src="img/2.jpg" style="display:none">
        
	<script type="text/javascript" src="jquery.js"></script>
	<script>
		$(document).ready(function () {
		    $('#btn1').click(function () {
		        $('img').show(2000);
		    });

		    $('#btn2').click(function () {
		        $('div').text('下集再见');
		        $('img').hide(2000);
		    });
		});
	</script>

优点总结:

-查找元素的方法多种多样,非常灵活
-拥有隐式迭代(自动循环遍历)特性,因此不再需要手写for循环了。
-完全没有兼容性问题。
-实现动画非常简单,而且功能更加的强大。
-代码简单、粗暴。

1.5 jQuery中顶级对象

jQuery中的顶级对象是$或jQuery

用于:
获取jQuery对象
入口函数(页面加载事件)
高级功能

注意:jQuery中的$和JQuery关键字本身为同一对象;

$ 可以认为就是 一个特殊构造函数  ; 可以使用$(选择器) 方式调用$,得到一个对象,在对象上可以调用$的实例方法
也可以使用$.方法名  调用静态方法。  比如 遍历数组对象的  $.each() 相当于for循环

1.6 jQuery中页面加载事件

使用jQuery的三个步骤:

引入jQuery文件
入口函数(定义页面加载事件)
功能实现

关于jQuery的入口函数:

// 第一种写法
$(document).ready(function() {
	
});
// 第二种写法
$().ready(function() {
	
});
// 第三种写法
$(function() {
	
});

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 快速学习HDFS2.X新特性

    (2)归档文件 把/user/atguigu/input目录里面的所有文件归档成一个叫input.har的归档文件,并把归档后文件存储到/user/atgui...

    cwl_java
  • 快速学习Docker-Docker镜像和仓库

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • 快速学习-Http客户端工具

    既然微服务选择了Http,那么我们就需要考虑自己来实现对请求和响应的处理。不过开源世界已经有很多的http客户端工具,能够帮助我们做这些事情,例如:

    cwl_java
  • 【深入浅出jQuery】源码浅析--整体架构

    Sb_Coco
  • 2019 年了,为什么我还在用 jQuery?

    为了保证可读性,本文采用意译而非直译。翻译仅供学习探讨,不代表 Fundebug 观点。

    Fundebug
  • jquery学习笔记1

    // 核心方法 // 回调系统 // 异步队列 // 数据缓存 // 队列操作 // 选择器引 ...

    lilugirl
  • jQuery架构设计与实现(2.1.4版本)

    貟王軍
  • 我们到底需不需要 jQuery

    曾经,在那个 IE6 还是主流浏览器的时代,为了实现稍微复杂一点的功能,也需要很多代码。如果要做到兼容主流浏览器,更需大费周章。当 jQuery 出现后,使用 ...

    Joel
  • Github改版,宣布放弃jQuery || 你的青春里,是否有过 JQuery 的身影?

    2018年7月25日,Mislav Marohnić在推文中宣布GitHub前端已经彻底删除jQuery依赖,并全部依赖原生API。

    芋道源码
  • 有空看看jQuery源码吧,看不懂也会有收获

    jQuery是一个对新人很亲切的JS库,它的源码风格都比较接近自然语言,可以一边对照手册,一边查看jQuery源码。第一次看必然很吃力,不过没关系,这就是学习的...

    web前端教室

扫码关注云+社区

领取腾讯云代金券