工作中一般会使用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引用、语法、事件的更多相关文章

  1. 测开之路一百五十二：基于jquery的ajax实现之load、get、ajax

    ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一 ...

  2. 测开之路一百二十九：jinja2模板语法

    flask用的是jinja2模板,有自己特定的语法 形参: 在html里面留占位参数: {{ 参数名 }},后端传值时,参数名=参数值 <!DOCTYPE html><html la ...

  3. 测开之路一百零五：bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  4. 测开之路一百零四：jquery操作样式

    jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...

  5. 测开之路一百零三：jquery元素和标签的插入与删除

    标签内插入 标签外插入 给标签加标签 !DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  6. 测开之路一百零二：jquery元素操作

    jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...

  7. 测开之路一百零一：jquery文字特效、动画、方法链

    文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...

  8. 测开之路一百五十五：jquery-validation前台数据验证

    前面做的wtform验证是服务器端的验证,需要把数据传输到服务器,服务器验证后再吧结果传输到前端,网络慢的时候,用户体验不好,所以需要前端验证,且后端验证不能少 传统的js或者jquery如果要验证信 ...

  9. 测开之路一百五十四：ajax+json前后台数据交互

    在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...

随机推荐

  1. Lock和synchronized的区别和使用(转发)

    今天看了并发实践这本书的ReentantLock这章,感觉对ReentantLock还是不够熟悉,有许多疑问,所有在网上找了很多文章看了一下,总体说的不够详细,重点和焦点问题没有谈到,但这篇文章相当不 ...

  2. 深度学习之depthwise separable convolution,计算量及参数量

    目录: 1.什么是depthwise separable convolution? 2.分析计算量.flops 3.参数量 4.与传统卷积比较 5.reference

  3. python学习笔记(2)：科学计算及数据可视化入门

    一.NumPy 1.NumPy:Numberical Python 2.高性能科学计算和数据分析的基础包 3.ndarray,多维数组(矩阵),具有矢量运算的能力,快速.节省空间 (1)ndarray ...

  4. 关于原型链，原来这么简单？—————终结__proto__和prototype的那些事

    今天,一个技术群里小朋友提出一个问题: Object.prototype.a = function () { console.log('a') } Function.prototype.b = fun ...

  5. spring.jar是包含有完整发布的单个jar 包，spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容，因为只有在开发环境下才会用到 spring-mock.jar来进行辅助测试，正式应用系统中是用不得这些类的。

    Spring jar包的描述:针对3.2.2以上版本 org.springframework spring-aop ——Spring的面向切面编程,提供AOP(面向切面编程)实现 org.spring ...

  6. [七月挑选]使用idea创建spring boot 项目

    title: 使用idea创建spring boot 项目 参考lindaZ的IntelliJ IDEA 创建spring boot 的Hello World 项目 1.Open IDEA,choos ...

  7. 为什么你不看好家教O2O

    伴随着科技的不断进步,大众创业的激情在不断的燃烧着,于是又很多的朋友会往家教这条路上走.就有了家教O2O的出现,很多的人都在抢占市场,可是,为什么你不看好家教O2O? 家教O2O虽然能够帮助附近的朋友 ...

  8. [转载]ISE中COE与MIF文件的联系与区别

    原文地址:ISE中COE与MIF文件的联系与区别作者:铁掌北京漂 在ISE中,当用Blcok Memory Generator 生成某个ROM模块时,经常要对ROM中的内容作初始化.这时,就需要我们另 ...

  9. 001-supervisor

    supervisor 使用教程(转) 原文地址:https://word.gw1770df.cc/2016-08-04/linux/supervisor-%E4%BD%BF%E7%94%A8%E6%9 ...

  10. 博弈论（Game Theory）相关Paper阅读

    这些论文是我在研究区块链共识算法的时候搜到的,当然大多数跟区块链没什么关系,不过有些论文真的写的好,作者中不乏有诺奖得主,有些论文的结果是有违常的(比如拍卖中的价高者得),这也是这些Paper的一部分 ...