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

搜索

微信公眾號

首頁文章專題 AI工具學習編程手冊下載最近更新

文章 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 設計工具 AI 視頻創(chuàng)作 AI 音頻制作 AI 辦公學習 AI 編程開發(fā) Prompt指令

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

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

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

作業(yè)一

一、demo代碼練習：
1、代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
    <title>Document</title>
    <style>
        .red{
            background-color: burlywood;
        }
        #blue {
            color:blue;
        }
        .blue {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <ul id="first">
        <li>item1</li>
        <li>item2</li>
        <ul>
            <li>item3-1</li>
            <li class="red">item3-2</li>
            <li id="blue">item3-3</li>
        </ul>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <hr>
    <ul id="second">
        <li class="blue">item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <script>
        var li = $('#second > li').filter(":nth-child(-n+3)");
        // console.log(li.text());//$()有遍歷的效果
        var children =$('li');
        // console.log(children);
        children.first().css('color','red');
        children.last().css('color','green');
        children.eq(5).addClass('red');
        // console.log(children.find('#blue'));
        li = $('li');
        // console.log(typeof(li.find('.blue')));
        var ul=$('#second');
        console.log(ul.find('.blue'));
        ul.find('.blue').css('background','lightblue');
        var child=$('#second > li');
        console.log(child.slice(1,3).text());//索引0開始，取前不取后，如果只有一個參數(shù)，直接取到結束
        console.log(child.slice(0,-1).text());//尾部索引從-1開始
        child.not(':last-child()').css('background','red');
    </script>
</body>
</html>

2、運行結果：

二、demo1.html
1、代碼代碼練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
    <title>事件</title>
    <style>
        form {
            width: 200px;
            display: grid;
            gap: 10px;
        }
    </style>
</head>
<body>
    <form action="a.php">
        <input type="text" placeholder="UserName" autofocus>
        <input type="password" placeholder="Password">
        <button>提交</button>
    </form>
    <script>
        $('form').submit(function(ev){
            ev.preventDefault();
        });
        var user=$('input[type=text]'); 
        // 當元素失去焦點時blur() 函數(shù)觸發(fā) blur 事件，或者如果設置了 function 參數(shù)，該函數(shù)也可規(guī)定當發(fā)生 blur 事件時執(zhí)行的代碼。
        user.blur(function(){
            var tips='';
            var users=['admin','peter','ldy','jquery'];
            if($(this).val().length===0){
                tips='名字不能為空';
                $(this).focus();
                /*indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。
                indexOf() 方法對大小寫敏感！
                如果要檢索的字符串值沒有出現(xiàn)，則該方法返回 -1。
                */
            }else if (users.indexOf($(this).val())===-1){
                tips='用戶名不存在'+'<a href="register.php">注冊</a>';
                $(this).focus();
            }else{
                tips= '<i style="color: green">驗證通過<i>';
                $('input[type=password]').focus();
            }
            if($(this).next().get(0).tagName !=='SPAN'){
                $('<span>').html(tips).css('color','red').insertAfter($(this));
            }
            user.on('keydown',function(){
                $(this).next('span').remove();
            });
        })
    </script>
</body>
</html>

2、運行效果圖

三、demo2.html代碼練習
1、代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
    <title>Document</title>
</head>
<body>
  <nav></nav>
  <button>get獲取</button>
  <div></div>
  <button>post獲取</button>
  <div></div>
  <button>Ajax獲取</button>
  <div></div>
  <script>
      $('nav').load('try.html');
      var url='test.php?id=3';
      $('button').first().click(function(){
        $.get(url,function(data){
            $('div').first().html(data);
        })
      });
      $('button').eq(1).click(function(){
          $.post('test.php',{id:1},function(data){
              $('div').eq(1).html(data);
          })
      });
      $('button').last().click(function(){
          $.ajax({
              type:'GET',
              url:'test.php',
              data:{id:1},
              dataType:'html',
              success:function(data){
                  $('div').last().html(data);
              }
          })
      })
  </script>  
</body>
</html>

2、運行結果

三、案例練習
1、代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
    <title>Document</title>
    <style>
        form {
            width: 200px;
            display: grid;
            gap: 10px;
        }
        .success {
            color: green;
        }
        .fail {
            color: red;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" placeholder="UserName" autofocus>
        <input type="password" placeholder="Password">
        <button>提交</button>
    </form>
    <script>
        $('form').submit(function (ev) {
            ev.preventDefault();
            var user = {
                'username': $('input[type=text]').val(),
                'password': $('input[type=password]').val()
            }
            $.ajax({
                type: 'POST',
                url: 'check.php',
                data: user,
                dataType: 'json',
                success: function (data) {
                    if ($('form span').length === 0) {
                        $('<span>').text(data.message).addClass(function () {
                            return data.status === 1 ? 'success' : 'fail';
                        }).appendTo('form');
                    }
                }
            });
            $('form input').keydown(function () {
                $('form').find('span').remove();
            });
        });
    </script>
</body>
</html>

2、運行效果圖

作業(yè)二：

一、相關知識點（jquery對象有獲取輸出有遍歷效果）
1、filter();:過濾器，縮小范圍來命中元素
2、children();:獲取所有子元素
3、first();last();直接獲取第一個或者最后一個元素
4、eq(n);:直接獲取n個元素，n從0開始
5、find();:在所有層級種進行查詢
6、slice();:從jQuery對象集合種選擇一部分，兩參數(shù)，索引0開始，取前不取后，如果只有一個參數(shù)，直接取到結束；尾部索引從-1開始
7、去表單默認提交事件：$('form').submit(function(ev){ev.preventDefault();});
8、blur(回調(diào)函數(shù));：表單文本框失去焦點時進行驗證；
9、user.indexOf(value);方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。indexOf() 方法對大小寫敏感！如果要檢索的字符串值沒有出現(xiàn)，則該方法返回 -1。
10、事件行為：click點擊keydown按下鍵盤任意鍵;
11、$.get():以GET方式從服務器獲取數(shù)據(jù)：
$.get(url,[data],[callback],[type])
url:待載入頁面的URL地址
data:待發(fā)送 Key/value 參數(shù)。
callback:載入成功時回調(diào)函數(shù)。
type:返回內(nèi)容格式，xml, html, script, json, text, _default。
12、$.post():以POST方式從服務器獲取數(shù)據(jù)；
$.post(url,[data],[callback],[type])
test.php為目標文件，{id：1}數(shù)據(jù)信息
13、load(url,[data,[callback]]): 獲取html代碼片斷,默認get$('nav').load('test.html');
14、$.getJSON(url,[data],[callback])獲取json數(shù)據(jù):
url:發(fā)送請求地址。
data:待發(fā)送 Key/value 參數(shù)。
callback:載入成功時回調(diào)函數(shù)。
15、$.ajax()從服務器獲取數(shù)據(jù)

$.ajax({
                type: 'GET', // 請求類型
                url: url, // 請求地址
                data: data, // 發(fā)送的數(shù)據(jù)
                dataType: // 期望的響應數(shù)據(jù)的類型,如json,html,text...,自動判斷
                success: 成功回調(diào)
            })