初識
console.log($ == jQuery);// true jQuery就是$ 等價的
頁面加載
$(document).ready(function(){});//相當于原生window.onload（DOMContentLoaded）
比onload先執行
$(function(){})//簡寫
只需要檔案結構加載完畢后執行,onload是檔案和資源媒體加載完成，
DOM節點物件轉換
jq的DOM節點與原生DOM節點互轉
// jq轉原生
console.log($(this));// 回傳jq物件
// init陣列物件 通過下標獲取到的就是原生的DOM
console.log($('#box')[0]);
console.log($('#box').get(0));
$('#box').get(0).innerHTML = '哈哈';
讓出$的使用權限
jQuery.noConflict();
console.log($); // undefind
// 閉包 將jQuery傳到閉包中的$ 在閉包函式中又可以使用$來進行jq的操作
;(function($){
$(function(){
console.log($('#box'));
})
})(jQuery)
// 給$起個名字
var jq = jQuery.noConflict(true);
console.log(jq('#box'));
選擇器
基本選擇器
$('#box')//id選擇
$('.aa')//類名選擇
$('li')//標簽選擇
層級選擇器
$('ul li') //后代li
$('ul>li') // 子代的li
$('#li1+li')//#li1的下一個兄弟li
$('#li1~li')//#li1的所有的弟弟li
基本過濾選擇器
$('li:first')// 獲取第一個元素
$('li:last')// 獲取最后一個元素
$('li:not(#li1)')// 排除
$('li:odd')// 選擇索引奇數---顯示的偶數行
$('li:even')// 選擇索引偶數---顯示奇數行
$('li:eq(3)')//等于索引
$('li:gt(3)')//大于索引
$('li:lt(3)')//小于索引
// 選取索引為n的li
// $('li:eq(' + n + ')')
$('li').eq(n)
屬性過濾選擇器
$('li[name]')// 帶有name屬性的li
$('li[name=lucy]')// name屬性值為lucy的li
$('li[name!=joy]')// name屬性不為joy的li
$('li[name*=o]')// name屬性值包含o的li
$('li[name^=j]')// name屬性的值以j開頭的
$('li[name$=y]')// name屬性的值以y結尾的
表單選擇器
$('input')//標簽input
$(':input')//不論標簽名 只要是表單元素 都選取
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':button')
DOM
DOM節點遍歷
遍歷節點
$('ul').children()// ul下的所有子節點
$('ul').children('p')// ul下的p子節點
$('ul').find('p')// ul下的所有后代p
$('#box').next()// box的下一個兄弟
$('#box').nextAll()// box的下邊的所有兄弟
$('#box').prev()// box 上一個
$('#box').prevAll()//上邊所有的兄弟
// box的所有的兄弟節點（之前的和之后的全算）
$('#box').siblings()
$('#box').siblings('p')
遍歷父節點
$('#box').parent()//真正的父節點
$('#box').parents()//所有的祖先節點
$('#box').parents('div')//所有祖先中的div
遍歷節點 - 過濾
$('#box').find('li')// find 獲取后代元素
$('li').filter('.aa')// filter 過濾找到滿足條件的元素
$('li').not('.aa')// not 排除滿足條件的元素 選擇其他元素
屬性操作
$('#box').attr('title')//獲取
$('#box').attr('title','xixi');// 設定
// 批量設定
$('#box').attr({
title: 'heihei',
sex : 'female'
})
$('#box').removeAttr('sex');// 洗掉屬性
屬性值為true和false的屬性操作
$(':checkbox').attr('checked');// 獲取 --> checked
$(':checkbox').prop('checked');// 獲取 --> true
$(':checkbox').prop('checked', true);// 設定
class操作
$('#box').addClass('red');//添加類red
$('#box').removeClass('red');// 洗掉red
判斷該元素box上是否有red
$('#box').hasClass('red') // Boolean
$('#box').is('.red')// Boolean
切換類名 toggleClass
$('#box').toggleClass('red');
css操作
// 獲取樣式
$('#box').css('width')
// 設定
$('#box').css('background','red');
// 批量設定
$('#div1').css({
width:'200px',
fontSize:'18px'//font-size 去-變駝峰
})
html 文本與值的操作
innerHTML ---> html()
innerText ---> text()
表單value ---> val()
$('#s1').html() // 獲取 識別標簽
$('#s1').text() // 獲取 只識別文本
// 設定
$('#box').html('<i>過年好！</i>');// 會識別標簽
$('#box').text('<i>過年好！</i>');// 不會識別
// 表單的value
$(':text').val()
$(':text').val('ddddd');
Node操作
創建元素
$('<li></li>')
添加節點
在元素尾部添加
新元素.appendTo(目標元素)
$('<li>國慶節</li>').appendTo($('#list'));
目標.append(新元素)
在元素頭部添加
新元素.prependTo(目標元素)
目標.prepend(新元素)
$('#list').prepend($('<li>元旦節</li>'))
在目標元素之前插入
新元素.insertBrfore(目標元素)
$('<li>情人節</li>').insertBefore($('#list li').eq(2));
目標元素.before(新元素)
在目標元素之后插入
新元素.insertAfter(目標元素)
目標元素.after(新元素)
$('#list li').eq(3).after($('<li>婦女節</li>'));
洗掉節點
remove(): 將節點洗掉，回傳被洗掉的節點，不會保留節點上的事件
detach(): 將節點洗掉，回傳被洗掉的節點，會保留節點上的事件
empty(): 全部清空
克隆節點
clone（） 復制節點及內容，但不保留節點上的事件
clone（true）復制節點及內容，保留節點上的事件
替換節點
新節點.replaceAll(要被替換的節點)
要被替換的節點.replaceWith(新節點)
$('#list li').eq(2).replaceWith($('<li>女神節</li>'));
資料串聯
serialize()
<input type="text" name = 'a' value = '1'/>
<input type="text" name = 'b' value = '2'/>
<input type="text" name = 'c' value = '3'/>
$("input").serialize()// a=1&b=2&c=3
$("input").serializeArray()// [{{name: "a", value: "1"}}, {…}, {…}]
add 和 slice
$("div").add("span").add("ul li").css("backgroundColor", 'red')
// 等同于
$("div,span,ul li").css("backgroundColor", 'red')// 與add一樣
$("ul li").slice(1, 4).css("backgroundColor", 'red');// 獲取從1到4的 li元素
BOM
元素的寬高
原生的元素的寬高分別那幾種如何獲取
內容寬高----width height
可視寬高--- clientWidth/clientHeight
占位寬高---offsetWidth/offsetHeight
$("#div1").css("width")//"100px" 字串
jq的元素寬高操作
內容寬高 width() height() 方法
可視寬高 innerWidth（） innerHeight（）
占位寬高 outerWidth() outerHeight()
整個寬高 outerWidth（true） outerHeight（true）
jq獲取可視區及檔案的寬高
可視區寬高 $(window).width()/.height()
檔案的寬高 $(document).width()/height()
元素的位置
$('#sub').offset() 回傳一個物件 到檔案的 left和top值
$('#sub').position() 回傳一個物件 到有定位屬性的父級元素的 left和top值
滾動條卷走的寬高操作
$(document).scrollTop() // 不傳參獲取，傳參設定
事件
event物件
jq中的事件物件 不需要兼容了 直接傳參ev就可以了
ev.clientX/ev.clientY 事件觸發的位置到瀏覽器可視區的上左邊的距離
ev.currentTarget：當前事件觸發的元素
ev.delgateTarget：當前事件系結的元素
ev.offsetX/ev.offsetY: 事件觸發的位置到元素的上左邊的距離
ev.originalEvent: 元素事件物件
ev.pageX/ev.pageY:事件觸發的位置到檔案的上左邊的距離
ev.screenX/ev.screenY:事件觸發的位置到螢屏的上左邊的距離
ev.which 類似于 keyCode 可以獲取滑鼠的鍵值 左鍵是1 右鍵是3 滾輪是2
阻止默認事件 ev.preventDefault()
阻止冒泡 ev.stopPropagation()
阻止默認事件+冒泡 return false
事件系結 on()
// 基本事件
$('#box').on('click',function(){})
// 一次系結多個事件對應一個處理函式
$('#box').on('click mouseenter mouseleave',function(){})
// 系結多個事件對應多個處理函式 物件形式
$('#box').on({
'click': function(){},
'dblclick':function(){}
})
// 自定義事件
$('#box').on('hahaha',function(){})
// trigger 觸發事件
$('#box').trigger('hahaha');
// 事件委托
$('#list').on('click','li',function(ev){
console.log($(ev.target).html());
})
// 事件的取消系結
$('button:eq(0)').on('click', function(){
console.log(1111);
})
$('button:eq(1)').on('click',function(){
$('button:eq(0)').off();
//$('button:eq(0)').off('mouseenter');
// 傳參取消事件型別
})
// 一個事件上系結多個函式執行---事件的命名空間
$('button:eq(0)').on({
'click.a':function(){
console.log(111);
},
'click.b':function(){
console.log(222);
}
})
$('button:eq(1)').on('click',function(){
$('button:eq(0)').off('click.a');
})
// 只執行一次的事件
$('button').eq(0).one('click',function(){
console.log('一次就夠了');
})
// 模擬執行一次事件
$('button').eq(0).on('click',function(){
console.log('一次就夠了');
$(this).off();
})
合成事件
mouseenter 和mouseleave
$('#box').hover(function(){
// 滑鼠移入執行函式
},function(){
// 滑鼠移出執行函式
})
$ 下常用的方法
// 可以遍歷陣列，物件，jq元素
$.each(obj, function(key, value){
console.log(key + ':' + value);
})
還可以$('選擇器').each()//遍歷元素 工具級別
var newArr = $.map(arr,function(item){
return item * item * item;
})有回傳值
$.type() 輸出當前資料型別 typeof
$.trim() 洗掉字串前后的空格
$.inArray() indexOf()
$.proxy() 功能類似于bind $.proxy()
$.noConflict() 給$起個別名
$.parseJSON() JSON.parse()
$.makeArray() 將偽陣列轉成陣列， Array.from()
影片
基本影片
顯示隱藏
show（
duration影片執行時間-毫秒，
easing運動效果（只有兩種 swing慢快慢，linear勻速，
complate運動執行完成后的回呼）
）
隱藏hide（）
顯示隱藏的切換toggle（）
$('#box').show(1000,function(){
alert('執行完畢');
})
淡入淡出
淡入fadeIn（） 淡出 fadeOut（） 透明度變化到 fadeTo（） 淡入淡出切換 fadeToggle（）
$('button').eq(0).on('click', function(){
$('#box').fadeIn(1000);
})
$('button').eq(2).on('click', function(){
$('#box').fadeTo(1000, .5);
})
下拉顯示
下拉顯示slideDown（） 上拉隱藏 slideUp（） 切換 slideToggle（）
$('button').eq(2).on('click', function(){
$('#box').slideToggle(1000);
})
animate
animate({屬性1：目標值1，屬性2：目標值2.，，}, duration影片持續時間，easing影片效果，
callback回呼)
// 累加
$('button').click(function(){
$('#box').animate({width:'+=50'},200)
})
// 鏈式運動
$('button').click(function(){
$('#box').animate({width:500},1000)
.animate({height:300},500)
.animate({opacity:.5},500)
})
影片佇列
queue(function(next){})
將其他的操作加入到影片佇列中 按順序來完成
$('#box').animate({width:500},1000)
.queue(function(next){
$(this).css({background:'blue'});
next();//繼續執行后續的影片佇列中的操作
})
.animate({height:300},500);
判斷是否處于影片狀態
$(元素).is(':animated') :有影片在執行 回傳true 沒有回傳false
$('#box').hover(function(){
if(!$(this).is(':animated')){
$(this).animate({height:300},400);
}
}, function(){
$(this).animate({height:50},400);
})
延遲影片
$('#box').animate({width:500},1000)
.delay(2000)
.animate({height:300},500);
停止影片
stop（clearQueue清除影片佇列， gotoEnd達到影片最終狀態）停止影片
finish（）完成影片---所有影片佇列的效果達到最終狀態（2.x以上版本支持）
// stop停止影片的幾種組合
$('button').eq(1).click(function(){
// 引數皆為false 不清除影片佇列 不達到最終狀態
$('#box').stop(false, false); // 默認
// 引數皆為true 清除影片佇列 達到最終狀態
$('#box').stop(true, true);
// true false 清除影片佇列 不達到最終狀態
$('#box').stop(true, false);
// false true 不清除影片佇列 達到最終狀態
$('#box').stop(false, true);
})
// finish
$('button').eq(2).click(function(){
$('#box').finish();
})
ajax
$.ajax({
url,
cache,//在get下是否啟用快取
type,// get/post
data,// 上傳資料
timeout,//相應超時時間
datatype,//預期回傳的資料型別默認 text
success, // 成功回呼
error,
conplate})
跨域
dataType 設定為jsonp
$.ajax({
url:'https://www.baidu.com/sugrec',//?prod=pc&wd=aa&cb=fn
type:'get',
data:{prod:'pc',wd:'cc'},
dataType:'jsonp',
success:function(res){
console.log(res);
}
})
load方法
將url傳入以后，將下載到資料直接填充到被選中元素的innerHTML中
$("div").load("2.txt #p1", function(data, statusText, xhr){
data 下載到的資料
statusText 下載的狀態 success
xhr ajax物件
})
cookie
獲取
$.cookie(name)
設定
$.cookie(name, value) 設定name和value
$.cookie(name, value {
raw: true //value不進行編碼
//默認false value要進行編碼的
})
洗掉
$.cookie(name, null); 洗掉cookie
實體
$.cookie("變種人", "X教授", {
expires: 7,
raw: true
})
jQuery 插件
;(function($){
// 類級別插件 ---> 將方法拷貝到jq的原型下
$.extend({
'trimLeft' : function(str){
return str.replace(/^\s+/,'');
}
})
// 物件級別插件 拷貝到$.fn的原型下
$.fn.extend({
'changeBg' : function(select,color){
this.children(select).css({background:color});
return this;
}
})
})(jQuery)
var str = ' aaa ';
console.log($.trimLeft(str));
$('ul').changeBg(':odd','pink');
Zepto
基本使用 和jq完全一樣但是用到的模塊要單獨引入
$(function(){
$('#box').on('tap', function(){
console.log('手指點擊');
})
})
zepto和jq的區別
隱藏的元素的獲取寬高
jq可以獲取隱藏元素的width（）/height（）
zepto中獲取隱藏元素的width（）/height（）都為0
$('#box').width();// 隱藏的元素在zepto中獲取寬高為0
offset()的區別
jq中回傳一個物件 包含 元素到檔案上左邊的距離
zepto中回傳一個物件 包含 元素到檔案上左邊的距離和元素的寬高
$('#sub').offset();//元素到檔案的上左邊的距離
$('#sub').offset();//zepto中元素到檔案的上左邊的距離 和 元素的寬高
元素的寬高的獲取區別
jq獲取元素的寬 有4種方法
zepto中只有一個width（）和height（）方法 獲取的是占位寬
$('#box').width();//占位寬 內容寬 + padding + border
innerWidth();//沒有
outerWidth();//沒有
outerWidth(true);//沒有
touch模塊
tap 所有的觸碰
singleTap 手指單擊
doubleTap 手指雙擊
swipe swipeLeft swipeDown swipeRight swipeUp 手指滑動
longTap 手指長按
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285921.html
標籤：jQuery
上一篇：WEB安全防護相關回應頭（下）