JS框架库使用案例详解

php中世界最好的语言 原创: 2018-06-04 17:24:27 1170浏览

这次给大家带来JS框架库使用案例详解，JS框架库使用的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

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写成的，的可谓是青出于蓝而胜于蓝呀。

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

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