jquery实例

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 //$是JQuery的别名
 //按照标签去找对象
 $("a").click(function() {
  alert("Hello world!");
 });
 //按照id去找对象
 $("#testfont").addClass("fontcolor");
    //移除样式
 $("#testfont").removeClass("fontcolor");

    //查找personlist底下的li标签,并循环显示其内容
 $("#personlist").find("li").each(function(i) {
  //alert($(this).html());
  $(this).html( " 牛人 " + i+"号:"+ $(this).html() );
 });
    //预加载清空事件(给按钮注册onclick事件)
 $("#resbutton").click(function() {
  $("#userform")[0].reset();
 });

 $("#sumbutton").click(function() {
  var val1=$("#num1").val();
  var val2=$("#num2").val();
  //alert("num1的值是:"+num1);
  //alert("num2的值是:"+num2);
  //第一个参数 请求的地址 第二个参数是参数集合以大括号的形式存在
  //在大括号里面,存放的是键值对
  $.get("getresult.jsp", { num1: val1, num2: val2},
      function(data){
        //alert("Data Loaded: " + data);
        $("#sumid").html("运算的总和是:"+data);
    });
    });

        //text函数,用来去标签中的文本值
    $("#showptext").click(
        function(){
                  var ptext=$("p").text();
                  alert(ptext);
         }
    );

       //隐藏函数的调用
    $("#hideid").click(
         function(){
          $("#showorhide").hide();
      }
     );
    $("#showid").click(
         function(){
          $("#showorhide").show();
      }
     ); 
   
 /*$(document).ready(function() {
  $("li").not("[ul]").css("border", "1px solid black").css("color","red");
 });*/

});

/*清空表单元素*/
function resForm(){
 document.userform.reset();
}

</script>
</head>
<body>
hello world~
<a href="#">Link</a>
<a href="#">Link1</a>
<a href="#">Link2</a>

<div id="testfont">
面朝大海 春暖花开
</div>

<div id="personlist">
<li>马化腾</li>
<li>李彦宏</li>
<li>史玉柱</li>
<li>陈天桥1</li>
<li>马云</li>

<!-- 带有ul标签的列表项 -->
<ul>
<li>刘德华1</li>
<li>郭富城</li>
<li>黎明</li>
<li>张学友</li>
</ul>

</div>
<li>刘德华2</li>
<li>郭富城2</li>
<li>黎明22</li>
<li>张学友2</li>
<form action="getresult.jsp" name="userform" id="userform" method="post">
name:<input type="text" id="username" name="username"/>

<br>
num1:<input type="text" id="num1" name="num1"/>
<br>
num2:<input type="text" id="num2" name="num2"/>
<br>
<input type="submit" value="保存"/>

<input type="reset" value="清空"/>

<input type="button" value="求和" id="sumbutton"/>

<input type="button" value="显示p标签中的文本值" id="showptext"/>

<input type="button" value="我是终结者" id="resbutton"/>

<input type="button" value="显示" id="showid"/>
<input type="button" value="隐藏" id="hideid"/>

<p>
<b>我是b标签中的文本值</b>
Paragraph.
</p>

<div id="showorhide" style="color: red">
我是具有隐身功能的~
</div>


</form>
<div id="sumid"></div>

</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值