测开之路一百:jquery引用、语法、事件
工作中一般会使用jquery代替js,jquery官网:https://jquery.com/
引用jquery:
第一种方式:下载引用:
jquery下载官网:https://jquery.com/download/
下载压缩版本:右键-链接另存为,保存到项目的js下
引用
第二种方式:CDN引入:https://www.bootcdn.cn/jquery/
为了稳定,使用2.2.4版本,直接复制标签到script标签下
jquery语法:$("选择器").事件(函数);
准备html
id选择器
class选择器
标签选择器
相同标签下元素筛选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="../js/jquery-3.4.1.min.js"></script>--> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h1>jQuery选择器</h1>
<div id="msg">
这是第一个div标签
<p>第一个div下第一个p标签</p>
</div> <div class="red">
这是第二个div标签
<p>第二个div下第一个p标签</p>
</div> <form action="">
<input type="text">
<input type="button" value="按钮">
<input type="emali">
</form>
</body>
</html> <!--jqury语法-->
<script>
//语法:$("选择器").事件(函数); //$(document):定位到全局文档,ready():文档准备完毕(刷新完成)的时候,修改css
$(document).ready(function () {
$("#msg").css("background", "blue"); //id选择器:#,给id为msg的元素加一个蓝色背景色
$(".red").css("background", "red"); //给class为red的元素加一个红色背景色
$("p").css("color", "yellow"); //给p标签的元素加一个黄色前景色
$("input[type='text']").css("background", "green"); //把input标签下type='text'的元素背景色改为绿色
})
</script>
测开之路一百:jquery引用、语法、事件的更多相关文章
- 测开之路一百五十二:基于jquery的ajax实现之load、get、ajax
ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一 ...
- 测开之路一百二十九:jinja2模板语法
flask用的是jinja2模板,有自己特定的语法 形参: 在html里面留占位参数: {{ 参数名 }},后端传值时,参数名=参数值 <!DOCTYPE html><html la ...
- 测开之路一百零五:bootstrap的两种引用方式
一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...
- 测开之路一百零四:jquery操作样式
jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...
- 测开之路一百零三:jquery元素和标签的插入与删除
标签内插入 标签外插入 给标签加标签 !DOCTYPE html><html lang="en"><head> <meta charset=&q ...
- 测开之路一百零二:jquery元素操作
jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...
- 测开之路一百零一:jquery文字特效、动画、方法链
文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...
- 测开之路一百五十五:jquery-validation前台数据验证
前面做的wtform验证是服务器端的验证,需要把数据传输到服务器,服务器验证后再吧结果传输到前端,网络慢的时候,用户体验不好,所以需要前端验证,且后端验证不能少 传统的js或者jquery如果要验证信 ...
- 测开之路一百五十四:ajax+json前后台数据交互
在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...
随机推荐
- java中的四种引用方式(强引用,软引用,弱引用,虚引用)
java内存管理主要有内存分配和内存回收,都不需要程序员负责,垃圾回收的机制主要是看对象是否有引用指向该对象. java中对象的引用主要有四种:强引用,软引用,弱引用,虚引用. Java中提供这四种引 ...
- 常用css相关笔记
最后一个css不加样式 .nav-sort li:not(:last-child) { border-bottom:#3e3e3e 1px solid; } 垂直居中 vertical-align: ...
- 前端开发HTML&css入门——伪类选择器和一些特殊的选择器
伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...
- jquery.lazyload (JS懒加载框架使用详解)
/** 本地加载方式加载JS*/ NSString *path = [[NSBundle mainBundle] pathForResource:@"jquery.js&quo ...
- Django中间件拦截未登录url
1.利用装饰器在视图中拦截未登录的url @login_required(login_url='/user/login/') def homepage(request): pass 这种方法适合于程序 ...
- STM32程序编写或调试犯过的错误
1.宏定义后加了分号: eg: define NOKEY_PRES 0; (❌) define NOKEY_PRES 0 (✔) 2.
- 内置的configparser模块和hashlib模块
#configparser模块:配置解析模块 import configparser config = configparser.ConfigParser() #创建一个配置解析对象 config[& ...
- 最长公共子序列板/滚动 N^2
#include <bits/stdc++.h> using namespace std; int main() { ][],t; ],b[]; bool now,pre; scanf(& ...
- Python之常用模块一(主要RE和collections)
一.认识模块 什么是模块:一个模块就是一个包含了python定义和声明的文件,文件名就是加上.py的后缀,但其实import加载的模块分为四个通用类别 : 1.使用python编写的代码(.py文件 ...
- Java验证码程序
1.设计思想利用random的随机生成数字,利用for循环控制随机数字的个数来控制验证码的输出.利用JFrame实现布局的管理,对登录框内容的位置进行管理. 2.流程图 3.源代码 denglu类 i ...