Web 项目学习笔记（持续更新）

  • 开发Web项目的学习笔记-Python+Flask
  • 表单与文本联动
  • 补充 input 作为单选按钮类型
  • 使用Python编码和解码Json对象
  • JQuery快速上手
  • What
  • How
  • Time JQuery使用时机
  • 选择器
  • 事件
  • JQuery维护
  • JQuery - Ajax
  • jQuery ajax() 方法
  • a 标签的 click 事件写法


开发Web项目的学习笔记-Python+Flask

表单与文本联动

在设计用户界面UI时，我们有时需要考虑用户习惯，满足“简洁性、易用性”等要求。这里以单选按钮与单选按钮的文字描述为例进行解释。

目标效果：点击文字时单选按钮随之一起联动。一共有两种方法，分为显式方法和隐式方法。

python点击屏幕某一个点 python点击按钮_jquery

  1. 显式方法：使用 label 标签的 for 属性，for 的值为 input 单选表单的 id 属性值。
<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>
  1. 隐式方法：将 input 标签嵌入到 label 标签中。
<form>
  <label>Male <input type="radio" name="sex" id="male" /></label>
  <br />
  <label>Female <input type="radio" name="sex" id="female" /></label>
</form>

补充 input 作为单选按钮类型

  • type 为 radio
  • name 保持一致
  • value 属性可选
  • checked=“checked”

使用Python编码和解码Json对象

目的

方法

将 Python 对象编码成 JSON 字符串

json.dumps

将已编码的 JSON 字符串解码为 Python 对象

json.loads

JQuery快速上手

What

jQuery是一个JavaScript函数库。可以便捷的进行

  • html元素选取
  • html元素操作
  • CSS 操作
  • html事件函数
  • JavaScript 特效和动画
  • html DOM 遍历和修改
  • AJAX

How

先选择该元素，再对该元素进行操作（事件）

$(selector).action()

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

Time JQuery使用时机

JQuery 代码应在完全加载（就绪）文档之后运行，所以 JQuery 存在着入口函数：

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

选择器

JQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

选择器

代码

#id 选择器

$("#test")

.class 选择器

$(".test")

选取 class 为 intro 的 p 元素

$(“p.intro”)

选取带有 href 属性的元素

$("[href]")

选取所有 target 属性值等于 “_blank” 的 a 元素

$(“a[href=’_blank’]”)

事件

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。例如：

  • 在元素上移动鼠标
  • 选取单选按钮
  • 点击元素

常见的DOM事件

鼠标事件

表单事件

click

submit

dblclick

change

hover

focus

使用方法

  1. 指定一个点击事件
  2. 定义事件函数
$("p").click(function(){
    // 动作触发后执行的代码!!
});

JQuery维护

为了使我们的 JQuery 函数便于维护和管理，我们需要把 JQuery 单独写在一个 .js 文件中，并在 head 中将此 js 文件引入。

<script src="my_jquery_functions.js"></script>

JQuery - Ajax

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。例如，我的 Web 项目需要在某一页面实时显示数据的变化情况，数据的每一次变化我们不能总是刷新进入的网页页面，只能是对展示数据的部分做局部刷新。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery ajax() 方法

ajax() 方法用于执行 AJAX（异步 HTTP）请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。

语法：

$.ajax({name:value, name:value, ... })

举例：

$.ajax({
           type: "POST",
           dataType: "json",
           url: "/aaa",//后端请求
           data: data,
           success: function (result) {
               console.log(result);
               {
                   alert(result);
               }
           },
           error: function (result) {
               console.log(result);
               {
                   alert(result);
               }
           }
       });

常见的键值对及含义

名称

描述

async

布尔值，表示请求是否异步处理。默认是 true

data

规定要发送到服务器的数据

dataType

预期的服务器响应的数据类型

type

规定请求的类型（GET 或 POST）

url

规定发送请求的 URL，默认是当前页面

a 标签的 click 事件写法

  1. 写法一
<a href="javascript:void(0);" οnclick="js_method()" >

这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。

  1. 写法二
<a href="javascript:;" οnclick="js_method()" >