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 ...
随机推荐
- 阿里云环境安装K8S步骤
1. 安装docker yum install -y docker 2. 修改 /etc/docker/daemon.json 文件并添加上 registry-mirrors 键值 $ vim /et ...
- laydate.render报错：日期格式不合法
在使用laydate渲染日期时: laydate.render({ elem: '#day' }); 提示日期格式不合法 需要使用 too.dateType()来包装 <input type=& ...
- jquery与angular的交互
HTML: <table class="table table-striped" ng-app="myApp"> <tr> <th ...
- js:如何在iframe重载前执行特定动作
问题说明: 点击左侧菜单时,右侧页面中的iframe加载菜单内容,在iframe加载的页面A中使用了websocket.点击其它菜单时,无法主动关闭websocket, 可能会造成websocket链 ...
- DL Practice：Cifar 10分类
Step 1:数据加载和处理 一般使用深度学习框架会经过下面几个流程: 模型定义(包括损失函数的选择)——>数据处理和加载——>训练(可能包括训练过程可视化)——>测试 所以自己写代 ...
- JobStorage.Current property value has not been initialized. You must set it before using Hangfire Client or Server API.
JobStorage.Current property value has not been initialized. You must set it before using Hangfire Cl ...
- Spring Boot 的Logback
Spring Boot 默认使用Logback记录日志 Spring Boot starter 都会默认引入spring-boot-starter-logging,不需要再引入 日志级别从高到低:TR ...
- RestTemplate支持GET方法携带Body信息
首先必须声明: GET方法支持通过Body携带参数(HTTP1.1开始支持) 但是默认的RestTemplate是不支持滴!原因如下: RestTemplate支持通过setRequestFactor ...
- IDEA配置类签名
- 011 SpringCloud 学习笔记7-----Zuul网关
1.Zuul网关概述 通过前面的学习,使用Spring Cloud实现微服务的架构基本成型,大致是这样的: 我们使用Spring Cloud Netflix中的Eureka实现了服务注册中心以及服务注 ...