一:jQuery
1.jQuery介紹
jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能夠極大地簡化JavaScript編程。它的宗旨就是：“Write less, do more.“
jQuery內部封裝了原生的js代碼(還額外添加了很多的功能)
能夠讓你通過書寫更少的代碼 完成js操作
類似於python里面的模塊 在前端模塊不叫模塊 叫 “類庫”
兼容多個瀏覽器的 你在使用jQuery的時候就不需要考慮瀏覽器兼容問題
2.jQuery的宗旨
- write less do more
- 讓你用更少的代碼完成更多的事情
一般情況都用jQuery可以使用BOM與DOM的功能，還額外添加了很多，用更少的代碼，完成js操作，並且兼容多個瀏覽器。
3.有了jQuery那我們還使用BOM與DOM嗎？
因為原生js是最底層的，它的速度是最快的。
使用jQuery，它的內部封裝了js，它會有一個轉換，速度稍微慢一點(不影響)
4.jQuery的優勢
- 一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面加載速度。
- 豐富的DOM選擇器,jQuery的選擇器用起來很方便，比如要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再比如要將一個表格的隔行變色，jQuery也是一行代碼搞定。
- 鏈式表達式。jQuery的鏈式操作可以把多個操作寫在一行代碼里，更加簡潔。
- 事件、樣式、動畫支持。jQuery還簡化了js操作css的代碼，並且代碼的可讀性也比js要強。
- Ajax操作支持。jQuery簡化了AJAX操作，后端只需返回一個JSON格式的字符串就能完成與前端的通信。
- 跨瀏覽器兼容。jQuery基本兼容了現在主流的瀏覽器，不用再為瀏覽器的兼容問題而傷透腦筋。
- 插件擴展開發。jQuery有着豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件，並且用jQuery插件做出來的效果很炫，並且可以根據自己需要去改寫和封裝插件，簡單實用。
5.python與jQuery導入(復習)
python導入模塊發生了哪些事？
導入模塊其實需要消耗資源
找到-->加載代碼-->產生名詞空間-->綁定名字
jQuery在使用的時候也需要導入
但是它的文件非常的小(幾十KB) 基本不影響網絡速度
6.jQuery內容
選擇器
篩選器
樣式操作
文本操作
屬性操作
文檔處理
事件
動畫效果
插件
each、data、Ajax(重點 django部分學)
Ajax 前后端異步提交
7.jQuery下載安裝使用教程
jQuery下載安裝使用教程鏈接: https://www.cnblogs.com/goOJBK/p/15890687.html
- 注意:
請閱讀完jQuery下載教程 或 安裝完成才進行往下閱讀
二:引入jQuery提供的CDN服務
1.我不想下載jQuery文件 能不能使用呢？
- 答案: 可以
2 直接引入jQuery提供的CDN服務(基於網絡直接請求加載)
CDN的概念:內容分發網絡(加快服務器響應速度,別人可以快速訪問到網站的資源)
CDN有免費的也有收費的
前端免費的cdn網站: https://www.bootcdn.cn/
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
注意: 使用CDN的jQuery前提必須要有網絡
將cdn的jQuery語句利用pycharm自動初始化代碼功能完成自動添加(自定義模板)
3.jQuery提供的CDN服務優點與缺點
優點:
好處在於無需下載文件，直接走網絡請求使用
缺點:
不好的地方在於必須要有網才可以使用
三:jQuery基本使用
1.jQuery基本語法
jQuery(選擇器).action()
秉持着jQuery的宗旨 "Write less,do more."
jQuery簡寫 $
演示:
jQuery() === $()
2.jQuery與js代碼對比
案例需求:將p標簽內部的文本顏色改為紅色
// 原生js代碼操作標簽
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作標簽
$('p').css('color','blue')
4.使用原生js代碼與jQuery代碼查找標簽結果
1.使用原生js代碼批量查找到標簽之后 結果是一個數組
需要索引取值之后才可以調用標簽的一些方法
2.使用jQuery代碼批量查找到標簽之后 結果是一個jQuery對象(像數組)
不需要索引取值 就可以直接調用封裝的方法
3.兩者js原生與jQuery對象之間的轉換
- 兩者對象的轉換
1.js對象轉jQuery對象
$(js對象)
2.jQuery對象轉jd對象
jQuery對象索引取值
