追求卓越一諾千金

藍藍設計_|诺基亚 7280,2011年成立--朗姿代购,主創清華團隊-中国中学100强,專注軟件和互聯網ui設計開發_|9岁女孩疑遭家暴。擅長企業信息化管理_-射雕之乞儿传说、監控_-阜新华博网、大數據軟件UIUE谘詢和設計開發服務|--李乐伟。立足UI|-|宜昌隆胸,好好學習-|轮回 说不得大师,天天進步_|重生之凤求凰19楼!


前端 之 jQuery

2019-6-25 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容-_广州圣亚性医院,每天自動發到您的郵箱中_--羁绊3 1d攻略, 請點這裏

文章目錄
jQuery
jQuery的安裝||铂晶豪庭:
jQuery 語法
選擇器
基本選擇器_震波女quake:
層級選擇器
基本篩選器
樣式操作
表單篩選器
遍曆方法
jQuery鏈式操作
jQuery 事件
$(document).ready()
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
input()
取消標簽默認的事件
事件冒泡
事件委托
jQuery自帶的動畫效果
jQuery
jQuery的字麵意思其實就是JavaScript和查詢(Query)|吴尊的qq号是多少 要真的,即用於輔助開發JavaScript的庫--_金川公司吧。jQuery 極大地簡化了 JavaScript 編程___觅血者,jQuery使用戶可以更加方便地處理HTML(標準通用標記語言下的一個應用)_||斗战神怎么入定修炼、events_||找法网查看律师回复、實現動畫效果--陆贞的身世,而且方便地為網站提供AJAX交互-|-全球化的利弊。

實例找到div標簽並給div標簽設置為紅色

原生js操作
var d1Ele = document.getElementById('d1');
d1Ele.style.color = 'red';
jQuery操作
$('#d1').css('color','blue');
1
2
3
4
5
jQuery的安裝||_mgcc恶意程序:
您可以從網頁中添加 jQuery

1_-天津apec限行规定、從官網http://jquery.com/download/下載 jQuery 庫

裏麵分為||青花瓷琵琶简谱:Production version(用於實際的網站中-__18068期胜负彩开奖时间,已被精簡和壓縮)和Development version(用於測試和開發||众发娱乐跑路了吗,未壓縮|静安火灾,是可讀的代碼)_|-7k7k奥拉星,一般使用Production version壓縮版本的-_卓易彩票闪退。

2_|138福彩好不好、從 CDN 中載入 jQuery, 如從 Google 或 百度 中加載 jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
或者
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
或者
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js"></script>
1
2
3
4
5
一定要先導入後使用

jQuery 語法
jQuery 語法是通過選取 HTML 元素-|阿克苏什么生意好做,並對選取的元素執行某些操作||_姿姿堂。

$(selector).action()
1
美元符號定義 jQuery
選擇符(selector)“查詢"和"查找” HTML 元素
jQuery 的 action() 執行對元素的操作
選擇器
jQuery 選擇器可以對 HTML 元素組或單個元素進行操作_-amy rachle。 jQuery 選擇器基於元素的 id_--04年双色球事件、類__兰州摸吧、類型-|自助硬币存取款机、屬性-|_英烈寄语、屬性值等查找HTML 元素|-下载2011qq正式版。它基於已經存在的 CSS 選擇器外__-金山升一,還有一些自定義的選擇器|-聚美优品打不开。

基本選擇器-|shinee隐藏摄像机:
ID選擇器|||徐娇电影、類名選擇器|_|掌上电力APP、標簽選擇器-|陈树发、組合選擇器

選擇器 實例 選取
* $("*") 所有元素
#id $("#d1") id=“d1” 的元素
.class $(".name") class=“name” 的所有元素
.class , .class $(".name,.password") class 為 “name” 或 “password” 的所有元素
*element $(“span”) 所有 <span> 元素
el1,el2,el3 $(“h1,div,p”) 所有 <h1>_|东港黑社会、<div> 和 <p> 元素
提出注意點-|360双色球走势图,原生DOM查找和jQuery查找出來的結果區別DOM對象與jQuery對象
DOM對象與jQuery對象互相轉換
$('#d1')[0]
var d1Ele = document.getElementById('d1');
$(d1Ele)
1
2
3
4
層級選擇器
選擇器 實例 選取
parent > child $(“div > p”) <div> 元素的直接子元素的所有 <p> 元素
parent descendant $(“div p”) <div> 元素的後代的所有 <p> 元素
element + next $(“div + p”) 每個 <div> 元素相鄰的下一個 <p> 元素
element ~ siblings $(“div ~ p”) <div> 元素同級的所有 <p> 元素
基本篩選器
選擇器 實例 選取
:first $(“p:first”) 第一個 <p> 元素
:last $(“p:last”) 最後一個 <p> 元素
:even $(“tr:even”) 所有偶數 <tr> 元素
:odd $(“tr:odd”) 所有奇數 <tr> 元素
:gt(nu) $(“ul li:gt(3)”) 列舉 index 大於 3 的元素
:lt(nu) $(“ul li:lt(3)”) 列舉 index 小於 3 的元素
:eq(nu) $(“ul li:eq(3)”) 列舉 index 等於 3 的元素
:not(selector) $(“input:not(:empty)”) 所有不為空的輸入元素
:has(element) $(“div:has(a)”) 返回擁有一個或多個元素在其內的所有元素
/用ul標簽舉例
$('#ul>li:first')
$('#u1>li:last')
$('#ul>li:eq(3)')
$('#ul>li:even')
$('#ul>li:odd')
$('#ul>li:gt(3)')
$('#ul>li:lt(3)')
$('#u1>li:not(.c1)')

最後一個has的玩法需要寫個三個div:一個空div_105彩票cc苹果版、一個兒子有a標簽-|娱乐天地点检苹果、一個兒子沒有a_-青海明胶股票,孫子有a標簽
$('div:has(a)')
輸出|-阿克苏市教育局:
k.fn.init(3) [div, div#d2, div#d3, prevObject: k.fn.init(1)]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
樣式操作
方法 描述
addClass() 向被選元素添加一個或多個類名
after() 在被選元素後插入內容
append() 在被選元素的結尾插入內容
appendTo() 在被選元素的結尾插入 HTML 元素
attr() 設置或返回被選元素的屬性/值
before() 在被選元素前插入內容
clone() 生成被選元素的副本
css() 為被選元素設置或返回一個或多個樣式屬性
detach() 移除被選元素(保留數據和事件)
empty() 從被選元素移除所有子節點和內容
hasClass() 檢查被選元素是否包含指定的 class 名稱
height() 設置或返回被選元素的高度
html() 設置或返回被選元素的內容
innerHeight() 返回元素的高度(包含 padding|_亿豪娱乐彩票,不包含 border)
innerWidth() 返回元素的寬度(包含 padding|118彩票大全,不包含 border)
insertAfter() 在被選元素後插入 HTML 元素
insertBefore() 在被選元素前插入 HTML 元素
offset() 設置或返回被選元素的偏移坐標(相對於文檔)
offsetParent() 返回第一個定位的祖先元素
outerHeight() 返回元素的高度(包含 padding 和 border)
outerWidth() 返回元素的寬度(包含 padding 和 border)
position() 返回元素的位置(相對於父元素)
prepend() 在被選元素的開頭插入內容
prependTo() 在被選元素的開頭插入 HTML 元素
prop() 設置或返回被選元素的屬性/值
remove() 移除被選元素(包含數據和事件)
removeAttr() 從被選元素移除一個或多個屬性
removeClass() 從被選元素移除一個或多個類
removeProp() 移除通過 prop() 方法設置的屬性
replaceAll() 把被選元素替換為新的 HTML 元素
replaceWith() 把被選元素替換為新的內容
scrollLeft() 設置或返回被選元素的水平滾動條位置
scrollTop() 設置或返回被選元素的垂直滾動條位置
text() 設置或返回被選元素的文本內容
toggleClass() 在被選元素中添加/移除一個或多個類之間切換
unwrap() 移除被選元素的父元素
val() 設置或返回被選元素的屬性值(針對表單元素)
width() 設置或返回被選元素的寬度
常用實例注册彩票网站怎么注册:

三級菜單展示

$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
1
直接操作css屬性

// 兩個參數設置屬性
$('#p1').css('font-size','24px')
// 一個參數獲取屬性
$('#p1').css('font-size')

// 一次設置多個屬性
$('#p1').css({"border":"1px solid black","color":"blue"})
1
2
3
4
5
6
7
位置操作

// 不加參數獲取位置參數
$(".c3").offset()
// 加參數設置位置參數
$(".c3").offset({top:284,left:400})

// position隻能獲取值-|008彩票正规吗,不能設置值

// scrollTop獲取當前滾動條偏移量
$('window').scrollTop();
$('window').scrollTop(0);  // 設置滾動條偏移量
1
2
3
4
5
6
7
8
9
10
文本操作

text() html() 不加參數獲取值_|姜世离,加參數設置值
val() 不加參數獲取值--|盐城一中,加參數設置值
1
2
屬性操作

// 獲取文本屬性
$('#d1').attr('s1')  // 獲取屬性值
$('#d1').attr('s1','haha')  // 設置屬性值
$('#d1').attr({'num':50,'taidi':'gay'})  // 設置多個屬性
$('#d1').removeAttr('taidi')  // 刪除一個屬性

// 獲取check與radio標簽的checked屬性
$('#i1').prop('checked')
$('#i1').prop('checked',true)
1
2
3
4
5
6
7
8
9
文檔處理

// 標簽內部尾部追加元素
$('#d1').append(pEle)
$pEle.appendTo($('#d1'))

// 標簽內部頭部添加元素
$('#d1').prepend(pEle)
$pEle.prependTo($('#d1'))

// 標簽外部下麵添加元素
$(A).after(B)// 把B放到A的後麵
$(A).insertAfter(B)// 把A放到B的後麵

// 標簽外部上麵添加元素
$(A).before(B)// 把B放到A的前麵
$(A).insertBefore(B)// 把A放到B的前麵

// 替換標簽
replaceWith()  // 什麼被什麼替換
replaceAll()  // 拿什麼替換什麼

// 克隆事例
<button id="b2">屠龍寶刀_|-上海一号店客服电话,點擊就送</button>
// clone方法加參數true|33选7走势图综合,克隆標簽並且克隆標簽帶的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);  // true參數
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
表單篩選器
選擇器 實例 選取
:input $(":input") 所有 input 元素
:text $(":text") 所有帶有 type=“text” 的 input 元素
:password $(":password") 所有帶有 type=“password” 的 input 元素
:checkbox $(":checkbox") 所有帶有 type=“checkbox” 的 input 元素
:submit $(":submit") 所有帶有 type=“submit” 的 input 元素
:reset $(":reset") 所有帶有 type=“reset” 的 input 元素
:button $(":button") 所有帶有 type=“button” 的 input 元素
:image $(":image") 所有帶有 type=“image” 的 input 元素
:file $(":file") 所有帶有 type=“file” 的 input 元素
:enabled $(":enabled") 所有啟用的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有選定的 input 元素
:checked $(":checked") 所有選中的 input 元素
// 針對表單內的標簽
$('input[type="text"]')
// 簡化寫法
$(':text')

// 找到所有被選中的checkbox
$(':checkbox')  // 注意select框中默認selected標簽也會被找到
$('input:checkbox')
1
2
3
4
5
6
7
8
遍曆方法
方法 描述
add() 把元素添加到匹配元素的集合中
children() 返回被選元素的所有直接子元素
closest() 返回被選元素的第一個祖先元素
contents() 返回被選元素的所有直接子元素(包含文本和注釋節點)
each() 為每個匹配元素執行函數
filter() 把匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素
find() 返回被選元素的後代元素
first() 返回被選元素的第一個元素
is() 根據選擇器/元素/jQuery 對象檢查匹配元素集合-||臭作游戏图片,如果存在至少一個匹配元素-_|卓易彩票不能买了吗,則返回 true
last() 返回被選元素的最後一個元素
next() 返回被選元素的後一個同級元素
nextAll() 返回被選元素之後的所有同級元素
nextUntil() 返回介於兩個給定參數之間的每個元素之後的所有同級元素
not() 從匹配元素集合中移除元素
offsetParent() 返回第一個定位的父元素
parent() 返回被選元素的直接父元素
parents() 返回被選元素的所有祖先元素
parentsUntil() 返回介於兩個給定參數之間的所有祖先元素
prev() 返回被選元素的前一個同級元素
prevAll() 返回被選元素之前的所有同級元素
prevUntil() 返回介於兩個給定參數之間的每個元素之前的所有同級元素
siblings() 返回被選元素的所有同級元素 Returns all sibling elements of the selected element
slice() 把匹配元素集合縮減為指定範圍的子集
each() 方法為每個匹配元素規定要運行的函數_-射雕之乞儿传说。
$.each(array,function(index){
  console.log(array[index])
})
$.each(array,function(){
  console.log(this);
})
// 支持簡寫
$divEles.each(function(){
  console.log(this)  // 標簽對象
})
1
2
3
4
5
6
7
8
9
10
11
jQuery鏈式操作
python代碼詮釋鏈式調用,其實就是在調用方法之後講對象再次返回

<div>
<p>p1</p>
<p>p2</p>
</div>
$('div>p').first().addclass('c1').next().addclass('c2');
1
2
3
4
5
jQuery 事件
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法-万联证劵。

$(document).ready()
$(document).ready() 方法允許我們在文檔完全加載完後執行函數__|爱佳绿可木。為了防止網頁還沒加載完|_-中兴彩票准成不,js代碼就已經執行|_家庭小炒500款图片,通常利用下麵兩種方式來書寫js代碼_-陈德荣任天津市委常委。

$(document).ready(function(){
// 在這裏寫你的JS代碼...
})

網頁最後
$(function(){
// 在這裏寫你的代碼
})
1
2
3
4
5
6
7
8
click()
click() 方法是當按鈕點擊事件被觸發時會調用一個函數||江西单独二胎细则。

在下麵的實例中-1号彩票网址,當點擊事件在某個<p> 元素上觸發時||-英皇娱乐彩票平台,隱藏當前的 <p> 元素_-重生之侯门弃女:

$("p").click(function(){ 
  $(this).hide(); 
});
1
2
3
dblclick()
當雙擊元素時_--1号计划彩票,會發生 dblclick 事件_--造梦西游3号源怎么用。

$("p").dblclick(function(){ 
  $(this).hide(); 
});
1
2
3
mouseenter()
當鼠標指針穿過元素時|-_氹仔怎么读,會發生 mouseenter 事件-106官网彩票安全吗。

$("#p1").mouseenter(function(){ 
  alert("鼠標經過了!"); 
});
1
2
3
mouseleave()
當鼠標指針離開元素時_火线闲聊,會發生 mouseleave 事件|--雪碧兑奖网站。

$("#p1").mouseleave(function(){ 
  alert("鼠標離開了!"); 
});
1
2
3
mousedown()
當鼠標指針移動到元素上方|_金庸群侠传之苍龙逐日攻略,並按下鼠標按鍵時||杨幂被灌醉扒衣图,會發生 mousedown 事件--金都西路申徐路。

$("#p1").mousedown(function(){ 
  alert("鼠標按下!"); 
});
1
2
3
mouseup()
當在元素上鬆開鼠標按鈕時|_-36选7开奖结果广东,會發生 mouseup 事件__|小型航空发动机。

ouseup(function(){ 
  alert("鼠標鬆開!"); 
});
1
2
3
hover()
hover()方法用於模擬光標懸停事件_青年宫影讯。當鼠標移動到元素上時|-盈彩在线首页,會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時-|易彩票是真的吗,會觸發指定的第二個函數(mouseleave)__陈国栋的秘书。

$("#p1").hover(function(){ 
  alert("你的光標懸停|镜花水月两样情!"); 
  }, 
  function(){ 
  alert("你的光標已經離開_|犇龙庙!"); 
});
1
2
3
4
5
6
focus()
當元素獲得焦點時||_2m彩票2m彩票振撼来袭,發生 focus 事件-_娱乐天地点检苹果。

$("input").focus(function(){ 
  $(this).css("background-color","#eee"); 
});
1
2
3
blur()
當元素失去焦點時||35彩票突然维护了,發生 blur 事件_||众盈彩票合法吗。

$("input").blur(function(){ 
  $(this).css("background-color","#eee"); 
});
1
2
3
input()
input實時監聽||-金星果,輸入內容時發生 input 事件

 $('#i1').on('input',function () {
        console.log($(this).val())
    });
1
2
3
取消標簽默認的事件
利用preventDefault()
$('input').click(function (e) {
        alert(123);
        e.preventDefault();  
    });
直接返回false
$('input').click(function (e) {
        alert(123);
        return false--至尊彩安下载安装苹果;
    });
  
1
2
3
4
5
6
7
8
9
10
11
事件冒泡
iv>p>span  // 三者均綁定點擊事件
$("span").click(function (e) {
        alert("span");
        e.stopPropagation();  // 阻止事件冒泡
    });
1
2
3
4
5
事件委托
<button>按鈕</button>
<script src="jQuery-3.3.1.js"></script>
<script>
    $('body').on('click','button',function () {
        alert(123)
    })
</script>
1
2
3
4
5
6
7
jQuery自帶的動畫效果
下麵的表格列出了用於創建動畫效果的 jQuery 方法||母亲节是几月几号2013。

方法 描述
delay() 對被選元素的所有排隊函數(仍未運行)設置延遲
dequeue() 移除下一個排隊函數|藏秘虫草双参,然後執行函數
fadeIn() 逐漸改變被選元素的不透明度||重庆食品舞厅,從隱藏到可見
fadeOut() 逐漸改變被選元素的不透明度_|-雪莉露h,從可見到隱藏
fadeTo() 把被選元素逐漸改變至給定的不透明度
fadeToggle() 在 fadeIn() 和 fadeOut() 方法之間進行切換
finish() 對被選元素停止|众彩彩票网是真实的吗、移除並完成所有排隊動畫
hide() 隱藏被選元素
queue() 顯示被選元素的排隊函數
show() 顯示被選元素
slideDown() 通過調整高度來滑動顯示被選元素
slideToggle() slideUp() 和 slideDown() 方法之間的切換
slideUp() 通過調整高度來滑動隱藏被選元素
stop() 停止被選元素上當前正在運行的動畫
toggle() hide() 和 show() 方法之間的切換
藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-召召木木,為期望卓越的國內外企業提供卓越的UI界麵設計_|_优选彩票能玩到几点、BS界麵設計 ||穿越之古灵精怪俏王妃、 cs界麵設計 -_|注册送彩金所有平台、 ipad界麵設計 |-_阴齿2 百度影音、 包裝設計 |-|锦皓、 圖標定製 _装甲车电影、 用戶體驗 |_广珠城轨网上订票、交互設計-_李驰博客、網站建設 |||花若瞳、平麵設計服務-|22彩票官网地址。

標簽: JQuery 前端 « 新經濟品牌如何不用廣告建立品牌_|-科瑞计算簿注册码? | 2019 年 LOGO 設計趨勢報告(下)»


訂閱Rss