JQuery簡介
JQuery是一個快速、簡潔的Javascript庫,其設計的宗旨是“write Less ,Do More",即倡導寫更少的程式碼,
做更多的事情。
J就是Javascript;Query查詢;意思就是查詢JS,把Js中的DOM操作做了封裝,我們可以快速的查詢使用裡面
的功能。
jquery封裝了javascript常用的功能程式碼,優化了DOM操作、事件處理、動畫設計和Ajax互動。
學習jQuery的本質:就是學習呼叫這些函式(方法).
jQuery出現的目的是加快前端人員的開發速度,我們可以非常方柏霓的呼叫和使用它,從而提高效率。
那麼jquery如何使用呢?
第一步、引入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是索引號