版权声明：浅弋、璃鱼的原创 https://blog.csdn.net/qq_35709559/article/details/82909970
一、jquery特殊效果:
1.特殊动画:
1.1 特殊动画函数:
a.无参直接隐藏/显示/切换,带参变成动画
| 函数 | 功能 |
| hide() | 隐藏元素 |
| show() | 显示元素 |
| toggle() | 切换元素的可见状态; |
代码实例:
<script>
$(function() {
$("button").click(function() {
// 1.show()/hide()/toggle():
// 显示隐藏,无参数时,默认显现; 参数为毫秒值,是显示/隐藏的速度
$("div").show(400);
$("div").hide(400);
$("div").toggle(400);
})
})
</script>
b. 滑入滑出:无参使用默认值(默认400ms)
| 函数 | 功能 |
| slideDown() | 向下展开 |
| slideUp() | 向上卷起 |
| slideToggle() | 依次展开或卷起某个元素 |
代码实例:
<script>
$(function() {
$("button").click(function() {
// 2.slideDown()/slideUp()/slideToggle(): 滑入滑出(卷帘门)
$("div").slideDown(800,function() { // 匿名函数
alter("下拉动作...")
});
$("div").slideUp(); // 使用默认值, 400ms
$("div").slideToggle(600);
})
})
</script>
c. 淡入淡出:
| 函数 | 功能 |
| fadeIn() | 淡出 |
| fadeOut()) | 淡出 |
| fadeToggle() | 切换淡入淡出 |
| fadeTo(时间, 透明度(0-1) ) | 淡入淡出,固定半透明度 |
代码实例:
<script>
$(function() {
$("button").click(function() {
// 3.fadeIn()/fadeOut()/fadeToggle()/fadeTo() : 淡入淡出
$("div").fadeIn(); // 淡入
$("div").fadeOut(2000); // 淡出
$("div").fadeToggle(function() {
alert("淡入淡出切换...")
}) // 淡入/淡出
// 半透明程度: 必须传递时间
$("div").fadeTo(600, 0.4) // 参数一:时间毫秒值; 参数二: 最终的透明度(0~1)
})
})
</script>
二、链式调用:
1.什么是链式调用:
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写.
2. 案例:层级菜单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_案例三_层级菜单</title>
<style type="text/css">
body{
font-family:'Microsoft Yahei';
}
body,ul{
margin:0px;
padding:0px;
}
ul{
list-style:none;
}
.menu{
width:200px;
margin:20px auto 0;
}
.menu .level1,.menu li ul a{
display:block;
width:200px;
height:30px;
line-height:30px;
text-decoration:none;
background-color:#3366cc;
color:#fff;
font-size:16px;
text-indent:10px;
}
.menu .level1{
border-bottom:1px solid #afc6f6;
}
.menu li ul a{
font-size:14px;
text-indent:20px;
background-color:#7aa1ef;
}
.menu li ul li{
border-bottom:1px solid #afc6f6;
}
.menu li ul{
display:none;
}
.menu li ul.current{
display:block;
}
.menu ul a:hover{
background-color:#f6b544;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
$(".menu a").click(function() {
$(this).next().slideDown();
$(this).parent("li").siblings().children("ul").slideUp();
})
})
</script>
</head>
<body>
<ul class="menu">
<li>
<a href="#" class="level1">手机</a>
<ul class="current">
<li><a href="#">iPhone X 256G</a></li>
<li><a href="#">红米4A 全网通</a></li>
<li><a href="#">HUAWEI Mate10</a></li>
<li><a href="#">vivo X20A 4GB</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">笔记本</a>
<ul>
<li><a href="#">MacBook Pro</a></li>
<li><a href="#">ThinkPad</a></li>
<li><a href="#">外星人(Alienware)</a></li>
<li><a href="#">惠普(HP)薄锐ENVY</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">电视</a>
<ul>
<li><a href="#">海信(hisense)</a></li>
<li><a href="#">长虹(CHANGHONG)</a></li>
<li><a href="#">TCL彩电L65E5800A</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">鞋子</a>
<ul>
<li><a href="#">新百伦</a></li>
<li><a href="#">adidas</a></li>
<li><a href="#">特步</a></li>
<li><a href="#">安踏</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">玩具</a>
<ul>
<li><a href="#">乐高</a></li>
<li><a href="#">费雪</a></li>
<li><a href="#">铭塔</a></li>
<li><a href="#">贝恩斯</a></li>
</ul>
</li>
</ul>
</body>
</html>
三、jquery属性操作:
属性操作:普通属性; 特殊属性
1. 普通属性: id/title/src/href/name/…
1.1 操作普通属性:arrt()
var idVal = $("input").attr("id");
1.2 操作表单属性:prop
var valSelect = $("option").prop("selected") // 获取选中状态
$("option").prop("selected", false); //设置未被选中
$("option").prop("selected", true); //设置选中
1.3 总结:
- 普通属性用attr(), 表单属性用prop();
- attr获取不到返回undefined;
2. 特殊属性:
js中的特殊属性:
InnerHTML/className/style/value...
innerHTML --> html()
className --> addClass()/removeClass()/toggleClass()
style --> css()
value --> val()
3. 案例:聊天窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例_模拟聊天窗口</title>
<link rel="stylesheet" href="css/chat.css">
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
// 需求:点击下边的按钮,根据select和input拼接成一个div,当如words里边
$(".talk_sub").click(function() {
// 验证输入框不为空
if($("#talkwords").val() == ""){
alert("内容不能为空...")
return;
}
if($("#who").val() == "0"){
var str = '<div class="atalk"><span>A说：'+ $("#talkwords").val() +'</span></div>'
}else {
var str = '<div class="btalk"><span>B说：'+ $("#talkwords").val() +'？</span></div>'
}
$("#words").html($("#words").html() + str)
//输入完成后内容清空,重新获取插入条光标
$(".talk_word").val("").focus()
})
})
</script>
</head>
<body>
<div class="talk_con">
<!-- 显示区域 -->
<div class="talk_show" id="words">
<div class="atalk"><span>A说：吃饭了吗？</span></div>
<div class="btalk"><span>B说：还没呢，你呢？</span></div>
</div>
<!-- 发送内容区域 -->
<div class="talk_input">
<!-- 选项: 带有selected的选项,的value值和select标签共享 -->
<select class="whotalk" id="who">
<option value="0">A说：</option>
<option value="1">B说：</option>
</select>
<!-- 请输入内容 -->
<input type="text" class="talk_word" id="talkwords">
<!-- 按钮 -->
<input type="button" value="发送" class="talk_sub" id="talksub">
</div>
</div>
</body>
</html>
四、jquery事件
1.事件:
- blur() 元素失去焦点
- focus() 元素获得焦点
- click() 鼠标单击
- mouseover() 鼠标进入（进入子元素也触发）
- mouseout() 鼠标离开（离开子元素也触发）
- mouseenter() 鼠标进入（进入子元素不触发）
- mouseleave() 鼠标离开（离开子元素不触发）
- hover() 同时为mouseenter和mouseleave事件指定处理函数
- ready() DOM加载完成
- submit() 用户递交表单
-
- 取消提交的方法一: return false;
-
- 取消提交的方法二: event.preventDefault()
五、表单校验:
1.正则的定义:
1.1 定义方法一:
var re1 = /^aaa$/ig; // i: 忽略大小写; g:全局搜索
1.2 定义方法二:
var re2 = new RegExp("^aaa$", 'ig') //两个参数,第一个是表达式,第二个是参数
2.正则的使用:
正则对象.test("需要校验的字符串")
console.log(re1.test('aaa'))
console.log(re1.test('aaaa'))
// 简单的正则校验:
//用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;
//邮箱验证：
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手机号码验证：
var rePhone = /^1[3578]\d{9}$/;