文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

python 学习 第八篇 jquery

2023-01-31 01:35

关注

简介:

jQuery是一个javascript库。极大滴简化了javascript编程。

包含内容:

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX


1:下载 jQuery
共有两个版本的 jQuery 可供下载:一份是生产版本jQuery.min.js(最小化和压缩过的),另一份是开发版jQuery.js(未压缩的供调试或阅读)。
这两个版本都可http://jquery.com/download/ 下载。

2:如何导入jQuery——直接在html中的<head></head>标签导入即可(生产环境下,为了提高页面加载速度,通常讲js文件放到页面最下面)
<head>
<script type="text/javascript" src="../jquery.min.js"></script> #写上js所在的路径即可
</head>

3:库的替代
Google 和 Microsoft 对 jQuery 的支持都很好。
如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
使用 Google 的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>
使用 Microsoft 的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>

4:jQuery的基本三步走

1:选择器——找到需要操作的元素
2:操作——DOM元素进行增删改查
2,1:操作html文档内容——常用元素 table form div等
2.2:操作html元素属性——常用属性
2.3:操作html元素的样式——css (其实也属于属性)
3: 事件——什么情况下触发jQuery的操作, ajax等


例子:

在login.html中引用jquery

wKioL1fFHmTD-G2gAABcOehgmFE298.jpg

效果

wKioL1fFHn6RcJDIAAApyBATb84043.jpg

 jquery异步请求

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
</head>
<body>
    <!--<form method="post" action="/login"> -->
        <form id="loginform">
        <input id="name" type="text" name="name" placeholder="用户名">
        <input id="password" type="password" name="password" placeholder="密码">
        <input id="loginbtn" type="submit" value="登录">
    </form>
    <form action="/operation">
        <td>
                <a href="/adduser" type="submit">注册</a>
        </td>
    </form>
    {% if result %}
    <div style="color:red">
        `result`
    </div>
    {% endif %}
<script src="/static/js/jquery-3.1.0.min.js"></script>
</body>
</html>


2.在谷歌浏览器中按F12进入调试模式。在console中输入

$('#loginform').serialize()  作用是把表单中的所有值都拿到

$:表示jquery       

loginform:表示选择器        

id:是html元素的唯一标识,同一个页面中不能出现重名的id


jquery基础语法:

$(selector).action()

$(选择器).动作

常用的动作

1:$(选择器).html(value)   #获取或设置html标签值

2:$(选择器).val(value)    #获取或设置表单标签值

3:$(选择器).attr(value)   #获取或设置属性标签值

4:$(选择器).css(value)    #获取或设置标签样式值


例子:通过jquery对html元素进行操作


wKiom1fFH1jDFXQ-AABYI2acY2s751.png

val()操作表单的值

wKiom1fFH2jx5lLSAAAR7_niWMg543.png

获取html

wKioL1fFH2nSjPaSAAAw7xthjBY166.png


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯