js和jQuery以及ajax的小練習

今天學習了經過鼠標的點擊事件而後讓邊框變顏色，還有怎麼設置一個點擊瀏覽器的輸入框而後顯示一個邊框，還學習了經過ajak來獲取post和get的值，經過它如何調用這個函數。

第一部分：

經過鼠標的點擊讓咱們的邊框變顏色，經過手在input標籤裏面敲擊鍵盤讓瀏覽器的consloe顯示他的元素，html部分代碼就不寫主要寫js部分由於是主要部分,

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script> $(document).ready(function () { $("#input").focus(function () { $("#input_out").css("borderColor", "#19b955"); //修改邊框的顏色
 }); $("#input").blur(function () { $("#input_out").css("borderColor", "#bbb"); }); $("#input").focus() function suggest_so(res) { console.log(res) } $("#input").keyup(function () { 　 var searchCon = $("#input").val();

 //這部分代碼主要是跨域的，由於這是一個測試的項目因此，要用人家百度寫好的代碼本身用因此這個部分不用看，實際的開發項目根據實際的狀況，這部分代碼須要跟下面的代碼鏈接在一塊兒的。

                var scriptElement = document.createElement('script');

                scriptElement.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1&cb=cbFun&wd=' + searchCon;

                document.body.appendChild(scriptElement);

 }); </script>

第二部分：

第二部分主要是學習經過keyup的監聽事件，當你敲擊鍵盤的時候在瀏覽器裏面的console會顯示你在瀏覽器裏面所輸出的數組以及在瀏覽器的頁面顯示一個列表出來，這一部分的代碼是靠前面的。

function cbFun(data) { var result = data.s;   // json js數組操做
            $("#searchResult").empty() for (var i = 0; i < result.length;i++) { $("#searchResult").append("<li>"+result[i]+"</li>") } if(result.length == 0){ $(".drop").hide() } else { $(".drop").show() } }

總體的代碼

 

<script>
        function cbFun(data) { // console.log(data);
            // console.log(data.g);
            // console.log(data.g[0]);
            // console.log(data.g[0].q);
            var result = data.s;   // json js數組操做
            $("#searchResult").empty() for (var i = 0; i < result.length;i++) { $("#searchResult").append("<li>"+result[i]+"</li>") } if(result.length == 0){ $(".drop").hide() } else { $(".drop").show() } } $(document).ready(function () { $("#input").focus(function () { $("#input_out").css("borderColor", "#19b955"); //修改邊框的顏色
 }); $("#input").blur(function () { $("#input_out").css("borderColor", "#bbb"); }); $("#input").focus() function suggest_so(res) { console.log(res) } $("#input").keyup(function () { var searchCon = $("#input").val(); // 不要看
                var scriptElement = document.createElement('script'); scriptElement.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1&cb=cbFun&wd=' + searchCon; document.body.appendChild(scriptElement); }) }); </script>

 

第三部分：

這部分主要是學習，get和post的區別，以及使用ajax是如何實現get和post一些敏感數據顯示在網頁上。

 1  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 2     <script>
 3     
 4     // GET
 5  $.ajax({  6         type:"get",  7         url:"http://localhost:3000/aaa?id=123&password=456"
 8     }).then(function(res){  9  console.log(res) 10  console.log(res.user) 11         $("#getAccount").text(res.user) 12         $("#getAccount_1").text(res.password) 13  console.log(res.password) 14         // 網絡正常 200 400左右的問題 500以上的問題都是服務器後臺的
15     },function(res){ 16        
17         // 網絡正常
18  }) 19     
20     // POST
21  $.ajax({ 22         type:"post", 23         url:"http://localhost:3000/bbb", 24  data:{ 25             "id":"123123121", 26             "password":"123232323232"
27             
28  } 29         
30     }).then(function(res){ 31  console.log(res) 32  console.log(res.user) 33  console.log(res.password) 34         $("#getAccount_2").text(res.user) 35         $("#getAccount_3").text(res.password) 36 
37         // 網絡正常 200 400左右的問題 500以上的問題都是服務器後臺的
38     },function(res){ 39         // 網絡正常
40     })