1. 程式人生 > 實用技巧 >JQuery簡介

JQuery簡介

JQuery是一個快速、簡潔的Javascript庫,其設計的宗旨是“write Less ,Do More",即倡導寫更少的程式碼,

做更多的事情。

J就是Javascript;Query查詢;意思就是查詢JS,把Js中的DOM操作做了封裝,我們可以快速的查詢使用裡面

的功能。

jquery封裝了javascript常用的功能程式碼,優化了DOM操作、事件處理、動畫設計和Ajax互動。

學習jQuery的本質:就是學習呼叫這些函式(方法).

jQuery出現的目的是加快前端人員的開發速度,我們可以非常方柏霓的呼叫和使用它,從而提高效率。

那麼jquery如何使用呢?

第一步、引入jquery檔案

線上引入<scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 本地引入<scriptsrc="js/jquery.min.js"></script>,得先到jquery.com下載jquery原始檔

第二步、呼叫jquery函式

jquery的入口函式

$(document).ready(function(){
  //入口

<!DOCTYPE html><html lang="en">


<head>
    <meta charset
="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- <script src="js/jquery.min.js"></script> --> <!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> -->
<!-- <script src="https://code.jquery.com/jquery-3.5.1.js"></script> --> <!--  <script src="http://libs.baidu.com/jquery/3.4.1/jquery.min.js"></script> --> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div></div> <script>
      
//hide()是jquery自帶的函式 $('div').hide(); </script> </body> </html>

$是jQuery的別稱(另外的名字)

$(function(){
});想當於jQuery(function(){});

1、DOM物件:用原生JS獲取過來的物件就是DOM物件

例:var div=document.querySelector('div');

2、jquery物件:用jQuery方式獲取過來的物件是jQuery物件。本質:通過把DOM元素進行了包裝

例:$(div);//這是一個jquery物件

3、jquery物件只能使用jquery方法;DOM物件則使用原生的JavaScript屬性和方法

DOM物件與jQuery物件之間是可以相互轉換的。

因為原生JS比jQuery更大,原生的一些屬性和方法jQuery沒有給我們封裝。想要使用這些屬性和方法需要把jQuery物件轉換為DOM物件才能使用

1、DOM物件轉換為jQuery物件:$(DOM物件)

2、jQuery物件轉換為DOM物件(兩種方式):jQuery物件[index]或jQuery物件.get[index]

  $('div')[index] index是索引號

  $('div').get(index) index是索引號