2018-10-11 jquery 第一天思維導圖筆記

jQuery 第一天

jQuery使用伴嗡，jQuery選擇器

jQuery整體框架設(shè)計

回顧js課程

jQuery 解決問題

?1.window.onload 事件有事件覆蓋的問題急波，只能寫一個

?2.代碼容錯性差

?3.瀏覽器兼容性差

?4.書寫繁瑣,代碼量大

?5.代碼很亂，各個頁面導出都是

?6.動畫效果瘪校，我們很難實現(xiàn)

jQuery的基本使用

?開發(fā)中用-未壓縮的版本幔崖，上線用壓縮過的

?版本問題 1.11.3 or 2.1.4

??1.xxx 版本

??2.xxx 版本

???不支持ie 678

?第一步:引包

??用jQuery之前，先引入jQuery,再去寫我們的jquery代碼

???瀏覽器遇到j(luò)s 把所有其它事情都停了 渣淤，先去加載文件，然后解析js js文件

?第二步:入口函數(shù)

??1.$(document).ready(function(){});

??2.$(function(){});

?第三步:事件處理程序

??1.事件源

???a) jQuery: JS:Document.getElementById('id');

???b) $("#id")

??2.事件

???a) JS:Document.getElementById('id').onclick;

???b) jQuery: $("#id").click

??3.事件處理程序

???a) JS:Document.getElementById('id').onclick = function(){ //語句}

???b) jQuery: $("#id").click(function(){ //語句 });

jQuery的詳細介紹

?1.$

??a) Js命名歸納:下劃線,字母,$,數(shù)字

??b)但是不能以數(shù)字作為開頭

??jQuery的兩個變量:$ 和 jQuery

??jQuery 占用了我們兩個變量 $ 和 jQuery

???專業(yè)名詞叫污染

?jQuery入口函數(shù)的實現(xiàn)

?? var iQuery = function () { var obj = { ready : function (func) { func(); } }; return obj; }; iQuery().ready(function () { console.log("我是ready") });

?jS如何函數(shù)和jQuery如何函數(shù)的區(qū)別

??js的window.onload 事件 是等到所有的內(nèi)容以及我們的外部圖圖片之類的文件 加載完之后才會去執(zhí)行---早

??jQuery的入口函數(shù) 是在 html所有標簽都加載之后,就會去執(zhí)行---晚

?js中 對象和json的區(qū)別

??js對象:var obj = { ready: function(){ }};

??json:{"":""} 一定要加雙引號

?js創(chuàng)建對象

??面試題:三種方式

??? var obj = { ready:function () { } };

???var obj1 = new Object(); obj1.ready = function () { };

???var obj2 = Object.create();

??1跟2的區(qū)別

???推薦第一種方式,第二種方式存在效率的問題 因為要new對象吉嫩，會涉及到原型查找的問題

?jquery選擇器

??CSS選擇器回顧

???#id

????Id選擇器

?????#id{ color:red; }

???.class

????類選擇器

?????.class{ //}

???Element

????標簽選擇器

?????P { //}

???*

????通配符選擇器

?????配合其他選擇器來使用

???,

????并集選擇器

?????div,p{}

??? 空格

????后代選擇器

?????選擇div下面所有后代的span

???>

????子代選擇器

?????div > span{}

???+

????緊鄰選擇器

?????div+p 選擇div緊挨著的下一個p元素

?ul>li{兄弟很多$}*8

?? {表示內(nèi)容} $表示序號

?jQuery特點隱式迭代

??內(nèi)部循環(huán)

?jquery選擇器

??jquery基本選擇器

???$(“#demo”)

????選擇id為demo的第一個元素

?????$(“#demo”).css(“background”,”red”)

???$(“.liItem”)

????選擇所有類名（樣式名）為liItem的元素

?????$(“.liItem”). css(“background”,”red”);

???$(“div”)

????選擇所有標簽名字為div的元素

?????$(“div”). css(“background”,”red”);

???$(“*”)

????選擇所有元素 少用或配合其他選擇器來使用

?????$(“*”). css(“background”,”red”)

???$(“.liItem,div”)

????選擇多個指定的元素价认，這個地方是選擇出了 .liItem元素和div元素

?????$(“.liItem,div”). css(“background”,”red”)

???交集選擇器

???規(guī)律:$(selector).css("background","red");

??jquery層級選擇器

??? 空格

????后代選擇器 選擇所有的后代元素

?????$(“div span”). css(“background”,”red”);

???>

????子代選擇器 選擇所有的子代元素

?????$(“div > span”). css(“background”,”red”)

???+

????緊鄰選擇器 選擇緊挨著的下一個元素

?????$(“div + p”). css(“background”,”red”)

???~

????兄弟選擇器 選擇后面的所有的兄弟元素

?????$(“div ~ p”). css(“background”,”red”)

??jquery 基本過濾選擇器

???:eq(index)

????index是從0開始的一個數(shù)字，選擇序號為index的元素自娩。 選擇第一個匹配的元素用踩。

?????$(“l(fā)i:eq(1)”). css(“background”,”red”)

???:gt(index)

????Index 是從0開始的一個數(shù)字，選擇序號大于index的元素

?????$(“l(fā)i:gt(2)”). css(“background”,”red”)

???:lt(index)

????Index是從0開始的一個數(shù)字忙迁，選擇小于index 的元素

?????$(“l(fā)i:lt(2)”). css(“background”,”red”)

???:odd

????Index是從0開始的一個數(shù)字脐彩，選擇小于index 的元素

?????$(“l(fā)i:odd”). css(“background”,”red”)

???:even

????選擇所有序號為偶數(shù)的元素

?????$(“l(fā)i:even”). css(“background”,”red”)

???:first

????選擇匹配第一個元素

?????$(“l(fā)i:first”). css(“background”,”red”)

???:last

????選擇匹配的最后一個元素

?????$(“l(fā)i:last”). css(“background”,”red”)

?其它

??谷歌瀏覽器最小字體大小12px

??設(shè)置多個樣式

??? $(document).ready(function () { // 設(shè)置單個樣式 // $("li").css("background-color","red"); // 設(shè)置多個樣式 $("li").css({ "background-color":"red", "font-size":"20px" }); });

??根據(jù)自己的意愿來設(shè)置樣式

??? $(document).ready(function(){ $("li").css("font-size",function (index,value) { // index: 指定當前元素的索引號 // value: 表示當前元素要設(shè)置的樣式,此處指:background-color // console.log(index); // console.log(value); return (index + 1)*10 + "px"; }); });

常見庫: Prototype,YUI,Dojo,ExtJS,jQuery

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市姊扔，隨后出現(xiàn)的幾起案子惠奸，更是在濱河造成了極大的恐慌，老刑警劉巖恰梢，帶你破解...
    沈念sama閱讀 216,919評論 6贊 502
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件佛南，死亡現(xiàn)場離奇詭異梗掰，居然都是意外死亡，警方通過查閱死者的電腦和手機嗅回，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門及穗，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人绵载，你說我怎么就攤上這事埂陆。” “怎么了娃豹？”我有些...
    開封第一講書人閱讀 163,316評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵焚虱，是天一觀的道長。 經(jīng)常有香客問我培愁，道長著摔，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,294評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任定续，我火速辦了婚禮谍咆，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘私股。我一直安慰自己摹察，他們只是感情好，可當我...
    茶點故事閱讀 67,318評論 6贊 390
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布倡鲸。 她就那樣靜靜地躺著供嚎，像睡著了一般。 火紅的嫁衣襯著肌膚如雪峭状。 梳的紋絲不亂的頭發(fā)上克滴，一...
    開封第一講書人閱讀 51,245評論 1贊 299
  • 城市分裂傳說
    那天，我揣著相機與錄音优床，去河邊找鬼劝赔。 笑死，一個胖子當著我的面吹牛胆敞，可吹牛的內(nèi)容都是我干的着帽。 我是一名探鬼主播，決...
    沈念sama閱讀 40,120評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼移层，長吁一口氣：“原來是場噩夢啊……” “哼仍翰！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起观话，我...
    開封第一講書人閱讀 38,964評論 0贊 275
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤予借，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蕾羊，經(jīng)...
    沈念sama閱讀 45,376評論 1贊 313
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡喧笔，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,592評論 2贊 333
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了龟再。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片书闸。...
    茶點故事閱讀 39,764評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖利凑，靈堂內(nèi)的尸體忽然破棺而出浆劲，到底是詐尸還是另有隱情，我是刑警寧澤哀澈，帶...
    沈念sama閱讀 35,460評論 5贊 344
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布牌借，位于F島的核電站，受9級特大地震影響割按，放射性物質(zhì)發(fā)生泄漏膨报。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,070評論 3贊 327
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一适荣、第九天 我趴在偏房一處隱蔽的房頂上張望现柠。 院中可真熱鬧，春花似錦弛矛、人聲如沸够吩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0贊 22
  • 一樁弒父案丈氓，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽周循。三九已至，卻和暖如春万俗，著一層夾襖步出監(jiān)牢的瞬間湾笛，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工闰歪， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留嚎研，地道東北人。 一個月前我還...
    沈念sama閱讀 47,819評論 2贊 370
  • 代替公主和親
    正文 我出身青樓课竣，卻偏偏與公主長得像，于是被迫代替她去往敵國和親置媳。 傳聞我的和親對象是個殘疾皇子于樟，可洞房花燭夜當晚...
    茶點故事閱讀 44,665評論 2贊 354

推薦閱讀更多精彩內(nèi)容