您的位置：首页 > Web前端 > JQuery

二十四、python学习之前端(七):JQuery进阶

2018-09-30 17:20 519 查看
版权声明：浅弋、璃鱼的原创 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}$/;

    3.案例:表单检验:

    点击下载表单校验案例资源

    阅读更多
    • 内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航