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 ...
随机推荐
- OSI七层模型、TCP/IP五层模型
OSI网络互连的七层框架:物理层.数据链路层.网络层.传输层.会话层.表示层.应用层: <1>应用层 OSI参考模型中最靠近用户的一层,是为计算机用户提供应用接口,为用户直接提供各种网络服 ...
- python - logging.basicConfig format参数无效
有这么一段python代码 import threading import time import requests from decimal import Decimal, ROUND_DOWN i ...
- iOS - 在xib中UILabel文字如何换行
在换行的位置按住Option + Enter键即可换行
- [ Docker ] 基础的网络应用
1. Docker 基本网络模型 Docker 有 4 种基本的网络模型: bridge 桥接模式 host 网络模式 container 联盟模式 none 模式 Docker daemon 在启动 ...
- hive 字符串截取
语法 :substr(字段,starindex,len) 下标从 1 开始 测试 ,) from siebel_cx_order limit ; -- -- -- -- -- -- -- -- -- ...
- spark 提交任务报错 Yarn application has already ended! It might have been killed or unable to launch application master
1.任务是提交在yarn上的,查看 resourceManager页面 有如下信息 Current usage: 58.4 MB of 1 GB physical memory used; 2.2 G ...
- python 中的eval与exec
eval类似exec,是使用python编译器运行表达式和语句两者区别在于:eval是编译表达式并返回值(如: eval("'hello'*2") 结果是 hellohello)e ...
- ThinkPHP3(添加，修改，删除)
实现商品的添加 1.在add.html页面中更改表单元素的名称 Goods控制器的add()方法中获取商品分类 在add.html中循环获取 2.设置提交的位置 3.添加商品代码参见GoodsCont ...
- 在ensp上配置RIPv2的认证
原理 实验模拟 实验拓扑 测试连通性 搭建rip网络 查看路由表 R3模拟攻击首先把在自己的的ip通告网段 配置完成后查看一下路由表 可以看到已经非法获取R1R2的网段信息,那么现在我们R3可以向两个 ...
- 浏览器解析js和type判断数据类型
### 浏览器解析: - 1.当浏览器(内核.引擎)解析和渲染js的时候,会给js提供一个运行的环境,这个环境叫做“全局作用域(后端global / 客服端window scope)” - 2.代码自 ...