2020-01-05 第十九天！

JQ其它事件：

<!DOCTYPE html>

<head>

<title>input框事件</title>

</style>

$(function(){

// //一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件属性）

// $('#txt01').focus();

// //文本框获取焦点的时候（有光标闪烁的时候）

// $('#txt01').focus(function() {

// alert('focus');

// });

// //失去焦点的时候（光标离开的时候）

// $('#txt01').blur(function() {

// alert('blur');

// });

// //输入框内容发生变化的时候，失去焦点后触发，可用于注册时验证用户名是否已存在

// $('#txt01').change(function() {

// alert('change');

// });

//松开键盘按键就触发

$('#txt01').keyup(function() {

alert('keyup');

});

})

</script>

</head>

<body>

</body>

</html>

绑定事件bind：

<!DOCTYPE html>

<head>

<title>绑定事件bind</title>

</style>

$(function(){

// //只能绑定click事件，不能绑定其他的了

// $('#btn').click(function() {

// /* Act on the event */

// });

//bind方式可绑定多个事件

$('#btn').bind('click mouseover', function() {

alert('hello!');

//取消绑定事件

$(this).unbind('mouseover');

});

})

</script>

</head>

<body>

</body>

</html>

自定义时间：

<!DOCTYPE html>

<head>

<title>自定义事件</title>

</style>

$(function(){

//自定义事件只能用bind方式绑定，第一个参数是事件的名字，第二个参数是事件发生时执行的函数

$('#btn1').bind('hello', function(){

alert('hello');

})

$('#btn1').bind('click', function(){

alert('click');

})

$('#btn2').click(function() {

// trigger即可以触发自定义事件，也可以触发原始的事件

$('#btn1').trigger('hello');

$('#btn1').trigger('click');

});

//不一定点击按钮触发，也可页面加载时触发，也可在满足某种if条件时触发

// $('#btn1').trigger('hello');

})

</script>

</head>

<body>

</body>

</html>

事件冒泡：

<!DOCTYPE html>

<head>

.grandfather{

width: 300px;

height: 300px;

background-color: green;

position: relative;

}

.father{

width: 200px;

height: 200px;

background-color: gold;

}

.son{

width: 100px;

height: 100px;

background-color: red;

position: absolute;

left: 0;

top: 400px;

}

</style>

$(function(){

$('body').click(function() {

alert(4);

});

$('.grandfather').click(function() {

alert(3);

});

$('.father').click(function() {

alert(2);

});

$('.son').click(function(event) {//event代表当前事件

alert(1);

// console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标

// alert("X轴坐标：" + event.clientX);

// //阻止事件冒泡

// event.stopPropagation();

//合并阻止操作：把阻止冒泡和阻止默认行为合并

return false;

});

//阻止右键菜单

$(document).contextmenu(function(event){

// //阻止默认行为（原来右键能弹出菜单，阻止后无法弹出）

// event.preventDefault();

//合并阻止

return false;

})

</script>

</head>

<body>

</div>

</body>

</html>

弹框阻止冒泡：

<!DOCTYPE html>

<head>

<title>定时器弹框</title>

.pop_con{

display: none;/*默认不显示，用定时器显示*/

}

.pop{

width: 400px;

height: 300px;

background-color: #fff;

border: 1px solid #000;

position: fixed;/*使用固定定位*/

left: 50%;/*左上角位于页面中心*/

top: 50%;

margin-left: -200px;/*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/

margin-top: -150px;

z-index: 9999;/*弹窗在最前面*/

}

/*遮罩样式*/

.mask{

position: fixed;

width: 100%;

height: 100%;

background-color: #000;

left: 0;

top: 0;

/*设置透明度30%，兼容IE6、7、8*/

opacity: 0.3;

filter: alpha(opacity=30);

z-index: 9990;/*遮罩在弹窗后面*/

}

</style>

$(function(){

$('#btn').click(function() {

$('#pop').show();

return false;

});

$('#shutoff').click(function() {

$('#pop').hide();

});

//点弹框以外的地方，也能让弹框消失

$(document).click(function(){

// setTimeout(function(){

// $('#pop').hide();

// },2000);

$('#pop').hide();

});

$('.pop').click(function() {

return false;

});

//阻止默认行为（原来超链接可跳转到百度，阻止后无法跳转）

$('#link1').click(function() {

return false;

});

})

</script>

</head>

<body>

</div>

</div>

</body>

</html>

事件委托：

<!DOCTYPE html>

<head>

.list{

list-style: none;

}

.list li{

height: 30px;

background-color: green;

margin-bottom: 10px;

color: #fff;

}

</style>

$(function(){

给每个li绑定事件，一共绑定了8次，性能不高

$('.list li').click(function() {

alert($(this).html());

});

事件委托：方法delegate，只绑定一次事件，冒泡触发

参数：

selector选择器：写入ul下面的所有要发生事件的元素，多个元素用空格隔开，例如‘li a span’

eventType事件

function要执行的操作

$('.list').delegate('li', 'click', function() {

//$(this)指发生事件的子集，即每个li

alert($(this).html());

//全部取消委托

$('.list').undelegate();

});

})

</script>

</head>

<body>

</ul>

</body>

</html>

节点操作：

<!DOCTYPE html>

<head>

</style>

$(function(){

var $span = $('<span>span元素</span>');

var $p = $('<p>p段落元素</p>');

var $h = $('<h1>页面标题</h1>');

/*插入子元素*/

//div中插入span和p（末尾追加）

// $('#div1').append($span);

// $('#div1').append($p);

// 把span和p插入div中

$span.appendTo('#div1');

$p.appendTo('#div1');

//把子元素插入到父元素（前面追加）

// $('#div1').prepend($span);

// $('#div1').prepend($p);

// $span.prependTo('#div1');

// $p.prependTo('#div1');

//在div前边插入兄弟h1标题

// $('#div1').before($h);

$h.insertBefore('#div1');

//在后边插入兄弟元素

//after()

//insertAfter()

//删除p标签

$p.remove();

})

</script>

</head>

<body>

</body>

</html>

ajax：

<!DOCTYPE html>

<head>

</style>

$.ajax({

url: 'data.json',//请求的服务器路径，实际开发中写文档接口的路径

type: 'get',//分get/post请求，涉及隐私或安全性要求较高的用post、安全要求不高及数据量较小的用get

dataType: 'json',//要读取什么格式的数据，还可以是xml script html upload等

// data:{page:1}//请求时要携带的参数

})

.done(function(data){//成功的时候会执行的函数，参数data是从后台接收到的数据，这里是json格式的字符串

alert(data.name);

console.log(data);

})

.fail(function(){//失败的时候会执行的函数

console.log("error");

})

.fail(function(XMLHttpRequest, textStatus, errorThrown) {//失败（带参数）

console.log("error");

// 状态码

console.log(XMLHttpRequest.status);

// 状态

console.log(XMLHttpRequest.readyState);

// 错误信息

console.log(textStatus);

})

.always(function(){//不论成功与否都会执行

console.log("always");

})

*/;

</script>

</head>

<body>

</body>

</html>

json：

<!DOCTYPE html>

<head>

<title>jsonp</title>

</style>

// alert($);//function(a,b){return new n.fn.init(a,b)}

jsonp可以跨域请求数据的原理：

主要是利用了script标签可以跨域链接资源的特性

function aa(dat){

alert(dat.name);

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>jQuery-jsonp</title>

</style>

$.ajax({

url: 'http://localhost:8080/1803/js/data.js',//跨域请求的地址，也可用相对路径js/data.js

type: 'get',

dataType: 'jsonp',//使用jsonp跨域请求

jsonpCallback:'aa'

})

.done(function(data) {

alert(data.name);

})

.fail(function() {

console.log("error");

});

</script>

</head>

<body>

</body>

</html>

json 公开接口：

<!DOCTYPE html>

<head>

<title>jsonp公开接口</title>

//360搜索的公开接口

//https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=s

$(function(){

$('#txt01').keyup(function() {

var val = $(this).val();

$.ajax({

url: 'https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&fields=word',//请求360搜索的公开接口

type: 'get',

dataType: 'jsonp',//跨域请求

data: {word: val},//携带参数

jsonpCallback:'suggest_so'//指定360提供的jsonp的回调函数

})

.done(function(data) {

console.log(data);

// alert(data.result.length);//10条数据

$('.list').empty();//先清空列表

//模拟搜索联想，循环插入新列表

/*原生JS循环

for(var i=0; i<data.result.length; i++){

var $li = $('<li>'+data.result[i].word+'</li>');

$li.appendTo('.list');

}*/

// JQ循环

$(data.result).each(function (index, item) {

var $li = $('<li>'+item.word+'</li>');

$li.appendTo('.list');

})

/*.fail(function(XMLHttpRequest, textStatus, errorThrown) {//失败

console.log("error");

// 状态码

console.log(XMLHttpRequest.status);

// 状态

console.log(XMLHttpRequest.readyState);

// 错误信息

console.log(textStatus);

});*/

.fail(function(jqXHR, textStatus, errorThrown) {//失败

console.log("error");

/*弹出jqXHR对象的信息*/

console.log(jqXHR.responseText);

console.log(jqXHR.status);

console.log(jqXHR.readyState);

console.log(jqXHR.statusText);

/*弹出其他两个参数的信息*/

console.log(textStatus);

console.log(errorThrown);

});

})

</script>

</head>

<body>

</body>

</html>

正则：

<!DOCTYPE html>

<head>

</style>

//校验QQ

//JS的方式比较麻烦

function checkQQ(qq){

var flag = true;//默认符合要求

if(qq.length>=5 && qq.length<=15){

if(qq.indexOf("0")){

if(isNaN(qq)){

flag = false;//不是数字

}

}else{

flag = false;//以0开头，不符合QQ标准

}

}else{

flag = false;//长度不符合

}

return flag;

}

console.log(checkQQ("012345"));

console.log(checkQQ("a12b345"));

console.log(checkQQ("123456"));//true

console.log(checkQQ("1234567890987654321"));

//正则匹配简单高效

var regex = /^[1-9]\d{4,14}$/;

console.log(regex.test("012345"));

console.log(regex.test("a12b345"));

console.log(regex.test("123456"));//true

console.log(regex.test("1234567890987654321"));

</script>

</head>

<body>

</body>

</html>

正则表达式：

<!DOCTYPE html>

<head>

<title>正则表达式</title>

</style>

//匹配字母a，i表示忽略大小写，g表示全文检索

var re = new RegExp('a', 'ig');

var re2 = /a/ig;

var str = 'abc';

//调用test方法进行匹配，匹配成功返回true，否则返回false

// alert(re2.test(str));//true

//匹配字母ac，忽略大小写，全文检索

re2 = /ac/ig;

// alert(re2.test(str));//false

//匹配数字

var re3 = /\d/;

var str3 = '123';

// alert(re3.test(str3));//true

str3 = '123ab1';

// alert(re3.test(str3));//true

//匹配数字，全文检索

re3 = /\d/g;

// alert(re3.test(str3));//true

//匹配数字开头并结尾

re3 = /^\d$/;

// alert(re3.test(str3));//false

//匹配从开头到结尾有一个或多个数字

re3 = /^\d+$/;

// alert(re3.test(str3));//false

//匹配数字、字母、下划线

var re4 = /\w/;

var str4 = '@asd';

// alert(re4.test(str4));//true

//匹配数字、字母、下划线开头

re4 = /^\w/;

// alert(re4.test(str4));//false

str4 = 'as&d';

// alert(re4.test(str4));//true

//匹配从开头到结尾有一个或多个数字、字母、下划线

re4 = /^\w+$/;

// alert(re4.test(str4));//false

var str5 = '123adfas894fasdfas15122dfad85';

var re5 = /\d+/g;//全文检索一个或多个数字

var arr = str5.match(re5);

// alert(arr);//123,894,15122,85

var re6 = /d/;//匹配字母d

// alert(str5.search(re6));//4//search相当于indexOf()函数

//replace函数用于替换

var str6 = str5.replace(re5, '*');

// alert(str6);//*adfas*fasdfas*dfad*

//正则表达式的替换功能

var s = "Once111a22wolf,3always4a5wolf!";

var regex = /\d+/g;

var s2 = s.replace(regex, " ");

// console.log(s2);

/*叠词*/

//快快乐乐、高高兴兴

regex = /(.)\1(.)\2/;//()表示分组，.表示任意字符，匹配第一组任意字符再出现一次、第二组任意字符再出现一次

// console.log(regex.test("快快乐乐"));//true

// console.log(regex.test("快乐乐乐"));

// console.log(regex.test("高高兴兴"));//true

// console.log(regex.test("快乐快乐"));

//快乐快乐、高兴高兴

regex = /(..)\1/;//匹配两个任意字符再出现一次

// console.log(regex.test("快乐快乐"));//true

// console.log(regex.test("高兴高兴"));//true

// console.log(regex.test("快快快快"));//true

// console.log(regex.test("快快乐乐"));

//叠词切割

// s = 'sdqqfgkkkhjppppkl';

// regex = /(.)\1+/;

// var arr = s.split(regex);

// console.log(arr);//由于()中的是子表达式，会导致保留一个叠词字母，不符合要求

s = 'sdqqfgkkkhjppppkl';

regex = /(.)\1+/g;//匹配叠词，即多个重复的字母

var s2 = s.replace(regex, " ");//将叠词替换为空格

var arr = s2.split(' ');//再按照空格进行切割

// console.log(arr);//返回["sd","fg","hj","kl"]，符合要求

//字符串替换

var s = "我我....我...我.要...要要...要学....学学..学.编..编编.编.程.程.程..程";

var s2 = s.replace(/\.+/g, "");//删除所有的点

// console.log(s2);

var s3 = s2.replace(/(.)\1+/g, "$1");//全文检索叠词，替换为单个字符，例如多个“我”替换成一个“我”

// console.log(s3);

//提取手机号

//regex = /^1[3578]\d{9}$/;手机号的正则，只能匹配17688888888

var s = '我的手机号码是17688888888，曾经用过13187654321，还用过13512345678';

var regex = /1[3578]\d{9}/g;//第一位是1，第二位是3578中的一个，后面9位是任意数字，并全文检索

var arr = s.match(regex);//match方法返回匹配成功的数组

console.log(arr);//["17688888888","13187654321","13512345678"]

</script>

</head>

<body>

</body>

</html>

最后编辑于：2020.01.08 18:38:39

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,193评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,306评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,130评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,110评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,118评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,085评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,007评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,844评论 0赞 273
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,283评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,508评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,667评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,395评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,985评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,630评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,797评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,653评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,553评论 2赞 352

2020-01-05 第十九天！

推荐阅读更多精彩内容