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

Jquery

第一个Jquery程序

点击段落消失或出现DIV

jquery-01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

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

<div>我是div层</div>

<span>你再点我，我就让div出来帮忙</span>

<li>你点我，我就把用户名设为：三毛</li>

<form>

</tr>

<tr>

</tr>

<tr>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

<p>如果你点我，我就笑一个：</p>

<tr>

</tr>

<tr>

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

<html>

<head>

</head>

<body>

<ul>

<ul>

</ul>

</li>

</ul>

<ul>

<ul>

</ul>

</li>

</ul>

<ul>

<ul>

</ul>

</li>

</ul>

<hr>

<ul>

<ul>

</ul>

</li>

</ul>

<ul>

<ul>

</ul>

</li>

</ul>

<ul>

<ul>

</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;

}

/*去除下划线*/

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

相关文章