Jquery學習筆記,全面實用,需要的可以留下郵箱,給大家發原稿文檔

来源:https://www.cnblogs.com/ncl-960301-success/archive/2019/05/07/10827371.html
-Advertisement-
Play Games

JQuery 第一章:Jquery概念介紹 1.1 Jquery介紹 (1)並不是一門新語言。將常用的、複雜的操作進行函數化封裝,直接調用,大大降低了使用JavaScript的難度,改變了使用JavaScript的習慣。 (2)常用插件網站:www.jq22.com (3)導入jquery插件兩種方 ...


JQuery

 

第一章:Jquery概念介紹

1.1 Jquery介紹

(1)並不是一門新語言。將常用的、複雜的操作進行函數化封裝,直接調用,大大降低了使用JavaScript的難度,改變了使用JavaScript的習慣。

(2)常用插件網站:www.jq22.com

(3)導入jquery插件兩種方法:

1、網上插件: <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

2、官網下載,本地導入: <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

1.2 Jquery和JScript對比

JS的缺點:(1)選擇器功能弱;

    (2)DOM操作繁瑣

    (3)瀏覽器相容性不好

    (4)動畫功能弱

Jq的優點:(1)有強大的選擇器

    (2)DOM操作簡便

    (3)瀏覽器相容性好

    (4)有豐富的插件支持,強大的動畫效果

第二章:Jq的引入及js互相轉換

(1)獲取對象區別:

var varjs = document.getElementById("uname");

var varjq = $("#uname");

(2)js轉換為jq

var varjq = $(varjs);

(3)jq轉換為js

方法一:var varjs = varjq.get(0);

方法二:var varjs2 = varjq[0];

註:jq所有對象均為數組類型

val():返回或設置被選中元素的值,即value的值

第三章:JavaQuery常用選擇器

3.1 五種基本選擇器

(1)標簽選擇器

例如:$("div").css("color","red");

(2)Id選擇器

例如:$("#unameid")

(3)類選擇器

例如:$(".classname")

(4)通配選擇器

例如:$("*")

(5)組合選擇器

例如:$("#unameid,h3,.myclass");

3.2 四種層級選擇器

(1)後代選擇器

例如:$("#ul01 li").css("font-size","30px");

           $("#ul01 li").css("color","blue");

(2)父子選擇器

例如:$("#div03 > h3")

(3)後面第一個兄弟元素

註:必須緊挨當前元素,中間不能 插入其他標簽

例如:$("#div03 + div").css("background-color","blue");

(4)後面所有兄弟元素

例如:$("#div03 ~ div").css("background-color","red");

3.3 七種屬性選擇器

(1)元素名[attribute]:包含一個屬性

例如:$("div[id]").css("background-color","red");

(2)元素名[attribute][attribute]:同時包含兩個屬性

例如:$("div[id][class]").css("background-color","gray");

(3)元素名[屬性=value]:一個屬性,且屬性名=xx值

例如:$("div[class=myclass]").css("color","gold");

(4)元素名[屬性!=value]:一個屬性,且屬性不等於value值

例如:$("div[class!=myclass]").css("background-color","aqua");

(5)元素名[屬性^=value]:一個屬性,以xx開頭

例如:$("div[class^=my]").css("background-color","black");

(6)元素名[屬性$=value]:一個屬性,以xx結尾

例如:$("div[class$=2]").css("background-color","black");

(7)元素名[屬性*=value]:包含xx值

例如:$("div[class*=c]").css("background-color","black");

3.4 九種位置選擇器

(1)匹配找到的第一個元素:first

例如:$("tr:first")

(2)匹配找到的最後一個元素:last

例如:$("tr:last")

(3)選擇除了xx之外的選擇器:not

例如: $("div:not(#div02)")

(4)匹配所有索引值為偶數的元素:even

註:從0開始計數

例如:$("tr:even")

(5)匹配所有索引值為奇數的元素:odd

註:從0開始計數

例如:$("tr:odd")

(6)匹配一個給定索引值的元素:eq(index)

例如: $("tr:eq(1)")

(7)匹配所有大於給定元素索引值的元素:gt(index)

註:不包括本索引代表的元素

例如: $("tr:gt(0)")

(8)匹配所有小於小於給定索引值的元素:lt(index)

註:不包括本索引代表的元素

例如: $("tr:lt("+($("tr").length-1)+")")

(9)匹配如h1、h2、h3之類的標題元素:header

例如:$(":header")

3.5 四種內容選擇器

(1)匹配包含給定文本的元素:contains(text)

例如:$("div:contains(div02)")

(2)匹配所有不包含子元素或文本的空元素:empty

例如: $("td:empty")

(3)匹配含有選擇器所匹配的元素的元素:has(selector)

例如:$("div:has(h1)")

(4)匹配含有子元素或者文本的元素:parent

例如:$("td:parent")

3.6 兩種可見性選擇器

<body>
                <table>
                  <tr style="display:none"><td>Value 1</td></tr>
                  <tr><td>Value 2</td></tr>
                </table> 
        </body>

 

(1)匹配所有的不可見元素:hidden

例如:$("tr:hidden")

(2)匹配所有的可見元素:visible

例如:$("tr:visible")

3.7 四種子元素選擇器

(1)匹配相關子元素:nth-child()

例如:$("div h3:nth-child(odd)").css("color","#0000FF");

     $("div h3:nth-child(even)").css("color","#0000FF");

     $("div h3:nth-child(2n+1)").css("color","#0000FF");//n從0開始                               

(2)匹配第一個元素:first-child

例如:$("div h3:first-child").css("color","#0000FF");

(3)匹配最後一個元素:last-child

例如:$("div h3:last-child").css("color","#0000FF");

(4)匹配唯一一個子元素:only-child:

例如: $("div h3:only-child").css("color","#0000FF");

3.8 表單選擇器

(1)匹配所有的input、textarea、select、button元素: :input

例如:$(":input").addClass("myClass");

(2)所有的單行文本框:  :text

例如:$(":text").addClass("myClass");

(3)所有的密碼框:    :password

(4):radio  :checkbox  :submit   :reset

  :botton         :file                

(5):hiddle 匹配所有的不可見元素,或者type為hidden的元素

例如:$("input:hidden").val()

3.9 四個表單對象屬性選擇器

(1):select  下拉框

例如:$("select option:selected").text()

(2):checked   覆選框

例如:$("input:checked").val()

(3):enabled   

例如:$(":enabled").addClass("myClass")

(4):disabled

例如:$(":disabled").addClass("myClass")

第四章 Jquery操作DOM

4.1 取值與賦值

(1)html()取值  html(txt) 賦值  相當於JS中innerHTML

取值:$("#div01").html()   ,取出所有文本,包括html

賦值:$("#div01").html('<font style="color: gold;">hello word</font> '),會將文本中的html解析進行顯示

(2)text()取值  text(txt) 賦值  相當於JS中innerText

取值:$("#div01").text(),僅僅取出文本,不包括html

賦值:$("#div01").text('<font style="color: gold;">hello word</font> ');會將html標簽當做普通文本進行賦值

(3)val() 取值  val(val)  賦值  相當於JS中value

例如:$("#textid").val()

4.2 Jquery操作元素屬性

(1)獲取屬性值:attr(attr)

例如:$("#unameid").attr("name")

(2)給指定屬性賦值:attr(attr,val)

例如:$("#unameid").attr("value","李四")

(3)去掉指定屬性:removeAttr(attr)

例如:$("#unameid").removeAttr("id")

(4)獲取屬性值:prop(prop)

例如:$("#unameid").prop("name")

  賦值:prop(prop,val)

例如:$("#unameid").prop("value","王五")

(5)對符合條件的元素逐個處理:each(index)

 function testeach(){
                      $("input[name=fav]").each(function(index){
                       //alert(index);
                        alert(this.value);
                         })
                     }

 

註:jQuery 1.6增加了.prop()方法。

    如 checked, selected、readonly、disabled 使用prop()等,返回值是true或者false更加方便處理。   

例如: $("#submitid").prop("disabled",!($("#checkid").prop("checked")));

4.3 Jquery操作DOM節點

示例代碼:

<body>
                <ol id="olid">
                        <li id="li01">北京</li>
                        <li>上海</li>
                        <li>武漢</li>
                        <li>深圳</li>
                </ol>
                <div id="div01"></div>
                
                <hr />
                <input type="button" value="添加子節點" onclick="addchild()"/>
        </body>

 

(1)在末尾添加子元素:append()、appendTo()

例如:

例如:var varli = $("<li class='liclass'>西安</li>")
     $("#olid").append(varli);
     varli.appendTo($("#olid"));

 

(2)添加子元素前置:prepend()、prependTo()

例如:$("#olid").prepend(varli)

  varli.prependTo($("#olid"))

(3)添加平級元素(前面)insertBefore()、before()

例如:var vardiv = $("<div>div02</div>")

           vardiv.insertBefore($("#div01"));

           $("#div01").before(vardiv);

(4)添加平級元素(後面)insertAfter()、after()

例如:vardiv.insertAfter($("#div01"));

           $("#div01").after(vardiv);

(5)替換某個節點replaceWith()、replaceAll()

例如:var varli = $("<li>鄭州</li>");

      $("#li01").replaceWith(varli);

      varli.replaceAll($("#li01"));

(6)刪除元素:remove()

例如:$("#olid").remove()

(7)刪除子元素:empty()

例如:$("#olid").empty();

4.4 Jquery操作CSS樣式

(1) css(css,val)

例如:$("#divId").css("background-color",“red”)

(2)css({css1:val1,css2:val2,…..})

例如:$("#divId").css({"background-color":"red","color":"gold"});

4.5 Jquery操作類樣式

(1) hasClass(class) 判斷當前對象是否有這個樣式(類的樣式)--返回是boolean類型的值

例如:$("#divId").hasClass("myclass")

(2)addClass(class) 添加樣式, 而不是覆蓋類樣式

例如:"#divId").addClass("myclass myclass2"

(3) removeClass(class) 移除樣式,如果()不寫移除的樣式預設移除所有的樣式

例如:$("#divId").removeClass("myclass")

(4)toggleClass(class) 切換樣式

例如:$("#divId").toggleClass("myclass myclass2");

第五章 Jquery動畫效果

(1)顯示:show()

例如:$("#img01").show(3000)

(2)隱藏:hide()

例如: $("#img01").hide(3000)

(3)從上到下顯示:slideDown()

例如: $("#div01").slideDown(3000)

(4)從下到上隱藏:slideUp()

例如: $("#div01").slideUp(3000)

(5)淡入:fadeIn()

例如: $("#img01").fadeIn(3000)

(6)淡出:fadeOut()

例如:  $("#img01").fadeOut(3000)

註:3000代表延時時間,3秒

第六章 Jquery事件

(1)點擊事件:click()

滑鼠移動事件:mousemove()

滑鼠移出事件:mouseout()

當滑鼠指針位於元素上方時:mouseover()

(2)事件綁定

bind():jquery1.7版本之前使用

live():在jquery1.9版本刪除

on():jquery1.7版本出現,推薦使用

on()優勢:統一介面,提高性能。

事件綁定兩種方式:

 //1 直接 對象.事件()
/*$("#aid").click(function(){
$("#divid").css("display","block");
}).mouseout(function(){
   $("#divid").css("color","red");
    $("#divid").css("font-size","30px");
    });*/

 //2 on() 使用on綁定事件
/*$("#aid").on("click",function(){
 $("#divid").css("display","block");
 }).on("mouseout",function(){
 $("#divid").css("color","red");
 $("#divid").css("font-size","30px");
  })*/

 

(3)解除綁定

unbind():

傳參代表解除指定事件

無參代表預設解除所有事件

//4 unbind() 解綁
function testunbind(){
 //$("#aid").unbind();//不傳參表示解除所有事件,
 $("#aid").unbind("mouseenter");
}

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 首先,我們要瞭解Node.js不是一種語言,它只是一個除了瀏覽器之外的,可以運行js的環境。 其次,Node能做些什麼 ? web伺服器、 命令行工具、 網路爬蟲、 桌面應用程式開發等 3.接下來使用Node.js創建簡單的伺服器 第一種寫法: 第二種寫法: 個人推薦:第二種寫法,可以很好的瞭解。 ...
  • 註意點: position屬性 定義建議元素佈局所用的定位機制 {position:static/absolute/relative/fixed;} static:預設值,沒有定位 absolute:絕對定位元素,相對於static定位以外的第一個父元素進行定位。可以通過left、top、right ...
  • 說起迭代器, 那就要先瞭解迭代模式 迭代模式: 提供一種方法可以順序獲得聚合對象中的各個元素, 是一種最簡單, 也是最常見的設計模式,它可以讓用戶通過特定的介面尋訪集合中的每一個元素 而不用瞭解底層的實現。 迭代器 : 依照迭代模式的思想而實現, 分為內部迭代器和外部迭代器, 內部迭代器: 本身是函 ...
  • 頁面效果: 只是測試了一部分功能,因篇幅有限,不能測試全面,有什麼問題,歡迎留言一起學習! 裡面的正則表達式,參考小編的前幾篇文章,有資源連接的 ...
  • 註意點: 元素類型分為 塊級元素 和 行內元素 塊級元素: 在網頁中以塊的形式顯示,預設情況都會占據一行,兩個相鄰的塊級元素不會出現併列顯示的元素,按照順序自上而下排列。 塊級元素可以定義自己的寬度和長度。 div: dl:與dt、dd搭配使用 form:交互表單 h1-h6:標題 hr:水平線 o ...
  • 示例代碼托管在: "http://www.github.com/dashnowords/blogs" 博客園地址: "《大史住在大前端》原創博文目錄" 華為雲社區地址: "【你要的前端打怪升級指南】" [TOC] 一. 粒子特效 粒子特效一般指密集點陣效果,它並不是canvas獨有的,這個名詞更多出 ...
  • 移動佈局 1.移動設備有 手機和ipad 安卓系統 ios系統 安卓系統的內置瀏覽器是谷歌 ios內置 safari瀏覽器 他們的內核都是web,不考慮相容性,需要考慮的問題是安卓和ios的區別? 2.佈局(寫頁面) 要考慮以下幾點 設置的寬度 設備的實際大小(設備的解析度)廠家給的 頁面的大小 設 ...
  • 上一章介紹了閾值比例尺:https://www.cnblogs.com/littleSpill/p/10825038.html。到目前所有的定量比例尺已經介紹完了。 現在給大家介紹一下序數比例尺。 定量比例尺的定義域都是連續的,值域有連續的也有離散的。序數比例尺(Ordinal Scale)的定義域 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...