第3章 jQuery中的DOM操作

来源:https://www.cnblogs.com/i-shanghai/archive/2018/07/28/9382965.html
-Advertisement-
Play Games

parent() 、parents()、closest() 區別示例： 滑鼠移動到 a 上去，立即顯示文字提示效果：this 當前對象，e 滑鼠 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...


parent() 、parents()、closest() 區別示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-11-4</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      //parent
      $("input:eq(0)").click(function(){
            resetStyle();
            $('.item-1').parent().css('background-color', 'red');
      });
      //parents
      $("input:eq(1)").click(function(){
            resetStyle();
            $('.item-1').parents('ul').css('background-color', 'red');
      });
      //closest
      $("input:eq(2)").click(function(){
            resetStyle();
            $('.item-1').closest('ul').css('background-color', 'red');
      });

      function resetStyle(){
          $("*").removeAttr("style");
      }
  });
  //]]>
  </script>
</head>
<body>

<input type="button" value="parent()"/>
<input type="button" value="parents()"/>
<input type="button" value="closest()"/>

<ul id="one" class="level-1">
    <li class="item-i">I</li>
    <li id="ii" class="item-ii">II
        <ul class="level-2">
            <li class="item-a"><a href="#" class="item-1">Home</a></li>
            <li class="item-b"><a href="#" class="item-2">Product</a></li>
            <li class="item-c"><a href="#" class="item-3">About</a></li>
        </ul>
    </li>
    <li class="item-iii">III</li>
</ul>
</body>
</html>

滑鼠移動到 a 上去，立即顯示文字提示效果：this 當前對象，e 滑鼠

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字提示</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery.js" type="text/javascript"></script>
<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
p{
    clear:both;
    margin:0;
    padding:.5em 0;
}
/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:1px;
    color:#333;
    display:none;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function(){
    var x = 10;  
    var y = 20;
    $("a.tooltip").mouseover(function(e){
           this.myTitle = this.title;
        this.title = "";    
        var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //創建 div 元素
        $("body").append(tooltip);    //把它追加到文檔中
        $("#tooltip")
            .css({
                "top": (e.pageY+y) + "px",
                "left": (e.pageX+x)  + "px"
            }).show("fast");      //設置x坐標和y坐標，並且顯示
    }).mouseout(function(){        
        this.title = this.myTitle;
        $("#tooltip").remove();   //移除 
    }).mousemove(function(e){
        $("#tooltip")
            .css({
                "top": (e.pageY+y) + "px",
                "left": (e.pageX+x)  + "px"
            });
    });
})
//]]>
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="這是我的超鏈接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="這是我的超鏈接提示2.">提示2.</a></p>
<p><a href="#" title="這是自帶提示1.">自帶提示1.</a></p>
<p><a href="#" title="這是自帶提示2.">自帶提示2.</a> </p>
</body>
</html>
View Code

滑鼠移動到圖片上，立即在旁邊顯示大圖效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片提示</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery.js" type="text/javascript"></script>
<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
img{border:none;}
ul,li{
    margin:0;
    padding:0;
}
li{
    list-style:none;
    float:left;
    display:inline;
    margin-right:10px;
    border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:2px;
    display:none;
    color:#fff;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function(){
    var x = 10;
    var y = 20;
    $("a.tooltip").mouseover(function(e){
        this.myTitle = this.title;
        this.title = "";    
        var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
        var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='產品預覽圖'/>"+imgTitle+"<\/div>"; //創建 div 元素
        $("body").append(tooltip);    //把它追加到文檔中                         
        $("#tooltip")
            .css({
                "top": (e.pageY+y) + "px",
                "left":  (e.pageX+x)  + "px"
            }).show("fast");      //設置x坐標和y坐標，並且顯示
    }).mouseout(function(){
        this.title = this.myTitle;    
        $("#tooltip").remove();     //移除 
    }).mousemove(function(e){
        $("#tooltip")
            .css({
                "top": (e.pageY+y) + "px",
                "left":  (e.pageX+x)  + "px"
            });
    });
})
//]]>
</script>

</head>
<body>
<h3>有效果：</h3>
    <ul>
        <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
        <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
        <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
    </ul>


<br/><br/><br/><br/>
<br/><br/><br/><br/>


<h3>無效果：</h3>
<ul>
        <li><a href="images/apple_1_bigger.jpg" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
        <li><a href="images/apple_3_bigger.jpg" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
        <li><a href="images/apple_4_bigger.jpg" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
    </ul>
</body>
</html>
View Code

 

 

 


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

-Advertisement-
Play Games
更多相關文章
  • ConstraintLayout （約束佈局）屬性詳情
    本文部分內容來自於網路，點擊瀏覽原文 app:layout_constraintLeft_toLeftOf //Constrains the left side of a child to the left side of a target child (contains the target ch ...
  • Android核心技術Intent和數據存儲篇
    女孩：上海站到了？ 男孩：嗯呢？走向世界~ 女孩：Intent核心技術和數據存儲技術？ 男孩：對，今日就講這個~ Intent是各個組件之間用來進行通信的，Intent的翻譯為“意圖”的意思，是傳輸數據的核心對象，它可以開啟一個activity，也可以發送廣播消息和開啟Service服務，對於他們之 ...
  • Gson基本操作，JsonObject，JsonArray，String，JavaBean，List互轉
    (轉自)https://www.cnblogs.com/robbinluobo/p/7217387.html String、JsonObject、JavaBean 互相轉換 User user = new Gson().fromJson(jsonObject, User.class); User u ...
  • 深入理解JavaScript的事件迴圈（Event Loop）
    一、什麼是事件迴圈 JS的代碼執行是基於一種事件迴圈的機制，之所以稱作事件迴圈，MDN給出的解釋為 因為它經常被用於類似如下的方式來實現 如果當前沒有任何消息queue.waitForMessage 會等待同步消息到達 我們可以把它當成一種程式結構的模型，處理的方案。更詳細的描述可以查看 這篇文章 ...
  • macbook 入門
    [1]按鍵 [2]電池使用 [3]觸摸板 [4]調度中心 [5]快捷鍵 [6]軟體設置 [7]常用功能 ...
  • node.js和MongoDB學習網址
    回想我寫的node.js和MongoDB的博客，都是菜鳥教程那裡的知識，所以我打算不寫了，那些都是基礎，在項目開發中，我發現單單有那些基礎不行，這些基礎可以儘快學好，然後學習項目開發過程 下麵是兩個教程的鏈接： https://www.runoob.com/nodejs/nodejs-tutoria ...
  • addEventListener 的一些好方法 簡單粗暴的說給你
    function show(){ document.addEventListener("click",fn,{ "passive":false, "capture":false, "once":true }); "passive" 就是告訴瀏覽器 我可不可以用 stopPropagation 在執行 ...
  • button onclick實現跳轉的常用方法
    1、onclick="javascript:window.location.href='aa.htm' " 2、onclick="location='URL' " 1、onclick="javascript:window.location.href='aa.htm' " 2、onclick="loc ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類