search

博客列表 >03月05日作业：过滤器和Ajax

03月05日作业：过滤器和Ajax

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年03月10日 12:23:24825浏览

作业一

一、demo代码练习：
1、代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  6.     <title>Document</title>
  7.     <style>
  8.         .red{
  9.             background-color: burlywood;
  10.         }
  11.         #blue {
  12.             color:blue;
  13.         }
  14.         .blue {
  15.             font-size: 20px;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <ul id="first">
  22.         <li>item1</li>
  23.         <li>item2</li>
  24.         <ul>
  25.             <li>item3-1</li>
  26.             <li class="red">item3-2</li>
  27.             <li id="blue">item3-3</li>
  28.         </ul>
  29.         <li>item4</li>
  30.         <li>item5</li>
  31.     </ul>
  32.     <hr>
  33.     <ul id="second">
  34.         <li class="blue">item1</li>
  35.         <li>item2</li>
  36.         <li>item3</li>
  37.         <li>item4</li>
  38.         <li>item5</li>
  39.     </ul>
  40.     <script>
  41.         var li = $('#second > li').filter(":nth-child(-n+3)");
  42.         // console.log(li.text());//$()有遍历的效果
  43.         var children =$('li');
  44.         // console.log(children);
  45.         children.first().css('color','red');
  46.         children.last().css('color','green');
  47.         children.eq(5).addClass('red');
  48.         // console.log(children.find('#blue'));
  49.         li = $('li');
  50.         // console.log(typeof(li.find('.blue')));
  51.         var ul=$('#second');
  52.         console.log(ul.find('.blue'));
  53.         ul.find('.blue').css('background','lightblue');
  55.         var child=$('#second > li');
  56.         console.log(child.slice(1,3).text());//索引0开始，取前不取后，如果只有一个参数，直接取到结束
  58.         console.log(child.slice(0,-1).text());//尾部索引从-1开始
  60.         child.not(':last-child()').css('background','red');
  62.     </script>
  63. </body>
  64. </html>

2、运行结果：

二、demo1.html
1、代码代码练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  6.     <title>事件</title>
  7.     <style>
  8.         form {
  9.             width: 200px;
  10.             display: grid;
  11.             gap: 10px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <form action="a.php">
  17.         <input type="text" placeholder="UserName" autofocus>
  18.         <input type="password" placeholder="Password">
  19.         <button>提交</button>
  20.     </form>
  21.     <script>
  22.         $('form').submit(function(ev){
  23.             ev.preventDefault();
  24.         });
  25.         var user=$('input[type=text]'); 
  26.         // 当元素失去焦点时blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。
  27.         user.blur(function(){
  28.             var tips='';
  29.             var users=['admin','peter','ldy','jquery'];
  30.             if($(this).val().length===0){
  31.                 tips='名字不能为空';
  32.                 $(this).focus();
  33.                 /*indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
  34.                 indexOf() 方法对大小写敏感！
  35.                 如果要检索的字符串值没有出现，则该方法返回 -1。
  36.                 */
  37.             }else if (users.indexOf($(this).val())===-1){
  38.                 tips='用户名不存在'+'<a href="register.php">注册</a>';
  39.                 $(this).focus();
  40.             }else{
  41.                 tips= '<i style="color: green">验证通过<i>';
  42.                 $('input[type=password]').focus();
  43.             }
  45.             if($(this).next().get(0).tagName !=='SPAN'){
  46.                 $('<span>').html(tips).css('color','red').insertAfter($(this));
  47.             }
  49.             user.on('keydown',function(){
  50.                 $(this).next('span').remove();
  51.             });
  52.         })
  54.     </script>
  55. </body>
  56. </html>

2、运行效果图

三、demo2.html代码练习
1、代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.   <nav></nav>
  11.   <button>get获取</button>
  12.   <div></div>
  14.   <button>post获取</button>
  15.   <div></div>
  16.   <button>Ajax获取</button>
  17.   <div></div>
  18.   <script>
  19.       $('nav').load('try.html');
  20.       var url='test.php?id=3';
  21.       $('button').first().click(function(){
  22.         $.get(url,function(data){
  23.             $('div').first().html(data);
  24.         })
  25.       });
  27.       $('button').eq(1).click(function(){
  28.           $.post('test.php',{id:1},function(data){
  29.               $('div').eq(1).html(data);
  30.           })
  31.       });
  33.       $('button').last().click(function(){
  34.           $.ajax({
  35.               type:'GET',
  36.               url:'test.php',
  37.               data:{id:1},
  38.               dataType:'html',
  39.               success:function(data){
  40.                   $('div').last().html(data);
  41.               }
  42.           })
  43.       })
  44.   </script>  
  45. </body>
  46. </html>

2、运行结果

三、案例练习
1、代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <script src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  7.     <title>Document</title>
  8.     <style>
  9.         form {
  10.             width: 200px;
  11.             display: grid;
  12.             gap: 10px;
  13.         }
  15.         .success {
  16.             color: green;
  17.         }
  19.         .fail {
  20.             color: red;
  21.         }
  22.     </style>
  23. </head>
  25. <body>
  26.     <form action="">
  27.         <input type="text" placeholder="UserName" autofocus>
  28.         <input type="password" placeholder="Password">
  29.         <button>提交</button>
  30.     </form>
  31.     <script>
  32.         $('form').submit(function (ev) {
  33.             ev.preventDefault();
  35.             var user = {
  36.                 'username': $('input[type=text]').val(),
  37.                 'password': $('input[type=password]').val()
  38.             }
  39.             $.ajax({
  40.                 type: 'POST',
  41.                 url: 'check.php',
  42.                 data: user,
  43.                 dataType: 'json',
  44.                 success: function (data) {
  45.                     if ($('form span').length === 0) {
  46.                         $('<span>').text(data.message).addClass(function () {
  47.                             return data.status === 1 ? 'success' : 'fail';
  48.                         }).appendTo('form');
  49.                     }
  50.                 }
  51.             });
  53.             $('form input').keydown(function () {
  54.                 $('form').find('span').remove();
  55.             });
  56.         });
  57.     </script>
  58. </body>
  60. </html>

2、运行效果图

作业二：

一、相关知识点（jquery对象有获取输出有遍历效果）
1、filter();:过滤器，缩小范围来命中元素
2、children();:获取所有子元素
3、first();last();直接获取第一个或者最后一个元素
4、eq(n);:直接获取n个元素，n从0开始
5、find();:在所有层级种进行查询
6、slice();:从jQuery对象集合种选择一部分，两参数，索引0开始，取前不取后，如果只有一个参数，直接取到结束；尾部索引从-1开始
7、去表单默认提交事件：$('form').submit(function(ev){ev.preventDefault();});
8、blur(回调函数);：表单文本框失去焦点时进行验证；
9、user.indexOf(value);方法可返回某个指定的字符串值在字符串中首次出现的位置。indexOf() 方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。
10、事件行为：click点击keydown按下键盘任意键;
11、$.get():以GET方式从服务器获取数据：
$.get(url,[data],[callback],[type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
12、$.post():以POST方式从服务器获取数据；
$.post(url,[data],[callback],[type])
test.php为目标文件，{id：1}数据信息
13、load(url,[data,[callback]]): 获取html代码片断,默认get$('nav').load('test.html');
14、$.getJSON(url,[data],[callback])获取json数据:
url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
15、$.ajax()从服务器获取数据

  1. $.ajax({
  2.                 type: 'GET', // 请求类型
  3.                 url: url, // 请求地址
  4.                 data: data, // 发送的数据
  5.                 dataType: // 期望的响应数据的类型,如json,html,text...,自动判断
  6.                 success: 成功回调
  7.             })

16、php数组：in_array($id, array_column($users, 'id'))
in_array():判断$id是否在array_column()返回的数组中
array_column($user,’id’);取出组中id的值重新组成数组

上一条：3月9日学习笔记：composer和laravel安装下一条：酱茄WordPress小程序开源了...
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多