当前位置:首页 > 技术分析 > 正文内容

关于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。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/4674.html

标签: jq添加元素
分享给朋友:

“关于JQuery引用及基本用法” 的相关文章

Vue.js 组件通信的 3 大妙招

在 Vue.js 中,组件化是其核心概念之一,允许你将复杂的界面拆分成多个独立的、可复用的组件。在构建大型应用时,如何高效地在组件之间传递数据和触发事件是非常重要的。Vue.js 提供了多种方式来处理组件间的通信,下面是最常用的 3 种方式:1.父子组件通信:通过 Props 和 Events在 V...

gitlab简单搭建与应用

一、gitlab1、简介GitLab是利用Ruby on Rails一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。与Github类似,GitLab能够浏览源代码,管理缺陷和注释。可以管理团队对仓库的访问,它非常易于浏览提交过的版本并提供一个文件历...

30 个纯 HTML5 实现的游戏

浏览器和 JavaScript 的功能逐年不断的变强变大。曾几何时,任何类型的游戏都需要Flash。但随着 HTML5 发展,HTML5 + WebGL 游戏式就慢慢占领着这个舞台。以下是30款流行的游戏,它们可以在所有现代浏览器中运行,并且只使用web技术构建。1. HexGL地址:http://...

Solid State Logic 发布低保真数字失真插件 Digicrush

Solid State Logic 宣布推出低保真数字失真插件 Digicrush ,他们最新的创意工具具有经典数字失真的粗糙、低保真特性,完美模拟早期数字音频的衰减和伪影。Digicrush 充满怀旧气息,深受经典数字采样器和效果器的影响,具有内置抖动、可调比特深度和采样率降低功能,是为音轨添加复...

Vue学习笔记之动态路由的参数传递应用及技巧

路由的参数传递:①通过params的类型· 配置路由格式:/router/:id· 传递的方式:在path后面跟上对应的值· 传递后形成的路径:/router/list,/router/profile这个就是前两篇中提到的"动态路由"中有应用过这个方法:②通过query的类型(对象方...

thinkphp8+vue3微信小程序商城,发布公众号App+SAAS+多商户

项目介绍三勾小程序商城基于thinkphp8+vue3+element-ui+uniapp打造的面向开发的小程序商城,方便二次开发或直接使用,可发布到多端,包括微信小程序、微信公众号、QQ小程序、支付宝小程序、字节跳动小程序、百度小程序、android端、ios端。支持主题色+自定义头部导航+自定义...