06-jQuery进阶
本篇主要介绍jQuery的正则、冒泡事件、委托事件、以及DOM操作、JavaScript对象以及ajax等知识；
一、正则
简而言之，正则的规则无论是各种语言均是通用的，故其规则中的字符便不再介绍了，通常前端所需要的是常用的正则规则即可；
1.1 正则表达式的写法
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;
1.2 正则的默认规则 -- 匹配成功就结束，不会继续匹配，区分大小写
1.3 用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
1.4 常用的正则规则
//用户名验证：(数字字母或下划线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[34578]\d{9}$/;
二、事件冒泡
2.1 什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
2.2 事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
2.3 事件冒泡的阻止
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div
事件冒泡的阻止
2.4 阻止默认行为
阻止表单提交
$('#form1').submit(function(event){
event.preventDefault();
})
合并阻止操作
// event.stopPropagation();
// event.preventDefault(); // 合并写法：
return false;
三、 事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
<script>
$(function(){
var $li = $('.list li');
var $ul = $('.list');
//alert($li.length);
/*
$li.click(function(){
$(this).css({'background':'red'});
})
*/
// 上面的写法性能不高，可以写成事件委托的形式：
$ul.delegate('li','click',function(){
// $(this) 指的是发生事件冒泡的子级
$(this).css({'background':'red'});
})
}) </script>
...............
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
四、DOM操作
元素节点操作指的是改变html的标签结构，它有两种情况：
1、移动现有标签的位置
2、将新创建的标签插入到现有的标签中
4.1 创建新标签
var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>');
4.2 移动或者插入标签的方法
|
1、append()和appendTo()：在现存元素的内部，从后面放入元素 2、prepend()和prependTo()：在现存元素的内部，从前面放入元素 3、after()和insertAfter()：在现存元素的外部，从后面放入元素 4、before()和insertBefore()：在现存元素的外部，从前面放入元素 |
例如：
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>
4.3 删除标签
$('#div1').remove();
4.4 todolist(计划列表)实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
} .list li span{
float:left;
} .list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $btn = $('#btn1');
var $txt = $('#txt1');
var $list = $('#list'); // 点击增加
$btn.click(function(){
var sTr = $txt.val(); $txt.val('')
if(sTr ==''){
alert('输入不能为空!!!');
return;
} var sContent = '<li><span>'+ sTr +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>';
var $li = $(''+sContent) $list.append($li)
}) // 点击删除、上移下移
$list.delegate('a','click',function(){
var sCname = $(this).prop('class'); // 删除操作
if (sCname == 'del') {
$(this).parent().remove();
} //上移操作
if(sCname == 'up'){ var slen = $(this).parent().prev().length;
if(slen == 0) {
alert('已经在最顶层了！！！')
return;
} $(this).parent().insertBefore($(this).parent().prev());
} //下移操作
if (sCname=='down') { var slen = $(this).parent().next().length
alert(slen)
if ( slen == 0) {
alert('已经在最底层了！！')
return
}
$(this).parent().insertAfter($(this).parent().next());
} }) }) </script>
</head>
<body> <div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt">
<input type="button" name="" value="增加" id="btn1" class="inputbtn"> <ul id="list" class="list"> <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> </ul> </div>
</body>
</html>
todolist
五、JavaScript对象
javascript中的对象，可以理解成是一个键值对的集合，键是调用每个值的名称，值可以是基本变量，还可以是函数和对象。
创建javascript对象有两种方法，一种是通过顶级Object类来实例化一个对象，然后在对象上面添加属性和方法：
第一次方式：通过顶级Object类来实例化一个对象
var person = new Object(); // 添加属性：
person.name = 'tom';
person.age = '25'; // 添加方法：
person.sayName = function(){
alert(this.name);
} // 调用属性和方法：
alert(person.age);
person.sayName();
第二次方式：通过对象直接量
var person2 = {
name:'Rose',
age: 18,
sayName:function(){
alert('My name is' + this.name);
}
}
// 调用属性和方法：
alert(person2.age);
person2.sayName();
六、ajax
6.1 常用参数有：
|
1、url 请求地址 |
例如：
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
})
.done(function(dat) {
alert(dat.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});
6.2 $.ajax按照请求方式可以简写成$.get或者$.post方式
$.get("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});
$.post("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});
6.3 同步和异步
现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。
Over~~~只是简单的介绍进行学习~~~~~~
06-jQuery进阶的更多相关文章
- jquery 进阶
1.0 jquery的ajax同步和异步区别 2.0 cdnjquery加载失败加载本地 <script type="text/javascript" src="/ ...
- python 学习笔记十三 JQuery(进阶篇)
jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. 安装jQuery 有两个版本的 jQuery 可供下载: Production versio ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- 2015.01.06 JQuery
jQuery是一个兼容多浏览器的javascript库.开发出来的JavaScript的脚本包.非侵入性的脚本. 下载地址:http://jquery.com/ (打不开网页需要翻* ...
- Web开发——jQuery进阶
参考: 参考:http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 参考:Asynchronous J ...
- 06 Jquery 基础
前端学习之jquery: jQuery:一个库 Jquery的基础语法: $(selector).action() 基本选择器: <script> //基本选择器 //$("*& ...
- [UI] 06 - jQuery
前言 From : http://www.runoob.com/jquery/jquery-intro.html Ref: jQuery 实例 一.什么是 jQuery ? jQuery是一个Java ...
- jquery 进阶 bootstrap
. 样式操作 . 操作class . 操作CSS属性的 .css("color") .css("color", "green") .css( ...
- jquery进阶(1)
今天我们接着来学习jQuery中的内容,包括css的操作.尺寸的操作.文档的操作.动画(有待补充),事件处理操作. 一.CSS 在css中可以设置css的基本属性 - .css("color ...
- jQuery进阶第三天（2019 10.12）
一.原生JS快捷的尺寸(属性)(注意这些属性的结果 不带PX单位) clientWidth/clientHeight =====> 获得元素content+padding的宽/高: offse ...
随机推荐
- spring boot 打包引入第三方jar
本文作者:@Ryan Miao 本文链接:https://www.cnblogs.com/woshimrf/p/springboot-package-3rdparty-lib.html 版权声明: 本 ...
- 第一次使用markdown
一级标题 二级标题 三家标题 四级标题 五级标题 六级标题 用两个空格来换行 斜体字 斜体字 加粗字体 加粗字体 斜体加粗字体 斜体加粗字体 无序列表用*或者+或者-: 第一箱 第二项 第三项 第四项 ...
- ios评分功能实现
/** * 只能评分,不能编写评论 * 有次数限制,一年只能使用三次 * 使用次数超限后,需要跳转appstore */ - (IBAction)systemComentBtnAction:( ...
- django 未成功初始化自定义表单
用以下两句 python3 manage.py makemigrations python3 manage.py migrate 成功初始化了数据库,但是只初始化了django自带的表,未初始化我自定 ...
- 破解FTP登录密码的几种方法
工具 Hydra X-Hydra Medusa Ncrack Patator Metasploit Hydra hydra -L /root/Desktop/user.txt -P /root/Des ...
- 【MongoDB学习之二】MongoDB数据库、文档、集合、元数据
环境 MongoDB 4.0 CentOS6.5_x64 一.连接语法格式: mongodb://[username:password@]host1[:port1][,host2[:port2],.. ...
- eclipse不提示
1.菜单window->Preferences->Java->Editor->Content Assist->Enable auto activation 选项要打上勾 ...
- 2019 C语言测试
求一元二次方程ax² + bx + c = 0的解 a,b,c为任意整数.(10分) 编写一个口令输入程序,让用户不停输入口令,直到输对为止,假设口令为456.(8分) 输出1000-9999之间能 ...
- day52——jquery引入与下载、标签查找、操作标签
day52 jquery引入 下载链接:jQuery官网 https://jquery.com/ 中文文档:jQuery AP中文文档 http://jquery.cuishifeng.cn/ < ...
- c语言 判断字符串长度 实现
/* 首先明白答案的本质(该函数)是一个计数器该计数器用for循环来实现实现对一串字符串的计数字符串以空格开头 不计算空格 计算空格后的数字直到遇到\0结束.num计算器字符串不以空格结束 计算空格后 ...