1. 程式人生 > >1小時學會JQuery

1小時學會JQuery

---------------------------------------------------------------------------------------------------------------

[版權申明:本文系作者原創,轉載請註明出處]

作者:朱培   ID:sdksdk0

---------------------------------------------------------------------------------------------------------------

一、JQuery簡介

1.1簡介

prototype之後又一個優秀的庫。它是輕量級的js庫 ,它相容

CSS3,還相容各種瀏覽器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及後續版本將不再支援IE6/7/8瀏覽器。jQuery使使用者能更方便地處理HTML標準通用標記語言下的一個應用)、events、實現動畫效果,並且方便地為網站提供AJAX互動。jQuery還有一個比較大的優勢是,它的文件說明很全,而且各種應用也說得很詳細,同時還有許多成熟的外掛可供選擇。jQuery能夠使使用者的html頁面保持程式碼和html內容分離,也就是說,不用再在html裡面插入一堆js來呼叫命令了,只需要定義id即可。

jQuery是免費、開源的,使用MIT許可協議。jQuery的語法設計可以使開發更加便捷,例如操作文件物件、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能。除此以外,jQuery提供API讓開發者編寫外掛。其模組化的使用方式使開發者可以很輕鬆的開發出功能強大的靜態或動態網頁。



1.2優點


(1)寫少程式碼,做多事情【write less do more】
-    (2)免費,開源且輕量級的js庫,容量很小
-         注意:專案中,提倡引用min版的js庫
-    (3)相容市面上主流瀏覽器,例如 IE,Firefox,Chrome
-         注意:jQuery不是將所有JS全部封裝,只是有選擇的封裝
-    (4)能夠處理HTML/JSP/XML、CSS、DOM、事件、實現動畫效果,也能提供非同步AJAX功能
-    (5)文件手冊很全,很詳細
-    (6)成熟的外掛可供選擇
-    (7)提倡對主要的html標籤提供一個id屬性,但不是必須的
-    
(8)出錯後,有一定的提示資訊
-    (9)不用再在html裡面通過<script>標籤插入一大堆js來呼叫命令了




二、JQuery的九類選擇器

使用jquery,首先我們需要去把jquery的包匯入,這個jquery的官網上面是可以下載的,地址:https://jquery.com/,目前最新版本是3.0,一般會有兩種版本的,一個是完全的,一個是迷你版本的,兩個版本就是大小不一樣,裡面的實質性東西其實是一樣的,而這個迷你版的適合專案正式上線使用,因為佔的體積小啊,一般學習或者練習的話就可以嘗試使用完全版的。下面以幾個案例來實際說明jquery的使用,完整的程式碼會在文末提供下載連結,歡迎下載學習。選擇器的部分在下載的檔案中的/JQuery\WebRoot\selector目錄下。

2.1 基本選擇器

[javascript] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
  1. //1)查詢ID為"div1ID"的元素個數
  2.     alert(  $("#div1ID").size());  
  3.     //2)查詢DIV元素的個數
  4.      alert( $("div").length);  
  5.     //3)查詢所有樣式是"myClass"的元素的個數
  6.     alert($(".myClass").size());  
  7.     //4)查詢所有DIV,SPAN,P元素的個數
  8.     alert($("div,span,p").size());  
  9.     //5)查詢所有ID為div1ID,CLASS為myClass,P元素的個數
  10.     alert($("#div1ID,.myClass,p").size());  



2.2 層次選擇器

[javascript] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
  1. //1)找到表單form裡所有的input元素的個數
  2.     alert($("form input").size());  
  3.     //2)找到表單form下所有的子級input元素個數
  4.     alert($(" form > input").size());  
  5.     //3)找到表單form同級第一個input元素的value屬性值
  6.     alert($("form + input").val());  
  7.     //4)找到所有與表單form同級的input元素個數
  8.     alert($("form ~ input").size());  


2.3 增強基本選擇器

[javascript] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
  1. //1)查詢UL中第一個元素li的內容
  2.     alert($("ul li:first").html());    
  3.     alert($("ul li:first").text());   
  4.     //html()要用在html/jsp中,不能用在xml中,而text()都可以用
  5.     //2)查詢UL中最後一個元素的內容
  6.     alert($("ul li:last").text());   
  7.     //3)查詢所有未選中的input元素個數
  8.     alert($(":checkbox:checked").size());  //選中的    2
  9.     alert($(":checkbox:not(:checked)").size());  //未選中
  10.     //4)查詢表格的1、3、5...奇數行個數
  11.     alert($("table tr:odd").size());  //3
  12.     //5)查詢表格的2、4、6...偶數行個數
  13.     alert($("table tr:even").size());  //3
  14.     //6)查詢表格中第二行的內容,從索引號0開始
  15.     alert($("table tr:eq(1)").text());  
  16.     //html()強調的是標籤中的內容,即便標籤中有子標籤,也會顯示出來,而text()強調的是標籤中的文字內容,不會顯示子標籤
  17.     //7)查詢表格中第二第三行的個數,即索引值是1和2,也就是比0大
  18.     alert($("table tr:gt(0)").size());  //5
  19.     //8)查詢表格中第一第二行的個數,即索引值是0和1,也就是比2小
  20.     alert($("table tr:lt(3)").size());   
  21.     //9)給頁面內所有標題<h1><h2><h3>加上紅色背景色
  22.     alert($(":header").css("background-color","red").css("color","white"));  


2.4 內容選擇器[javascript] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
  1. //1)查詢所有包含文字"John"的div元素的個數
  2.     alert($("div:contains('John')").size());  //2
  3.     //2)查詢所有p元素為空的元素個數
  4.     alert($("p:empty").size());  //2
  5.     //3)給所有包含p元素的div元素新增一個myClass樣式
  6.     $("div:has(p)").addClass("myClass");  
  7.     //4)查詢所有含有子元素或者文字的p元素個數,即p為父元素
  8.     alert($("p:parent").size());  //2


2.5 可見性選擇器

[javascript] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
  1. //1)查詢隱藏的tr元素的個數
  2.         alert($("table tr:hidden").size());  //1
  3.         //2)查詢所有可見的tr元素的個數
  4.         alert($(

    相關推薦

    1小時學會JQuery

    ---------------------------------------------------------------------------------------------------------------[版權申明:本文系作者原創,轉載請註明出處]作者:朱培

    Android開發工程師文集-1 小時學會Widget小組件開發

    onu ide 最新 ani 布局文件 希望 lis 方便 name 前言 大家好,給大家帶來Android開發工程師文集-1 小時學會Widget小組件開發的概述,希望你們喜歡 學會用Widget (小組件) Widget小組件很方便,很快捷,可以個性化,自己定制,相關功

    運維之道:16 張圖片帶你 1 小時學會 Ansible

    今天分享一個講解 Ansible 的 PPT,可以用做入門學習之用。內容非常全面,當然,能不能一小時學會還要看你認不認真咯~

    1小時學會:最簡單的iOS直播推流(五)yuv、pcm資料的介紹和獲取

    最簡單的iOS 推流程式碼,視訊捕獲,軟編碼(faac,x264),硬編碼(aac,h264),美顏,flv編碼,rtmp協議,陸續更新程式碼解析,你想學的知識這裡都有,願意懂直播技術的同學快來看!! 前面介紹瞭如何通過相機實時獲取音視訊資

    1小時學會:最簡單的iOS直播推流(七)h264/aac 硬編碼

    最簡單的iOS 推流程式碼,視訊捕獲,軟編碼(faac,x264),硬編碼(aac,h264),美顏,flv編碼,rtmp協議,陸續更新程式碼解析,你想學的知識這裡都有,願意懂直播技術的同學快來看!! 前面已經介紹瞭如何從硬體裝置獲取到音視

    1小時學會:最簡單的iOS直播推流(九)flv 編碼與音視訊時間戳同步

    最簡單的iOS 推流程式碼,視訊捕獲,軟編碼(faac,x264),硬編碼(aac,h264),美顏,flv編碼,rtmp協議,陸續更新程式碼解析,你想學的知識這裡都有,願意懂直播技術的同學快來看!! 前文介紹瞭如何獲取音視訊的aac/h2

    例項教程:1小時學會Python

    from: http://www.cnitblog.com/yunshichen/archive/2008/05/09/43527.aspx1 序言面向讀者 本文適合有經驗的程式設計師儘快進入Python2.x世界.特別地,如果你掌握Java和Javascript,不用

    1分鐘學會4個PPT高效小技巧,3個小時才能完成的工作5分鐘搞定~

    製作PPT總是要花費巨長的時間?看過來~用1分鐘學會4個PPT高效小技巧,3個小時才能完成的工作5分鐘搞定,效率就是這麼高~   1.一秒去動畫 操作:幻燈片放映—設定幻燈片放映—放映時不加動畫   2.摳圖去背景 操作:選中圖片—圖片格式—刪

    小時學會SpringBoot(6-1)

    事務管理 要麼完全執行,要麼完全不執行 新建GirlService package com.fiona; import org.springframework.beans.factory.annotation.Autowired; import org.springframew

    2小時學會SpringBoot(5-1

    資料庫操作(上) Spring-Data-Jpa -> MySQL Spring-Data-Jpa JPA(Java Persistence API)定義了一系列物件持久化的標準,目前實現這一規範的產品有Hibernate、TopLink等。 RESTful API

    2小時學會SpringBoot(4-1)

    Controller的使用 Controller 處理http請求 @RestController Spring4之後新加的註解,原來json需要@ResponseBody配合@Contr

    2小時學會SpringBoot(3-1)

    屬性配置 spring.datasource.url: jdbc:mysql://127.0.0.1:3306/ spring.datasource.username: root spring.datasource.password: 123456 spring.dataso

    2小時學會Spring Boot 1-1SpringBoot介紹

    第一章 SpringBoot介紹 1-1SpringBoot介紹 SpringBoot優勢:可以簡化編碼,配置,部署,監控 SpringBoot和SpringMVC關係 SpringBoot是SpringMVC的升級版 但是學習SpringBoot可以不用學習

    2小時學會SpringBoot(1-1 2-1)

    1-1 SpringBoot介紹 使用SpringBoot可以避免xml的繁雜配置,使得編碼、配置、部署、監控都變得簡單。 SpringBoot和SpringMVC的關係:SpringBoot是Spring MVC的升級版,兩者沒有必然的聯絡。可以直接學習SpringBo

    1小時教你學會正則表示式

    想必很多人都對正則表示式都頭疼.今天,我以我的認識,加上網上一些文章,希望用常人都可以理解的表達方式.來和大家分享學習經驗.  開篇,還是得說說 ^ 和 $ 他們是分別用來匹配字串的開始和結束,以下分別舉例說明   "^The": 開頭一定要有"The"字串;   "of despair$": 結尾一定要有"

    小碼王1小時遊(手動諷刺)

    我只 卓越 pid 程序 數字串 一行 考卷 bsp 復雜度 鏈接(所謂的“饕餮大餐”) 1 小碼王:國家信息學鉆石教練徐先友公益講座即將震撼登場 2 小碼王少兒編程夏令營 今天下午在強烈的不情願當中硬是讓不懂code的媽咪帶到了城西銀泰的小碼王所在地。 劇情比較狗血,慎入

    【健康】下蹲5分鐘,等於步行1小時!最簡單實用的鍛煉方法

    relative 地面 提醒 mps 靈活性 ica 剛才 order 次數 【健康】下蹲5分鐘,等於步行1小時!最簡單實用的鍛煉方法2017-07-19人民日報“人老腳先衰,樹枯根先竭”。如果你不想過早衰老,便要保證腳部不衰老,所謂“養生先養腳”、“腿勤人長壽”,重視腿部

    陳天藝1636050045假設跑步者1小時40分鐘35秒跑了24英裏。編寫一個程序顯示每小時以公裏為單位的平均速度值

    sta static out [] void clas nbsp ati args public class AverageSpeed{ public static void main(String[]args){ double speedkm =60/(45.5/14)

    1000 個小時學會 Rails (目錄)

    body tar 靜態頁 -name 簡介 log -c spec 作者 感謝 juanito 給我們分享1000 個小時學會 Rails ,我這裏做個目錄鏈接,這樣方便學習。 Rails 前世今生 你的第一個 Rails 應用 測試!測試! RSpec 行為驅動測試簡介