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记录-Dockerfile详解
Dockerfile命令详解 下面我们来分别介绍下上面使用到的命令: FROM 格式:FROM 或FROM :. 解释:FROM必须是Dockerfile里的第一条指令(注视除外),后面跟有效的镜像名 ...
- （二）Java数据结构和算法——数组
一.数组的实现 上一篇博客我们介绍了一个数据结构必须具有以下基本功能: ①.如何插入一条新的数据项 ②.如何寻找某一特定的数据项 ③.如何删除某一特定的数据项 ④.如何迭代的访问各个数据项,以便进行显 ...
- 图片转化base64格式
public function Base64EncodeImage($ImageFile) { // 图片转化base64格式 , 图片需要在本地,有访问权限 , 相对于项目路径 if(file_ex ...
- linux 安装 btrace
1.下载btrace https://github.com/btraceio/btrace/releases/download/v1.3.8.3-1/btrace-bin-1.3.8.3.tgz2.上 ...
- redis启动警告解决
vim /etc/rc.localecho never > /sys/kernel/mm/transparent_hugepage/enabled加入上面那句到/etc/rc.local,开机启 ...
- 【maven学习】settings.xml文件详解
环境 apache-maven-3.6.1 jdk 1.8 eclipse 4.7 Settings.xml是设置maven参数的配置文件,包含类似本地仓储位置.修改远程仓储服务器.认证信息等配置.p ...
- [数据结构 - 第3章] 线性表之双向链表（C语言实现）
一.什么是双向链表? 双向链表(double linked list)是在单链表的每个结点中,再设置一个指向其前驱结点的指针域.所以在双向链表中的结点都有两个指针域,一个指向直接后继,另一个指向直接前 ...
- 【idea】【sonarlint】指定文件夹扫描
选择文件夹右键->Analyze->Analyze with SonarLint
- mac下php配置
打开/关闭服务 sudo apachectl start sudo apachectl stop 查看apche版本 apacectl -v 修改项目默认路径: 打开配置文件目录/private/et ...
- 小白的C++之路——结构体
结构体与数组不同的是结构体能包含不同类型的数据,像一个综合性的仓库,更加灵活. #include <iostream> #include <string> #include & ...