测开之路一百: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>

原文地址:https://www.cnblogs.com/zhongyehai/p/11408997.html

时间: 2024-10-10 01:19:05

测开之路一百:jquery引用、语法、事件的相关文章

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

一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn标签引用:https://www.bootcdn.cn/twitter-bootstrap/ 为了稳定,找3.3.7版本,min.css,复制标签:<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap

测开之路一百零二:jquery元素操作

jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 最后一个元素 第一个元素 替换文本 html 获取html 替换html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>

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

文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="../js/jquery-3.4.1.min.js"></script>--&g

测开之路一百零四:jquery操作样式

jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="h

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

标签内插入 标签外插入 给标签加标签 !DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>元素和标签插入</title> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script><

测开之路一百二十九:jinja2模板语法

flask用的是jinja2模板,有自己特定的语法 形参: 在html里面留占位参数: {{ 参数名 }},后端传值时,参数名=参数值 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>b页面</title></head><body> <h1>{{ user }},你好<

测开之路一百五十二:基于jquery的ajax实现(load、get、ajax)

ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一个页面用于被调用 <h1>这是content.html的h1标签</h1><p style="background: red"> 这是content.html的p标签,红色 <a href="https://www.baidu.com/&

测开之路一百五十三:ajax之load、get、ajax在项目中的体现

在查询的时候是使用ajax进行请求的 目录结构 personal.models from datetime import datetimefrom flask_sqlalchemy import SQLAlchemy db = SQLAlchemy() class Department(db.Model): """ 部门 """ __tablename__ = 'department' # primary_key=True:主键, autoinc

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

前面做的wtform验证是服务器端的验证,需要把数据传输到服务器,服务器验证后再吧结果传输到前端,网络慢的时候,用户体验不好,所以需要前端验证,且后端验证不能少 传统的js或者jquery如果要验证信息,需要把一个个元素下的信息拿下来,再验证,而validation可以根据元素定位,可以直接就验证了 validation官网:https://jqueryvalidation.org/cnd引用地址:https://www.bootcdn.cn/jquery-validate/引用标签:<scri