jQuery 快讀網(wǎng)頁交互開發(fā)
jQuery 簡介
- jquery 是一個高效叛甫，精簡并且功能豐富的 javascript 工具庫
- query 本身是選擇的意思层宫，主要對 javascript 中選擇元素的方法進(jìn)行了大量優(yōu)化
- 版本發(fā)展
- 1.x 兼容 ie678 工作中常用
- 2.x 不兼容 ie678 官方調(diào) bug 工作中不建議使用
- 3.x 不兼容 ie678 高級瀏覽器使用
- jquery 確實(shí)極大的簡化了 DOM 操作，讓編程變得更加高效簡單
jQuery 基礎(chǔ)
$()
- 在 jquery 中其监，只有一個全局變量$,避免了全局變量的污染
- 開始變量不叫$,叫做 jQuery()方法萌腿，在庫中兩個名字并存，都可以使用
- 經(jīng)典錯誤： $未定義 -- 一般是 jquery 文件有問題
jQuery 對象
- 通過$()方法獲取到的內(nèi)容就是 jQuery 對象
- 內(nèi)部封裝了大量的屬性和方法. .css(),.html(),.animate()都是 jQuery 對象的方法
- 通過$()獲取的元素是一組元素時抖苦，進(jìn)行操作時批量操作
- 與原生 js 對象的區(qū)別和聯(lián)系：
- jQuery 對象得到后毁菱，只能使用 jQuery 對象的方法，不能使用原生 js 的方法
- 原生 js 也不能使用 jQuery 對象的方法
- jQuery 對象實(shí)際是一個類數(shù)組對象锌历，內(nèi)部包含所有獲取的原生 js 對象贮庞，及大量的 jQuery 的方法和屬性
- 轉(zhuǎn)換
$("p").length; // 獲取原生js對象的個數(shù)
$("p").size();
var $p = $("p");
// 利用數(shù)組下標(biāo)
$p[0].innerHTML = "你好";
var p = document.getElementsByTagName("p");
// 直接用$()包裹原生對象
$(p).css("background-color", "red");
jQuery 選擇器
- css2.1 和 css3 的所有選擇器，不用考慮兼容 如：$('button:disabled').css();
- 篩選選擇器
- $(':first') 第一個
- $(':last') 最后一個
- $(':eq(index)') 下標(biāo)為 index 的那個
- $(':gt(index)') 大于 下標(biāo)為 index 的項(xiàng)
- $(':lt(index)') 小于下標(biāo)為 index 的項(xiàng)
- $(':odd') 下標(biāo)為奇數(shù)的項(xiàng)
- $(':even') 下標(biāo)為偶數(shù)的項(xiàng)
- $(':not(seletor)') 去除所有與給定選擇器匹配的元素
jQuery 常用方法
html() 方法
- 相當(dāng)于原生 js 的 innerHTML 屬性 會解析標(biāo)簽
- 用來設(shè)置獲取元素及內(nèi)容
text() 方法
- 相當(dāng)于 innerText 屬性 只針對文字內(nèi)容
- 遇到標(biāo)簽忽視
- 會將設(shè)置的內(nèi)容究西，標(biāo)簽會被當(dāng)做普通文本
val()方法
- 獲取表單元素 value 的值的方法 value 屬性
- 獲取和設(shè)置 有參數(shù)就是設(shè)置 沒有參數(shù)就是獲取
- $('input').val()
操作標(biāo)簽屬性
- attr(參數(shù) 1,參數(shù) 2) 設(shè)置 參數(shù) 1：屬性名 參數(shù) 2： 屬性值
- attr(參數(shù)) 獲取 參數(shù): 屬性名
- removeAttr(參數(shù)) 刪除 參數(shù)：屬性名
- prop() 直接操作的就是布爾值 disabled checked
css()方法
- 調(diào)用 css 的屬性值或者更改 css 屬性值
- css(name,value): name: 字符串格式 css 屬性名 value:設(shè)置或更改的屬性值
- 一個參數(shù)窗慎，調(diào)用 css 屬性的值 得到某個元素的計(jì)算后的樣式，值為字符串格式
- value 設(shè)置的是可以不帶單位或者數(shù)值卤材，+= -= 都能識別
- 復(fù)合屬性可以是-可以是駝峰寫法都可以
操作類名的方法
- jQuery 操作類名 只會操作指定類名 不會影響其他
- addClass() 添加類名
- removeClass() 移除類名 如果不傳遞參數(shù)移除全部類名
- toggleClass() 類名切換 如果存在移除類名捉邢，如果沒有添加類名
- hasClass() 判斷類名是否存在 返回布爾值
常用事件方法
$(".btn").click(function () {
$(".box").toggleClass("demo");
});
- mouseenter(fn)方法 鼠標(biāo)進(jìn)入一個元素觸發(fā)的事件
- mouseleave(fn)方法 鼠標(biāo)離開一個元素觸發(fā)的事件
- mouseover(fn) 有事件冒泡
- mouseout(fn) 有事件冒泡
- hover(fn,fn)方法 相當(dāng)于合寫 mouseenter mouseleave
$(".box").hover(
function () {
// 鼠標(biāo)移入
$(this).addClass("demo");
},
function () {
// 鼠標(biāo)離開
$(this).removeClass("demo");
}
);
jQuery 關(guān)系查找方法
- $(this).parent() 找到當(dāng)前元素的父級
- $(this).children() 找到當(dāng)前元素的所有子級 可以傳遞參數(shù)，進(jìn)行二次篩選
- $(this).siblings() 找到當(dāng)前元素的所有親兄弟元素 可以傳遞參數(shù)商膊，進(jìn)行二次篩選
鏈?zhǔn)秸{(diào)用
- 可以簡化書寫
- 除了節(jié)點(diǎn)方法之外伏伐，其他方法執(zhí)行后返回值都是自己
$(this).siblings().css("background-color", "red").html("嘻嘻");
// 自己變紅
$(this)
.css("background-color", "red")
// 自己的兄弟變藍(lán)色
.siblings()
.css("background-color", "blue")
// 父級變黃
.parent()
.css("background-color", "yellow")
// 父級的兄弟變粉色
.siblings()
.css("background-color", "pink")
// 父級的孩子變黃綠色
.children()
.css("background-color", "yellowgreen");
find() 查找后代元素
// 找到 .box元素的所有span元素 改變寬高
$(".box").find("span").css({
width: 50,
height: 50,
});
查找兄弟
- 查找緊鄰兄弟元素
- next() 下一個兄弟
- prev() 前一個兄弟
- 多選方法
- nextAll() 后面的所有兄弟
- prevAll() 前面的所有兄弟
- 可以傳遞參數(shù)，進(jìn)行二次篩選
案例
- 點(diǎn)擊發(fā)送驗(yàn)證碼
- 放大鏡切換
jQuery 排序和動畫
eq()方法
- jQuery 對象是一個類數(shù)組對象晕拆，內(nèi)部所有的 數(shù)據(jù)會進(jìn)行一個大的排序
- 排序與自己原來的父級沒有關(guān)系藐翎，只與 在 jQuery 對象中的新的位置有關(guān)
index()方法
- 得到的是它自己在 html 結(jié)構(gòu)中兄弟中下標(biāo)的位置。與 jQuery 大排序沒有關(guān)系
排他思想实幕，簡易 tab 欄
- jQuery 中可以讓 this 特殊設(shè)置吝镣，讓兄弟 siblings 設(shè)置成默認(rèn)
each()遍歷
- 對 jQuery 對象中的元素每一個都執(zhí)行函數(shù)內(nèi)部的操作
- each 方法的基本原理就是 for 循環(huán)，從對象的下標(biāo)為 0 的項(xiàng)一直遍歷到最后一項(xiàng)昆庇。然后對每一項(xiàng)進(jìn)行操作
- 函數(shù)內(nèi)部指向每一個項(xiàng)
- 參數(shù)是 i,整個對象在 jQuery 大排序?qū)ο笾邢聵?biāo)位置
入口函數(shù)
- $(document).ready(function(){})
- 原生 js 中 window.onload 一個頁面只能出現(xiàn)一次
- jQuery 中入口函數(shù)可以出現(xiàn)多次
顯示和隱藏的方法
- hide() show() 操作的是 display:none/block
- toggle() 在顯示和隱藏之間切換
- 參數(shù)： slow,fast,normal 數(shù)字(單位毫秒)
- 過渡時間內(nèi)伴隨著寬高透明度的變化
滑動顯示和隱藏
- slideDown() 滑動顯示
- slideUp() 滑動隱藏
- slideToggle() 滑動切換
- 讓元素在 display:none/block 之間切換
- 參數(shù)：不傳 400ms
- slow,fast,normal 數(shù)字(單位毫秒)
- 注意事項(xiàng)：
- 若元素沒有寬高就沒有滑動效果
- 如果設(shè)置寬高末贾，會進(jìn)行上下垂直方向滑動
- 動畫效果：高度屬性在 0-設(shè)置值之間變化，沒有透明度動畫
- 如果元素設(shè)置了定位整吆，偏移量方向如果是 bottom 參與了拱撵，滑動方向會發(fā)生變化
淡入淡出
- fadeIn() 淡入顯示
- fadeOut() 淡出顯示
- fadeToggle() 切換
- fadeTo() 淡入淡出某個效果 必須設(shè)置兩個參數(shù) 時間 和 透明度
- slow,fast,normal 數(shù)字(單位毫秒)
animate()自定義動畫方法
- 執(zhí)行 css 屬性集的自定義動畫
- $().animate(styles,speed,easing,callback);
- styles: css 的屬性名和運(yùn)動結(jié)束位置的屬性值集合
- 所有有數(shù)值的屬性都可以發(fā)生變化
- speed: 動畫整體運(yùn)行的時間 slow,fast,normal 數(shù)字(單位毫秒) 默認(rèn) 400ms
- easing: 動畫速度 swing(變速) linear(線性 勻速) 默認(rèn)值 swing
- callback: animate 函數(shù)執(zhí)行完畢后要執(zhí)行的函數(shù)
動畫排隊(duì)現(xiàn)象
- 同一個元素對象上辉川，定義了多個動畫，會出現(xiàn)動畫排隊(duì)現(xiàn)象
- 如果是不同的元素對象都有動畫拴测，不會出現(xiàn)排隊(duì)機(jī)制
- 如果是其他非運(yùn)動的代碼乓旗，也不會等待運(yùn)動完成
- stop() 停止上一次的動畫 開啟這一次的動畫
動畫延遲 delay()
stop()
清空動畫排隊(duì)
- 清除排隊(duì)的動畫，進(jìn)行防騷擾操作
- 方法 1： stop(true)
- 方法 2： 利用函數(shù)節(jié)流方法 is(':animated') 返回布爾值 true 正在運(yùn)動集索，flae 沒有運(yùn)動 -- 有 bug
$box.mouseenter(function () {
if ($(this).children().is(":animated")) {
return;
}
$(this).children().stop(true).slideUp();
});
jQuery 節(jié)點(diǎn)操作
創(chuàng)建和追加元素
- $('<li></li>') 創(chuàng)建元素
- 向父元素最后追加
- $(父).append(新)
- $(新)appendTo(父)
- 向父元素的最前面追加
- $(父).prepend(新)
- $(新).prependTo(父)
- 向元素后面追加新的兄弟
- $(舊).after(新)
- $(新).insertAfter(舊)
- 向元素前面追加新的兄弟
- $(舊).before(新)
- $(新).insertBefore(舊)
刪除屿愚，清空元素
- remove() 刪除元素
- empty() 清空元素 清空內(nèi)部元素和事件
- html('') 僅清空內(nèi)部元素，不清理事件
克隆元素
- clone() 克隆元素
- 參數(shù)為布爾值 false：只克隆內(nèi)部务荆，不克隆事件妆距，默認(rèn)值； true：內(nèi)容事件都克隆函匕，深克隆
操作元素尺寸的方法
- width() height() width
- 操作的大小僅僅是內(nèi)容部分
- width(數(shù)字) 設(shè)置
- width() 獲取 值是數(shù)字類型
- innerWidth() innerHeight() width + padding
- 操作的大小是內(nèi)容部分 + padding
- 獲取 padding 及以內(nèi)的大小
- innerWidth(數(shù)字) 設(shè)置 增加或者減少的值設(shè)置給了 width娱据， padding 部分不變
- innerHeight() 獲取
- outerWidth() outerHeight() width + padding + border
- 操作的是內(nèi)容部分 + padding + border
- 獲取的是 border 及以內(nèi)的大小
- outerWidth(數(shù)字) 設(shè)置 增加或者減少的值設(shè)置給了 width， padding,border 部分不變
- outerWidth() 獲取
操作元素的位置
- offset()
- 獲取元素距離文檔的位置
- 返回值是一個對象浦箱，包含了元素的位置
- 參考位置是整個文檔吸耿，和定位沒關(guān)系
- position()
- 距離上級定位參考元素的位置
- 返回一個對象祠锣， 對象中包含了元素的位置信息
- 參考位置最近定位的元素(和定位有關(guān)系)
- scrollTop()
- 操作卷去的頁面間距
- srcollTop() 返回值是數(shù)字
- srcollTop(數(shù)字) 設(shè)置
jQuery 事件和插件
注冊事件 移除事件
- jQuery.事件名(事件處理函數(shù)) -- 簡易注冊事件
- on 方法注冊事件
- 封裝底層其實(shí)是 addEventListener
- jQuery.on(事件名,事件處理函數(shù))
- 事件委托：jQuery.on(事件名,選擇器,事件處理函數(shù))
- 選擇器：子孫元素
- off 方法移除事件
- jQuery.off(事件名,事件處理函數(shù)名)
- trigger 方法觸發(fā)事件
事件對象
- 鼠標(biāo)事件對象
- e.clientX/Y 參照瀏覽器
- e.pageX/Y 參照文檔
- e.offsetX/Y 參照元素
- 鍵盤事件
- e.keyCode 返回建碼數(shù)字
- e.altKey/shiftKey/ctrlKey 返回布爾值 檢測是否按下(true)
- 公共屬性
- e.target 最初觸發(fā)事件的 DOM 元素
- e.currentTarget 在事件冒泡階段中的當(dāng)前 DOM 元素
- 方法
- e.preventDefault() 阻止默認(rèn)行為
- e.stopPropagation() 阻止事件行為
多庫共存
- 解決$沖突問題
- 不用$酷窥，使用 jQuery
- 釋放$符合的使用權(quán) jQuery.onConflict() 可以用變量接收，以后就用變量調(diào)用 jQuery
jQuery 插件庫
- 獲取插件伴网，在搜索引擎上搜索插件
- 插件使用方法
- 找到并且下載插件
- 在項(xiàng)目外寫一個demo(先學(xué)會使用蓬推，讓后再加入的項(xiàng)目中)
- 看源碼，看文檔
- 注意：
- 結(jié)構(gòu)必須一致澡腾，標(biāo)簽名不一定
- 樣式沸伏，可以選擇復(fù)制，也可以自定義
- 先引入jquery再引入插件庫
- 復(fù)制源碼动分，看文檔
