从cdn引入jQuery库:https://www.bootcdn.cn/,搜索jQuery

在html里面(使用之前计算器的脚本),把复制的标签粘贴到引入js标签的前面:<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>

在js里面使用jQuery:在js里面使用的时候固定格式,$(),类似于python里面的if __name__ == '__main__'

$(function () {
console.log('这是jQuery的打印')
});

访问

jquery-语法
$(this).hide:演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
$("#test").hide():演示jQuery hide() 函数,隐藏 id="test" 的元素。
$("p").hide():演示 jQuery hide() 函数,隐藏所有 <p> 元素。
$(".test").hide():演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。

html():取得第一个匹配元素的html内容
html(val):设置每一个匹配元素的html内容
text():取得所有匹配元素的内容。
text(val):设置所有匹配元素的文本内容
val():获得第一个匹配元素的当前值
val(val):设置每一个匹配元素的值

html里面的input标签

在js里面,给input标签绑定click事件

请求,并点击

把点击的值赋给点击的时候显示

把顶部改为输入框,并设置一个id属性

js里面进行点击的时候赋值

//定义一个获取当前被点击的元素的值的函数
function click_calulator(){
console.log($(this).val()) //输出当前被点击的元素的值,$(this)指当前对象
$('#display').val($(this).val()) //把当前点击获取到的值赋给id为display的元素
} $(function () {
//采用表亲选择器选中所有input标签,对其增加点击事件
//click的参数是一个函数,处理点击行为
$('input').click(click_calulator)
});

访问,并点击

测开之路四十:jQuery基本用法的更多相关文章

  1. 测开之路四十二:常用的jquery事件

    $(‘selector’).click() 触发点击事件$(‘selector’).click(function) 添加点击事件$(‘selector’).dbclick() 触发双击事件$(‘sel ...

  2. 测开之路四十八:Django之重定向与cookie

    基础配置与上一篇一致 404错误 定义一个error页面 <!DOCTYPE html><html lang="en"><head> <m ...

  3. 测开之路四十九:用Django实现扑克牌游戏

    用Django实现和之前flask一样的扑克牌游戏 项目结构 html <!DOCTYPE html><html lang="en"><head> ...

  4. 测开之路四十五:Django之最小程序

    安装Django库 Django最小程序 import sysfrom django.conf.urls import urlfrom django.conf import settingsfrom ...

  5. 测开之路四十一:常用的jquery函数

    jQuery选择器菜鸟教程:https://www.runoob.com/jquery/jquery-selectors.html 引用jquery2.1.1标签:<script src=&qu ...

  6. 测开之路七十四:python处理kafka

    kafka-python地址:https://github.com/dpkp/kafka-python 安装kafka-python:pip install kafka-python 接收消息 fro ...

  7. 测开之路六十四:UI测试平台之前端页面

    {% extends "base.html" %} {% block script %} <!-- 引入js文件,需要在base.html留入口,不然渲染会出问题. --&g ...

  8. 测开之路三十四:html常用标签

    网页的结构: HTML:超文本标记语言是迄今为止网络上应用最为广泛的语言,也是构成网页文档的主要语言.HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字.图形.动画.声音.表格.链 ...

  9. 测开之路一百:jquery引用、语法、事件

    工作中一般会使用jquery代替js,jquery官网:https://jquery.com/ 引用jquery: 第一种方式:下载引用: jquery下载官网:https://jquery.com/ ...

随机推荐

  1. 配置adb环境与简单命令

    adb命令具有安装卸载apk,拷贝推送文件,查看设备硬件信息,查看应用程序占用资源,在设备执行shell命令等 客户端:通过adb调用客户端 服务器server:运行后台,负责客户端与进程进行通信 守 ...

  2. 《JAVA设计模式》之备忘录模式(Memento)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述备忘录(Memento)模式的: 备忘录模式又叫做快照模式(Snapshot Pattern)或Token模式,是对象的行为模式. 备忘录 ...

  3. Springboot War包部署下nacos无法注册问题

    目录 1. @EnableDiscoveryClient的使用 2. EnableDiscoveryClientImportSelector类的作用 3.AutoServiceRegistration ...

  4. dubbo构建应用

    1.Dubbo介绍 Dubbo是 阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和Spring框架无缝集成. 2.Dubbo原理 是不是看着 ...

  5. js本地时间格式化

    var myDate = new Date(); //获取当前时间及日期 var year=myDate.getYear(); // 获取当前年份(当前年份-1900) var fyear=myDat ...

  6. easyui datagrid数据网格

    EasyUI是一组基于jQuery的UI插件集合,它的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.它的许多控件让我们不必写很复杂的javascript,从而极大地提高了开发效率. ...

  7. JS小案例--全选和全不选列表功能的实现

    纯js代码实现列表全选和全不选的功能 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  8. linux time命令的输出中“real”“user”“sys”的真正含义

    下面转载的文章详细地介绍了time出来显示的“real”“user”“sys”的真正含义. Linux中time命令,我们经常用来计算某个程序的运行耗时,用户态cpu耗时,系统态cpu耗时. 例如: ...

  9. 从零开始之uboot、移植uboot2017.01(一、移植前的准备)

    手边的是一个S5PV210的开发板,想尝试移植一个比较新的uboot 下载最新版本uboot2018. ftp://ftp.denx.de/pub/u-boot/ 编译器下载 http://www.v ...

  10. Jmeter —— Test Fragment (测试片段)

    Test Fragment(测试片段) 1.    概念 JMeter中的Test Fragent:是控制器上一种特殊的线程组:它在测试树上与线程组处于同一个层级.但是使用的时候需要和Include ...