java 從零開始，學習筆記之基礎入門（四十三)

原創 Rulon147 2020-07-02 12:33

Jquery

第一個Jquery程序

 

點擊段落消失或出現DIV

jquery-01.html

jquery-01.html

<!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設計的時候，導入提供的js包-->

<script language="javascript" src="jquery-1.4.js"></script>

<script language="javascript" src="test01.js"></script>

</head>

<body>

       <p>如果你打我，我就讓div跑</p>

    <div>我是div層</div>

   

    <span>你再點我，我就讓div出來幫忙</span>

   

    <li>你點我，我就把用戶名設爲：三毛</li>

   

    <form>

           <table style="background-color:#963; border:solid #990">

               <tr class="">

                   <td label id="la1"> 用戶名：</td>

                <td><input type="text" id="username" name="username"/></td>

            </tr>

            <tr>

                   <td label id="la2">密碼：</td>

                <td><input type="password" name="pwd" id="pwd"/></td>

            </tr>

            <tr>

                   <td colspan="2" algin="center"><input type="submit" name="sub" value="提交" /></td>

            </tr>

        </table>

    </form>

   

</body>

</html>

test01.js

// JavaScript Document

$(document).ready(function(){

//-------------------------------

       $("p").click(

       function(){

              $("div").hide();

              }

       );

      

       $("span").click(

       function(){

              $("div").show();

              }

       );

      

       $("li").click(

       function(){

              //通過#號獲得id,attr表示屬性

              $("#username").attr("value","三毛");

              }

       )

      

       $("#username").blur(

              function(){

                     $("#pwd").attr("value","123");

                     }

       );

//-------------------------------

       });

 

點擊添加多個附件

jquery-02.html

jquery-02.html

<!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>

<script language="javascript" src="jquery-1.4.js"></script>

<script language="javascript" src="test02.js"></script>

</head>

 

<body>

       <p>如果你點我，我就笑一個：</p>

   

    <table border="2px;" bgcolor="#888888">

           <tr>

               <td align="right"><input type="button" id="but" value="添加附件"/></td>

        </tr>

        <tr>

               <td><input type="file" name="myfile" id="myfile" value="上傳文件"/></td>

        </tr>

    </table>

   

</body>

</html>

test02.js

// JavaScript Document

$(document).ready(function(){

      

       $("p").click(

       function(){

              //append是向每一個匹配的元素追加內容

              $("p").append("笑一個");

              }

       );

      

       $("#but").click(

       function(){

              $("table").append("<tr><td><input type='file' name='myfile'  id=myfile' value='上傳文件'/></td></tr>")

              }

       );

       })

 

菜單點擊或鼠標移動出現下拉框

Index_test.html

Index_test.html

<html>

  <head>

       <link rel="stylesheet" type="text/css" href="css/menu.css">

 

       <script type="text/javascript" src="js/jquery-1.4.js"></script>

       <script type="text/javascript" src="js/menu.js"></script>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 

  </head>

 

<body>

    <ul>

           <li class="main"><a href="#">菜單項</a>

            <ul>

                         <li><a href="#">子菜單11</a></li>

                         <li><a href="#">子菜單12</a></li>

                         <li><a href="#">子菜單13</a></li>

                  </ul>

           </li>

    </ul>

   

    <ul>

           <li class="main"><a href="#">菜單項</a>

                  <ul>

                         <li><a href="#">子菜單14</a></li>

                         <li><a href="#">子菜單15</a></li>

                         <li><a href="#">子菜單16</a></li>

                  </ul>

           </li>

    </ul>

   

    <ul>

           <li class="main"><a href="#">菜單項</a>

                  <ul>

                         <li><a href="#">子菜單17</a></li>

                         <li><a href="#">子菜單18</a></li>

                         <li><a href="#">子菜單19</a></li>

                  </ul>

           </li>

    </ul>

   

    <hr>

    <!--**************************************-->

        <ul>

           <li class="hmain"><a href="#">菜單項</a>

            <ul>

                         <li><a href="#">子菜單11</a></li>

                         <li><a href="#">子菜單12</a></li>

                         <li><a href="#">子菜單13</a></li>

                  </ul>

           </li>

    </ul>

   

    <ul>

           <li class="hmain"><a href="#">菜單項</a>

                  <ul>

                         <li><a href="#">子菜單14</a></li>

                         <li><a href="#">子菜單15</a></li>

                         <li><a href="#">子菜單16</a></li>

                  </ul>

           </li>

    </ul>

   

    <ul>

           <li class="hmain"><a href="#">菜單項</a>

                  <ul>

                         <li><a href="#">子菜單17</a></li>

                         <li><a href="#">子菜單18</a></li>

                         <li><a href="#">子菜單19</a></li>

                  </ul>

           </li>

    </ul>

  </body>

</html>

Menu.css

/* CSS Document */

 

ul{

       margin:0px;

}

ul li{

       list-style:none;

       margin:0px;

       background-color:#999;

       height:25px;  

}

ul li ul{

       padding:0px;

       margin-top:3px;

}

ul li ul li{

       font-family:"楷體_GB2312";

}

 

.main{

       background-image:url(../images/title.gif);

       background-repeat:repeat-x;

       width:100px;

}

 

a:link {

       text-decoration: none;

}

a:visited {

       text-decoration: none;

}

a:hover {

       text-decoration: none;

       color:#F93;

}

a:active {

       text-decoration:none;

       color:#639

}

ul li a{

       color:#CCC;

       font-weight:bold;

       background-image:url(../images/collapsed.gif);

       background-repeat:no-repeat;

       background-position:3;

       padding-left:15px;

       width:135px;

}

ul li ul li a{

       font-family:"楷體_GB2312";

       color:#9FF;

       font-style:italic;

       font-weight:200;

       font-size:20px;

       background:none;

       text-align:center;

}

 

 

/*------------------------------------------*/

 

@charset "utf-8";

/* CSS Document */

ul li{

       /*清除點號*/

       list-style-type:none;

       }

.hmain{

       /*爲父菜單設置背景圖片*/

background-image:url(../images/title.gif);

background-repeat:repeat-x;

width:100px;

}

 

li{

background-color:#eeeeee;

}

 

a{

       /*去除下劃線*/

text-decoration:none;

/*向右縮進20像素*/

padding-left:25px;

/*讓效果充滿整個區域*/

display:block;

display:inline-block;

width:115px;

padding-top:2px;

padding-bottom:2px;

}

 

.hmain a{

       /*設置a標籤中內容的顏色*/

color:#ffffff;

background-image:url(../images/collapsed.gif);

/*主菜單的知識圖標不重複*/

background-repeat:no-repeat;

/*將指向圖標向右縮進8像素*/

background-position:5px;

}

 

.hmain li a{

color:red;

/*將菜單的背景圖效果取消*/

background-image:none;

}

 

.hmain ul{

       /*將子菜單隱藏*/

/*display:none;*/

}

 

.hmain{

       /*橫向效果的設置*/

float:left;

margin-right:3px;

}

 

*/

 

 

Menu.js

$(document).ready(function(){

      

       $(".main>a").click(

       function(){

       //     alert("click");

              var ulNode=$(this).next("ul");

              /*

              if(ulNode.css("display")=="none"){

                     ulNode.css("display","block");

                     }else{                         

                            ulNode.css("display","none");

                            }

              */

             

       //     ulNode.show();

       //  ulNode.hide();

      

       //     ulNode.toggle("slow");

       //     ulNode.slideDown();

       //     ulNode.slideUp();

           changeImage($(this));

              ulNode.slideToggle(500);

             

              }

          )

         

//對橫向菜單的效果的設置

  //hover是一個模仿懸停事件的方法， 鼠標移上去（over）會觸發第一個函數，鼠標移開時會觸發    第二個函數

        $(".hmain").hover(

          function () {

           $(this).children("ul").slideDown();

              changeImage($(this).children("a"));

      },

         function(){

              $(this).children("ul").slideUp();

              changeImage($(this).children("a"));

                }

         )

        

//修改指示圖標

function changeImage(v){

       if(v){

              if(v.css("background-image").indexOf("collapsed.gif")>=0){

                     v.css("background-image","url(images/expanded.gif)");                  

              }else{

                     v.css("background-image","url(images/collapsed.gif)");

              }

       }

}

        

        

        

});

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

java集合框架（黑馬程序員）

------- android培訓、java培訓、期待與您交流！ ---------- 如何在java中存儲大量數據？我們想到的是java的集合，也叫容器。集合類都是繼承Collection接口的。所以我們首先分析Collection接口

movaxbxcxdx 2020-07-06 16:06:45

Java併發學習（二）

一、start和run的區別 start方法是創建一個新的子線程並啓動（調用run方法） run方法只是Thread的一個普通方法的調用 二、線程的狀態 1. 新建(New): 創建後尚未啓動的線程的狀態 2. 運行(Ru

清雪冰橙 2020-07-05 02:22:46

ThreadLocal一篇將從底層到原理講清

ThreadLocal 1.是什麼 一個存儲結構，可以定義一個變量，每一個線程都可以擁有這個變量的副本，每個線程對於這個變量的修改，都只在本線程內有效，讓共享變量不會出現多線程問題 2.內部結構 底層由一個Entry數組構成，k

Zero_Darker 2020-07-04 06:01:11

ReentrantLock從結構底層到原理一篇講清

ReentrantLock 1.是什麼 Reetrantlock是一個可以重複獲得鎖的一個互斥鎖，它的加鎖與解鎖都是需要手動執行，也可以多次加鎖，同時它還可以指定是由公平鎖還是非公平鎖實現。 2.內部實現 構造方法： pub

Zero_Darker 2020-07-04 06:01:11

java生產者和消費者問題，和if問題

package com.qcby.lock; import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.ReentrantLock; /

weixin_45007916 2020-07-04 05:23:03

java 多線程練習，兩種方式的買票

package com.qcby.lock; /** * @author HuangHaiyang * @date 2020/07/02 * @description: description * @version: 1

weixin_45007916 2020-07-04 05:23:03

java 從零開始，學習筆記之基礎入門（三十九)

Struts2_實戰演練(中) 面向切面編程 針對特定功能寫出通用類，所關注的業務方面即切面   Login.Jsp->login.do 攔截器攔截login.do 所對應的action對象 攔截器可以控制action before/af

Rulon147 2020-07-02 12:33:19

java 從零開始，學習筆記之基礎入門（三十七)

Hibernate_實戰演練 使用HibernateSessionFactory得到session實現CRUD UserOperDAO.java package com.ibm.dao;   import java.util.It

Rulon147 2020-07-02 12:33:19

memcached 介紹

一、 概念 Memcached是danga.com（運營LiveJournal的技術團隊）開發的一套分佈式內存對象緩存系統，用於在動態系統中減少數據庫負載，提升性能。 二、 適用場合 1. 分佈式應用。由於memcached本身基

Rulon147 2020-07-02 12:33:19

java 從零開始，學習筆記之基礎入門（四十四)

統計圖（JFreeChart） JSP內嵌代碼單獨實現 （在web.xml配置如下代碼）   <servlet>     <servlet-name>DisplayChart</servlet-name>     <servlet-cl

Rulon147 2020-07-02 12:33:19

mybatis-plus邏輯刪除

數據庫中添加一個字段 delete_status 表示是否刪除 給個默認值爲0 相關實體類加上這個屬性 @Data @AllArgsConstructor @NoArgsConstructor public class User

weixin_45007916 2020-07-02 09:13:08

mybatis-plus的id策略

再上一篇博客中，我沒有插入id，但id自動生成了。這就很神奇。 @TableId() private Long id; 在我們的id上可以加上@TableId()註解， 這個註解有兩個屬性，value和type @Documen

weixin_45007916 2020-07-02 09:13:06

mybatis-plus的查詢和條件構造器

通過id查詢 @Test void testQuery(){ User user = userMapper.selectById(1L); System.out.println(user

weixin_45007916 2020-07-02 09:13:05

LayUI-使用table數據表格用thymeleaf解析報500錯誤

<script> layui.use('table', function(){ var table = layui.table; table.render({ el

weixin_45007916 2020-07-02 09:13:04

mybatis plus開啓事務

@Transactional//開啓事務的註解 public boolean UpdEmployeeDepartmentAndUnit(Workgroup workgroup) { boolean fla

weixin_45007916 2020-07-02 09:13:03