前端之JQuery(一)
閱讀目錄
- 事件:(使用方法與JS對象類似,只是語法更加簡潔)
摘要:
- jQuery初識
- jQuery具體使用方法
jQuery初識
1:jQuery介紹:
jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互,能夠極大地簡化JavaScript編程。它的宗旨就是:“Write less, do more.“
2:為何要用JQuery?
#jQuery是一款輕量級的JS框架。jQuery核心js文件才幾十kb,不會影響頁面加載速度。
#豐富的DOM選擇器,jQuery的選擇器用起來很方便,比如要找到某個DOM對象的相鄰元素,JS可能要寫好幾行代碼,而jQuery一行代碼就搞定了,再比如要將一個表格的隔行變色,jQuery也是一行代碼搞定。
#鏈式表達式。jQuery的鏈式操作可以把多個操作寫在一行代碼里,更加簡潔。
#事件、樣式、動畫支持。jQuery還簡化了js操作css的代碼,并且代碼的可讀性也比js要強。
#Ajax操作支持。jQuery簡化了AJAX操作,后端只需返回一個JSON格式的字符串就能完成與前端的通 信。
#跨瀏覽器兼容。jQuery基本兼容了現在主流的瀏覽器,不用再為瀏覽器的兼容問題而傷透腦筋。
#插件擴展開發。jQuery有著豐富的第三方的插件,例如:樹形菜單、日期控件、圖片切換插件、彈出窗 口等等基本前端頁面上的組件都有對應插件,并且用jQuery插件做出來的效果很炫,并且可以根據自己需要去改寫和封裝插件,簡單實用。
3:jQuery的版本介紹、下載和安裝:
#版本介紹:
1.x:兼容IE678,使用最為廣泛的,官方只做BUG維護,功能不再新增。因此一般項目來說,使用1.x版本就可以了,最終版本:1.12.4 (2016年5月20日) 2.x:不兼容IE678,很少有人使用,官方只做BUG維護,功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x,最終版本:2.2.4 (2016年5月20日) 3.x:不兼容IE678,只支持最新的瀏覽器。需要注意的是很多老的jQuery插件不支持3.x版。目前該版本是官方主要更新維護的版本。 維護IE678是一件讓人頭疼的事情,一般我們都會額外加載一個CSS和JS單獨處理。值得慶幸的是使用這些瀏覽器的人也逐步減少,PC端用戶已經逐步被移動端用戶所取代,如果沒有特殊要求的話,一般都會選擇放棄對678的支持。#下載和安裝:
下載鏈接:jQuery官網
如何使用:進入官網>[Download jQueryv3.4.1]>[Download the compressed, production jQuery 3.4.1]
打開后Ctrl+A 復制所有代碼,進入pycharm,新建一個js文件,粘貼進去,保存為jQuery-3.4.1.js。
每次在HTML文件head中調用:(當然,該文件應該在運行的HTML文件的同一級目錄)。
4:jQuery對象:
jQuery對象就是通過jQuery包裝DOM對象后產生的對象, 它是jQuery獨有的,也就是說只有jQuery可以使用里面的方法,不能與DOM對象的方法混用,jQuery對象無法使用DOM對象的任何方法,DOM對象也不能使用jQuery對象里面的方法。
約定俗成:聲明一個jQuery對象變量的時候變量名開頭要加上$。
jQuery方法示例:
開頭用KaTeX parse error: Expected 'EOF', got '#' at position 22: …個jQuery方法,括號里面“#?id1”選擇id=‘id1‘的…(’#id1’)”代表的就是jQuery對象,后面用點的形式使用其方法,比如.html().獲取id值為id1的標簽的
HTML代碼。
該方法的作用等同于DOM方法中:document.getElemengtById(‘id1’).innerHTML;可以看出,jQUery的使用是對DOM方法的簡化,可能一段JS代碼看不出來,但是如果隨著代
代碼的增多,這種去繁為簡的操作會大大增加效率和代碼的易讀性。(jQuery的方法只要對比DOM方法一下就很容易搞清楚)
jQuery語法基本語法格式:$(’選擇器‘).action(’具體操作‘)
- jQuery基本選擇器:id class tag
jQuery基本篩選器/has
篩選器:顧名思義找到標簽后再根據一些條件篩選過濾 以找到div標簽為例:在div標簽內進一步篩選: $('div:first') //第一個標簽 $('div:last') //最后一個標簽 $('div:eq(index)') // 索引等于index的那個標簽 $('div:even') //匹配索引是奇數的所有標簽,從0開始計數 $('div:odd') //匹配索引是偶數的所有標簽,從0開始計數 $('div:gt(index)') //匹配所有大于index索引值的元素 $('div:lt(index)') //匹配所有大于index索引值的元素 $('div:not(選擇器)') // 移除所有滿足not條件選擇器的標簽 $('div:has(選擇器)') // 選取所有包含一個或多個條件選擇器的標簽示例:
$("div:has(h1)") // 找到所有后代中有h1標簽的div標簽 $("div:has(.c1)") // 找到所有后代中有c1樣式類的div標簽 $("li:not(.c1)") // 找到所有不包含c1樣式類的li標簽 $("li:not(:has(a))") // 找到所有后代中不含a標簽的li標簽jQuery操作類屬性
[attribute] [attribute=value]// 屬性等于 [attribute!=value]// 屬性不等于示例: $("input[type='checkbox']"); //取到checkbox類型的input標簽 $("input[type != 'text']"); //取到不是text類型的input標簽jQuery模態框示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>模態框_仿</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><style>.cover0 {position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(176,176,176,0.5);z-index: 888;}.modal0 {width: 400px;height: 200px;background-color: white;position: fixed;left: 50%;top: 50%;margin-left: -200px;margin-top: -100px;z-index: 999;}.hide {display: none;}</style> </head> <body><button>彈彈彈</button><div class="cover0 hide" id="d1"></div><div class="modal0 hide" id="d2"><form action=""><p><label for="i10">username: <input type="text" id="i10"></label></p><p><label for="i20">password: <input type="password" id="i20"></label></p><p><input type="submit" value="登錄"></p></form><button class="close0">關閉</button></div><script>//點擊彈按鈕事件發生,取消模態框的hide類屬性,模態框顯現$('button:first').on('click',function(){$("#d1").removeClass('hide');$("#d2").removeClass('hide');});// 點擊關閉按鈕事件發生,增加模態框的hide類屬性,模態框隱藏$('button:last').on('click',function(){$("#d1").addClass('hide');$("#d2").addClass('hide');})</script> </body> </html>jQuery表單篩選器
:text :password :file :radio :checkbox:submit :reset :button例子: $(":checkbox") //找到所有的checkbox表單對象屬性
:enabled :disabled :checked :selected例子: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <form action=""><p><label for="i1">username: <input type="text" id="i1"></label></p><p><label for="i2">password: <input type="password" id="i2"></label></p><p><input type="submit" value="登錄" disabled></p> </form> <select name="" id=""><option value="BeiJing">北京</option><option value="ShangHai" selected>上海</option><option value="WuHan">武漢</option> </select> </body> </html>在google瀏覽器,console內 $("input:enabled")[0]; <input type="text" id="i1"> $("input:enabled")[1];$(':selected')[0]; <option value="ShangHai" selected="">上海</option> <input type="password" id="i2">jQuery篩選器方法
1:查找下一個標簽:
2"查找上一個元素:
3:父親、兒子、兄弟元素:
- jQuery之find方法、filter方法
- 搜索所有與指定表達式匹配的標簽,這個方法是找出正在處理的標簽的后代標簽的好辦法
1:
補充
.first() // 獲取匹配的第一個元素 .last() // 獲取匹配的最后一個元素 .not() // 從匹配元素的集合中刪除與指定表達式匹配的元素 .has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素jQuery左側菜單(點擊一個菜單,該菜單顯示二級菜單,其它菜單的二級菜單收回)、包含jQuery鏈式操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>左側菜單</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><style>body {margin: 0;min-width: 1080px;}.hide {display: none;}.left {position: fixed;top: 0;left: 0;width: 20%;height: 100%;background-color: rgb(100,100,100);}.right {position: absolute;right: 0;top: 0;width: 80%;height: 100%;background-color: aquamarine;}.menu {color: white;}.title {padding: 15px 5px;text-align: center;}</style> </head> <body> <div class="left"><div class="menu"><div class="title">菜單一<div class="items hide"><div>11111</div><div>11111</div><div>11111</div></div></div><div class="title">菜單二<div class="items hide"><div>22222</div><div>22222</div><div>22222</div></div></div><div class="title">菜單三<div class="items hide"><div>33333</div><div>33333</div><div>33333</div></div></div></div> </div><div class="right"></div><script>$('.title').on('click',function () {// $(this).children().removeClass('hide');// $(this).siblings().children().addClass('hide');//鏈式查找(在前面的位置繼續查找)$(this).children().removeClass('hide').parent().siblings().find('.items').addClass('hide');}) </script> </body> </html>jQuery操作標簽
樣式操作:
addClass(‘類名’);// 用jQuery對象添加指定的類名到該對象對應標簽中 removeClass(‘類名’);// 用jQuery對象移除指定的類名 hasClass(‘類名’);// 用jQuery對象判斷該標簽內是否存在指定的類名 toggleClass();// 用jQuery對象現判斷指定類名是否有,如果有就移除,如果沒有就添加。CSS樣式設置: css("color","red")//DOM操作:tag.style.color="red" $("p").css("color", "red"); //將所有p標簽的字體設置為紅色#位置操作:
offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置 position()// 獲取匹配元素相對父元素的偏移 scrollTop()// 獲取匹配元素相對滾動條頂部的偏移 scrollLeft()// 獲取匹配元素相對滾動條左側的偏移offset()方法:相對于文檔(document)的當前位置。position()方法:相對于相對于父級元素的位移。##jQuery offset() 方法:
定義和用法 offset() 方法設置或返回被選元素相對于文檔的偏移坐標。 作用: ①當用于返回偏移時: 該方法返回第一個匹配元素的偏移坐標。它返回一個帶有兩個屬性(以像素為單位的 top 和 left 位置)的對象。②當用于設置偏移時: 該方法設置所有匹配元素的偏移坐標。語法:返回偏移坐標: $(selector).offset()設置偏移坐標: $(selector).offset({top:value,left:value})使用函數設置偏移坐標: $(selector).offset(function(index,currentoffset)) (index - 返回集合中元素的 index 位置。 currentoffset - 返回被選元素的當前坐標。)總結
以上是生活随笔為你收集整理的前端之JQuery(一)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端基础之JavaScript_2
- 下一篇: 前端之JQuery(二)