![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：教学源码原样照抄不太好, 你可以有自己的想法
Collection
Collection
一、demo代码练习：
1、代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="//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开始，取前不取后，如果只有一个参数，直接取到结束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="//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() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。user.blur(function(){var tips='';var users=['admin','peter','ldy','jquery'];if($(this).val().length===0){tips='名字不能为空';$(this).focus();/*indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。indexOf() 方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -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="//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="//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、运行效果图
一、相关知识点（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()从服务器获取数据
$.ajax({type: 'GET', // 请求类型url: url, // 请求地址data: data, // 发送的数据dataType: // 期望的响应数据的类型,如json,html,text...,自动判断success: 成功回调})
16、php数组：in_array($id, array_column($users, 'id'))
in_array():判断$id是否在array_column()返回的数组中
array_column($user,’id’);取出组中id的值重新组成数组