静态Web开发 JQuery
伍章 JQuery
?
1節(jié)
介紹JQuery和頂級對象
<<鋒利的JQuery>>
JQuery官網(wǎng)： http://jquery.com (下載jquery工具)
JQuery在線API: http://api.jquery.com
http://api.jquery.com/api(xml文件)
JQuery UI: http://jqueryui.com
什么是JavaScript框架庫?
普通javascript的缺點：每種控件的操作方式不統(tǒng)一，不同瀏覽器下有區(qū)別，要編寫跨瀏覽器的程序非常麻煩。因此出現(xiàn)了很多javascript的封裝庫
常見的javascript框架庫：
Prototype YUI Dojo ExtIS JQuery等這些庫對JavaScript進行了封裝，簡化了開發(fā)，但內(nèi)部還是用Javascript實現(xiàn)的
JQuery就是JavaScript語法寫的一些函數(shù)類，內(nèi)部任然是用js實現(xiàn)的，所以并不是代替js，使用JQuery的代碼、編寫JQuery的擴展插件等仍然需要js的技術(shù)，JQuery本身就是一堆js函數(shù)。JQuery是最火的js庫，JQuery的擴展插件也是非常多
常用的JavaScript庫：
1 Prototype: http://www.prototypejs.org
2 Dojo: http://dojotoolkit.org
3 YUI(The Yahoo>User Interface Library): http://developer.yahoo.com/yui
jQuery就是JavaScript的一堆函數(shù)庫
JavaScript能做什么，JQuery就能做什么
JQuery的特點: Write Less Do More
隱式迭代
鏈?zhǔn)骄幊?br /> 插件豐富，開源，免費
JQuery中最常用的頂級對象即$對象，要想使用JQuery的方法必須通過$對象。只有將普通的Dom對象封裝成JQuery對象，然后才能調(diào)用JQuery中的各種方法。
$是JQery的簡寫，在代碼中可以使用JQuery代替$，但是一般為方便大家都直接使用$
寫注釋，后續(xù)JQuery的代碼會越來越多，所以必要的注釋一定要寫.
jquery也是在操作頁面的一些元素，和dom類似,dom代碼比較多
<script type="text/javascript" src="jquery-1.8.3.js"></script> //壓縮的也一樣
//0
οnlοad=function(){
alert('頁面加載完了00');
};
//1
$(document).ready(fucntion(){ //document是dom對象，放入$(jQuery)就變成jQuery對象,點出ready()方法
alert('頁面加載完了11');
});
//2
$(window).load(function(){
alert('頁面加載完了22');
});
//3
$(function(){ //用jQuery也一樣
alert('頁面加載完了33');
});
?
2節(jié)
兩個遍歷方法
$(fun); 相當(dāng)于 $(document).ready(fun); //只需要dom元素加載完畢即觸發(fā)
$(window).load(fun); //需要等待頁面完全加載完畢才會觸發(fā)
$.map(array,callback(element,index)); //主要用于遍歷數(shù)組
$.each(array,fn); //主要用于遍歷鍵值對(map和each可以相互遍歷，但是在有些瀏覽器可能不支持)
//1
//將一個數(shù)組的元素翻倍 并返回一個新的數(shù)組
var arr=[1,2,3,4,5];
var newarr = $.map(arr,function(ele,index){ //map方式自動遍歷
//alert(arguments.length); //用arguments接受匿名方法的參數(shù)
//獲取該方法中有幾個參數(shù)，分別是什么
//alert(arguments[0]+"=="+arguments[1]+"==="+arguments[2]); //得知 第1個參數(shù)是元素，第2個參數(shù)是索引，第3個參數(shù)undifined
//alert(ele+'==='+index); //輸出元素和索引
return ele*2; //返回一個新的數(shù)組
});
alert(newarr);
//google調(diào)試---開發(fā)工具---F5---F11---跳到當(dāng)前引用jquery文件的map()方法
//ie調(diào)試---開發(fā)工具---腳本---調(diào)試啟動---
//2
//將一個數(shù)組中索引>3的元素的值翻倍，其余值不變，并返回一個新數(shù)組
$.each(array,fn);
var dict={"name":"xiaoming","age":"23"};
$.each(dict,function(key,value){
alert(key+'===='+value);
});
?
3節(jié)
dom對象和jQuery對象互轉(zhuǎn)
$.trim(字符串) //切掉兩邊空格
trimLeft=/^[\s\xAO]+/; trimRight=/[\s\xAO]+$/; //ie一些版本不支持\s空格，\xAO也表示空格
Dom對象如果想調(diào)用jQuery的方法必須先轉(zhuǎn)換為JQuery對象
Dom對象：文檔數(shù)中的對象都是dom對象
jQuery對象：把dom對象包裝后就得到j(luò)Query對象
//Dom jQuery混合方式
$(dvObj).css('backgroundColor','red'); //dom對象轉(zhuǎn)jQuery對象
var dvJqObj=$(dvObj);
var dvDomObj=dvJqObj.get(0); //jQuery對象轉(zhuǎn)Dom對象
$(dvObj)[0].style.backgroundColor='gray'; //jQuery對象轉(zhuǎn)Dom對象
//JQuery方式
$('#btn').click(function(){
$('#dv').css('backgroundColor','red');
});
<input type="button"/>
<div></div>
//哪些不需要轉(zhuǎn)JQuery對象 Array(不是dom元素)
?
4節(jié)
選擇器
id選擇器
$('#dv').click(function(){
//$(this).text('這是一個層'); //text相當(dāng)于dom中innerText;html()相當(dāng)于innerHTML
//$(this).css('','');
$(this).text('這是一個層').css('',''); //鏈?zhǔn)骄幊?br /> alert($(this).text()); //不設(shè)置，就是取值
});
標(biāo)簽選擇器
//為某個按鈕注冊一個單擊事件，單擊的時候設(shè)置頁面上所有的p標(biāo)簽中顯示文字為“我們都是好孩子”。(隱式迭代)
$('p').text('我們都是好孩子');//隱式迭代
$('div.cls').text('我去')； //標(biāo)簽加類選擇器
$('.cls').text('帥氣'); //類樣式選擇器
?
5節(jié)
各種選擇器和案例
//1多條件選擇器
$('p,div,span.cls').css(,);
<p>p</p>
<div>div</div>
<span class='cls'>span<span>
//2層次選擇器
$('div p').css(,); //獲取層中所有p標(biāo)簽
$('div>p').css(,); //獲取層中直接的子元素
$('div+p').css(,); //獲得層后面的直接的p元素
$('div~p').css(,); //獲取層后面的所有的p元素
$('*'); //獲取所有元素
$('div').next().css(,); //獲得層后面直接的兄弟元素
$('div').nextAll().css(,); //獲得層后面所有的兄弟元素
$('div').prev().css(,); //獲得層前面直接的兄弟元素
$('div').prevAll().css(,); //獲得層前面所有的兄弟元素
$('div').siblings().css(,); //獲得當(dāng)前元素的所有兄弟元素
//ul球隊，鼠標(biāo)移到li上，該li變紅色,點擊時,之前的所有l(wèi)i變黃，之后的所有l(wèi)i變藍，自己不變
$(this).css(,).siblings().css(,);
$(this).prevAll().css(,).end().nextAll().css(,); //因為前面返回的是集合，就斷鏈了，需要end()修復(fù)了，才能繼續(xù)進行鏈?zhǔn)骄幊?/p>
?
//----------------------------------
使用jquery獲取某DIV的子元素，通常有以下兩種方法：
-
子元素選擇器（>），例如 $("div>img") 獲取div下的img子元素；
-
遍歷函數(shù)children()，例如 $("div").children("img") 同樣是獲取div下的img子元素。
如果想要獲取DIV下的不僅是子元素，而且還包括其他后代元素（孫輩、曾孫輩元素...），那么，相應(yīng)的兩種方法是：
-
后代元素選擇器（空格），例如 $("div img") ?獲取div下的所有級別的img后代元素；
-
遍歷函數(shù)find()，例如 $("div").find("img") ?獲取div下的所有級別的ing后代子元素。
?-----------------------------------
?
?
?
6節(jié)
網(wǎng)頁開關(guān)燈和評分案例
//1 評分案例
$('table tr td').mouseover(function(){
$(this).text('★').prevAll().text('★').end().nextAll().text('☆').mouseout(function(){ //因為中間斷鏈了，end()返回鏈被破壞前得對象(當(dāng)前就是鼠標(biāo)移入時的對象)
$('td').text('☆');
});
});
<table class="cls">
<tr><td>☆</td>...</tr>
</table>
//jQuery的迭代(包裝集)
//2 判斷該元素是否存在
if($('#btn').length>0){
alert('存在');
}else{
alert('不存在');
}
//3 頁面實現(xiàn)開關(guān)燈的效果
addClass 添加樣式
removeClass 移除樣式
toggleClass 切換樣式的顯示
hasClass 判斷是否應(yīng)用了樣式
//31 關(guān)燈
$('#btnoff').click(function(){
$('body').addClass('cls'); //.cls{background-clor:black;}
});
//32 開燈 removeClass
//33 用一個按鈕實現(xiàn)開燈和關(guān)燈
if($('body').hasClass('cls')){
$('body').removeClass('cls');
}else{
$('body').addClass('cls');
}
//34 toggleClass
$('body').toggleClass('cls'); //切換樣式
?
7節(jié)
過濾器和案例練習(xí)
$('div:first') $('div').first() 選取層中第一個元素
$('div:last') $('div').last() 選取層中最后一個個元素
$('div:not(.cls)'); 獲取沒有.cls樣式的元素
$('div:even')偶數(shù) :odd(奇數(shù)) 表示的是偶數(shù)，實際顯示效果奇數(shù)
$('div:eq(5)') :gt() :lt()
$('div:gt(3):lt(2)') 索引>3 && <2的元素
$(':header') 獲取所有h標(biāo)簽 $('h1,h2,h3,...')
margin-bottom:10px; //設(shè)置外邊距(層之間的距離)
$('#tab tr:gt(0):lt(3)').css('fontSize','28px');
//1表格字體大小及顏色的過濾器案例
//2點擊按鈕。表格變色，奇紅偶黃,點擊的變藍，其他白色
?
8節(jié)
相對定位和屬性過濾器
//相對定位
$('p','div') //從層中去找p標(biāo)簽
$('td:odd',$(this)).css(,)
$('td',$(this).sliblings()).css(,)
//屬性、表單過濾器
$('#div input[name]').css(,) //獲取層中有name屬性的input標(biāo)簽
$('#div input[name=n]').css(,) //獲取層中name屬性為n的input標(biāo)簽
$('#div input[name!=n]').css(,) //獲取層中name屬性不是n的input標(biāo)簽
$('#div input[name^=n]').css(,) //獲取層中name屬性以n開頭的input標(biāo)簽
$('#div input[name$=n]').css(,) //獲取層中name屬性以n結(jié)束的input標(biāo)簽
$('#div input[name*=n]').css(,) //獲取層中name屬性所有的input標(biāo)簽
<input type="button"/>
<div>
<input type="button" name="name"/>
<input type="button" name="n"/>
</div>
//表單對象 屬性選擇器(過濾器)
$('#form1 :enabled') //獲取表單內(nèi)所有啟用的元素(有空格)
$('#form1:enabled') //表示的是選中了的form1表單
$('#form1 :disabled') //獲取表單內(nèi)所有禁用的元素
$('input:checked') //獲取input標(biāo)簽中選中了的元素(沒有空格) Radio、CheckBox
$('select:selected') //獲取選項中選中了的元素
?
9節(jié)
元素的each和其他過濾器
//elements.each(function(k,v){...}); //each函數(shù)遍歷元素并獲取元素值
$('#dv input[type=checkbox]').click(function(){
var cks=$('#dv :checked'); //獲得層內(nèi)被選中的元素
var len=cks.length; //記錄個數(shù)
var arr=[]; //用于存儲獲得的元素值
cks.each(function(k,v){ //通過each()函數(shù)遍歷選中的元素-----------------------------------------(*)
arr[arr.length]=$(v).val();//記錄選中的元素的value值
});
$('#p1').text('共選擇了'+len+'個，分別是：'+arr);
});
<div id="dv">
<input type="checkbox"/>
<p id="p1"><p>
</div>
//表單選擇器
$(':input')選取所有<input> <textarea> <select> <button>元素
$('input')只獲取<input>元素
$(':text')選取所有單行文本框,等價于 $('input[type=text]')
$(':password')選取所有密碼框 :radio :checkbox :submit :image :reset :button :file :hidden //這些代替了$('input[type=...]');
//其他過濾器
:hidden //選取所有不可見元素(如果直接寫:hidden則會包含head\title\script\style...)
表單元素type="hidden" (表示的是隱藏域)
設(shè)置css的display:none
高度和寬度明確設(shè)置為0的元素
父元素時隱藏的，所以子元素也是隱藏的
visibility:hidden與opacity為0不算，因為還占位所以不認(rèn)為是-----???----
hidden:visible選取所有可見元素
//內(nèi)容過濾器
:contains(text) 過濾出包含指定文本的元素(innerText中包含)
:empty 過濾出所有不包含子元素或文本的空元素
:has(selector) 過濾出元素中指定子元素得元素
:parent 過濾出可以當(dāng)做父元素的元素(即該元素有子元素或元素中包含文本)
$('div:contains(好)').css(,) 獲取層中包好‘好’的元素
$('div:empty').css(,) 獲取為空元素的層
$('div:has(a)').css(,) 獲取包含子元素的層
<div><a href="">百度</a></div>
<div></div>
<div>好帥啊</div>
<div></div>
//子元素過濾器
:first 只能選取第一個
:first-child 選取每個子元素的第一個元素
$('ul :first-child')
$('ul li:first') 只返回一個li元素
$('ul li:first-child') 為每個父元素(ul)都返回一個li
:last-child
:only-child 匹配當(dāng)前元素只有一個子元素的元素
:nth-child 為每個父元素都要匹配一個子元素，eq()只匹配一個
:nth-child(index) index從1開始
:nth-child(even)
:nth-child(odd)
:nth-child(3n) 選取3的倍數(shù)的元素
:nth-child(3n+1) 滿足3的倍數(shù)+1的元素
.children()方法 只考慮子元素，不考慮后代元素
?
10節(jié)
動態(tài)創(chuàng)建元素
html() innerHTML
text() innerText
attr() 讀取或設(shè)置元素的屬性
$('#chk').attr('checked',true).attr('class','cls'); //屬性有，值沒有; google中checkbox CSS表現(xiàn)不出來,ie可以
$('#chk').attr('class','');
$('#chk').removeAttr('class'); //屬性也沒有了
<input type="button"/>
<input type="checkbox" id="chk"/>
//創(chuàng)建一個層
var dvObj = $('<div id="dv"></div>').appendTo($('body')); //創(chuàng)建一個層，并添加到Body中 $('body').append(dvObj);也可以
//dvObj.css(,).css(,).css(,); //google中是看不到的,查看的話，在ie中裝DebugBar--重建document樹-------------DebugBar----------------
dvObj.css({"width":"300px","":"","":""}); //用鍵值對添加樣式
?
11節(jié)
動態(tài)創(chuàng)建元素的兩個案例
//動態(tài)創(chuàng)建一個表格
var dict={"百度":"http://www",...};
//無刷新評論
$('<tr><td>'+$('#txt').val()+'</td><td>'+評論的內(nèi)容+'</td></tr>').appendTo($('#tab'));
?
12節(jié)
移除元素和練習(xí)
appendTO() //主動巴結(jié)到最后一個 append()是追加
prependTo() //主動巴結(jié)到第一個
A.insertBefore(B) //將A加到B得前面,等同于 B.before(A)
X.insertAfter(Y) //將X加到Y(jié)的后面,等同于 Y.after(X)
//1 刪除元素
$('div').empty(); //清空層中元素
$('div').remove(); //層沒了，自殺 ,刪除這個層之后，還可以調(diào)用這個層對新
$('div').remove('.cls') //層沒了，移除應(yīng)用了cls樣式的層,有目的性的殺掉
//2 權(quán)限選擇
$('#se1 option:selected').appendTo($('#se2')); //單個選擇添加到sel2
$('#se1 option').appendTo($('#se2')); //全部添加到sel2
//如果報錯"例外被拋出"等,很可能是選擇器表達式有問題，比如單詞拼寫錯誤，加了不必要的空格等。vla()是方法不是數(shù)學(xué).
<div>
<select id="se1"></select>
<div>
<input type="btton" value=">"/>
<input type="btton" value="<"/>
<input type="btton" value=">>"/>
<input type="btton" value="<<"/>
</div>
<select id="se2"></select>
</div>
//3 加法計算器
var ret = parseInt($('#txt1').val())+parseInt($('#txt2').val());
$('#txt3').val(ret);
//4 10秒后協(xié)議文本注冊
//5 創(chuàng)建若干文本框,當(dāng)失去焦點時，如果文本框為空，則將文本框背景設(shè)置為紅色，如果不為空則為白色。
if($(this).val().length==0){...}
//6 選擇球隊，2個ul。被懸浮(鼠標(biāo)移到)行高亮顯示(背景是紅色),點擊球隊將它放到另一個的球隊列表
.unbind() //清除所有事件
.unbind('click') //清除點擊事件
$('#uu1 li').mouseover(function(){
$(this).css(,).siblings().css(,);
}).click(function(){
//$(this).appendTo('#uu2'); //把元素的樣式和事件都進來了
$(this).removeAttr('style').unbind().appendTo('#uu2'); //清除樣式和事件
});
<ul id="uu1"><li></li></ul><hr/>
<ul id="uu1"></ul>
?
13節(jié)
節(jié)點替換和包裹節(jié)點
//替換節(jié)點
$('br').replaceWith('<hr/>'); //用hr標(biāo)簽替換br標(biāo)簽
$('<br/>').replaceAll('hr'); //br標(biāo)簽替換所有hr
//包裹節(jié)點
$('div p').wrap('<font></font>'); //包裹每個p標(biāo)簽
$('div p').wrapAll('<font></font>'); //包裹所有p標(biāo)簽
$('div p').wrapInner('<font></font>'); //包裹在p標(biāo)簽里面
14節(jié)
案例和練習(xí)
attr('class') 獲取樣式
attr('class','cls') 設(shè)置樣式
addClass('cls') 追加樣式
removeClass('cls') 刪除樣式
toggleClass('cls') 切換樣式(如果存在樣式，就去掉樣式，如果沒有樣式，則添加樣式)
hasClass('cls') 判斷是否存在樣式
//1
$('body *').mouseover(function(){ //body的所有元素
$(this).addClass('cls');
}).mouseout(function(){
$(this).removeClass('cls');
});
//2 搜索文本框
if($(this).val()=='請輸入值'){ //清空值 //移除樣式}
//3 RadioButton操作(點擊按鈕使單選框被選中)
$(':radio[value=1]').attr('checked',true);
$(':radio').val(["1","2","3"]); //如果name值不同的話，就可以都被選中
?
15節(jié)
復(fù)選框案例
//全選 全不選 反選
$('div :checkbox').attr('checkbox',true);
$('div :checkbox').attr('checkbox',false);
$('div :chexkbox').each(function(){ //遍歷每一個復(fù)選框
$(this).attr('checked',!$(this).attr('checked'));
});
?
16節(jié)
微博案例上
//1 按鈕高亮顯示
$(this).css(backgroundPosition,'0 -195px')
$(this).css(backgroundPosition,'-117px- -165px')
//2 計算文本框還能輸入多少字
$('#msgTxt').change(function(){
var len = 140 - $(this).val().length;
});
Math.abs(len) //取絕對值
//計時器
?
17節(jié)
微博案例中
//3 顯示話題
<a href="javascript:void(0);" >話題</a>
$('#msgTxt').val('#輸入話題標(biāo)題#').selectRange(1,7); //擴展方法，使標(biāo)題高亮顯示(被選擇)
//4 顯示朋友
//如果層存在，就關(guān)閉 if('#dvF').length>0){$('#dvF').remove(); }
var dvX=$(this).offset().left+'px'; //層距離左側(cè)的像素
var dvX=$(this).offset().top+$(this).height()+'px';
dvFriends.css({"left":dvX,"top":dvY});
//添加一個關(guān)閉
float:right;浮動到右側(cè)
$(this).parent().remove();
//顯示朋友列表
clear:both; //清除浮動
style="list-style-type:none;margin:0;padding:0;clear:both;"
?
18節(jié)
微博案例下
//5 顯示表情
//創(chuàng)建層(脫離文檔流，設(shè)置左頂距離)(前面如果有層，就刪除)
//顯示表情和關(guān)閉
var dict={'1.gif':'微笑',...};
//再創(chuàng)建一個層放表情(clear:both;清除浮動)
//遍歷鍵值對
//創(chuàng)建圖片
//鼠標(biāo)進入事件 點擊事件
//如果msgTxt的值"是不是輸入話題"
$('#msgTxt').val( '['+$(this).attr('title')+']' );
?
16-18節(jié)
微博案例
$(function(){
//1 廣播按鈕高亮顯示
$('#dvFigure .clsBroadcast').mouseover(function(){
$(this).css('backgroundPosition','0 -195px').css('backgroundColor','red');
}).mouseout(function(){
$(this).css('backgroundPosition','-117px -165px').css('backgroundColor','blue');
});
//2 顯示剩余字?jǐn)?shù)
$('#dvContent .clsTxt').change(function(){
var surplus = 140 - $(this).val().length;
if(surplus>=0){
$('#dvFigure .clsSurplus').html('還能輸入<em>'+surplus+'</em>個字');
}else{
$('#dvFigure .clsSurplus').html('超出<font color="red"><em>'+Math.abs(surplus)+'</em></font>個字');
}
clearInterval(setId); //為了避免一直計時，在這里先禁掉------???---------
});
var setId = setInterval(function(){
$('#dvContent .clsTxt').change();
},500);
//3 顯示話題
$('#dvLink #topic').click(function(){
$('#dvContent .clsTxt').val('#請輸入話題標(biāo)題#'); //.selectRange(1,7) 獲得高亮顯示
});
//4 顯示朋友
$('#dvLink #friend').mouseover(function(){
var arrFri=['東邪','西毒','南帝','北丐','鞠婧祎','樸智妍'];
if($('#dvFriend').length>0){
$(this).remove();
}
var dvF=$('<div id="dvFriend" style="width:100px;border:1px solid blue;position:absolute;"></div>').appendTo($('body'));
var dvFX=$(this).offset().left+'px';
var svFY=$(this).offset().top+$(this).height()+'px';
dvF.css({"left":dvFX,"top":svFY});
//創(chuàng)建一個關(guān)閉按鈕
$('<input type="button" style="float:right;" value="關(guān)閉" />').mouseover(function(){
$(this).css('backgroundColor','blue');
}).mouseout(function(){
$(this).css('backgroundColor','');
}).click(function(){
$(this).parent().remove(); //----為什么點2次才移除-----???-------------
}).appendTo(dvF);
//創(chuàng)建列表
var ulObj=$('<ul style="list-style-type:none;clear:both;margin:0;padding:0;"></ul>').appendTo(dvF);
for(var i=0;i<arrFri.length;i++){
$('<li>@'+arrFri[i]+'</li>').mouseover(function(){
$(this).css('backgroundColor','red');
}).mouseout(function(){
$(this).css('backgroundColor','');
}).click(function(){
if($('#dvContent .clsTxt').val()=='#請輸入話題標(biāo)題#'){
$('#dvContent .clsTxt').val($(this).text());
}else{
$('#dvContent .clsTxt').val($('#dvContent .clsTxt').val()+$(this).text());
}
}).appendTo(ulObj);
}
});
//5 顯示表情
$('#dvLink #face').mouseover(function(){
var dict={"00.gif":"00","01.gif":"01","02.gif":"02","03.gif":"03","04.gif":"04","05.gif":"05","06.gif":"06","07.gif":"07","08.gif":"08","09.gif":"09","10.gif":"10","11.gif":"11","12.gif":"12","13.gif":"13","14.gif":"14","15.gif":"15","16.gif":"16","17.gif":"17","18.gif":"18","19.gif":"19","20.gif":"20","21.gif":"21","22.gif":"22","23.gif":"23","24.gif":"24","25.gif":"25","26.gif":"26","27.gif":"27","28.gif":"28","29.gif":"29"};
//創(chuàng)建層
if($('#dvFace')){
$('#dvFace').remove();
}
$('<div id="dvFace" style="width:400px;border:1px solid blue;position:absolute;"></div>').appendTo($('body'));
var dvFaceX=$(this).offset().left-80+'px';
var dvFaceY=$(this).offset().top+$(this).height()+'px';
$('#dvFace').css({"left":dvFaceX,"top":dvFaceY});
//層中創(chuàng)個標(biāo)題和關(guān)閉按鈕
$('<span style="float:left;">表情</span>').appendTo('#dvFace');
$('<span><input type="button" style="float:right;" value="關(guān)閉"/></span>').mouseover(function(){
$(this).css('backgroundColor','blue'); //---背景為什么未變色----???-----------
}).mouseout(function(){
$(this).css('backgroundColor','');
}).click(function(){
$(this).parent().remove();
}).appendTo('#dvFace');
//再創(chuàng)一個層，放入dvFace層
$('<div id="dvFaceImg" style="clear:both;"><div>').appendTo('#dvFace');
//編譯添加表情
for(var key in dict){
$('<img src="faceImg\\'+key+'" title="'+dict[key]+'" />').mouseover(function(){
$(this).css({'borderColor':'red','cursor':'pointer'});
}).mouseout(function(){
$(this).css({'borderColor':'','cursor':''});
}).click(function(){
if($('#dvContent .clsTxt').val()=='#請輸入話題標(biāo)題#'){
$('#dvContent .clsTxt').val('['+$(this).attr('title')+']');
}else{
$('#dvContent .clsTxt').val( $('#dvContent .clsTxt').val()+'['+$(this).attr('title')+']' );
}
}).appendTo($('#dvFaceImg'));
}
});
});
<div id="dvOut">
<div id="dvContent">
<textarea class="clsTxt" cols="50" rows="5"></textarea>
<div id="dvLink">
<a href="javascript:void(0)" id="topic">話題</a>
<a href="javascript:void(0)" id="friend">朋友</a>
<a href="javascript:void(0)" id="face">表情</a>
<a href="javascript:void(0)" id="picture">照片</a>
<a href="javascript:void(0)" id="video">視頻</a>
</div>
</div>
<div id="dvFigure">
<span class="clsSurplus">還能輸入<em>140</em>個字</span>
<span><input type="button" class="clsBroadcast" name="name" value="廣播" /></span>
</div>
</div>
?
19節(jié)
jquery中的幾個綁定事件的方法
//1 綁定事件
$('#btn').bind('click',function(){
alert('點擊了');
});
//2 合成事件
hover(enterfn,leavefn)
$('#btn').hover(function(){...},function(){...});
//3 切換事件
$('#btn').toggle(function(){},function(){},function(){},...);
//4 事件冒泡:同樣的事件時，觸發(fā)里面，也會觸發(fā)外面
alert($(this).attr('id'));
e.stopPropagation(); //取消事件冒泡,需要傳e參數(shù)
//5 阻止事件
e.preventDefault();
//6 jqery在注冊事件時如何傳參數(shù)(單個參數(shù)，數(shù)組，鍵值對都行)
$('#btn').click({"name":"熊愛明"},function(e){
alert( e.data.name );
});
<div>
<p>
<span></span>
</p>
</div>
20節(jié)
jquery中的其他事件
pageX PageY //獲得當(dāng)前鼠標(biāo)的x y
//讓圖片飛起來
$(document).mousemove(function(e){
$('#img').css('position','absolute').css({'left':e.pageX,'top':e.pageY});
});
$('div').mousedown(function(e){
alert(e.which);//獲得鍵值
});
unbind() //移除元素上的所有綁定事件
$(this).offset() //當(dāng)前元素相對于頁面的坐標(biāo)
$(this).offset().left $(this).offset().top
$('#btn').one('click',function(){ //只執(zhí)行了1次
alert('也許這是一個不錯的選擇');
});
event.originalEvent //獲得原始的event對象
?
21節(jié)
動畫效果
Tooltips(作業(yè) 幾乎全是css實現(xiàn)的 鼠標(biāo)進入時創(chuàng)建一個層，并把這個層slide)
//1 顯示和隱藏元素
show() hide()
$('div').show(); 顯示層
$('div').show(1000); 在1秒內(nèi)顯示
//2 上下顯示或隱藏
//在右下角彈出qq消息的效果(作業(yè))
slideDown(1000) 從上到下顯示
slideUp(1000) 從下到上隱藏
slideToggle(1000) 上下滑動
//3 淡入淡出
fadeIn(1000);
fadeOut(1000);
fadeToggle(1000);
//4 自定義動畫
animate({css},speed);
$('img').animate({"left":"50px","top":"500px"},1000).animate({"left","+500px","top":"-400px","width":"30px","height":"30px"},2000);
<input type="button"/>
<img/>
?
22節(jié)
cookie
cookie:保存在瀏覽器的內(nèi)容，下次再次訪問就可以取出上次保存的內(nèi)容,
cookie需要瀏覽器支持,禁用掉就沒有了,與域名有關(guān)，不會沖突，cookie內(nèi)容超出，會自動刪除;有期限7天;可進行加密;進行作弊
//引入jquery.cookie.js
//判斷cookie中是否有保存
if($.cookie('uName')){
$('span').text('歡飲'+$.cookie('uName')+'登陸');
}else{
$('span').text('歡飲菜鳥登陸');
}
//如果沒保存,把值存入cookie的uName中
$.cookie('uName',$('#txt').val()); //------------沒存入----???--------------
?
23節(jié)
jquery插件
//通過jqzoom插件是圖片放大(高清無碼)
http://www.mind-projects.it/projects/jqzoom/ --download--下載--
//所有插件列表 http://plugins.jQuery.com/
網(wǎng)頁的分析工具
DebugBar -> IE
Firebug -> FireFox
Collection -> Googgle
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
yy
Regex在匹配網(wǎng)址時，regularException必須有'^'和'$'
考慮正則表達式本身時不要考慮轉(zhuǎn)義，當(dāng)翻譯為C#代碼時，再考慮轉(zhuǎn)義
\. 表示 . //相當(dāng)于 [.]也表示一個.
\( 表示 (
正則表達式博大精深：知道正則表達式可以做字符串的匹配，字符串的提取，字符串的替換;知道常用的簡單的正則表達式的寫法;能夠看懂常見的正則表達式
在正則表達式中，\w 表示[0-9a-zA-Z_] ;但是在中文操作系統(tǒng)，C#應(yīng)用環(huán)境中也是可以匹配漢字的
<<J2EE全程開發(fā)實例>>
yy
//拼接sql語句
//需要獲得類名和列名
Type type=obj.GetType();//獲取對象類型
string className=type.Name;//獲得類名，就是表名
PropertyInfo[] proInfos=type.GetProperties();
string[] proNames=new string[proInfos.length-1];//排除id
//遍歷屬性，獲得除了id的數(shù)組
//用','拼接成字符串,加入到sql語句中
//根據(jù)id查詢
//泛型 T
return default(T) //用來獲得類型的默認(rèn)值
寫DeleteById()方法
寫Update()方法
http://www.rupeng.com/forum/thread-44526-1-1.html (上交作業(yè))
//委托事件
//sender 觸發(fā)事件的控件對象
?
posted on 2015-08-02 07:40 AdolphYang 閱讀(...) 評論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/adolphyang/p/4695057.html
總結(jié)
以上是生活随笔為你收集整理的静态Web开发 JQuery的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网页的基本操作1
- 下一篇： VS2008中代码段(Snippet)及