• <td id="ceeca"><noscript id="ceeca"></noscript></td>
  • <td id="ceeca"></td>
  • <bdo id="ceeca"><center id="ceeca"></center></bdo>
    您的位置:首頁 > PPT課件 > 培訓教程PPT > jquery培訓ppt課件

    jquery培訓ppt課件

    素材編號:
    483900
    素材軟件:
    PowerPoint
    素材格式:
    ZIP/RAR
    素材上傳:
    weishenhe
    上傳時間:
    2022-10-09
    素材大。
    1.20 MB
    素材類別:
    培訓教程PPT
    網友評分:

    素材預覽

    jquery培訓ppt課件

    jquery培訓ppt課件下載是由PPT寶藏(www.xpj338811.com)會員weishenhe上傳推薦的培訓教程PPT, 更新時間為2022-10-09,素材編號483900。

    這是jquery培訓ppt課件下載,主要介紹了jquery簡介;jquery選擇器;jquery中的DOM操作;jquery中的事件和動畫,這是為了防止文檔在完全加載(就緒)之前運行 jQuery 代碼。
    如果在文檔沒有完全加載之前就運行函數,操作可能失敗。例如:試圖隱藏一個不存在的元素,歡迎點擊下載jquery培訓ppt課件。

      jquery培訓教材

      作者:羅露

      第一章jquery簡介第二章jquery選擇器第三章jquery中的DOM操作第四章jquery中的事件和動畫

      jQuery培訓教材

      第一章jQuery簡介

      JavaScript庫

      為簡化JavaScript的開發封裝了很多預定義的對象和函數兼容各瀏覽器

      常見的JavaScript庫

      PrototypeDojoYUIExtJSMooToolsjQuery

      認識jQuery

      jQuery是一個JavaScript庫jQuery極地簡化了JavaScript編程jQuery很容易學習jQuery的理念:寫得更少,做得更多(writeless,domore)

      jQuery有優勢

      不污染頂級變量出色的瀏覽器兼容性鏈式操作方式隱式迭代行為層與結構層分離跟豐富的插件支持完善的文檔開源

      輕量級強的選擇器出色的DOM操作可靠的事件處理機制完善的Ajax

      jQuery基礎語法

      基礎語法是:$(selector).action()美元符號定義jQuery(又稱工廠函數)選擇器(selector)“查詢”和“查找”HTML元素action()執行對元素的操作示例

      $(this).hide() //隱藏當前元素$("p").hide() //隱藏所有段落$("p.test").hide() //隱藏所有class="test"的段落$("#test").hide() //隱藏第id="test"的元素

      jQuery代碼風格

      鏈式操作風格對于同一對象不超過3個操作,可直接寫一行對同一對象的操作較多,建議每行寫一個操作添加必要的注釋

      $("has_children").click(function(){ $(this) .addClass("highLight") .children("a").show().end() .siblings().removeClass("highLight") .children("a").hide();});

      文檔就緒函數

      $(document).ready():類似window.onload定義文檔加載完后執行的函數

      

    $(document).ready(function(){ alert("HelloWorld!");});

      這是為了防止文檔在完全加載(就緒)之前運行jQuery代碼。如果在文檔沒有完全加載之前就運行函數,操作可能失敗。例如:試圖隱藏一個不存在的元素 獲得未完全加載的圖像的小

      文檔就緒函數

      jQuery對象與DOM對象

      DOM對象:HTML的文檔對象模型中的元素對象?赏ㄟ^javascript的以下方法獲取jQuery對象:經jQuery包裝后的DOM對象兩者擁有的方法不同

      document.getElementById("test")document.getElementsByTagName("p")

      $("#test")$("p")

      jQuery對象與DOM對象相互轉換

      jQuery對象轉成DOM對象DOM對象轉成jQuery對象

      var$test=$("#test");vartest=$test[0]; //jQuery對象是一個數組,可通過索引得到DOM對象或vartest=$test.get(0); //用jQuery提供的get(index)方法得到DOM對象

      vartest=document.getElementById("test");var$test=$(test); //用jQuery的工廠方法

      解決jQuery與其它庫的

      jQuery在其它庫之后導入jQuery.noConflict();讓出$使用權然后用jQuery而不用$jQuery在其它庫之前導入直接用jQuery而不用$,同時,可以使用$()方法作為其它庫的快捷方式詳情見備注。

      jQuery開發工具和插件

      AptanaVisualStudio2010(已包含jquery-1.4.1)

      jQuery培訓教材

      第二章jQuery選擇器

      什么是jQuery選擇器

      方便找出文檔中的DOM元素可對找出的元素添加相應行為兼容各種瀏覽器

      jQuery選擇器的優點

      寫法簡潔$("#ID")、$(".class")、$("TagName")…支持CSS1~CSS3選擇器無需考慮特定瀏覽器是否支持完善的處理機制元素不存在不會出錯注意:判斷元素是否存在,要判斷jQuery對象的長度是否>0,或者轉換成DOM對象來判斷

      //不能用下面方式判斷元素是否存在if($("#test"))//可用以下兩種方式判斷元素是否存在if($("#test").length>0)或if($("#test")[0])

      //javascript代碼,元素不存在會出錯 document.getElementById("test").style.color="red";//jQuery代碼,元素不存在不出錯 $("#test").css("color","red");

      jQuery選擇器的類型

      基本選擇器層次選擇器過濾選擇器基本過濾選擇器內容過濾選擇器可見性過濾選擇器屬性過濾選擇器子元素過濾選擇器表單域對象屬性過濾選擇器表單選擇器

      基本選擇器

      基本選擇器#id

      #id返回值:Array(1)概述:根據給定的ID匹配一個元素。 如果選擇器中包含特殊字符,可以用兩個斜杠轉義。參見示例。(2)參數:idString 用于搜索的,通過元素的id屬性中給定的值(3)示例:例一:描述:查找含有特殊字符id=“run[button]的元素”。代碼見:“jquery例子集合”文件夾中的examples.html

      基本選擇器.class

      .class返回值:Array(1)概述:根據給定的類匹配元素。(2)參數:classString 一個用以搜索的類。一個元素可以有多個類,只要有一個符合就能被匹配到。(3)示例:例一:描述:選取class=“font”的元素。代碼見:“jquery例子集合”文件夾中的examples.html

      基本選擇器element

      element返回值:Array(1)概述:根據給定的元素名匹配所有元素(2)參數:elementString 一個用于搜索的元素。指向DOM節點的標簽名。(3)示例:例一:描述:查找一個p元素。代碼見:“jquery例子集合”文件夾中的examples.html

      基本選擇器*

      *返回值:Array(1)概述:匹配所有元素 多用于結合上下文來搜索。(2)示例:例一:描述:找到form下的每一個元素,并設置字體樣式。代碼見:“jquery例子集合”文件夾中的examples.html

      基本選擇器selector1,selector2,selectorN

      selector1、selector2、selectorN返回值:Array(1)概述:將每一個選擇器匹配到的元素合并后一起返回。你可以指定任意多個選擇器,并將匹配到的元素合并到一個結果內。(2)參數:selector1Selector 一個有效的選擇器 selector2Selector 另一個有效的選擇器 selectorN(可選)Selector 任意多個有效選擇器(3)示例:例一:描述:找到匹配任意一個類的元素,并設置字體顏色為 代碼見:“jquery例子集合”文件夾中的examples.html

      層次選擇器

      層次選擇器ancestordescendant

      ancestordescendant返回值:Array(1)概述:在給定的祖先元素下匹配所有的后代元素(2)參數:ancestorSelector 任何有效選擇器 descendantSelector 用以匹配元素的選擇器,并且它是第一個選擇器的后代元素 (3)示例:例一:描述:找到form下的每一個元素,并設置字體樣式。代碼見:“jquery例子集合”文件夾中的examples.html

      層次選擇器parent>child

      parent>child返回值:Array(1)概述:在給定的父元素下匹配所有的子元素(2)參數:parentSelector 任何有效選擇器 childSelector 用以匹配元素的選擇器,并且它是第一個選擇器的子元素 (3)示例:例一:描述:匹配表單中所有的子級label元素,并設置字體顏色為。 代碼見:“jquery例子集合”文件夾中的examples.html

    上一頁:java基礎培訓ppt課件 下一頁:化妝培訓課件PPT

    相關素材

    1.jqueryppt

    2.

    jquery培訓ppt課件

    下載地址

    jquery培訓ppt課件

    優秀PPT

    Copyright:2009-2019 pptbz.com Corporation,All Rights Reserved PPT寶藏 版權所有

    免責聲明:本網站內容由用戶自行上傳,如權利人發現存在誤傳其他作品情形,請及時與本站聯系

    PPT模板下載 粵ICP備13028522號

    舉報 少妇被粗大的猛烈进出短文
  • <td id="ceeca"><noscript id="ceeca"></noscript></td>
  • <td id="ceeca"></td>
  • <bdo id="ceeca"><center id="ceeca"></center></bdo>