1. 程式人生 > >前端的一些東西

前端的一些東西

  alert("") 向瀏覽器彈出一個提示框
   document.write("")  向body中新增一個內容
   console.log("")     向控制檯輸出一個內容
   <button onclick="alert('討厭  死鬼  你點我幹嘛')">點我一下</button>    js程式碼可以寫在標籤的屬性中
   將一個字面量轉成String 型別的方式
       a.呼叫toString()方法       null 和 undefined呼叫toString()方法會報錯 
       b.呼叫String()函式           例:var a = 123;  var b = String(a)   String() 函式實際上是將null 和 undefined等值 轉換成 “null”“undefined”
    將一個字面量轉成一個Number型別的方式
        a.呼叫Number()函式   
            *如果是純數字的字串,會將其直接轉換成數字
            *如果字串中含有非數字的字串,會將其轉化為NaN(not a number)\
            *如果字串是一個空串或者全是空格,會將其轉化成0
            *Boolean型別轉數字  true 轉成1   false轉成0
            * null 會轉換0 
            * undefined會轉換成NaN
        b.呼叫
              parseInt() 將字串轉換為int        只能將一個以數字開頭的字串中未出現非數字的字元前面的數字轉化成數字    
              parseFloat 將字串轉換成浮點數
              parseInt 和 parseFloat 對於非String型別的資料  它會先轉換成String  在對其進行操作
   將一個數據轉換成boolean型別
        a.呼叫Boolean()函式
            * 將一個數字轉成boolean 除了0和NaN是false 其他全部是true
            * 將一個字串轉成boolean 除了空串是false 其他都為true
            * 將null和undefined 轉成boolean  值為false   

運算子
   $$ 邏輯與運算 
      * 當第一個值為true時,必然返回第二個值
      * 當第一個值為false時,必然返回第一個值
   || 或運算
      * 當第一值為false時,必然返回第二個值
      * 當第一值個為true時,必然返回第一個值   
            
1.瞭解jqery
   *是什麼: what
      *一個js函式庫:write less ,do more
      *封裝簡化DOM操作(crud)/ajax
   *為什麼用它:why?
      *強大選擇器:方便快速查詢DOM元素
      *隱式遍歷(迭代):一次操作多個元素
      *讀寫合一:讀資料和寫資料使用同一個函式,讀的時候不傳值,寫的時候傳值就行
      *事件處理
      *鏈式呼叫
      *DOM操作(cud)
      *樣式操作
   *如何使用: How?
      *引入jquery庫
        *本地引入和CDN遠端引入,本地引入一般用於測試,生產最好是遠端引入
        *測試版本(測試版)和生產版本(壓縮版)
      *使用jquery
        *使用jQuery函式:$/jquery
        *使用jQuery物件:$xxx(執行$()得到的)
2.jquery的2把利器
   *jQuery函式:$/jquery
      *jQuery向外暴露的就是jQuery函式,可以直接使用
      *當成一般函式使用:$(param)
         *param是function:相當於window.onload = funcion(文件載入完畢之後的監聽)
         *param是選擇器字串:查詢所有匹配的DOM元素,返回包含所有DOM元素的jQuery物件
         *param是DOM元素:將dom元素物件包裝為jQuery物件返回 $(this)
         *param 是標籤字串:建立標籤dom元素物件幷包裝成jQuery物件返回
      *當成物件使用:$.xxx
         *each(obj/attr,function(key,value(){}))
         *trim(str)
      *當成物件使用: $.xxx
   *jquery物件
      *包含所有匹配的n個DOM元素的偽陣列物件,
      * 執行$()返回的就是jQuery物件
      *基本行為:
        *length/size():得到dom元素的個數
        *[index]:得到指定下標對應的dom元素
        *each(function(index,domEle)()):遍歷所有的dom元素
        *index():得到當前dom元素在所有兄弟中的下標
3.選擇器
   *是什麼?
     *有特定語法規則(css選擇器)的字串
     *用來查詢某個或某些DOM元素:$(selector)
   *分類
     *基本
       * #id  
       * tagName/*
       * .class
       * selector1,selector2,selector3:並集
       * selector1selector2selector3:交集
     *層次
       *找子孫後代,兄弟元素
       *selector1>selector2:子元素
       *selector1 selector2:後代元素
     *過濾
       * 在原有匹配元素中篩選出其中一些
       * :first
       * :last
       * :eq(index)
       * :not(selector)不是這個的其他元素
       * :lt
       * :gt連續幾個
       * :odd
       * :even
       * :hidden
       * :visible
       * :[attrName]
       * : [attrName=value]
     *表單
       * :input
       * :text
       * :checkbox
       * :redio 
       * : checked 選中的
4.屬性
    *操作標籤的屬性,標籤體文字,
    *attr(name)/ attr(name,value):讀寫非布林值的標籤屬性
    *prop(name)/ prop(name,value):讀寫布林值的標籤屬性
    *removeAttr(name)/removeProp(name):刪除屬性
    *addClass(className):新增class
    *removeClass(classValue):移除指定class
    *val()/val(value):讀寫標籤的value
    *html()/html(htmlString):對寫標籤體文字
5.CSS模組
    *style樣式
      *css(styleName):根據樣式名得到對應的值
      *css(styleName,value):設定一個樣式
      *css({多個樣式對}):設定多個樣式
    *位置座標
      *offset();讀/寫當前元素座標(原點是頁面左上角)
      *position();讀當前元素座標(原點在父元素左上角)
      *scrollTop()/scrollLeft();讀、寫元素、頁面的滾動條座標
    *尺寸
      *width()/height():width/height
      *innerWidth()/innerHeight();width+padding
      *outerWidth()/outerHeight();width+padding+border
6.篩選模組
      *過濾
        *在jquery物件內部的元素中找出部分匹配的元素,並封裝成新的jquery物件返回
        *first()
        *last()
        *eq(index)
        *filter(selector)
        *not(selector)
        *has(selector)
      *查詢
        *查詢jquery物件內部的元素的子孫、兄弟、父母元素,並封裝成新的jquery物件
        *children(selector):子元素
        *find(selector):後代元素
        *preAll(selector):前面的所有兄弟
        *siblings(selector):所有兄弟
        *parent():父元素
7.文件處理模組
      *增加
        *append()、appendTo()插入後部
        *preppend()、preppendTo 插入前部
        *before()插入前面
        *after()插入後面
      *刪除
        *remove():將自己和內部的孩子都刪除
        *empty():掏空
      *更新
        *repalcewith()
8.事件模組
      *繫結事件
        *eventName(function(){})
        *on(‘eventName’,function(){})
        *常用事件
           *click,mousenter/mouseleave mouseover/mouseout fouce/blur
           *hover(function(){},function(){}) 
      *解綁事件
           *off('eventName')
      *事件委託
         *將子元素的事件委託給父元素處理
            *事件監聽繫結在父元素上,但事件發生在子元素上
            *事件回冒泡到父元素
            *但最終呼叫的是事件回撥函式的是子元素,event,target
          *好處:
            *新增的元素沒有事件監聽
            *減少監聽的數量
          *編碼
            *delegate(selector,‘eventName’,function(){})  回撥函式中的this是子元素
            *undelegate(‘eventName’,)
      *事件座標
          *event.offsetX 原點當前元素左上角
          *event.clientX  原點是視窗左上角
          *event.pageX  原點是頁面左上角
   
      *事件相關
          *停止事件冒泡
          *阻止事件的預設行為:event.preventDedault()