前端- jquery- 总结
生活随笔
收集整理的這篇文章主要介紹了
前端- jquery- 总结
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、jquery與js的區別
（1）javascript的缺點
書寫繁瑣，代碼量大代碼復雜動畫效果，很難實現。使用定時器 各種操作和處理(2)?JavaScript和jquery的定義
注意：一般情況下，是庫的文件，該庫中都會拋出來構造函數或者對象，如果是構造函數，那么使用new關鍵字創建對象，如果是對象直接調用屬性和方法
?
（3）區別
# 1 DOM文檔加載的步驟1.解析HTML結構。2.加載外部腳本和樣式表文件。3.解析并執行腳本代碼。4.DOM樹構建完成。$(document).ready(function(){}) / $(function(){})5.加載圖片等外部文件。6.頁面加載完畢。window.onload() #2 執行時間不同 window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。$(document).ready()是DOM結構繪制完畢后就執行，不必等到加載完畢。#3 編寫個數不同 window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個$(document).ready()可以同時編寫多個，并且都可以得到執行#4 簡化寫法不同 window.onload沒有簡化寫法$(document).ready(function(){})可以簡寫成$(function(){});?
?
?
（4）juqery的引入與使用
<script src="jquery-3.2.1.js"></script><script type="text/javascript">$(document).ready(function () {});$(function () {})</script>?
?
2、jquery選擇器
? 1.基本選擇器
//1.標簽選擇器$($('h1')[0]).click(function () {$(this).css('background-color','red');$(this).css('font-size','22px');$(this).css('line-height','22px');});//2.id選擇器$('#old').click(function () {$(this).css('color','green');});//3.class選擇器$('.box1').click(function () {$(this).css('font-size','30px');});//4.通配符選擇器 * 使用不是很頻繁//$('*').html(''); 清空整個頁面的dom元素?
?
?2.層級選擇器
//1.后代選擇器$('ul p').click(function () {$(this).css('color','red')});//2.子代選擇器$('ul>li').click(function () {$(this).css('font-size','22px')});//3.毗鄰選擇器 匹配該元素緊鄰的下一個兄弟元素$('ul+h2').click(function () {$(this).css('background-color','red')});//4.兄弟選擇器， 匹配的元素后面的所有兄弟元素$('ul~h3').click(function () {$(this).css('color','blue');});?
3.基本過濾選擇器
//1.獲取first last元素$('li:first').css('font-size','43px');$('li:last').css('font-size','43px');//2.eq gt lt 選中索引值為1的元素 * ，大于，小于$('li:eq(1)').css('font-size','43px');$('li:gt(1)').css('font-size','13px');$('li:lt(1)').css('font-size','23px');//3.奇數偶數$('li:odd').css('background-color','pink');$('li:even').css('background-color','orange');?
4.屬性選擇器
//1. 標簽名[屬性名] 查找所有含有id屬性的該標簽簽名的元素$('li[id]').css('color','red');//2. 匹配給定的屬性值是active的元素$('li[class=active]').css('color','red');//3.$('li[class^=a]').css('color','red');//4.$('li[class$=e]').css();//5. 匹配給定的屬性是以包含某些值的元素$('li[class*=btn]').css() 解釋：標簽名[屬性名]，查找所有含有id屬性的該標簽名的元素
匹配給定的屬性 是what值 [attr=value] 匹配給定的屬性是某個特定值的元素
沒有class 也會發生變化，[attr!=value] 匹配所有不含有指定的屬性，或者屬性不等于特定值的元素
匹配給定的屬性是以某些值開始的元素 ^
匹配給定的屬性是以某些值結尾的元素 $
匹配給定的屬性是以包含某些值的元素 *
? ? 5.篩選選擇器/篩選方法
（1）each遍歷方法
1.each 遍歷$('ul').children().each(function (index,ele) {// console.log(index,ele);var isDanger = $(this).hasClass('danger');if(isDanger){$(this).css('color','red');}else{$(this).css('font-size','28px');}});?
?
（2）父兄子
$($('h1')[2]).click(function () {//1.獲取父級節點$(this).parent(); //一個父親節點$(this).parents(); //所有父輩節點//2.獲取兄弟節點$(this).siblings(); //所有的兄弟節點 $(this).prev(); //前一個兄弟節點$(this).prevAll(); //all 前一個兄弟節點 $(this).next(); //下一個兄弟節點$(this).nextAll(); //all 下一個兄弟節點//3.獲取兒子，后代節點$(this).parent().children('h1').css('font-size','22px'); //所有的兒子節點$(this).parent().find('h1').css('color','red'); //后代節點//4.指定eq last first$(this).parent().children().eq(2);$(this).parent().children().first();$(this).parent().children().last();//5.指定標簽 h1$(this).parent().children('h1');$(this).parents('body').children('h1');})?
解釋：獲取第n個元素 數值從0開始 .eq()
獲取第一個元素 .first()
獲取最后一個元素 .last()
獲取父親元素 .parent()
選擇所有的兄弟元素 .siblings()
查找所有的后代元素 .find()
?
3、jquery對象和Dom對象轉換
#Dom對象--> jquery對象var box = document.getElementById('box');console.log($(box));#jquery對象--> DOM對象$('button')[0]$('button').get(0)#注：Dom對象 box.onclick = function(){}jquery對象 $(box).click(function(){})?
?
?
4、效果
1. 隱藏顯示 hide show toggle?
show: 顯示隱藏的匹配元素 語法：show(speed,callback) 參數：1.speed：三種預定速度之一的字符串('slow','normal','fast')或表示動畫時長的毫秒值（如：1000毫秒==1秒）
2.callback:在動畫完成時執行的函數，每個元素執行一次
hide: hide(speed,callback)跟show使用方法類似，表示隱藏顯示的元素。
可以通過show（）和hide（）方法，來動態控制元素的顯示隱藏
toggle: 如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
$('#box').css('display','block');
$('#box').show('slow',function(){}) // slow normal fast
$('#box').hide(2000,function(){})
$('#box').toggle(3000,function(){}) <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">#box1 {border: 1px solid red;width: 70px;height: 70px;}</style> </head><body> <div id="box1"></div> <input type="button" id="btn" value="隱藏"> <script src="jquery-3.2.1.min.js"></script> </body><script type="text/javascript">//隱藏顯示 hide show toggle $(function () {$('#btn').click(function () { // $(this).prev().toggle(); });var flag = 1$('#btn').click(function () {if (flag) {$(this).prev().hide(3000)$(this).val('顯示');flag = 0}else{$(this).prev().show(2000)$(this).val('隱藏')flag = 1}})}) </script> </html>
?
2. 盒子變高變低 slideUp slideDown slideToggle
slideDown: 通過高度變化（向下增大）來到動態地顯示所有匹配的元素，在顯示完成后觸發一個回調函數.用法和參數跟上面類似.
slideUp: 通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成后可選地觸發一個回調函數。
用法和參數跟上面類似.
slideToggle: 通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發一個回調函數.
跟toggle用法類似.
$('#box').slideDown(2000);
$('#box').slideUp(3000);
$('#box').slideToggle('slow');
?
3.淡入淡出 fadeIn fadeOut fadeTo fadeToggle
fadeIn: 通過不透明度的變化來實現所有匹配元素的淡入效果，并在動畫完成后可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
fadeOut: 通過不透明度的變化來實現所有匹配元素的淡出效果，并在動畫完成后可選地觸發一個回調函數。
這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
fadeTo: 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，并在動畫完成后可選地觸發一個回調函數。
這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
fadeToggle：通過不透明度的變化來開關所有匹配元素的淡入和淡出效果，并在動畫完成后可選地觸發一個回調函數。
這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
實現淡入淡出的效果就是使用此方法。 $("p").fadeIn("900"); //用900毫秒時間將段落淡入$("p").fadeOut("900"); //用900毫秒時間將段落淡出$("p").fadeToggle("900"); //用900毫秒時間將段落淡入,淡出$("p").fadeTo("slow", 0.6); //用900毫秒時間將段落的透明度調整到0.6
4、動畫 animate ?delay stop
animate：用于創建自定義動畫的函數。animate(params,[speed],[fn])。
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合。
speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
fn:在動畫完成時執行的函數，每個元素執行一次。
stop: 停止所有在指定元素上正在運行的動畫。
stop([clearQueue],[jumpToEnd])
clearQueue:如果設置成true，則清空隊列。可以立即結束動畫。默認是false
設置成false，讓當前正在執行的動畫立即完成，并且重設show和hide的原始樣式，調用回調函數等。
delay: 用來做延遲的操作。
delay(1000)，一秒之后做后面的操作。 // jquery 鏈式調用<script type="text/javascript">$(function () {//動畫 animate delay stop $('#btn').click(function () {$(this).prev().animate({'width':'200px','height':'200px'},3000)$(this).prev().animate({'margin-left':'20px'}).delay(200).animate({'margin-top':'30px'})});$('#btn1').click(function () {$(this).prevAll('div').stop()})}) </script>
?
?
?
5、jquery的屬性操作
jquery的屬性操作模塊分為四個部分：html屬性操作，dom屬性操作，類樣式操作和值操作。html屬性操作：是對html文檔中的屬性進行讀取，設置和移除操作。比如attr()、removeAttr()
DOM屬性操作：對DOM元素的屬性進行讀取，設置和移除操作。比如prop()、removeProp()
類樣式操作：是指對DOM屬性className進行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：是對DOM屬性value進行讀取和設置操作。比如html()、text()、val():用于表單控件中獲取值，比如input textarea select等等 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>單個標簽 修改css屬性</title><style type="text/css">.active {background-color: pink;}.box1 {color: orange;}.font1 {font-size: 22px;}</style> </head> <body> <h1 id="Luffycity" class="box1">路飛學城</h1> <input type="button" id="btn" value="點擊"> <h2 id="oldBoy">老男孩</h2><script src="jquery-3.2.1.min.js"></script> </body><script type="text/javascript">$(function () {$("#Luffycity").click(function () {//1. html屬性操作 attr()//1.1 獲取標簽的 各種屬性值 ： attr() 如果有1個參數，表示獲取值 $(this).attr('id');$(this).attr('class');$(this).attr('title');//1.2 設置標簽的屬性值class id name： attr() 如果有2個參數，表示設置值 $(this).attr('class', 'active');$(this).attr({'id': 'box2', 'name': 'name11'}); //如果設置多個類名，不能使用attr//1.3 刪除1個或多個屬性 $(this).removeAttr('id');$(this).removeAttr('name title');// 2、DOM屬性操作 prop 可以設置沒有的屬性//attr 只能操作標簽自帶的屬性，//2.1 獲取該元素的class值 $(this).prop('class');//2.2 設置值 $(this).prop({'title': 'img1', 'title22': 'active'});//2.3 刪除dom對象的title屬性 $(this).removeProp('title', 'title2');// 3、類樣式操作 addClass() removeClass() toggleClass（）添加類，刪除類//3.1 添加一個或多個 class $(this).addClass('box1');$(this).addClass('box1 font1'); //添加多個//3.2 刪除一個或多個class $(this).removeClass('font1');$(this).removeClass(); //移除所有的//3.3.反復添加刪除class屬性值 $(this).toggleClass('active');///4、值操作// 4.1 獲取值 $(this).text(); //獲取標簽的text 路飛學城 $(this).html(); //獲取標簽的里面的html 路飛學城 $("#btn").val(); //獲取input標簽的 val 點擊//4.2 設置值 $(this).html('路飛學城2');$(this).text('路飛學城22');$(this).html("<span>我是一個span</span>");$("#btn").val('設置了value'); //表單控件使用的一個方法});}) </script> </html>
?
?
6、from表單中的操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">div {margin: 20px;}</style> </head> <body> <div><input type="radio" value="1" name="sex">男<input type="radio" value="2" name="sex" checked>女<input type="radio" value="3" name="sex">other </div><div><input type="checkbox" name="hobby" value="11" checked>game<input type="checkbox" name="hobby" value="12" checked>sing<input type="checkbox" name="hobby" value="13">book </div><div>username:<input type="text" name="username" placeholder="請輸入用戶名"><br>password:<input type="password" name="password" placeholder="請輸入密碼"> </div><div><button type="reset">重置</button><button type="submit">提交</button><button type="button">登錄</button> </div><div><select name="city" id="city" multiple><option value="21">shanghai</option><option value="22" selected>guangzhou</option><option value="23" selected>beijing</option><option value="24">xian</option></select> </div> <div><textarea name="desc" id="desc" cols="30" rows="10"></textarea><textarea name="desc" id="desc1" cols="30" rows="10"></textarea><textarea name="desc" id="desc2" cols="30" rows="10"></textarea> </div><script src="./jquery-3.2.1.min.js"></script> </body> <script type="text/javascript">$(function () {//1.單選框 type=radio 設置,獲取 value $("input[type=radio]").val(['0']);console.log($('input[type=radio]:checked').val());$('input[type=radio]').get(1).checked = true //radio第二個框設定為checked//2.復選框 type=checkbox 僅僅獲取第一個checked $('input[type=checkbox]').val(['12', '13']);console.log($("input[type=checkbox]:checked").val());$.each($('input[type="checkbox"]:checked'), function () { // $.each循環下 console.log($(this).val())})$('input[type=checkbox]').get(1).checked = true//3.下拉列表select option $('select').val(['23']); //設置 必須用select $('select').val(['21', '22', '23', '24'])$('select[name=city]').val(['21'])console.log($('#city option:selected').val()); //獲取值 console.log($('select[id=city]:selected').text())console.log($(':selected').text())console.log($('select>option:selected').eq(1).text())//4. 文本type=text $('input[type=text]').val('試試就是說')console.log($('input[type=text]').val())//5.button按鈕 $('button[type=reset]').html('我要重置了')//6.文本框，禁用輸入字段 $("textarea[id='desc']").attr('disabled', true)$("textarea[id='desc1']").attr('readonly', true)}) </script> </html>?
?
7、jquery的文檔操作
插入操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>節點的增刪改查</title> </head> <body> <h1>路飛學城0</h1> <script src="jquery-3.2.1.min.js"></script> </body><script type="text/javascript"> $(function () {$($('h1')[0]).click(function () {//1.創建新的標簽var oH2 = document.createElement('h2');var btn = document.createElement('input');//2.給新標簽inner 新的html text值 $(oH2).html('路飛學城2');$(oH2).text('路飛學城22');$(oH2).html("<span>我是一個span</span>");$(btn).val('設置了value');//3.給新標簽添加屬性值 id title class name $(oH2).attr('id','Luffycity2');$(oH2).attr({'title':'luff','class':'active','name':'luff'});$(oH2).addClass('active2');//插入操作//4.父子add的各種方式 append prepend $(this).parent().append(oH2); //追加到子元素的后面 $(oH2).appendTo($(this).parent());$(this).parent().prepend(oH2); //添加到子元素的最前面 $(oH2).prependTo($(this).parent());//5.同級兄弟 add元素 before after $(this).after(oH2);$(oH2).insertAfter($(this));$(this).before(oH2);$(oH2).insertBefore($(this));}) })</script> </html>?
?
復制clone(true),替換，刪除
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <h1 id="Luffycity1">路飛學城1</h1> <input type="button" id="btn" value="復制"><br> <input type="button" id="btn2" value="替換"> <input type="text" id="username" value="文本框"><br> <input type="button" id="btn3" value="empty"> <input type="button" id="btn4" value="remove"> <input type="button" id="btn5" value="detach"> <ul><li>1</li><li>2</li><li>3</li> </ul> <script src="jquery-3.2.1.min.js"></script> </body> <script type="text/javascript">$(function () {// 復制操作： $('#btn').click(function () {$('#Luffycity1').after($('#Luffycity1').clone(true)); // 2.clone(true)：元素以及其所有的事件處理并且選中這些克隆的副本(簡言之，副本具有與真身一樣的事件處理能力) $('#Luffycity1').after($('#Luffycity1').clone()); // 1.clone()：克隆匹配的DOM元素并且選中這些克隆的副本。 });// 替換操作 $('#btn2').click(function () { $('#username').replaceWith('<span>我是新的文本</span>') // 替換成指定的HTML或DOM元素。 $('<br/><hr/><button>按鈕</button>').replaceAll('h4') // 替換掉所有 selector匹配到的元素 });//刪除操作//1. empty() 只是清空了被選的內容 $('#btn3').click(function () {$('ul').empty();});//2.remove() 被選元素也被刪掉了，事件就沒有了，什么都沒有了 $('#btn4').click(function () {$('ul').remove();});//3.detach() 移除匹配的節點元素 刪除節點后，事件會保留 $('#btn5').click(function () {var btn5 = $(this).detach();console.log($(btn5));$('ul').append($(btn5));}); })</script> </html>?
?
8、jquery的位置屬性
1.position 獲取匹配元素,相對父元素得偏移console.log($('p').position());
console.log($('p').position().top);
console.log($('p').position().left);
2.scrollTop scrollLeft 獲取匹配元素,相對滾動條卷起得位置信息
console.log($(document).scrollTop());
console.log($(document).scrollLeft());
//監聽文檔滾動
$(document).scroll(function () {
console.log($(document).scrollTop());
console.log($(document).scrollLeft());
});
3.offset 獲取匹配元素，在當前位置相對于瀏覽器的偏移
console.log($('#btn').offset());
console.log($('#btn').offset().top);
console.log($('#btn').offset().left);
4.width height 獲取元素得寬高
console.log($('#box').width());
console.log($('#box').height());
// 設置寬高
$('#box').width(400);
$('#box').height(400);
5.innerWidth innerHeight
innerWidth = width + 2*padding 不包括邊框，獲取匹配元素得內部寬度
innerHeight = height + 2*padding 不包括邊框，獲取匹配元素得內部高度
console.log($('#box').innerWidth());
console.log($('#box').innerHeight());
6.outerWidth outerHeight
outerWidth = width + 2*padding + 2*border 獲取匹配元素得外部寬度
outerHeight = height + 2*padding + 2*border 獲取匹配元素得外部高度
console.log($('#box').outerWidth());
console.log($('#box').outerHeight());
//監聽文檔滾動條滾動 $(document).scroll(function () {$(document).scrollTop() > 100 ? $('#gotop').show() : $('#gotop').hide()})$('#gotop').click(function () {$('html,body').animate({scrollTop: '0'}, 2000)})
?
9、jquery案例
24-[jQuery]-案例
?
10、事件概念
1.事件的概念：HTML中與javascript交互是通過事件驅動來實現的，例如鼠標點擊事件、頁面的滾動事件onscroll等等。2.什么是事件流？事件流描述的是從頁面中接收事件的順序3.DOM事件流① 事件捕獲階段；② 處于目標階段；③ 事件冒泡階段；<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>事件流</title><script>window.onload = function(){var oBtn = document.getElementById('btn');oBtn.addEventListener('click',function(){console.log('btn處于事件捕獲階段');}, true);oBtn.addEventListener('click',function(){console.log('btn處于事件冒泡階段');}, false);document.addEventListener('click',function(){console.log('document處于事件捕獲階段');}, true);document.addEventListener('click',function(){console.log('document處于事件冒泡階段');}, false);document.documentElement.addEventListener('click',function(){console.log('html處于事件捕獲階段');}, true);document.documentElement.addEventListener('click',function(){console.log('html處于事件冒泡階段');}, false);document.body.addEventListener('click',function(){console.log('body處于事件捕獲階段');}, true);document.body.addEventListener('click',function(){console.log('body處于事件冒泡階段');}, false);};</script></head><body><a href="javascript:;" id="btn">按鈕</a></body></html> 事件流 事件流
?
1、addEventListener addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個方法接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。 最后這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。2、document、documentElement和document.body三者之間的關系：document代表的是整個html頁面； document.documentElement代表的是<html>標簽； document.body代表的是<body>標簽；?
在標準的“DOM2級事件”中規定，事件流首先是經過事件捕獲階段，接著是處于目標階段，最后是事件冒泡階段。這里可以畫個圖示意一下:
?
?
11.jquery的常用事件
（1）載入dom
當頁面載入成功后再運行的函數事件
$(document).ready(function(){do something... });//簡寫 $(function($) {do something... });?
（2）查看事件
$('.p1').click(function (ev) {console.log(ev.type); // 獲取事件的類型console.log(ev.target); // 獲取事件發生的DOM對象console.log(ev.pageX); // 獲取到光標相對于頁面的x的坐標和y的坐標 console.log(ev.pageY);console.log(ev.which) // 該方法的作用是在鼠標單擊事件中獲取到鼠標的左、中、右鍵；在鍵盤事件中獲取鍵盤的按鍵.})?
（3）事件阻止
//常用的事件方法：1.阻止事件冒泡 2.阻止默認事件 3.return false$(function () {//1.阻止事件冒泡$('div').click(function (ev) {alert('當前按鈕的事件被觸發了')});$('div button').click(function (ev) {ev.stopPropagation()});$('div #a1').click(function (ev) {ev.stopPropagation()});//2.阻止默認事件 a標簽跳轉$('div #a1').click(function (ev) {ev.preventDefault()})//3.全部阻止 return false$('div #a2').click(function () {return false})})?
?
（4）事件綁定 bind ?
// 1.事件bind//方式a$('button').bind('click mouseenter',function () {alert('事件被綁定了')});//方式b：$('a').bind({'click':add1,'mouseenter':add2});function add1() {alert('點擊事件被綁定了')}function add2() {alert('事件被綁定了')}//2.事件移除unbind$('button').unbind()$('a').unbind('mouseenter')setTimeout(function () {$('button').unbind('click',function () {alert(1111)})},3000)//3.綁定自定義事件$('button').bind('myClick',function (ev,a,b) {alert("兩個數之和是" + a+b)});$('button').trigger('myClick',[1,2]) //觸發 })$("p").one( "click", fun...) //one 綁定一個一次性的事件處理函數 注：添加的事件不能發生在未來 --》 動態生成的元素不能直接添加對象里面的事件也不能發生了-->想讓發生，事件代理！！
?
?
? bind()方法還有一種簡寫方式，上面的代碼還可以換成：
代碼如下: $("div p").click(function () {alert($(this).text()); })
bind的兩個問題
第一個問題，這里用了隱式迭代的方法，如果匹配到的元素特別多的時候，比如如果我在div里放了50個p元素，就得執行綁定50次。對于大量元素來說，影響到了性能。但是如果是id選擇器，因為id唯一，用bind()方法就很快捷了。第二個問題，對于尚未存在的元素，無法綁定。點擊頁面上的按鈕，將動態添加一個p元素，點擊這個p元素，會發現沒有動作響應。?
?
（6）事件委派 delegate
// 與bind 不同的是當時間發生時才去臨時綁定。 $("p").delegate("click",function(){do something... });$("p").undelegate(); //p元素刪除由 delegate() 方法添加的所有事件 $("p").undelegate("click") //從p元素刪除由 delegate() 方法添加的所有click事件?
?
（5）事件代理on
on()其實是將以前的綁定事件方法作了統一，可以發現無論bind()還是delegate()其實都是通過on()方法實現的，只是參數不同罷了。
事件代理: 自己完成不了當前的點擊事件，交給父級元素做這件事件父級.on('事件名字','點擊當前的標簽元素選擇器',fn)
//bind 只能綁定已經存在的標簽,對于后面添加的標簽不起作用//on事件代理 動態監聽 可以對后添加的標簽起作用 $('ul').on('click', function (ev) {alert($(ev.target).html())var newLi = document.createElement('li')$(newLi).html('10')$(this).append(newLi)$(ev.target).css('color', 'red') })// on 事件委托，以后統一用on $(document).on('click', 'ul', function (ev) {alert($(ev.target).html())var newLi = document.createElement('li')$(newLi).html('10')$(this).append(newLi)$(ev.target).css('color', 'red') })//on 實現bind的效果 $(document).on('click mouseenter', 'ol', function (ev) {alert($(ev.target).html())var newLi = document.createElement('li')$(newLi).html('10')$(this).append(newLi)$(ev.target).css('color', 'red') })
?
?
?
?
?
?
（6）jQuery事件綁定on()、bind()與delegate() 方法詳解
https://www.cnblogs.com/czaiz/p/5519421.html
總結1.選擇器匹配到的元素比較多時，不要用bind()迭代綁定2.用id選擇器時，可以用bind()3.需要給動態添加的元素綁定時，用delegate()或者on()4.用delegate()和on()方法，dom樹不要太深5.盡量使用on()?
（7）事件移除
//對應于bind()、delegate()和on()綁定方法，其移除事件的方法分別為： $( "div p" ).unbind( "click", handler ); $( "div" ).undelegate( "p", "click", handler ); $( "div" ).off( "click", "p", handler );?
12、鼠標事件
1. .click 單擊2. .dblclick 雙擊3. .mousedown 鼠標按下不松開4. .mouseup 鼠標松開5. .mouseover 移入，被選元素和子元素被選中時會觸發6. .mouseout 移出，被選元素和子元素被選中時會觸發7. .mouseenter 移入，只有被選中元素移入時8. .mouseleave 移出，只有被選中元素移入時9. .mousemove 移動10. .hover === mouseenter mouseleave$('#box').hover(function(){},function(){})11. .focus 獲取焦點12. .blur 失去焦點13. .change input發生變化時14. .keydown 鍵盤按下15. .keyup 鍵盤彈起?
?
13、表單事件
1. .change // 此事件僅限于 input元素 textarea select, 表單元素發生改變時觸發事件.2. .select // 僅限于用在 input中 type=text textarea, 文本元素發生改變時觸發事件.
3. .submit // 適應于表單提交, 表單元素發生改變時觸發事件. //表單事件$(function () {//1.change() 僅限用于 input元素 textarea select$('select').change(function () {alert($('select option:selected').text())})//2.select() 僅限用于 input type=text textarea $('#other2').select(function () {alert($(this).val())})//3.form表單提交時 submit()$('form').submit(function (ev) {alert('1111')ev.preventDefault()})})
?
?
14、jquery的Ajax
AJAX = 異步的javascript和XML（Asynchronous Javascript and XML） 簡言之，在不重載整個網頁的情況下，AJAX通過后臺加載數據，并在網頁上進行顯示。通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON -同時您能夠把這些外部數據直接載入網頁的被選元素中。5種方法
1.jQuery的load()方法2. jquery的getJSON方法3.jquery的$.get()方法4.jquery的post()方法5. jquery的$.ajax()方法?
#1.jQuery的load()方法 jQuery load()方法是簡單但強大的AJAX方法。load()方法從服務器加載數據，并把返回的數據放入被選元素中。語法：$("selector").load(url,data,callback);必須的url參數規定記載的url地址可選的data參數規定與請求一同發送的查詢字符串鍵/值對的集合可選的callback參數是load()方法完成后所執行的函數名稱1.$('#btn').click(function(){//只傳一個url，表示在id為#new-projects的元素里加載index.html$('#new-projects').load('./index.html');})2.$('#btn').click(function(){//只傳一個url，導入的index.html文件含有多個傳遞參數，類似于：index/html?name='張三'$('#new-projects').load('./index.html',{"name":'張三',"age":12});})3.$('#btn').click(function(){//加載文件之后，會有個回調函數，表示加載成功的函數$('#new-projects').load('./index.html',{"name":'張三',"age":12},function(){});})注意：load函數最好在服務器網頁中應用，也就是說要在服務器上運行，本地調試需要搭建后端本地環境。#2. jquery的getJSON方法 jQuery的AJAX中使用getJSON()方法異步加載JSON格式數據。獲取服務器中的數據，并對數據進行解析，顯示到頁面中語法: $.getJSON(url,[data],[callback])url參數為請求加載json格式文件的服務器地址，可選項data參數為請求時發送的數據，callback參數為數據請求成功后執行的函數$.getJSON("./data/getJSON.json", function (data) {var str = "";//初始化保存內容變量$.each(data, function(index,ele) {$('ul').append("<li>"+ele.name+"</li>")});})#3.jquery的$.get()方法 $.get() 方法通過 HTTP GET 請求從服務器上請求數據語法:$.get(URL,callback);url參數規定你請求的路徑，是必需參數，callback參數為數據請求成功后執行的函數$.get('./data/getJSON.json',function(data,status){console.log(status); //success 200狀態碼 ok的意思})#4.jquery的post()方法 與get()方法相比，post()方法多用于以POST方式向服務器發送數據，服務器接收到數據之后，進行處理，并將處理結果返回頁面語法：$.post(URL,data,callback);url參數規定你請求的路徑，是必需參數，可選的data參數是連同請求發送的數據。可選的callback參數為數據請求成功后執行的函數$.post('/index',{name:'張三'},function(data,status){console.log(status);})?
?
15. 重點：$.ajax()方法
jquery的$.ajax()方法 是做ajax技術經常使用的一個方法。 參數如下：1.url: 要求為String類型的參數，（默認為當前頁地址）發送請求的地址。2.type: 要求為String類型的參數，請求方式（post或get）默認為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。3.timeout: 要求為Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。4.async: 要求為Boolean類型的參數，默認設置為true，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為false。注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行。5.cache: 要求為Boolean類型的參數，默認為true（當dataType為script時，默認為false），設置為false將不會從瀏覽器緩存中加載請求信息。6.data: 要求為Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換為字符串格式。get請求中將附加在url后。防止這種自動轉換，可以查看 processData選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。7.dataType: 要求為String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，并作為回調函數參數傳遞。可用的類型如下： xml：返回XML文檔，可用JQuery處理。 html：返回純文本HTML信息；包含的script標簽會在插入DOM時執行。 script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。 json：返回JSON數據。 jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數名，以執行回調函數。 text：返回純文本字符串。8.beforeSend： 要求為Function類型的參數，發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。 function(XMLHttpRequest){ this; //調用本次ajax請求時傳遞的options參數 } 9.complete： 要求為Function類型的參數，請求完成后調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。 function(XMLHttpRequest, textStatus){ this; //調用本次ajax請求時傳遞的options參數 }10.success：要求為Function類型的參數，請求成功后調用的回調函數，有兩個參數。 (1)由服務器返回，并根據dataType參數進行處理后的數據。 (2)描述狀態的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //調用本次ajax請求時傳遞的options參數 }11.error: 要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情況下textStatus和errorThrown只有其中一個包含信息 this; //調用本次ajax請求時傳遞的options參數 }12.contentType： 要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。13.dataFilter： 要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理后的數據 return data; }14.dataFilter： 要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理后的數據 return data; }15.global： 要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。16.ifModified： 要求為Boolean類型的參數，默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。17.jsonp： 要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。18.username： 要求為String類型的參數，用于響應HTTP訪問認證請求的用戶名。19.password： 要求為String類型的參數，用于響應HTTP訪問認證請求的密碼。20.processData： 要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象（從技術角度來講并非字符串）以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。21.scriptCharset： 要求為String類型的參數，只有當請求時dataType為"jsonp"或者"script"，并且type是GET時才會用于強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用 $.ajax()方法的參數?
?（1）$.ajax() 的get請求方法
$.ajax({url:'./data.json',type:'get', // 默認是 getdataType:'json', // 如果不指定 默認自動識別文件類型success:function (data) {console.log(data);},error:function () {}});?
（2）$.ajax() 的post請求方法
$.ajax({url:"/course",type:'post',data:{username:'zhangsan',password:'123'},sunccess:function (data) {if(data.state === 'ok' && data.status === '200'){//登錄成功 }},error:function (err) {console.log(err);}});?
轉載于:https://www.cnblogs.com/venicid/p/9220067.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的前端- jquery- 总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ES6中新增字符串方法，字符串模板
- 下一篇： iphone4/iphone5/ipho