前端：jQuery框架
1. jquery 1.1 版本 1.x 兼容性更好，支持很多旧的浏览器， ie6,ie7 3.x 更新，体积更小 1.2 使用导入jquery的js<script src="路径/js文件名"></script>1.3 jquery API链接：https://pan.baidu.com/s/1A
1. jquery
1.1 版本
1.x 兼容性更好，支持很多旧的浏览器， ie6,ie7
3.x 更新，体积更小
1.2 使用
导入jquery的js
<script src="路径/js文件名"></script>1.3 jquery API
链接：https://pan.baidu.com/s/1AnLMdjw03C5-r0BqimrqKQ 密码：uigo
1) 基本选择器
`#id值, .class值, 标签名`
`*` 表示选择所有标签
`,` 用来把多个选择器的结果合并
$("选择器")
对比
document.getElementById();
document.getElementsByTagName();
document.querySelector()
document.querySelectorAll()
2) 层级选择器
`空格` 祖先后代选择
`>` 父子选择器
3) 筛选器
:first 找到结果中的第一个
:last 找到结果中的最后一个
:eq(n) 找第n个元素（n从0开始）
:odd 找下标为奇数的
:even 找下标为偶数的
:gt(n) 下标大于n的
:lt(n) 下标小于n的
p:not(p:first) 取反 除了第一个段落以外的其它段落
:not(p:first) 取反 除了第一个段落以外的其它所有标签
4) 属性选择器
$("input[name]"); // 选中有name属性的input
$("input[name=aaa]"); // 选中有name属性，并且值为aaa的input
可以同时匹配多个属性
$("input[type=button][name=aaa]"); // 必须type是按钮，并且name为aaa的input
5) 子元素选择器
:nth-child(n) // 该元素是作为第几个子元素，n从1开始,
:first-child // 作为第一个孩子
:last-child // 作为最后一个孩子
例如：
$("td:nth-child(1)") // 选中表格中第一列
$("td:nth-child(4)") // 选中表格中第四列
6) 表单选择器
input[type=button] 等价于 :button // 匹配所有的按钮
:radio // 单选按钮
:password // 密码框
:checkbox // 复选框
:submit // 提交按钮
:reset // 重置按钮
:checked // 单选框或复选框是否被选中
例如：
:checkbox:checked // 找到被选中的复选框
1.4 对标签执行的操作
1) 修改内容
.text(); // 获取标签的内容， 功能上等价于：innerText;
.text(新内容); // 将标签的内容改为新的 ， 功能上等价于：innerText;
.html(); // 获取标签内容 功能上等价于：innerHTML
.html(新内容); // 将标签的内容改为新的 功能上等价于：innerHTML
.empty(); // 清空内容, 不删除标签
2) 删除标签
.remove(); // 删除整个标签， 功能上等价于 子标签.parentNode.removeAttribute(子标签);
3) 修改属性
.prop("属性名"); // 获取属性的值
.prop("属性名", "新值"); // 修改属性
.val(); // 获取value属性的值
.val(新值); // 修改value属性的值
4) 样式属性
// 推荐用class的方式操作样式
.addClass("样式"); // 操作的标签的class属性, 添加一个class值
.removeClass("样式"); // 操作的标签的class属性, 移除一个class值
.css("样式名", "样式值"); // 操作的是style属性, 修改一个style样式
.css("样式名"); // 操作的是style属性, 获取一个style样式值
5) 显示隐藏
.hide() 隐藏标签 // 操作的是style标签： 加了display:none;
.show() 显示标签
.toggle() 切换显示与隐藏的效果
.hide(毫秒值); // 会有动画效果，动画效果会持续该毫秒值 .slideUp(); .fadeOut();
.show(毫秒值); // 会有动画效果，动画效果会持续该毫秒值 .slideDown(); .fadeIn();
6) 尺寸
.width(); // 仅包括内容部分的宽度
.innerWidth(); // 宽度 = 内容宽度+ 内间距宽度
.outerWidth(); // 宽度 = 内容宽度+ 内间距宽度 + 边框宽度
.height();
.innerHeight();
.outerHeight();
$(window) // 把原始的window对象，包装成了jquery的window对象， 就具备了jquery中的方法
$(window).width(); // 窗口的宽
$(window).height();// 窗口的高
动画方法
.animate({样式对象}, 动画时间); // 其中样式对象，表示动画结束时的坐标
$("div:first").animate({left:100}, 2000);
1.5 创建
<input type="button" value="按钮">$("<input>") // 带了尖角号，不是查找input标签，而是创建input标签
$("input") // 根据input选择器去查找
方法1：
$("<input>").prop("type", "button").val("按钮").appendTo("body"); // 追加到body, 作为body的子元素
// 链式调用, 大部分方法返回都是this
var input = document.createElement("input");
input.type = "button";
input.value = "按钮";
document.body.appendChild(input);方法2：
$('<input type="button" value="按钮">').appendTo("body"); // 根据整段的html创建按钮1.6 添加事件
<input type="button" value="按钮" onclick="函数名()">jquery中添加事件，是先用选择器找到要加事件的标签
$(选择器).事件方法(匿名函数);
$(选择器).click(function(){ 要执行的代码 });
要注意整个html的解析顺序，script 如果放在head部分，执行时会找不到body中尚未解析的标签
一种解决办法是把script 标签放在body的最后
第二种解决办法是利用jquery提供的ready事件
$(document).ready(function(){ ... }); // ready 事件， 会在所有html标签加载完成后触发
$(function(){ ... }); // 等价写法
1.6.1 事件类型
$(选择器).dblclick(...); // 双击
$(选择器).mouseover(...); // 鼠标移入
$(选择器).mouseout(...); // 鼠标移出
jQuery实现简单的表单验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {width: 100%; border-collapse: collapse;}
td {padding: 10px;}
tr:first-child { border-top: orange 2px solid;}
tr:last-child { border-bottom: orange 2px solid;}
.lv1{background-color: red; color:white;}
.lv2{background-color: orange;color:white;}
.lv3{background-color: green;color:white;}
table span {color: red;}
td:last-child {width: 250px;}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<form action="aaa">
<table>
<tbody>
<tr>
<td>用户名</td>
<td><input type="text" id="username"></td>
<td><span id="usernameMsg"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" id="password"></td>
<td><span id="passwordMsg"></span></td>
</tr>
<tr>
<td><input type="button" value="获取短信验证码" id="codeBtn"></td>
<td><input type="text" id="code"></td>
<td><span id="codeMsg"></span></td>
</tr>
<tr>
<td><input type="checkbox" id="agree"> 同意"服务条款"和"隐私权相关政策"</td>
<td></td>
<td><span id="agreeMsg"></span></td>
</tr>
</tbody>
</table>
<br>
<input type="submit" value="注册" id="register">
<script>
// e代表事件对象
$("#register").click(function(e){
// 主动触发用户名，密码，同意是否勾选的实际
$("#username").blur(); // blur没有传递函数，是主动触发事件
$("#password").keyup(); // 主动触发密码事件
if(checkUsername() & checkPassword() & checkAgree()) {
} else {
e.preventDefault(); // 阻止默认行为, 这里就是阻止了表单提交
}
});
$("#agree").click(function() {
checkAgree();
});
// 是否同意
function checkAgree() {
var r = $("#agree").prop("checked");
if(r == false) {
$("#agreeMsg").text("必须同意");
} else {
$("#agreeMsg").text("");
}
return r;
}
// 密码不能为空
function checkPassword() {
var v = $.trim($("#password").val());
return v.length>0;
}
function checkUsername() {
var v = $.trim($("#username").val());
return v.length>2;
}
// 短信验证码
$("#codeBtn").click(function(){
// this.disabled = true;
$(this).prop("disabled", true);
// setTimeout用来延时执行一个函数
setTimeout(enableCodeBtn, 1000); // 1 秒后执行 enableCodeBtn 函数
});
var c = 5;
function enableCodeBtn() {
if(c > 0) {
$("#codeBtn").val(c+"秒后重新获取");
setTimeout(enableCodeBtn, 1000); // 1 秒后再次调用自己
c--;
} else {
$("#codeBtn").prop("disabled", false); // 启用
$("#codeBtn").val("获取短信验证码");
c = 5;
}
}
$("#password").keyup(function(){
var v = $.trim(this.value); // 获取填写的密码值
if(v.length == 0) {
// 密码不能为空
$("#passwordMsg").text("密码不能为空").addClass("lv1");
return;
}
var count = 0;
if(/[0-9]/.test(v)) {
count++; // 计数加1
}
if(/[A-Za-z]/.test(v)) {
count++; // 计数加1
}
if(/[^0-9A-Za-z]/.test(v)) {
count++;
}
if(count == 3 && v.length>=6) {
// 高强度
$("#passwordMsg").text("高强度").removeClass("lv2").removeClass("lv1").addClass("lv3");
} else if(count == 2 && v.length>=6) {
// 中强度
$("#passwordMsg").text("中强度").removeClass("lv3").removeClass("lv1").addClass("lv2");
} else {
// 低强度l
$("#passwordMsg").text("低强度").removeClass("lv2").removeClass("lv3").addClass("lv1");
}
});
// 光标离开事件 onblur
$("#username").blur(function(){
// 检查文本框填写的内容是否超过2个字符
//$("#username").val();
// this 代表的是触发事件的标签, 属于dom对象，只有value属性，没有val() 方法
console.log(this.value);
// 另一种办法：把this对象转换为jquery对象
console.log($(this).val());
if($.trim(this.value).length<2) {
// 提示错误信息
$("#usernameMsg").text("用户名长度必须至少2个字符"); // 修改标签之间的内容
} else {
// 填写正确要清除错误提示
$("#usernameMsg").text("");
}
});
</script>
</form>
</body>
</html>
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)