关于JQuery引用及基本用法

boyanx9个月前技术教程49

在JQuery文件中下载,并将其引入html文件。在使用jQuery之前,我们需要到jQuery的官方网站:“
https://jquery.com/download/”

把下载好的文件放到工程根目录下,然后在这个根目录下创建index.html文件。最后,将下载的JQuery文件引入index.html文件,其代码如下:













Document

<script src="jquery-3.5.1.min.js"></script>













1234567891011121314151617181920212223242526272829复制代码类型:[html]

通过引入script标签,JQuery被引入到subject的subject中,subject是:

接下来,我们将研究JQuery的基本语法,并对其进行一些介绍。

示例1:$("div").hide();此行表示隐藏div元素;

例子2:$(".box1").hide();这行代码意味着class属性隐藏在box1的元素中;

示例3:$("#wrap").hide();这行代码表示隐藏元素id的值为wrap;

示例4:$("hide.box1").hide();这一行代码意味着,隐藏带有box1的cycle属性的hv元素;

从上面的例子中可以看出,JQuery语法非常简单,只需要一个美元符号$,后面跟着一个html的元素选择符(与我们之前学到的css选择符高度一致),然后在后面加上JQuery的方法,例如hide(show等等)。

无论显示或隐藏元素时,都需要一个事件来触发该动作,我们常用的触发方式是鼠标点击,比如你用鼠标点击一个按钮,然后页面上就会弹出一个提示框,通过点击来触发效果,我们称之为“事件”。点击JQuery中事件的书写方式为:$("div").click(function(){...}),此代码意味着在div标签被点击之后触发事件,具体事件内容以函数形式写入。除单击事件外,JQuery还可以通过鼠标移动事件、双击事件、元素获取焦点事件等方式进行学习,后面我们将一一介绍,并查看JQuery如何使用。







Document

<script src="jquery-3.5.1.min.js"></script>











<script> $(document).ready(function(){ $("#btn1").click(function(){ $(".box1").hide(); }) }) </script> 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253复制代码类型:[html]

在以上代码中,我们定义了一个button元素,一个div元素,然后点击按钮button,这个div元素就会被隐藏起来,各位同学可以尝试一下。在代码的最后一部分,包含了一段script标签,这段是JavaScript代码,所有的JavaScript代码都将被放置在script标签中以执行。

接下来是代码的第一句话:$(document).ready(function){...},这是JQuery的固定写法,意思是页面加载后立即执行,执行代码被写入function函数的方法中(即{}内)。我们已经看到了这一方法。

$("#btn1").click(函数){

$(".box1").hide();

})

这个代码就是我们前面提到的click事件,当单击id值为btn1的按钮时,会引发一个click元素的隐藏事件,click元素的名字叫做box1。

标签: jquery下载

相关文章

用户界面框架jQuery EasyUI示例大全之Application

jQuery EasyUI最新试用版免费下载>jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery...

使用jQuery开发一个带有密码强度检验的超酷注册页面

在线演示1本地下载在今天的jQuery教程中,我们将介绍如何使用jQuery和其它相关的插件来生成一个漂亮的带有密码强度检验的注册页面,希望大家喜欢!相关的插件和类库complexify- 一个密码强...

DrawSVG – SVG 路径动画 jQuery 插件

jQuery DrawSVG 使用了 jQuery 内置的动画引擎实现 SVG 路径动画,用到了 stroke-dasharray 和 stroke-dashoffset 属性。DrawSVG 是完全...

jQuery EasyUI使用教程:创建展开行详细编辑表单的CRUD应用

当切换datagrid视图到"detailview"时,用户可以展开一行来显示该行下面的任何详细信息。此功能允许用户为放置在行详细信息面板中的编辑表单提供恰当的布局。在本教程中,我们使用DataGri...

jQuery

jQuery介绍jQuery是对JavaScript的封装,它是免费、开源的JavaScript函数库,jQuery 极大地简化了 JavaScript 编程jQuery和JavaScript它们的作...

一文说明白,jQuery是干什么的

● jQuery于2006年1月由John Resig在BarCamp NYC首次发布。它目前由Timmy Wilson领导, 并由一组开发人员维护。● jQuery是一个JavaScript库,它简...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。