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