python 學習第八篇 jquery

時間 2020-11-12

標籤 javascript css html java jquery ajax 編程 api 瀏覽器 bash 欄目 Python 简体版

原文原文鏈接

簡介：javascript

jQuery是一個javascript庫。極大滴簡化了javascript編程。css

包含內容：html

HTML 元素選取java

HTML 元素操做jquery

CSS 操做ajax

HTML 事件函數編程

JavaScript 特效和動畫api

HTML DOM 遍歷和修改瀏覽器

AJAXbash

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

效果

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) #獲取或設置屬性標籤值