前端修炼——jQuery进阶！
2018-09-22 20:43
393 查看
内容概述：
显示隐藏、淡入淡出、向上向下卷起
操作元素的属性
表单相关事件
jQuery 正则
常用的事件
显示隐藏、淡入淡出、向上向下卷起
hide() 隐藏
show() 显示
toggle() 切换显示和隐藏
fadeIn() 淡入
fadeOut 淡出
fadeToggle() 切换淡入和淡出
slideUp() 向上卷起
slideDown() 向下展开
slideToggle() 切换向上向下
stop() 可以只保留最后一次动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background: gold;
/* display: none; */
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $btn = $('#btn');
var $div = $('.box');
$btn.click(function(){
// 制作显示和隐藏的动画
// $div.hide(); // 隐藏
// $div.show(); // 显示
// $div.toggle(); // 切换显示也隐藏
// 制作淡入和淡出动画
// $div.fadeIn(); // 淡入
// $div.fadeOut(); // 淡出
// $div.fadeToggle(); // 切换淡入和淡出
// 制作向下展开和向上卷起的动画
// $div.slideUp(); // 向上卷起
// $div.slideDown(); // 向下展开
// $div.slideToggle(); // 切换向上和向下
// 切换效果时每次点击都会被记录，jQuery会执行完每一次，stop可以在快速点击时只让最后一次生效
$div.stop().slideToggle();
})
})
</script>
</head>
<body>
<input type="button" value="动画" id="btn">
<div class="box"></div>
</body>
</html>[/code]
操作元素的属性
prop() 取出或者设置某个属性的值
html() 取出或者设置 html 内容，等于 innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $a = $('#link01')
var $div = $('#div1')
// 读取属性值
var sId = $a.prop('id');
// console.log(sId);
// 写入或者叫做设置属性值
$a.prop({'href':'http://www.jandan.net/ooxx','title':'这是去到小姐姐图片的链接','className':'big'});
// 操作元素包裹的内容
// 读取内容
var sTr = $div.html();
// 写入也叫做设置或者修改元素包裹的内容
$div.html('改变的文字');
$div.html('<ul><li>列表文字</li></ul><ul><li>列表文字</li></ul>');
})
</script>
</head>
<body>
<a href="#" id="link01">一个链接</a>
<div id="div1">这是一个div</div>
</body>
</html>[/code]
表单相关事件
blur() 文本框失去焦点
sumbit() 表单提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $form = $('#form01'),
$txt = $('#input_txt'),
$sub = $('#input_sub')
$txt.blur(function(){
// console.log('失去焦点');
var sVal = $(this).val();
console.log(sVal);
})
// 绑定表单提交事件
$form.submit(function(){
// console.log('提交了')
// 阻止表单的默认提交行为
return false;
})
})
</script>
</head>
<body>
<form action="" id="form01">
<input type="text" name="username" id="input_txt">
<br><br>
<input type="submit" id="input_sub" value="提交">
</form>
</body>
</html>[/code]
正则
正则表达式的写法：jQuery 正则表达式和 python 基本上一样，用法上有些区别
jQuery 默认是非贪婪
正则字符var re = new RegExp(‘规则’,‘可选参数’)
var re = /规则/参数
修饰参数匹配单个字符：. , \d, \D, \s, \S, \w, \W，[]，\b(匹配单词边界)，\B(匹配非单词边界)
匹配多个字符：*，+，？，{}
匹配开头结尾：^, $
常用函数g: global, 全文搜索，默认搜索到第一个结果停止
i: ingore case, 忽略大小写，默认大小写敏感
正则默认规则test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
默认非贪婪，匹配成功就结束，不会继续匹配，区分大小写
在正则前后加上匹配开头结尾可以让正则全匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 创建正则表达式
// 第一种方式:
var reTest01 = new RegExp('a');
// 第二种方式：
var reTest02 = /a/;
var reTest03 = /a/i; // i 不分大小写
// test 函数是懒惰的，需要在正则中设置开头和结尾
var reTest04 = /^\d+$/;
var sTr01 = 'abc';
var sTr02 = 'Abc';
var sTr03 = '12321312312';
var sTr04 = '1233435sdfa';
// 使用正则表达式
// console.log(reTest02.test(sTr01));
// console.log(reTest02.test(sTr02));
// console.log(reTest03.test(sTr02));
console.log(reTest04.test(sTr03));
console.log(reTest04.test(sTr04));
</script>
</head>
<body>
</body>
</html>[/code]
常用的事件
focus() 元素获得焦点
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为 mouseenter 和 mouseleave 事件指定处理函数
ready() DOM 加载完成 ，jQuery 库的 $ 函数封装了 ready 事件
$(document).ready(function(){})
$(function(){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $Input = $('#input01');
// 一般不在 focus 事件上绑定函数
/* $Input.focus(function(){
console.log('获得焦点！')
}) */
// focus 一般用在 inpu 输入框默认获取焦点
$Input.focus();
})
</script>
</head>
<body>
<input type="text" id="input01">
</body>
</html>[/code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: #555;
margin: 100px auto;
}
.box2{
width: 100px;
height: 100px;
background: green;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $(".box");
// mouseover 和 mouseout 移入子元素也会触发
/* $div.mouseover(function(){
$(this).animate({'margin-top':150})
})
$div.mouseout(function(){
$(this).animate({'margin-top':100})
}) */
// mouseenter 和 mouseleave 移入子元素不会触发 阻止事件冒泡
/* $div.mouseenter(function(){
$(this).animate({'margin-top':150})
})
$div.mouseleave(function(){
$(this).animate({'margin-top':100})
}) */
// 上面两句可以用 houver 事件合并成一句
$div.hover(function(){
$(this).animate({'margin-top':150})
},function(){
$(this).animate({'margin-top':100})
})
})
</script>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>[/code]
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端修炼——jQuery高级！
- 【前端学习笔记】JQuery事件细节、JQ进阶常用方法
- Web前端——JQuery的进阶（动态的显示某个div控件,选择器的构建）
- Web前端——JQuery的进阶（测试使用 jQuery进行指定的操作）
- 前端基础进阶（八）：详细图解jQuery对象，以及如何扩展jQuery插件
- 前端基础进阶（十一）：详细图解jQuery对象，以及如何扩展jQuery插件
- 前端知识体系及修炼攻略
- 前端基础---jquery练习
- 前端工程师修炼之道之HTML复习
- web前端，jquery实现瀑布流总结5，jQuery CSS 操作 - css() 方法
- web前端复习(一):jquery实现轮播
- 前端验证框架：JQuery插件之JQuery Validate
- 前端开发——jquery之事件委托和绑定
- jQuery ajaxFileUpload文件上传之前端
- Web前端开发修炼之道
- 前端知识体系及修炼攻略
- 常用的jQuery前端技巧收集
- 前端知识体系及修炼攻略
- Ajax进阶----jQuery中的Ajax(下)
- JavaScript & JQuery 交互式Web前端开发