Javascript隨筆2（JQuery）

来源:http://www.cnblogs.com/zengbojia/archive/2017/08/15/7288468.html
-Advertisement-
Play Games

1.jQuery 語法 Tips： 通過 CDN（內容分髮網絡）引用JQuery：（link的引用最好放在script的引用之前） 獲取CDN網址：http://cdn.code.baidu.com/ jQuery 語法是為 HTML 元素的選取編製的，可以對元素執行某些操作。 基礎語法是：$(se ...


1.jQuery 語法

Tips：

通過 CDN（內容分髮網絡）引用JQuery：（link的引用最好放在script的引用之前）

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="Tab.js"></script>

獲取CDN網址：http://cdn.code.baidu.com/

 

jQuery 語法是為 HTML 元素的選取編製的，可以對元素執行某些操作。

基礎語法是：$(selector).action()

  • 美元符號定義 jQuery
  • 選擇符（selector）“查詢”和“查找” HTML 元素
  • jQuery 的 action() 執行對元素的操作

$(document).ready(function()中的ready是為了防止文檔在完全載入（就緒）之前運行 jQuery 代碼。

 

2.jQuery 選擇器

  • 元素選擇器

$("p") 選取 <p> 元素。

$("p.intro") 選取所有 class="intro" 的 <p> 元素。

$("p#demo") 選取所有 id="demo" 的 <p> 元素。

  • 屬性選擇器

$("[href]") 選取所有帶有 href 屬性的元素。

$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。

$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。

$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。

  • CSS選擇器

把所有 p 元素的背景顏色更改為紅色

$("p").css("background-color","red");

 

3.jQuery 事件方法

$(document).ready(function) 將函數綁定到文檔的就緒事件（當文檔完成載入時）
$(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function) 觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發或將函數綁定到被選元素的獲得焦點事件
$(selector).mouseover(function) 觸發或將函數綁定到被選元素的滑鼠懸停事件

　　JQuery事件完整版請看：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

 

4.jQuery動畫效果

  • 隱藏/顯示

方法：hide，show

語法：（speed表示顯示/隱藏速度，其值可以為：“fast”，“slow”或者毫秒，callback表示執行完後運行的函數）

　　　$(selector).hide(speed,callback)；

　　　$(selector).show(speed,callback);

  • 淡入淡出

方法：fadeIn()【淡入】，fadeOut()【淡出】，fadeToggle()【淡入淡出交互】，fadeTo()【允許給透明度opacity】

語法：$(selector).fadeIn(speed,callback);（前三個方法類同）

　　　$(selector).fadeTo(speed,opacity,callback);

  •  滑動

方法：slideDown()【下滑】，slideUp()【上滑】，slideToggle()【上下交互滑動】

語法：$(selector).slideDown(speed,callback);（其他方法類似）

  • 動畫

tips：預設情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，得先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。

方法：animate()

語法：$(selector).animate({params},speed,callback);（params用於設置動畫的CSS屬性，CSS使用相對值時可用"+="或"-="）

  • 動畫STOP

方法：stop（）

語法：$(selector).stop(stopAll,goToEnd);（stopAll參數規定是否應該清除動畫隊列，預設是false；goToEnd參數規定是否立即完成當前動畫，預設是false）

  • JQuery方法鏈接

例：$("#p1").css("color","red").slideUp(2000).slideDown(2000);

該方法的效果是："p1" 元素首先會變為紅色，然後向上滑動，然後向下滑動

 

5.jQuery - 獲得內容和屬性

獲得內容 - text()、html() 以及 val()：

 

  • text() - 設置或返回所選元素的文本內容
  • html() - 設置或返回所選元素的內容（包括 HTML 標記）
  • val() - 設置或返回表單欄位的值
1 $("#btn1").click(function(){
2   alert("Text: " + $("#test").text());
3 });
4 $("#btn2").click(function(){
5   alert("HTML: " + $("#test").html());
6 });

 

獲取標簽屬性 - attr()

獲取：

 

1 $("button").click(function(){
2   alert($("#w3s").attr("href"));
3 });

設置（單屬性設置和多屬性設置）：

 

 1 $("button").click(function(){
 2   $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
 3 });
 4 
 5 
 6 $("button").click(function(){
 7   $("#w3s").attr({
 8     "href" : "http://www.w3school.com.cn/jquery",
 9     "title" : "W3School jQuery Tutorial"
10   });
11 });

 

 

 

6.jQuery - 添加/刪除元素

添加HTML內容方法：append()【後添加】，prepend()【前添加】，after()【選定元素後添加】，before()【選定元素前添加】

 

 1 function afterText()
 2 {
 3 var txt1="<b>I </b>";                    // 以 HTML 創建新元素
 4 var txt2=$("<i></i>").text("love ");     // 通過 jQuery 創建新元素
 5 var txt3=document.createElement("big");  // 通過 DOM 創建新元素
 6 txt3.innerHTML="jQuery!";
 7 $("img").after(txt1,txt2,txt3);          // 在 img 之後插入新元素
 8 $("p").append(txt1,txt2,txt3);         // 追加新元素
 9 
10 }

 

 

刪除HTML元素方法：remove()，empty()

1 $("#div1").remove();  //刪除被選元素及其子元素
2 
3 $("p").remove(".italic");  //刪除類為“italic”的所有p元素
1 $("#div1").empty();    //刪除被選元素的子元素

 

 

7.jQuery - 獲取並設置 CSS 類

 操作CSS的方法：

  • addClass() - 向被選元素添加一個或多個類
  • removeClass() - 從被選元素刪除一個或多個類
  • toggleClass() - 對被選元素進行添加/刪除類的切換操作
  • css() - 設置或返回樣式屬性

外部：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js">
 5 </script>
 6 <script>
 7 $(document).ready(function(){
 8   $("button").click(function(){
 9     $("h1,h2,p").toggleClass("blue");
10   });
11 });
12 </script>
13 <style type="text/css">
14 .blue
15 {
16 color:blue;
17 }
18 </style>
19 </head>
20 <body>
21 
22 <h1>標題 1</h1>
23 <h2>標題 2</h2>
24 <p>這是一個段落。</p>
25 <p>這是另一個段落。</p>
26 <button>切換 CSS 類</button>
27 </body>
28 </html>

內部：

1 //設置單個屬性
2 $("p").css("background-color","yellow");
3 
4 //設置多個屬性
5 css({"propertyname":"value","propertyname":"value",...});

 

 

8.jQuery - 尺寸

處理尺寸的方法：

  • width()：設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
  • height()：設置或返回元素的高度（不包括內邊距、邊框或外邊距）。
  • innerWidth()：返回元素的寬度（包括內邊距）。
  • innerHeight()：返回元素的高度（包括內邊距）。
  • outerWidth()：返回元素的寬度（包括內邊距和邊框）。
  • outerHeight()：返回元素的高度（包括內邊距和邊框）。
  • outerWidth(true) 返回元素的寬度（包括內邊距、邊框和外邊距）。
  • outerHeight(true) 返回元素的高度（包括內邊距、邊框和外邊距）。
1 $("button").click(function(){
2   var txt="";
3   txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
4   txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
5   $("#div1").html(txt);
6 });

Tips：

$(document).height()和$(window).height() 可以獲得文檔和視窗的尺寸

 

 

9.jQuery 遍歷

遍歷的方法：

  • parent()：返回被選元素的直接父元素。
  • parents()：返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)。（可過濾）
  • parentsUntil()：返回介於 <span> 與 <div> 元素之間的所有祖先元素：
1 $(document).ready(function(){
2   $("span").parentsUntil("div");
3 });
  • children()：返回被選元素的所有直接子元素，只會向下一級對 DOM 樹進行遍歷。
  • find()：返回被選元素的後代元素，一路向下直到最後一個後代。
1 //下麵例子返回屬於 <div> 後代的所有 <span> 元素：
2 $(document).ready(function(){
3   $("div").find("span");
4 });
5 
6 //下麵的例子返回 <div> 的所有後代：
7 $(document).ready(function(){
8   $("div").find("*");
9 });
  • siblings()：返回被選元素的所有同胞元素。
  • next()：返回被選元素的下一個同胞元素。
  • nextAll()：返回被選元素的所有跟隨的同胞元素。
  • nextUntil()：返回介於兩個給定參數之間的所有跟隨的同胞元素。
  • prev()【以下三個與上面類似，遍歷方向向上】
  • prevAll()
  • prevUntil()
  • eq()：返回被選元素中帶有指定索引號的元素。
  • filter(".intro")：方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
  • not(".intro")：返回不匹配標準的所有元素。

 

 


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

-Advertisement-
Play Games
更多相關文章
  • Java資料庫連接——PreparedStatement的使用
    首先瞭解Statement和PreparedStatement的區別： 由此可見，一般使用PreparedStatement。 操作資料庫SU(Course表)，其中Course屬性有Cno，Cname，Cpno，Ccredit。 運行程式，控制台輸出符合條件的數據。 最後總結如下： * Prepa ...
  • Python不歸路_初識函數
    什麼是函數 函數是組織好的，可重覆使用的，用來實現單一，或相關聯功能的代碼段。函數能提高應用的模塊性，和代碼的重覆利用率。你已經知道Python提供了許多內建函數，比如print()。但你也可以自己創建函數，這被叫做用戶自定義函數。 python函數格式: 註意了，函數一定是有返回值,沒有返回值,就 ...
  • Luogu P3367 【模板】並查集
    題目描述 如題，現在有一個並查集，你需要完成合併和查詢操作。 輸入輸出格式 輸入格式： 第一行包含兩個整數N、M，表示共有N個元素和M個操作。 接下來M行，每行包含三個整數Zi、Xi、Yi 當Zi=1時，將Xi與Yi所在的集合合併 當Zi=2時，輸出Xi與Yi是否在同一集合內，是的話輸出Y；否則話輸 ...
  • Java分頁查詢--分頁顯示
    當資料庫中數據條數過多時，一個頁面就不能顯示，這是要設置分頁查詢，首先要使用的是資料庫sql語句的limit條件實現分組查詢sql語句大概形式為： select * from table limit 開始索引，顯示條數 用該語句就會實現分塊查詢，並且每頁顯示固定條數。首先要實現後臺分頁，我們需要知道 ...
  • php 基於socket的基本通信
    php 基於socket的基本通信 1、前言 Socket是應用層與TCP/IP協議族通信的中間軟體抽象層，它是一組介面。在設計模式中，Socket其實就是一個門面模式，它把複雜的TCP/IP協議族隱藏在Socket介面後面，對用戶來說，一組簡單的介面就是全部，讓Socket去組織數據，以符合指定的 ...
  • Dubbo框架詳解
    概覽 Dubbo是阿裡巴巴SOA服務化治理方案的核心框架，每天為2,000+個服務提供3,000,000,000+次訪問量支持，並被廣泛應用於阿裡巴巴集團的各成員站點（Alibaba.com、1688.com、Aliexpress.com、阿裡雲、阿裡學院等等），自開源後，已有不少非阿裡系公司在使用 ...
  • socket + select 完成偽併發操作
    1 #!/usr/bin/env python 2 # -*- coding: utf-8 -*- 3 4 import socket 5 #創建一個socket對象 6 sk1 = socket.socket() 7 #綁定ip和埠 8 sk1.bind(('127.0.0.1', 8001)) ...
  • 反應堆模式(reactor)
    在提到高性能伺服器編程的時候肯定有聽過reactor模式，如果只是簡單的寫一個伺服器和客戶端建立連接的程式來熟悉一下使用socket函數編程，一般這種情況都是同步方式實現的，伺服器阻塞等待客戶端的連接，期間伺服器不能做其他事情。是不是有更好的實現方式，讓伺服器可以提高效率，這就是反應堆模式要做的。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類