2. 程式人生 > >JQuery 入門

JQuery 入門

阿新 • • 發佈：2018-03-05
char play type scrip 完成 事件驅動 name onload pan

jQuery是js的一個庫，封裝了我們開發過程中常用的一些功能，方便我們來調用，提高了我們的開發效率。

Js庫是把我們常用的功能放到一個單獨的文件中，我們用的時候，直接引用到頁面裏面來就可以了。

JQuery使用的步驟：

技術分享圖片

版本一：1.x版本

版本二：2.x版本

兩個版本的區別：2.x版本，不再支持IE6、7、8

jQuery的入口函數

技術分享圖片

jQuery入口函數與js入口函數的區別

js入口函數指的是：window.onload = function() {};

區別一：書寫個數不同

Js入口函數只能出現一次，出現多次會存在事件覆蓋的問題。

jQuery的入口函數，可以出現任意多次，並不會存在事件覆蓋問題。

區別二：執行時機不同

Js入口函數是在所有的文件資源加載完成後，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。

jQuery的入口函數，是在文檔加載完成後，就執行。文檔加載完成指的是：DOM樹加載完成後，就可以操作DOM了，不用等到所有的外部資源都加載完成。

文檔加載的順序：從上往下，邊解析邊執行。

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
 
http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Jquery</title>
    <style type="text/css">
        div{
            height: 100px;
            background-color: pink;
            margin:10px;
            display: none;
        }
    
 
</style>
    <script src="jquery-1.11.1.min.js"></script>
</head>
<body>
    <button>Show Off</button>
    <div></div>
    <div></div>    
    <div></div>    
    <div></div>    
    <div></div>    
    <script type="text/javascript">
        //js
        // window.onload = function(){
        //     var btn = document.getElementsByTagName("button")[0];
        //     var divArr = document.getElementsByTagName("div");
        //     btn.onclick = function(){
        //         for(var i=0;i<divArr.length;i++){
        //             divArr[i].style.display = "block";
        //             divArr[i].innerHTML = "過年好！";
        //         }
        //     }
        // }
        //jQuery 版
        $(document).ready(function(){
            //獲取元素
            var jQbtn = $("button");//根據標簽名獲取元素
            var jQdiv = $("div");//
            //綁定事件    
            jQbtn.click(function(){
                //事件驅動程序
                jQdiv.show();
                jQdiv.html("12121221");
            });
        });
        // console.log(btn);
    </script>    
</body>
</html>

怎麽理解jQuery裏面的$符號：

$實際上表示的是一個函數。

技術分享圖片

jQuery裏面的$函數，根據傳入參數的不同，進行不同的調用，實現不同的功能。返回的是jQuery對象

jQuery這個js庫，除了$之外，還提供了另外一個函數：jQuery

jQuery函數跟$函數的關系：jQuery ===$;

JQuery 入門

相關推薦

jQuery學習(一)——jQuery入門

完成 生效 ready 技術 button 覆蓋問題 包括 寫入 屬性和方法 1、jQuery基礎 Jquery它是一個庫(框架)，要想使用它，必須先引入！ jquery-1.8.3.js：一般用於學習階段。 jquery-1.8.3.min.js：用於項目使用階段 官網下

前端筆記----jquery入門知識點總結 （轉）

outer 尺寸 對象 層級 ani 入門 fontsize fun click http://www.cnblogs.com/cwp-bg/p/7633623.html 一、jquery的加載方法 $(document).ready(function(){js代碼});

python學習_day58_前端基礎之jQuery入門1

基本 兼容多瀏覽器 python jquery入門 選擇 eight ges span 偶數 一、jQuery介紹 　　jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行

jquery入門

事件處理 ner 選擇器 class ive 不同的 事件操作 inpu adding 運用jQuery時，需要在頁面中引入jQuery文件 jQuery的hello world <!DOCTYPE html> <html> <head&

前端基礎之jQuery入門 01

隔行變色 三方 sel () 層級選擇器 aps not 切換 jquer jQuery介紹 jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。 jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交

JQuery 入門

char play type scrip 完成 事件驅動 name onload pan jQuery是js的一個庫，封裝了我們開發過程中常用的一些功能，方便我們來調用，提高了我們的開發效率。 Js庫是把我們常用的功能放到一個單獨的文件中，我們用的時候，直接引用到頁面裏面來

jQuery入門（四）-----jQuery中的靜態方法

-- 圖片 靜態 str height 事件 個數 另一個 doc jQuery靜態方法 什麽是靜態方法? 靜態方法對應的是對象方法,對象方法用實例對象調用,而靜態方法用類名調用. ready()事件的暫停和恢復 　　>>暫停或者恢復jQuery.read

jQuery入門知識點介紹

元素 hid 被調用 post請求 開發 sync 表示 classname amp 一、JQ的簡單介紹 JQ是js的一個庫，封裝了開發時常用的一些功能，初期學習JQ主要是學習操作DOM的一些方法，調用JQ中封裝的一些API來進行DOM 的操作，大部分都是方法。 JQ的

jquery1-jquery入門

什麼是jquery jQuery是一個JavaScript函式庫。 jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。 jQuery庫包含以下功能： HTML 元素選取 HTML 元素操作 CSS 操作 HTML 事件函式 JavaScript 特效和

jquery-jquery入門|例項目錄

什麼是jquery jQuery是一個JavaScript函式庫。 jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。 jQuery庫包含以下功能： HTML 元素選取 HTML 元素操作 CSS 操作 HTML 事件函式 JavaScript 特效和

jQuery 入門教程 24 jQuery UI Autocomplete示例 二

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

小白的自身Jquery入門基礎

什麼是jQuery？   簡單的說 它是一個較量級的javascript類庫。    注1：就一個類“jQuery”，簡寫“$” jQuery的優點 第一點：總是面向集合。 第二點：多行操作急於一行   hello jQuery

JQuery入門（四）JQuery遍歷元素

前言       通過前面的瞭解，我們知道了基本的JQuery選擇器，本章學習JQuery的元素遍歷 方法 1.概念 我們瞭解了JQuery的選擇器的相關知識，也清楚了層級選擇器的概念，那麼如果說我們要找很深層的元素物件怎麼辦呢？那麼使用層級選擇器當

JQuery入門（三）JQuery操作元素

前言        本章學習使用JQuery來操作元素的內容、屬性、樣式以及相關的文件結構 方法 1.概念 通過前面的講解，我們瞭解了使用JQuery來獲取html元素物件。那麼獲取了物件之後將會對其中的內容進行操作，也就是我們馬上要開始講

JQuery入門（二）JQuery選擇器

前言       本章講解JQuery選擇器的相關知識 方法 1.概念 通過前面的學習，我們把jquery的js檔案下載了下來，當時下載的是一個壓縮版，也就是專案上線用到的版本。這裡我們為了說明方便我們下載一個開發版來進行學習。 jquery選擇

JQuery入門（一）JQuery初體驗

前言       本章將進入全新的章節學習，在這裡我們將學習JS的“輪子”JQuery。 方法 1.概念 相信大家經過前面的JS學習，在原生的JS中操作html元素如通過id獲取html物件是document.getElementById("id")

JQuery入門（六）JQuery動畫效果

前言        本章概要的講解一下JQuery的動畫效果 方法 本章的例項程式碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8

JQuery入門（五）JQuery事件機制

前言       本章學習JQuery事件機制的相關知識 方法 1.概念 我們知道，通過原生的JS的事件機制我們通常是將對應的事件方法新增到我們的html元素之中，通過響應的事件來呼叫相關的函式。假如說需要新增的事件的元素多了，豈不是十分的麻煩，JQ

python前端jQuery入門

sibling ima 觸發事件 ie 6 運行 接口 2.4 常用 ref 知識點預習1.jQuery的加載2.jQuery選擇器 3.jQuery的click事件 4.jQuery的樣式操作 5.jQuery動畫 01- 封閉

前端修煉——jQuery入門！

內容概述：     全域性變數和區域性變數，     jQuery 介紹     獲取標籤     jQuery 操作樣式     點選事、this 關鍵字     動畫 animate 全域性變數和區域性變數 全域性變數 定義在函式外面 作用範圍：