java 从零开始，学习笔记之基础入门（四十三)

2021-08-01 06:27:30

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 从零开始，学习笔记之基础入门<Jquery>（四十三)

上一篇：学习JavaWeb之JSP——指令元素


下一篇：php代码编程需要好习惯 优质代码