當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端之JQuery(一)

發布時間：2024/9/30 HTML 51 豆豆

生活随笔收集整理的這篇文章主要介紹了前端之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方法示例：

$('#id1').html();

開頭用 $KaTeX parse error: Expected 'EOF', got '#' at position 22: \dots個jQuery方法，括號里面“#?id1”選擇id=‘id1‘的\dots$ (’#id1’)”代表的就是jQuery對象，后面用點的形式使用其方法，比如.html().獲取id值為id1的標簽的
　　　 HTML代碼。
　　該方法的作用等同于DOM方法中：document.getElemengtById(‘id1’).innerHTML;可以看出，jQUery的使用是對DOM方法的簡化，可能一段JS代碼看不出來，但是如果隨著代
　　代碼的增多，這種去繁為簡的操作會大大增加效率和代碼的易讀性。（jQuery的方法只要對比DOM方法一下就很容易搞清楚）　
　　
　　 jQuery語法基本語法格式：$(’選擇器‘).action（’具體操作‘）

jQuery基本選擇器：id class tag

$('#id'); //id選擇器 $('.className'); //類選擇器 $('tagNmae'); //標簽選擇器 $('div.c1'); //查找有c1類的div標簽 $('*'); //所有元素選擇器 $('#id,.className,tagName'); //組合選擇器 $('x y'); //查找x的所有后代里的y $('x > y') //查找x的兒子里的y $('x + y') //查找x所有緊挨著它的且在下面的同級里的y $('x ~ y') //查找x后面的所有兄弟里的y

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:

$('div').find("p")等價于：$("div p") $('div').filter(".c1")// 從結果集中過濾出有c1樣式類的 // 等價于 $("div.c1")

補充

.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(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

jquery

上一篇：前端基础之JavaScript_2
下一篇：前端之JQuery(二)