关于JQuery引用及基本用法

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

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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="jquery-3.5.1.min.js"></script></head><body></body></html>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如何使用。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="jquery-3.5.1.min.js"></script></head><style>.box1 {width: 100px;height: 100px;background-color: red;

}</style><body><button id="btn1">点我隐藏元素</button><div class="box1"></div></body><script>$(document).ready(function(){

$("#btn1").click(function(){

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

})

})</script></html>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。

(0)

相关推荐

  • INDIRECT函数6大核心用法,把Excel间接引用体现得淋漓尽致

    专栏 48天,Excel技能脱胎换骨 作者:精进Excel ¥99 462人已购 查看 今天要学习的函数INDIRECT,它的功能间接引用,这样说可能比较抽象,一般人在脑海里很难有清晰的间接引用和直接 ...

  • 作文八大绝密拟题方法!引用化用法……

    高中语文学习助手 高考 作文 试卷  复习资料 高考志愿 标题怎么拟?很多小伙伴总是很苦恼 不用慌,帮大家总结了几个小套路 赶快用起来吧! 引用化用法 [标题范例]<不稼不穑,难成栋梁> ...

  • 数据库函数多条件求和、计数及多维引用的用法

    你好,我是刘卓.欢迎来到我的公号,excel函数解析.前天分享了数据库函数dsum和dcount的基础用法.今天来分享下它们的多条件求和.计数以及多维引用的用法. -01- 多条件求和计数 1.多条件 ...

  • 间接引用函数indirect的基本用法

    -01- 函数说明 indirect函数的语法如下,有2个参数: INDIRECT(ref_text, [a1]) ref_text:必需.对单元格的引用,此单元格包含A1样式的引用.R1C1样式的引 ...

  • if函数返回引用的用法

    if函数的用法已经说了很多了,今天来说最后一个用法--返回引用. -01- 返回引用 假如现在有这么一个问题:明天就是儿童节了,学校举行了个投篮活动.每个小朋友有3次投篮机会,1次是一分钟,看看谁投进 ...

  • 引用函数index的用法2——引用用法

    上次说了index函数的数组用法,今天说说它的引用用法.所谓引用用法,就是它返回的值既可以是值也可以是引用. -01- 函数说明 返回指定的行与列交叉处的单元格引用.如果引用由不连续的选定区域组成,可 ...

  • 引用函数index的用法1——数组用法

    index函数返回区域中的值或值的引用.它包含两种用法:一种是数组用法,另一种是引用用法.今天先说数组用法. -01- 函数说明 可以看到它有2种写法,第一种就是数组写法,意思是返回区域或数组中的元素 ...

  • 哈佛引用格式和参考书目格式的用法分析

    在阅读英语学术论文的过程中,我们经常可以看到论文文内的引用出处注释或结尾处的参考文献.哈佛引用格式是一种大学生在撰写论文时最常用的格式,不过大多数留学生对Harvard格式的用法缺乏了解,因此引用是一 ...

  • C语言中引用的用法

    C语言中引用的用法 引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样. 引用的声明方法:类型标识符 &引用名=目标变量名: [例1]:int a; int &r ...