亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索

微信公眾號

首頁文章專題 AI工具學(xué)習(xí) 編程手冊下載最近更新

文章 web3.0 后端開發(fā) web前端數(shù)據(jù)庫開發(fā)工具 php框架常見問題科技 Java 系統(tǒng)教程電腦教程硬件教程手機教程軟件教程游戲教程自媒體新聞

專題后端開發(fā) web前端數(shù)據(jù)庫開發(fā)工具 php框架科技 Java 系統(tǒng)教程電腦教程硬件教程手機教程軟件教程游戲教程新聞

AI工具 AI 聊天問答 Agent智能體 AI 文本寫作 AI 繪畫作圖 AI 設(shè)計工具 AI 視頻創(chuàng)作 AI 音頻制作 AI 辦公學(xué)習(xí) AI 編程開發(fā) Prompt指令

學(xué)習(xí) 大前端后端開發(fā) 數(shù)據(jù)庫移動端運維開發(fā) UI設(shè)計計算機基礎(chǔ)

編程手冊大前端 JavaScript 后端開發(fā) 數(shù)據(jù)庫移動端運維開發(fā) UI設(shè)計計算機基礎(chǔ) XML Web Services

下載 js特效網(wǎng)站源碼工具下載類庫下載網(wǎng)站素材學(xué)習(xí)資源插件擴展手機/移動開發(fā) 手機游戲

jquery表單對象屬性案例

涉及以下兩類選擇器：
偽類選擇器$(‘xx:…’)
屬性值選擇器$(‘xx[yy= “zz”]’)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../jquery-3.4.1.min.js"></script>
    <style>
        div{
           text-align: center;
            font-family: "微軟雅黑";
            font-size: 20px;
        }
        select{
            font-size: 20px;
        }
        .borDer{
            border: 10px solid yellowgreen;
            width: 450px;
            height: 700px;
            margin: 0 auto;
        }
    </style>
    <title>使用jquery寫表單</title>
</head>
<body>
<div class="borDer">
    <form action="">
        <div>
            <label for="username">用戶名：</label>
            <input type="text" name="username" id="username">
        </div>
        <div>
            <label for="pwd">密碼：</label>
            <input type="text" id="pwd">
        </div>
        <div>
            <label for="pwd_a">再輸入一次密碼：</label>
            <input type="text" id="pwd_a">
        </div>
        <div>
            <label>性別：</label>
            <input type="radio" name="gender" value="1">女
            <input type="radio" name="gender" value="2">男
        </div>
        <div>
            <label for="">來自：</label>
            <select name="" id="">
                <option value="">云</option>
                <option value="">貴</option>
                <option value="">川</option>
                <option value="">渝</option>
            </select>
        </div>
        <div>
            <label for="">用戶狀態(tài)：</label>
            <input type="checkbox">禁用
        </div>
        <button onclick="save()">保存</button>
    </form>
    <button onclick="first()">:first</button>
    <button onclick="equal()">:eq(index)</button>
    <button onclick="great()">:gt(index)</button>
    <button onclick="low()">lt(index)</button>
    <button onclick="lastNum()">:last</button>
    <button onclick="getAttr()">attribute</button>
    <button onclick="getAttvul()">attr="value"</button>
    <button onclick="headAttr()">^attr</button>
    <button onclick="firstCh()">first-child</button>
</div>
<script type="text/javascript" src="1221.js"></script>
</body>
</html>

渲染如下：

1221.js如下：

function save() {
    var username = $('input[id = "username"]').val();
    var pwd = $('input[id = "pwd"]').val();
    console.log(pwd);
    var pwd_a = $('input[id = "pwd_a"]').val();
    console.log('pwd_a')
    var gender = $('input[name = "gender"]:checked').val();
    var province = $('select option:selected').text();
    console.log(province);
    // return;
    if (username==''){
        alert('請輸入用戶名');
        return;
    }
    if (pwd==''){
        alert('請輸入密碼');
        return;
    }
    if (pwd_a != pwd){
        alert('兩次輸入不一致');
        return;
    }
    if (gender==undefined){
        alert('請選擇性別');
        return;
    }
    if (province==undefined){
        alert('請選擇省份');
        return;
    }
    return;
}
//選擇偽類第一個子節(jié)點
function first() {
    // var vul = $('div button:first-child').val();
    var vul1 = $('div button:first-child');
    // console.log(vul1);
    console.log(vul1);
}
//索引為指定值的子節(jié)點
function equal() {
    var vul2 = $('div button:eq(2)');
    alert(vul2);
}
//超過索引值的子節(jié)點全部選出
function great() {
    var vul3 = $('div button:gt(3)');
    alert(vul3);
}
//小于索引值的子節(jié)點全部選出
function low() {
    var vul4 = $('div button:lt(4)');
    alert(vul4);
}
//最后一個子節(jié)點
function lastNum() {
    var vul5 = $('div button:last');
    alert(vul5);
}
//按給定屬性值選擇
function getAttr() {
    var vul6 = $('input #username');
    alert(vul6);
}
function getAttvul() {
    var vul7 = $( 'input[name = "gender"]:checked');
    alert(vul7);
}
//按屬性值開頭字母匹配選擇
function headAttr() {
    var vul8 = $( 'input[type^="check"]');
    alert(vul8);
}
function firstCh() {
    var vul9 = $( 'select:first-child');
    alert(vul9);
}