当前位置:Gxlcms > JavaScript > JS框架库使用案例详解

JS框架库使用案例详解

时间:2021-07-01 10:21:17 帮助过:25人阅读

这次给大家带来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写成的,的可谓是青出于蓝而胜于蓝呀。

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

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

推荐阅读:

filter使用案例总结

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

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

人气教程排行