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');

// });

// //輸入框內容發(fā)生變化的時候，失去焦點后觸發(fā)贡歧，可用于注冊時驗證用戶名是否已存在

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

// alert('change');

// });

//松開鍵盤按鍵就觸發(fā)

$('#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方式綁定，第一個參數(shù)是事件的名字利朵，第二個參數(shù)是事件發(fā)生時執(zhí)行的函數(shù)

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

alert('hello');

})

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

alert('click');

})

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

// trigger即可以觸發(fā)自定義事件律想，也可以觸發(fā)原始的事件

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

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

});

//不一定點擊按鈕觸發(fā)，也可頁面加載時觸發(fā)哗咆，也可在滿足某種if條件時觸發(fā)

// $('#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，只綁定一次事件考抄，冒泡觸發(fā)

參數(shù)：

selector選擇器：寫入ul下面的所有要發(fā)生事件的元素细疚，多個元素用空格隔開，例如‘li a span’

eventType事件

function要執(zhí)行的操作

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

//$(this)指發(fā)生事件的子集川梅，即每個li

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

//全部取消委托

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

});

})

</script>

</head>

<body>

</ul>

</body>

</html>

節(jié)點操作：

<!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',//請求的服務器路徑疯兼，實際開發(fā)中寫文檔接口的路徑

type: 'get',//分get/post請求，涉及隱私或安全性要求較高的用post贫途、安全要求不高及數(shù)據(jù)量較小的用get

dataType: 'json',//要讀取什么格式的數(shù)據(jù)吧彪，還可以是xml script html upload等

// data:{page:1}//請求時要攜帶的參數(shù)

})

.done(function(data){//成功的時候會執(zhí)行的函數(shù)，參數(shù)data是從后臺接收到的數(shù)據(jù)丢早，這里是json格式的字符串

alert(data.name);

console.log(data);

})

.fail(function(){//失敗的時候會執(zhí)行的函數(shù)

console.log("error");

})

.fail(function(XMLHttpRequest, textStatus, errorThrown) {//失斠搪恪（帶參數(shù)）

console.log("error");

// 狀態(tài)碼

? ? ? ? ? ? console.log(XMLHttpRequest.status);

? ? ? ? ? ? // 狀態(tài)

? ? ? ? ? ? console.log(XMLHttpRequest.readyState);

? ? ? ? ? ? // 錯誤信息?

? ? ? ? ? ? console.log(textStatus);

})

.always(function(){//不論成功與否都會執(zhí)行

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可以跨域請求數(shù)據(jù)的原理：

主要是利用了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.#/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.#/suggest?encodein=utf-8&encodeout=utf-8&format=json&fields=word',//請求360搜索的公開接口

type: 'get',

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

data: {word: val},//攜帶參數(shù)

jsonpCallback:'suggest_so'//指定360提供的jsonp的回調函數(shù)

})

.done(function(data) {

console.log(data);

// alert(data.result.length);//10條數(shù)據(jù)

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

//模擬搜索聯(lián)想香拉，循環(huán)插入新列表

/*原生JS循環(huán)

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

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

$li.appendTo('.list');

}*/

// JQ循環(huán)

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

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

? ? ? ? ? ? $li.appendTo('.list');

? ? ? ? ? })

})

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

console.log("error");

// 狀態(tài)碼

? ? ? ? ? ? console.log(XMLHttpRequest.status);

? ? ? ? ? ? // 狀態(tài)

? ? ? ? ? ? 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);

? ? ? ? ? ? /*彈出其他兩個參數(shù)的信息*/

? ? ? ? ? ? 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;//不是數(shù)字

}

}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

//匹配數(shù)字

var re3 = /\d/;

var str3 = '123';

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

str3 = '123ab1';

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

//匹配數(shù)字，全文檢索

re3 = /\d/g;

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

//匹配數(shù)字開頭并結尾

re3 = /^\d$/;

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

//匹配從開頭到結尾有一個或多個數(shù)字

re3 = /^\d+$/;

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

//匹配數(shù)字苦掘、字母换帜、下劃線

var re4 = /\w/;

var str4 = '@asd';

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

//匹配數(shù)字、字母鹤啡、下劃線開頭

re4 = /^\w/;

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

str4 = 'as&d';

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

//匹配從開頭到結尾有一個或多個數(shù)字惯驼、字母、下劃線

re4 = /^\w+$/;

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

var str5 = '123adfas894fasdfas15122dfad85';

var re5 = /\d+/g;//全文檢索一個或多個數(shù)字

var arr = str5.match(re5);

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

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

// alert(str5.search(re6));//4//search相當于indexOf()函數(shù)

//replace函數(shù)用于替換

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/;//()表示分組祟牲，.表示任意字符，匹配第一組任意字符再出現(xiàn)一次抖部、第二組任意字符再出現(xiàn)一次

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

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

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

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

//快樂快樂说贝、高興高興

regex = /(..)\1/;//匹配兩個任意字符再出現(xiàn)一次

// 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，曾經(jīng)用過13187654321蛋哭，還用過13512345678';

var regex = /1[3578]\d{9}/g;//第一位是1县习，第二位是3578中的一個，后面9位是任意數(shù)字谆趾，并全文檢索

var arr = s.match(regex);//match方法返回匹配成功的數(shù)組

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

</script>

</head>

<body>

</body>

</html>

最后編輯于：2020.01.08 18:38:39

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市叛本，隨后出現(xiàn)的幾起案子沪蓬，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 218,546評論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異纷闺，居然都是意外死亡刨仑，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,224評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門姑原，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事园欣。” “怎么了休蟹？”我有些...
開封第一講書人閱讀 164,911評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵沸枯，是天一觀的道長。經(jīng)常有香客問我赂弓，道長绑榴，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,737評論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任盈魁，我火速辦了婚禮翔怎，結果婚禮上，老公的妹妹穿的比我還像新娘杨耙。我一直安慰自己赤套，他們只是感情好，可當我...
茶點故事閱讀 67,753評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布按脚。她就那樣靜靜地躺著于毙，像睡著了一般。火紅的嫁衣襯著肌膚如雪辅搬。梳的紋絲不亂的頭發(fā)上唯沮，一...
開封第一講書人閱讀 51,598評論 1贊 305
城市分裂傳說
那天脖旱，我揣著相機與錄音，去河邊找鬼介蛉。笑死萌庆，一個胖子當著我的面吹牛，可吹牛的內容都是我干的币旧。我是一名探鬼主播践险，決...
沈念sama閱讀 40,338評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼吹菱！你這毒婦竟也來了巍虫？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 39,249評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤鳍刷，失蹤者是張志新（化名）和其女友劉穎占遥，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體输瓜，經(jīng)...
沈念sama閱讀 45,696評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡瓦胎，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,888評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了尤揣。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片搔啊。...
茶點故事閱讀 40,013評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖北戏，靈堂內的尸體忽然破棺而出负芋，到底是詐尸還是另有隱情，我是刑警寧澤最欠，帶...
沈念sama閱讀 35,731評論 5贊 346
?日本核電站爆炸內幕
正文年R本政府宣布示罗，位于F島的核電站，受9級特大地震影響芝硬，放射性物質發(fā)生泄漏蚜点。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,348評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一拌阴、第九天我趴在偏房一處隱蔽的房頂上張望绍绘。院中可真熱鬧，春花似錦迟赃、人聲如沸陪拘。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,929評論 0贊 22
一樁弒父案纤壁，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽左刽。三九已至，卻和暖如春酌媒，著一層夾襖步出監(jiān)牢的瞬間欠痴，已是汗流浹背迄靠。一陣腳步聲響...
開封第一講書人閱讀 33,048評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留喇辽，地道東北人掌挚。一個月前我還...
沈念sama閱讀 48,203評論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像菩咨，于是被迫代替她去往敵國和親吠式。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,960評論 2贊 355

2020-01-05 第十九天！

2020-01-05 第十九天众旗！

推薦閱讀更多精彩內容