|
1.前端進(jìn)階之路 菜鳥級：設(shè)計(jì)圖的還原，就是根據(jù)PSD文件寫HTML和CSS； 入門級：加頁面特效，輪播圖、菜單、選項(xiàng)卡、無縫滾動(dòng)等； HTML5+CSS3炫酷頁面、手機(jī)端頁面； Canvas游戲； jQuery是頁面特效的完美解決方案； 普通級：處理數(shù)據(jù)，拿到后臺工程是的數(shù)據(jù)，組件頁面，Ajax； 高端級：自己寫服務(wù)，自己寫后臺，Node.js； 大神級：前端架構(gòu)師，MVC，路由控制，后臺協(xié)作，Angular，設(shè)計(jì)模式等。 2.jQuery簡介 官網(wǎng)：https:/// 口號：write less, do more. 本質(zhì)：是一個(gè)快速、簡潔的JavaScript框架。 是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫。 產(chǎn)品線： jQuery1.x.x：兼容IE6、7、8等低級版本瀏覽器 jQuery2.x.x：從1代中剔除了所有兼容代碼，產(chǎn)品更輕量 jQuery3.x.x：全面支持HTML5和CSS3 文件引用： 本地存放，<script src="存放地址"></script>，官方下載jQuery文件 靜態(tài)資源公共庫(CDN)，<script src="三方平臺提供的url"></script>， 第三方類庫很多，如節(jié)跳動(dòng)(http://cdn.)、騰訊(https://libs.qq.com)等 在HTML頭部（<head>內(nèi)）添加引用鏈接。 3.jQuery基礎(chǔ) jQuery有非常便利的選擇元素的能力，用一個(gè)“$()”函數(shù)就可以搜尋頁面上的元素。 操作過程： ?、?jQuery操作頁面元素一定是從一個(gè)“$()”開始的； ?、?$() 函數(shù)括號內(nèi)使用引號，引號中寫CSS選擇器； ③ 然后加上jQuery自己的方法（不能使用 js原生的方法）。 4.$()函數(shù) ?、?$() 函數(shù)的執(zhí)行結(jié)果（返回值）是“jq”對象， “jq”對象是一個(gè)包含了滿足選擇器條件的元素節(jié)點(diǎn)的信息集合，可以像數(shù)組一樣使用， “jq”對象可以轉(zhuǎn)換成為 js對象，調(diào)用 js方法、屬性， $()函數(shù)可以批量獲取和操作元素節(jié)點(diǎn)， jq 只能調(diào)用自己的屬性和方法 代碼示例： <body>
<div class="divClass"></div>
<div id="divLast"></div>
<div class="divClass"></div>
<script>
var $divs=$('div'); //可以批量獲取元素節(jié)點(diǎn)
$divs.css({width:"100px",height:"100px",border:"1px solid darkorange",
backgroundColor:"lightgreen",margin:"10px"}); //可以批量操作元素節(jié)點(diǎn)，但必須使用jQuery自己的方法
$divs[1].style.backgroundColor="lightblue"; //可以轉(zhuǎn)換成 js的元素節(jié)點(diǎn)，使用 js原生方法操作
console.log($divs); //返回值為 jQuery對象
console.log($divs.get(2)); //jQuery獲取對象集合中的節(jié)點(diǎn)，也可以使用jq自己的 get()方法
</script>
</body>
?、?size()方法和 length屬性 是 jq對象所擁有的，用于訪問 jq對象中元素節(jié)點(diǎn)的數(shù)量 兩種方式都能夠獲取通過 $()函數(shù)得到的頁面元素的個(gè)數(shù) 語法：var $count = $("div").size(); var $count = $("div").length; ?、?nbsp;jQuery全面支持CSS2.1的選擇器 $("css選擇器")，這里所說選擇器可以是id選擇器、類選擇器、標(biāo)簽選擇器、包含選擇器等css2.1中提到的任意選擇器組合。 語法示例：$("div .span #part") .animate({font-size:"40px"}, 600); 上述示例函數(shù)中傳入了一個(gè)字符串，而$()函數(shù)在內(nèi)部會(huì)采用正則表達(dá)式對其進(jìn)行解析，然后在頁面中搜索符合條件的所有元素節(jié)點(diǎn)。 ?、?nbsp;jQuery全面支持CSS3的選擇器 對于css3選擇器的支持，簡單來說就是支持對象屬性選擇器、關(guān)系選擇器的等在css3中提出來的選擇器，可以直接在$()中使用。 語法示例：$("div[id=divBox]").css("background-color","blue"); css3選擇器最大的問題實(shí)際就是瀏覽器的兼容性問題，但是使用jQuery則不存在兼容性問題。 5.jQuery自己的偽類 作用：從指定的元素節(jié)點(diǎn)集合中“篩選”出想要的元素。 ?、?nbsp;選擇器：first，選擇指定元素集合中的第一個(gè)元素 ?、?nbsp;選擇器：last，選擇指定元素集合中的最后一個(gè)元素 ?、?nbsp;選擇器：eq(n)，選擇指定元素集合中從 0 開始，第 n 個(gè)元素 ?、?nbsp;選擇器：lt(n)，選擇指定元素集合中從 0 開始，第 n 個(gè)元素之前的所有元素（不包含n） ?、?nbsp;選擇器：gt(n)，選擇指定元素集合中從 0 開始，第 n 個(gè)元素之后的所有元素（不包含n） ?、?nbsp;選擇器：odd，選擇指定元素集合中從 0 開始，所有奇數(shù)序號的元素 ?、?nbsp;選擇器：even，選擇指定元素集合中從 0 開始，所有偶數(shù)序號的元素 語法：$("選擇器 :偽類") .方法/事件; 其中，“eq(n)” 可以從 $()函數(shù)中提出來作為方法使用，如 $("選擇器") .eq(n) .方法/事件;， 但其他的偽類不可以這樣使用。 語法示例： <html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="jQueryFiles/jquery-1.8.3.js"></script>
</head>
<body>
<table border="1" style="color: orangered;text-align: center" cellspacing="0">
<tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td><td>第六列</td><td>第七列</td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<script>
$('tr').css('height','40px');
// :first
$('tr:first td').css('width','100px');
// :last
$('tr:last').css('background-color','lightpink');
// :eq(n)
$('tr:eq(5)').click(function () {
$(this).css('background-color','skyblue');
$(this).animate({'height':'60px'},'slow'); //slow\/normal\/fast(字符串),也可以使用毫秒數(shù)值。
});
// lt(n)/gt(n)
var backColor='';
backColor=$('tr:lt(5)').css('background-color');
$('tr:lt(5)').mouseover(function () {
$(this).css('background-color','yellowgreen');
});
$('tr:lt(5)').mouseout(function () {
$(this).css('background-color',backColor);
});
// table奇數(shù)列和偶數(shù)列選擇
$('tr td:nth-child(even)').click(function () {
$(this).text('偶數(shù)列');
$(this).css('color','gray');
});
$('tr td:nth-child(odd)').click(function () {
$(this).text('奇數(shù)列');
$(this).css('color','gold');
});
</script>
</body>
</html>ps：上述“mouseover和mouseout”兩個(gè)事件可以使用“hover”替代，示例如下： $("選擇器").hover(overFunction(){}, outFunction(){}); 6.$()函數(shù)與 jQuery()函數(shù)等價(jià) 事實(shí)上在 jq中做出了一個(gè)聲明，這個(gè)聲明就是“$==jQuery”，即“$()和 jQuery()”兩種寫法是等價(jià)的。 ps：$() 函數(shù)并不是 jq所獨(dú)有的，在很多其他框架（如prototype框架）中也對“$()”函數(shù)做出了聲明， 根據(jù) js語法，同名函數(shù)后聲明的會(huì)覆蓋前面的， 因此，在工程中如果引入了多個(gè)框架，那么使用 jQuery()這種寫法是最保險(xiǎn)的。 但是，僅對于jq框架來說，兩種寫法是等價(jià)的。 jq中規(guī)定 $()函數(shù)的返回值是一個(gè) jq對象，其職能調(diào)用 jq設(shè)定的屬性和方法。 jq對象轉(zhuǎn)換為 js原生對象的方式： ?、?$("選擇器")[n]，使用中括號加索引的方式 ?、?nbsp;$("選擇器").get(n)，使用 get()方法加索引的方式 在使用$()函數(shù)選擇元素節(jié)點(diǎn)的時(shí)候，括號中需要使用引號，但是下面三種例外： $(window) $(document) $(this) 7.添加監(jiān)聽事件 jQuery對象采用打點(diǎn)調(diào)用方法，在jQuery中給元素添加監(jiān)聽的語法： $("選擇器").事件名(function(){ }); 因?yàn)?()函數(shù)獲取的是元素集合，所以是對集合中所有元素批量添加監(jiān)聽事件，無需使用for循環(huán)語句。 常用事件名： ?、?nbsp;click()，單擊事件 ?、?nbsp;dbclick()，雙擊事件 ?、?mouseenter()，鼠標(biāo)進(jìn)入 ?、?mouseleave()，鼠標(biāo)離開 ?、?focus()，獲取焦點(diǎn) ?、?blur()，失去焦點(diǎn) 注意，jQuery中添加事件時(shí)一律不加“on”前綴； 同一個(gè)對象可以添加多個(gè)不同事件，互不影響； 同一個(gè)對象可以添加多個(gè)相同事件，不會(huì)覆蓋，觸發(fā)順序與書寫順序一致。 另外，jQuery中對象綁定事件時(shí)還允許使用“鏈?zhǔn)铰暶鳌钡姆绞?，不需要重?fù)獲取 jq對象。 鏈?zhǔn)铰暶鲿r(shí)除最后一個(gè)綁定的函數(shù)末尾加分號表示綁定結(jié)束以外，其余函數(shù)后不寫任何內(nèi)容。 語法示例：$("選擇器").事件名1(function(){ }) .事件名2(function(){ }) …… ……; 8.jQuery事件監(jiān)聽的特點(diǎn) jq中還提供了很對事件監(jiān)聽的方式： ① 通過“on()”方法添加事件監(jiān)聽，通過“off()”方法取消事件監(jiān)聽； 語法：$("選擇器").on("事件名", function(){ }); //添加事件監(jiān)聽 $("選擇器").off("事件名"); //去除事件監(jiān)聽 ?、?nbsp;通過“bind()”方法添加事件監(jiān)聽 bind()方法的優(yōu)點(diǎn)在于，它可以給一個(gè)jq對象添加多個(gè)不同的事件監(jiān)聽，事件名用“空格”隔開即可。 語法：$("選擇器").bind("事件名1 事件名2 ……", function(){ }); 另外，bind()方法還可以采用JSON形式的參數(shù)添加事件監(jiān)聽，添加多個(gè)不同事件監(jiān)聽，且擁有不同回調(diào)函數(shù)。 語法：$("選擇器").bind({事件名1: function(){ }, 事件名2: function(){ }, ……}); ?、?nbsp;通過“one()”方法添加事件監(jiān)聽 one()方法添加的事件監(jiān)聽是“一次性”的，只能執(zhí)行一次。 語法：$("選擇器").one("事件名", function(){ }); 90.大咖分享（彈性布局）： Flex布局詳解（一）：https://zhuanlan.zhihu.com/p/163217760 Flex布局詳解（二）：https://zhuanlan.zhihu.com/p/164590960 |
|
|
