JavaWeb = jQuery使用详解

最新推荐文章于 2021-10-26 10:19:43 发布

hnbyboy

最新推荐文章于 2021-10-26 10:19:43 发布

阅读量791

点赞数 1

分类专栏： JavaWeb 文章标签： jquery js css html

本文链接：https://blog.csdn.net/appandroid/article/details/105432478

版权

jQuery 是一个优秀的 javascript 的轻量级框架之一，封装了 dom 操作、事件、页面动画、异步操作等功能。

特别值得一提的是基于 jquery 的插件非常丰富，大多数前端业务场景都有其封装好的工具框架

Look for Less，Do More

一。jQuery概述

1.jQuery概述

jQuery 是一个优秀的 javascript 的轻量级框架之一，封装了 dom 操作、事件、页面动画、异步操作等功能。

特别值得一提的是基于 jquery 的插件非常丰富，大多数前端业务场景都有其封装好的工具框架

2.jQuery版本

1.x ：兼容 IE678 ，使用最为广泛的，官方只做 BUG 维护，功能不再新增。因此一般项目来说，使用 1.x 版

本就可以了，最终版本： 1.12.4 (2016 年 5 月 20 日 )

2.x ：不兼容 IE678 ，很少有人使用，官方只做 BUG 维护，功能不再新增。如果不考虑兼容低版本的浏览器

可以使用 2.x ，最终版本： 2.2.4 (2016 年 5 月 20 日 )

3.x ：不兼容 IE678 ，只支持最新的浏览器。除非特殊要求，一般不会使用 3.x 版本的，很多老的 jQuery 插

件不支持这个版本。目前该版本是官方主要更新维护的版本

开发版本与生产版本，命名为 jQuery-x.x.x.js 为开发版本，命名为 jQuery-x.x.x.min.js 为生产版本，开发版

本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩

进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小。

jQuery下载和版本介绍

官网地址：http://jquery.com

注意事项：如果公司使用的老版本插件，我们jq升级后，可能会让插件失效....

* jquery-x.js 开发版本：有良好的缩进格式和注释，方便开发者阅读

* jquery-x.min.js 生产版本：代码进行压缩，体积小方便网络传输

jq本质上就是js的一个类库文件，我们使用它时，进行引入，就可以简化代码*

3.自定义js框架：

框架（Framework）是完成某种功能的半成品，抽取重复繁琐的代码，提供简洁强大的方法实现。

abc.js

// 抽取获取id的方法
function jQuery(id) {
return document.getElementById(id);
}
// 简化名称方案
function $(id) {
return document.getElementById(id);
}

引入外部文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="../js/abc.js"></script>
</head>
<body>
<div id="myDiv">世界上最遥远的距离不是生与死，而是你亲手制造的BUG就在你眼前，你却怎么都找不到她。</div>

<script>
    // 通过js原生的方式
    // document.getElementById('myDiv').innerHTML='我是js修改的内容';

    // jQuery('myDiv').innerHTML='我是js修改的内容';
    $('myDiv').innerHTML='哈哈我是自定义js文件';

</script>
</body>
</html>

二。jQuery语法

1.jQuery环境引入

jQuery(一个快速、简洁的JavaScript框架)

<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>

<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>

<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML引入Jquery</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">世界上最远的距离，是我在if里你在else里，虽然经常一起出现，但却永不结伴执行。</div>

<script>
    // 获得div标签的jq对象
    $('#myDiv').html('我是jq修改的内容')
</script>
</body>
</html>

jQuery与js的区别

jQuery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。

通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。两者的关系与区别总结如下：

1. jQuery对象与js对象相互转换
	js --> jq
		$(js对象) 或者 jQuery(js对象)
	jq --> js
		jq对象[索引] 或者 jq对象.get(索引)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jq与js对象相互转换</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">通过不同方式获得文本内容</div>

<script>
    // 通过js方式修改文本内容
    let myDiv = document.getElementById('myDiv');
    // myDiv.innerHTML='我是js方式修改的';

    // 通过jq方式修改文本内容
    let $myDiv = $('#myDiv');
    // $myDiv.html('我是jq方式修改的')

    // js对象和jq对象的：属性和方法不同通用
    // myDiv.html('js操作jq函数');
    // $myDiv.innerHTML='jq操作js属性';


    // js -- 转换为 jq对象
    // $(myDiv).html('js变成jq对象');

    // jq 转换为 js对象  注意：jq对象本质上是数组，数组的每一个元素就是js原生对象
    console.log($myDiv.length);
    $myDiv[0].innerHTML='jq变成js对象';

</script>
</body>
</html>

2. 页面加载事件
	js
		window.onload=function(){}
	jq
		$(function(){})
	区别
		js：只能定义一次，如果定义多次，后加载会进行覆盖
		jq：可以定义多次

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面加载事件</title>
    <script src="../j

最低0.47元/天解锁文章

hnbyboy

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb = jQuery使用详解

jQuery是一个优秀的javascript的轻量级框架之一，封装了dom操作、事件、页面动画、异步操作等功能。特别值得一提的是基于jquery的插件非常丰富，大多数前端业务场景都有其封装好的工具框架一。jQuery概述1.jQuery概述jQuery是一个优秀的javascript的轻量级框架之一，封装了dom操作、事件、页面动画、异步操作等功能。特别值得一提...
复制链接

扫一扫