PYTHON第六十一天笔记11.20
一、课堂笔记：
1 课上笔记
day61
1.前情回顾
1. 查找标签
- 基本选择器
ID
class
标签
*
组合选择器
- 筛选器
siblings
children
parent
next
first()
last()
eq
gt
lt
$().not(条件)
$().has(条件)
:input
:checkbox
:submit
:password
操作
- 样式操作
- addClass
- removeClass
- toggleClass
- CSS
- 文本操作
- text() --> 文本内容
- html() --> 标签内容
- val() -- > input
- 属性
- attr() --> 自定义属性,img的src
- prop() --> checkbox和radio
- 事件
.on("click", function(){})
时间委派：
用于给未来的标签绑定事件
$("选择器（必须是文档加载完后存在的）").on("click", "选择器（可以根据前面的标签找到）", function(){})
文档加载完后执行的
$(document).ready(function(){
// DOM树加载完才执行
})
文档操作
- clone(true)
- $(A).after(B)
- $(A).insertAfter(B)
- before
- insertBefore
- append
- appendTo
- $(A).prepend(B)
- $(A).prependTo(B)
- remove()
- empty()
- 动画
- show
- hide
- toggle
- slideUp() 本质上操作的是元素的height
- slideDown()
- slideToggle()
- fadeIn() 本质上操作的是元素的opacity
- fadeOut()
- fadeTo()
- fadeToggle()
- animate()
- 哪吒的前女友示例
- 补充知识点
.each
$.each
return false;
.data
2. 今日概要
- 插件
$.fn.extend({
xxx: function(){
// 给jQuery对象添加扩展 --> $().xxx()
}
})
**注意**：
this --> 表示我当前操作的这个对象 --> jQuery对象
$.extend({
xxx: function(){
// 给jQuery添加扩展 --> $.xxx()
}
})
**注意**：
我们给form表单里面的submit按钮绑定事件的时候|：
我们的事件（校验的那段功能）先执行，接着执行默认事件（提交的事件）
在我们的事件中最后return false,就可以组织后续默认事件的执行
- 自己写插件
- 全局变量污染 --> JS中函数限制变量的作用域 --> 用函数包裹我们扩展的那些变量和函数
全局不可以访问函数内部定义的变量
函数内部可以访问全局变量
- 如何防止$被修改 --> 用传参的方式 --> 我们显式的把jQuery传进去，在函数内部用jq表示jQuery
- 用匿名函数来简化我们保存自己变量或函数的操作
课上代码说明：
jQuery扩展示例.html --> 演示了如何给jQuery添加扩展
jQuery扩展示例2.html --> 演示了如何把之前的校验代码弄成一个jQuery扩展
jQuery扩展示例3.html --> 演示了如和把jQuery扩展放到单独的JS文件中
extend.js --> 我们自己写的jQuery扩展文件
- 上面注释的那部分是没有优化的方式
- 下面的是使用自执行函数优化的方式（以后我们都用这种方式）
2 登录校验作业：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆校验作业</title> <style> .error { color: red; } </style> </head> <body> <form action=""> <p> <label for="user">姓名</label> <input class="require" id="user" type="text" name="username"> <span class="error"></span> </p> <p> <label for="pwd">密码</label> <input class="require" id="pwd" type="password" name="passwd"> <span class="error"></span> </p> <input type="submit" value="登录"> </form> <script src="jquery-3.2.1.min.js"></script> <script> $(":submit").on("click", function () { // 每次判断之前都清空之前的错误信息 $(".error").text(""); // 定义一个用于判断是否进行下一个事件的标志位 var flag = true; // 校验 // 找需要校验的input // $("form input[type='text'], form input[type='password']") $("input.require").each(function () { // this --> 当前的input框 --> DOM对象 var currVal = $(this).val(); // 取到当前input框的值 if (currVal.length === 0){ // 根据值的长度和0去比较 // 提示错误信息 // $(this).next() --> 找到span标签 // 取label的text来拼接错误信息 // $(this).prev(); --> 取到当前input标签前面的label标签 var msgQz = $(this).prev().text(); $(this).next().text(msgQz + "不能为空"); flag = false; return false; // 跳出each循环 } }); return flag; }); $.fn.extend({ validate: function () { } }); $.validate("form"); $("form").validate(); </script> </body> </html>
3 正常form提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正常form提交</title> </head> <body> <form action="/index/" method="post"> <p> <label for="user">姓名</label> <input class="require" id="user" type="text" name="username"> <span class="error"></span> </p> <p> <label for="pwd">密码</label> <input class="require" id="pwd" type="password" name="passwd"> <span class="error"></span> </p> <input type="submit" value="登录"> </form> </body> </html>
4 jQuery扩展示例(1)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery扩展示例</title> </head> <body> <div>111</div> <script src="jquery-3.2.1.min.js"></script> <script> // 给jQuery添加扩展 $.extend({ xyy: function () { console.log("脱衣服"); } }); // 给jQuery对象添加扩展 $.fn.extend({ xxx: function () { console.log("ooo"); } }) </script> </body> </html>
5 jQuery扩展示例(2)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆校验作业</title> <style> .error { color: red; } </style> </head> <body> <form id="f1" action=""> <p> <label for="user">姓名</label> <input class="require" id="user" type="text" name="username"> <span class="error"></span> </p> <p> <label for="pwd">密码</label> <input class="require" id="pwd" type="password" name="passwd"> <span class="error"></span> </p> <input type="submit" value="登录"> </form> <form id="f2" action=""> <p> <label for="user2">姓名</label> <input class="require" id="user2" type="text" name="username"> <span class="error"></span> </p> <p> <label for="pwd2">密码</label> <input class="require" id="pwd2" type="password" name="passwd"> <span class="error"></span> </p> <input type="submit" value="登录"> </form> <script src="jquery-3.2.1.min.js"></script> <script> function validate(arg) { var $currEle = arg; console.log(arg); $currEle.find(":submit").on("click", function () { // 每次判断之前都清空之前的错误信息 $(".error").text(""); // 定义一个用于判断是否进行下一个事件的标志位 var flag = true; // 校验 // 找需要校验的input // $("form input[type='text'], form input[type='password']") $currEle.find("input.require").each(function () { // this --> 当前的input框 --> DOM对象 var currVal = $(this).val(); // 取到当前input框的值 if (currVal.length === 0){ // 根据值的长度和0去比较 // 提示错误信息 // $(this).next() --> 找到span标签 // 取label的text来拼接错误信息 // $(this).prev(); --> 取到当前input标签前面的label标签 var msgQz = $(this).prev().text(); $(this).next().text(msgQz + "不能为空"); flag = false; return false; // 跳出each循环 } }); return flag; }); } // 文档加载完之后执行 $(document).ready(function () { // validate(); $("#f1").check(); }); // 给我的jQuery对象添加了一个名叫check的扩展 $.fn.extend({ check: function () { // this表示的是的当前操作的标签 validate(this); } }); // // //// $.validate("form"); // $("form").validate(); </script> </body> </html>
6 jQuery扩展示例(3)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆校验作业</title> <style> .error { color: red; } </style> </head> <body> <form id="f1" action=""> <p> <label for="user">姓名</label> <input class="require" id="user" type="text" name="username"> <span class="error"></span> </p> <p> <label for="pwd">密码</label> <input class="require" id="pwd" type="password" name="passwd"> <span class="error"></span> </p> <input type="submit" value="登录"> </form> <form id="f2" action=""> <p> <label for="user2">姓名</label> <input class="require" id="user2" type="text" name="username"> <span class="error"></span> </p> <p> <label for="pwd2">密码</label> <input class="require" id="pwd2" type="password" name="passwd"> <span class="error"></span> </p> <input type="submit" value="登录"> </form> <script src="jquery-3.2.1.min.js"></script> <script src="extend.js"></script> <script src="extend2.js"></script> <script> $("#f1").check(); </script> </body> </html>
7 extend.js
// a = function(jq){
// function f2(arg) {
// var $currEle = arg;
// console.log(arg);
// $currEle.find(":submit").on("click", function () {
// // 每次判断之前都清空之前的错误信息
// jq(".error").text("");
// // 定义一个用于判断是否进行下一个事件的标志位
// var flag = true;
// // 校验
// // 找需要校验的input
// // $("form input[type='text'], form input[type='password']")
// $currEle.find("input.require").each(function () {
// // this --> 当前的input框 --> DOM对象
// var currVal = jq(this).val(); // 取到当前input框的值
// if (currVal.length === 0){ // 根据值的长度和0去比较
// // 提示错误信息
// // $(this).next() --> 找到span标签
// // 取label的text来拼接错误信息
// // $(this).prev(); --> 取到当前input标签前面的label标签
// var msgQz = jq(this).prev().text();
// jq(this).next().text(msgQz + "不能为空");
// flag = false;
// return false; // 跳出each循环
// }
// });
// return flag;
// });
// }
//
// // 文档加载完之后执行
// jq(document).ready(function () {
// // validate();
// jq("#f1").check();
// });
//
// // 给我的jQuery对象添加了一个名叫check的扩展
// jq.fn.extend({
// check: function () {
// // this表示的是的当前操作的标签
// f2(this);
// }
// });
//
// };
//
// // 为了防止某些坏人把$赋值成别的变量
// a(jQuery);
// 匿名函数
(function (jq) {
function f2(arg) {
var $currEle = arg;
console.log(arg);
$currEle.find(":submit").on("click", function () {
// 每次判断之前都清空之前的错误信息
jq(".error").text("");
// 定义一个用于判断是否进行下一个事件的标志位
var flag = true;
// 校验
// 找需要校验的input
// $("form input[type='text'], form input[type='password']")
$currEle.find("input.require").each(function () {
// this --> 当前的input框 --> DOM对象
var currVal = jq(this).val(); // 取到当前input框的值
if (currVal.length === 0){ // 根据值的长度和0去比较
// 提示错误信息
// $(this).next() --> 找到span标签
// 取label的text来拼接错误信息
// $(this).prev(); --> 取到当前input标签前面的label标签
var msgQz = jq(this).prev().text();
jq(this).next().text(msgQz + "不能为空");
flag = false;
return false; // 跳出each循环
}
});
return flag;
});
}
// 文档加载完之后执行
jq(document).ready(function () {
// validate();
jq("#f1").check();
});
// 给我的jQuery对象添加了一个名叫check的扩展
jq.fn.extend({
check: function () {
// this表示的是的当前操作的标签
f2(this);
}
});
})(jQuery);
8 extend2.js
function f2() {
console.log("f2 from extend2");
}
二、课堂图片：
1
2
3
4
5
6 ready方法的含义
7
8
9
10
