欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

JS框架库使用案例详解

程序员文章站 2022-05-18 13:30:15
...
这次给大家带来JS框架库使用案例详解，JS框架库使用的注意事项有哪些，下面就是实战案例，一起来看一下。

jquery是 JS 封装 简化了 ajax 和dhtml 的 一款JS框架。简单来说 Jquery 是基于 js 语言的 一个框架。 (js框架)

下面我们一起来学习一下JS的基本框架---jQuery。

JS框架库使用案例详解

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器，并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

引用 jQuery

测试 JavaScript 库，您需要在页面中引用它。

为了引用某个库，请使用 <script> 标签，其 src 属性设置为库的 URL：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>//src就是jquery.js文件的具体位置，记得使用前一定要把该文件导入到web项目下并在页面中引入哦
</head><body></body></html>

jQuery 描述

主要的 jQuery 函数是 $() 函数（jQuery 函数）。如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。

jQuery 允许您通过 CSS 选择器来选取元素。

在 JavaScript 中，您可以分配一个函数以处理窗口加载事件：

JavaScript 方式：

function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;

JQuery 方式：

function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

上面代码的最后一行，HTML DOM 文档对象被传递到 jQuery ：$(document)。

当您向 jQuery 传递 DOM 对象时，jQuery会返回以 HTML DOM 对象包装的 jQuery 对象。

jQuery 函数会返回新的 jQuery 对象，其中的 ready() 是一个方法。

由于在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

提示：jQuery 返回 jQuery 对象，与已传递的 DOM 对象不同。jQuery 对象拥有的属性和方法，与 DOM 对象的不同。您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。

举个栗子：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
function myFunction()
{
$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
//输出结果 Hello jQuery
<body></body></html>

最后总结一下：

JQuery相对于JS而言，JQuery的优点在于：

1，丰富的选择器，更加方便的控制页面文档中的标签元素。

2，代码量的大量减少，简化了大量的冗长的代码，让学习者觉得通俗易懂。

3，大量的动画效果与事件控制方法，真正的完善了JS关于动态页面的概念。

4，JQuery的语言风格更加的方便，更加平易近人。它是JS的框架类库，用JS写成的，的可谓是青出于蓝而胜于蓝呀。

两个方法没有 太大本质上的区别，大家凭自己的喜好进行选择。

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

filter使用案例总结

实战项目编译后不在根目录怎么办

以上就是JS框架库使用案例详解的详细内容，更多请关注其它相关文章！

相关标签： javascript 详解 案例

上一篇： javascript 返回数组中不重复的元素_javascript技巧

下一篇： 网站问题

推荐阅读