jQuery

1、概述

jQuery_第1张图片

2、初识jQuery

jQuery_第2张图片

 jQuery_第3张图片

jQuery_第4张图片

 3、jQuery的调用

jQuery_第5张图片

<!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" />
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
     $(function(){
   $('#box').hide('slow');
  })
    </script>
    <title>无标题文档</title>
</head>
<body>
 <div id="box">Hello, jQuery!</div>
    <p>This is my first page.</p>
</body>
</html>

jQuery_第6张图片

4、jQuery对象与Dom对象

jQuery_第7张图片

 

方法独有。

jQuery_第8张图片

jQuery_第9张图片

 jQuery_第10张图片

 5、jQuery选择器

jQuery_第11张图片

 jQuery_第12张图片

jQuery_第13张图片

jQuery_第14张图片

 jQuery_第15张图片

jQuery_第16张图片

 jQuery_第17张图片

jQuery_第18张图片

 jQuery_第19张图片

 jQuery_第20张图片

 6、操作标签属性

jQuery_第21张图片

<!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" />
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
  var boxValue;
     $(function(){
   $('#box').hide('slow');
   $('#box').attr('id',"updateBox");
   boxValue = $('#updateBox').attr('id');
   alert(boxValue);
  })
    </script>
    <title>无标题文档</title>
</head>
<body>
 <div id="box">Hello, jQuery!</div>
    <p>This is my first page.</p>
</body>
</html>

jQuery_第22张图片

jQuery_第23张图片

 jQuery_第24张图片

 jQuery_第25张图片

<!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" />
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
     $(function(){
   //$('#demo').css('height','100px').css('background-color','#0c0');
   $('#demo').css({'height':'100px','background-color':'#0c0'});
  })
    </script>
    <style type="text/css">
    #demo{width:200px; height:200px; background-color:#F00;}  
    </style>
    <title>无标题文档</title>
</head>
<body>
 <div id="demo">This is a demo.</div>
</body>
</html>

jQuery_第26张图片

 7、操作类样式

jQuery_第27张图片

jQuery_第28张图片

jQuery_第29张图片

jQuery_第30张图片

jQuery_第31张图片

<!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" />
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
     $(function(){
   //$('#demo').css('height','100px').css('background-color','#0c0');
   //$('#demo').css({'height':'100px','background-color':'#0c0'});
   $('#demo').addClass('current1 current2');
   alert($('#demo').attr('class'));
  })
    </script>
    <style type="text/css">
    .current1{width:200px; height:200px;}
  .current2{background-color:#F00;}  
    </style>
    <title>无标题文档</title>
</head>
<body>
 <div id="demo">This is a demo.</div>
</body>
</html>

jQuery_第32张图片

 jQuery_第33张图片

jQuery_第34张图片

jQuery_第35张图片

jQuery_第36张图片

 8、内容操作

jQuery_第37张图片

jQuery_第38张图片

jQuery_第39张图片

 jQuery_第40张图片

jQuery_第41张图片

<!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" />
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
     $(function(){
   alert($('#demo').html());
   $('#demo').html('<h1>修改html</h1>');
   alert($('#username').val());
   $("form[name='myForm']>input[name='username']").val('美猴王');
  })
    </script>
    <style type="text/css">
    .current1{width:200px; height:200px;}
  .current2{background-color:#F00;}  
    </style>
    <title>无标题文档</title>
</head>
<body>
 <div id="demo">This is a demo.</div>
    <form id="myForm" name="myForm">
     用户名:<input type="text" value="玉皇大帝" name="username" id="username"/>
    </form>
</body>
</html>

jQuery_第42张图片

 jQuery_第43张图片

9、小结

jQuery_第44张图片

jQuery_第45张图片

 10、jQuery事件实现网页交互

jQuery_第46张图片

jQuery_第47张图片

 jQuery_第48张图片

<!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" />
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
     $(function(){
     $('#btn').bind('click',function(){
    $("form[name='myForm']>input[name='username']").val('美猴王');
   });
  })
    </script>
   <title>无标题文档</title>
</head>
<body>
    <form id="myForm" name="myForm">
     用户名:<input type="text" value="玉皇大帝" name="username" id="username"/><br/>
        <input type="button" value="请猛击按钮" id="btn"/>
    </form>
</body>
</html>

jQuery_第49张图片

jQuery_第50张图片

 jQuery_第51张图片

 11、jQuery效果

jQuery_第52张图片

 jQuery_第53张图片

jQuery_第54张图片

 

jQuery_第55张图片

 jQuery_第56张图片

jQuery_第57张图片

jQuery_第58张图片

jQuery_第59张图片

jQuery_第60张图片

 jQuery_第61张图片

12、Ajax请求

jQuery_第62张图片

jQuery_第63张图片

jQuery_第64张图片

jQuery_第65张图片

 jQuery_第66张图片

jQuery_第67张图片

 jQuery_第68张图片

jQuery_第69张图片

jQuery_第70张图片

jQuery_第71张图片

 jQuery_第72张图片

jQuery_第73张图片

jQuery_第74张图片

jQuery_第75张图片

jQuery_第76张图片

 jQuery_第77张图片

 jQuery_第78张图片

 13、小结

jQuery_第79张图片

jQuery_第80张图片

jQuery_第81张图片

jQuery_第82张图片

<%@ 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>
 <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
 <script type="text/javascript">
  $(function () {
   $('#login').bind('click',function () {
    var username = $('#username').val();
    var password = $('#password').val();
    if (username==""||password=="") {
     $('#msg').html("用户名或密码不能为空!");
     return;
    }
    $.get('dispose.jsp',{username:username,password:password},function(data){
     $('#msg').html(data);
    });
   });
  });
 </script>
</head>
<body>
 <form id="myForm" action="dispose.jsp" method="get">
  <p>用户名:<input type="text" name="username" id="username"/></p>
  <p>密码:<input type="password" name="password" id="password"/></p>
  <p><input type="button" value="登录" id="login"/></p>
  <div id="msg"></div>
 </form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
 String username = request.getParameter("username");
 String password = request.getParameter("password");
 if (username.equals("admin")&&password.equals("0000")) {
  out.print("登录成功。");
 } else {
  out.print("登录失败!");
 }
%>

jQuery_第83张图片

<%@ 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>
 <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
 <script type="text/javascript">
  $(function () {
   $('#login').bind('click',function () {
    var username = $('#username').val();
    var comment = $('#comment').val();
    if (username==""||comment=="") {
     $('#msg').html("用户名或评论信息不能为空!");
     return;
    }
    $.post('dispose2.jsp',{username:username,comment:comment},function(data){
     $('#commentList').append(data);
     $('#commentBox').slideUp('fast',function () {
      $('#msg').html("发表成功。");
     });
    });
   });
  });
 </script>
</head>
<body>
 <h2>发表评论</h2>
 <div id="commentBox">
  <p>姓名:<input type="text" id="username" name="username"/></p>
  <p>内容:<textarea id="comment" name="comment" rows="3"></textarea></p>
  <p><input type="button" id="login" value="发表评论"/></p>
 </div>
 <p id="msg">&nbsp;</p>
 <h2>评论列表</h2>
 <div id="commentList"></div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Date"%>
<%
 String username = request.getParameter("username");
 String comment = request.getParameter("comment");
 String time = new Date().toLocaleString();
 out.print("<p>姓名:"+username+"</p>"+
    "<p>时间:"+time+"</p>"+
    "<p>评论信息:"+comment+"</p>");
%>

jQuery_第84张图片

jQuery_第85张图片

 

你可能感兴趣的:(ajax请求,jquery选择器,Javascript库,jquery效果,jQuery事件实现网页交互)