jQuery

jquery是一个javaScript框架！核心理念就是：write less ,do more!

  <!--
      window.onload  与  $(document).ready(）区别
      01.简化方式 window.onload 无！ $(document).ready(）===$(function())
      02.编写的个数 window.onload只有一个！$(function())可以有多个
      03.执行时机：
         window.onload，必须等待网页中所有的元素（图片，视频，音频。。）加载完毕后再执行！
         $(function())，网页中html结构加载完成后（图片，视频，音频可能并没有加载完成）就会执行！
    -->

 <script type="text/javascript">
       $(function(){
           $("li").click(function(){
               /*$("#current").css("background","red");
               $("#current").css({"background":"red"});*/
               /*同时设置多个属性 每个属性之间使用，隔开！ 属性与属性值使用:分割*/
               $("#current").css({"background":"red","font-size":24});
           })
       })
    </script>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>显示和隐藏</title>
    <style type="text/css">
        /*默认让li中的div隐藏*/
        div{
            display: none;
        }
        /*去掉li前面的默认标签*/
        li{
            list-style: none;
        }
    </style>
  <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
      $(function(){
          /*当鼠标移动到li上时，div中的图片显示，li背景色改变
          *  鼠标离开li时，图片隐藏*/
          $("li").mouseover(function(){  //鼠标悬停事件
              $(this).css("background","orange").children("div").show();
          }).mouseout(function(){
              $(this).css("background","white").children("div").hide();
          })
      })
  </script>
</head>
<body>
<ul>
    <li>
        <a href="#">可爱的小猫咪1</a>
        <div><img src="images/cat.jpg"/></div>
    </li>
    <li>
        <a href="#">可爱的小猫咪2</a>
        <div><img src="images/cat.jpg"/></div>
    </li>
    <li>
        <a href="#">可爱的小猫咪3</a>
        <div><img src="images/cat.jpg"/></div>
    </li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>显示和隐藏 hover</title>
    <style type="text/css">
        /*默认让li中的div隐藏*/
        div{
            display: none;
        }
        /*去掉li前面的默认标签*/
        li{
            list-style: none;
        }
    </style>

  <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
      $(function(){
          /*当鼠标移动到li上时，div中的图片显示，li背景色改变
          *  鼠标离开li时，图片隐藏*/
          $("li").hover((function(){  //鼠标悬停事件
              $(this).css("background","orange").children("div").show();
          }),
          (function(){
              $(this).css("background","white").children("div").hide();
          }))
      })
  </script>
</head>
<body>
<ul>
    <li>
        <a href="#">可爱的小猫咪1</a>
        <div><img src="images/cat.jpg"/></div>
    </li>
    <li>
        <a href="#">可爱的小猫咪2</a>
        <div><img src="images/cat.jpg"/></div>
    </li>
    <li>
        <a href="#">可爱的小猫咪3</a>
        <div><img src="images/cat.jpg"/></div>
    </li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>链式操作</title>
    <style  type="text/css">
        div{
            display: none;  /*默认不显示*/
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        /*$ 等同于 jQuery*/
        $(function(){
                $("h1").click(function(){
                    /*给h1增加背景色和字体大小  并且给其后面的兄弟节点增加样式*/
                    $(this).css({"background":"orange","font-size":16}).next()
                            .css({"background":"pink","font-size":26,"display":"block"});
            })
        })
    </script>
</head>
<body>
<h1>什么是学习？</h1>
<div>
    学，并且习以为常！
</div>
</body>
</html>

图片轮播

$(function(){
  /*创建一个集合保存图片*/
    var imgs=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg");
    var  flag=0;  /*代表数组的下标*/
    /*点击向左的按钮*/
    $(".arrowLeft").click(function(){
        var i=0;
        if(flag==0){
            flag=imgs.length-1;
            i=flag+1;  /*图片的编号 li中的值*/
        }else{
            flag--;
            i=flag+1;  /*图片的编号*/
        }
        $(".adver").css("background","url(images/"+imgs[flag]+")");
        $("li:nth-of-type("+i+")").css("background","orange");
        $("li:nth-of-type("+i+")").siblings().css("background","#333333");
    });
    /*点击向右的按钮*/
    $(".arrowRight").click(function(){
        var i=0;
        if(flag==imgs.length-1){
            flag=0;
            i=flag+1;  /*图片的编号*/
        }else{
            flag++;
            i=flag+1;  /*图片的编号*/
        }
        $(".adver").css("background","url(images/"+imgs[flag]+")");
        $("li:nth-of-type("+i+")").css("background","orange");
        $("li:nth-of-type("+i+")").siblings().css("background","#333333");
    });

    /*显示→   ← 的按钮*/
    $(".adver").hover((function(){
        $(".arrowRight").show();
        $(".arrowLeft").show();
    }),function(){
        $(".arrowRight").hide();
        $(".arrowLeft").hide();
    })


})

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("tr:even").css("background", "red");
        $("tr:odd").css("background", "pink");
    })
</script>



<!--   <script type="text/javascript">
     window.onload=function(){
       var rows=  document.getElementsByTagName("tr");
      for(var i=0;i<rows.length;i++){
        if(i%2==0){
          rows[i].style.backgroundColor="green";
        }else{
          rows[i].style.backgroundColor="pink";
        }
      
      }
     }
  </script> -->
<body>
    <table>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
        <tr>
            <td>第四行第一列</td>
            <td>第四行第二列</td>
        </tr>
    </table>
</body>
</html>

01.第一个jquery页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<style type="text/css">
.show {
    display: none;
}
</style>
<script type="text/javascript">
    $(document).ready(function() {
        //点击按钮触发的事件
        $("button").click(function() {
            $("#d").addClass("show");
            $(".c").addClass("show");
            $("div").addClass("show");
        })

    })
</script>
<body>
    <button type="button">点击查看</button>
    <div id="d">网页元素1</div>
    <div>网页元素2</div>
    <div class="c">网页元素3</div>
    <div>网页元素4</div>
</body>
</html>

02.动态增加样式

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<style type="text/css">
.border {
    border: 3px  solid red;
}
</style>
<script type="text/javascript">
/*
jQuery(document).ready() 等同于 $(document).ready()
*/
    jQuery(document).ready(function() {
        $("img").click(function(){
         // $(this).addClass("border"); 
         //$(this).toggleClass("border"); 有就删除样式，没有就增加样式
         $(this).css("border"," 3px  solid green");
        })
    })
</script>
<body>
    <img src="images/cat.jpg">
</body>
</html>

03.给图片增加边框

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
/**
window.onload:
01.必须等到网页中所有的内容（图片，视频。。。）加载完毕之后 再执行！
02.同一个页面只能书写一个
03.没有简写的方式

$(document).ready(function(){}):
01.等到网页中dom文档结构加载完毕之后 就会执行  （图片，视频。。。）可能还没有加载完毕！
02.同一个页面可以书写多个
03.简写方式$(function(){})

*/
    $(function() {
     // $("div").html("<h1>这是html</h1>");
      $("div").text("<h1>这是html</h1>");
    })
</script>
<body>
    <div>网页元素</div>
</body>
</html>

04.html和text

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
    $(function() {
       $("button").click(function(){
          var $div= $("div"); //jquery对象
          //转换成dom对象  01.【index】 $div[0].innerHTML="网页";
          //转换成dom对象  02.get(index)  $div.get(1).innerHTML="网页";
          var first= document.getElementById("first");//dom对象
          //转换成jquery对象
           $(first).html("元素");
       })
    })
</script>
<body>
  <button>点击按钮</button>
    <div id="first">网页元素1</div>
    <div>网页元素2</div>
</body>
</html>

05.dom对象和jQuery对象的相互转换

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style type="text/css">
#box {
    background-color: #FFF;
    border: 2px solid #000;
    padding: 5px;
}
</style>
<script type="text/javascript">
    $(document).ready(function() {
        $("#btn1").click(function() {//触发不同的效果按钮点击事件
            //标签选择器，获取<h3>元素并为其添加背景颜色
            //$("h3").css("background","red");
            //类选择器，获取并设置所有class为title的元素的背景颜色
            //$(".title").css("background","red");
            //ID选择器，获取并设置id为box的元素的背景颜色
            //$("#box").css("background","red");
            //并集选择器，获取并设置所有<h2>、<dt>、class为title的元素的背景颜色
            //$("h2,dt,.title").css("background","red");
            //交集选择器，获取并设置所有class为title的<h2>元素的背景颜色
            //$("h2.title").css("background","red");
            //全局选择器，改变所有元素的字体颜色
            $("*").css("color", "red");
        })
    });
</script>
</head>
<body>
    <input type="button" id="btn1" value="显示效果" />
    <div id="box">
        id为box的div
        <h2 class="title">class为title的h2</h2>
        <h3 class="title">class为title的h3</h3>
        <h3>热门排行</h3>
        <dl>
            <dt>
                <img src="images/case_1.gif" width="93" height="99" alt="斗地主" />
            </dt>
            <dd class="title">斗地主</dd>
            <dd>休闲游戏</dd>
            <dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd>
        </dl>
    </div>
</body>
</html>

06.基本选择器

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    line-height: 30px;
}

body {
    margin: 10px;
}

#menu {
    border: 2px solid #03C;
    padding: 10px;
}

a {
    text-decoration: none;
    margin-right: 5px;
}

span {
    font-weight: bold;
    padding: 3px;
}

h2 {
    margin: 10px 0;
    cursor: pointer;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("h2").click(function() {
            //后代选择器，获取并设置#menu下的<span>元素的背景颜色
            //$("#menu span").css("background","red");
            //子选择器，获取并设置#menu下的子元素<span>的背景颜色
            //$("#menu>span").css("background","red");
            //相邻选择器，获取并设置紧接在<h2>元素后的<dl>元素的背景颜色
            //$("h2+dl").css("background","red");
            //同辈选择器，获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色
            $("h2~dl").css("background","red");
        });
    });
</script>

</head>
<body>
    <div id="menu">
        <h2 title="点击看效果">全部旅游产品分类</h2>
        <dl>
            <dt>
                北京周边旅游<span>特价</span>
            </dt>
            <dd>
                <a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a>
            </dd>
        </dl>
        
        <dl>
            <dt>景点门票</dt>
            <dd>
                <a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a>
            </dd>
            <dd>
                <a href="#">山水</a> <a href="#">双休</a>
            </dd>
        </dl>
        <span>更多分类</span>
    </div>
</body>
</html>

07.层次选择器

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
#box {
    background-color: #FFF;
    border: 2px solid #000;
    padding: 5px;
}

h2 {
    cursor: pointer;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("h2").click(function() {
            //改变含有title属性的<h2>元素的背景颜色
            //$("h2[title]").css("background","red");
            //改变class属性的值为odds的元素的背景颜色
            //$("[class='odds']").css("background","red");
            //改变id属性的值不为box的元素的背景颜色
            //$("[id!='box']").css("background","red");
            //改变title属性的值中以h开头的元素的背景颜色
            //$("[title^='h']").css("background","red");
            //改变title属性的值中以jp结尾的元素的背景颜色
            //$("[title$='jp']").css("background","red");
            //改变title属性的值中含有s的元素的背景颜色
            //$("[title*='s']").css("background","red");
            //改变包含class属性，且title属性的值中含有y的<li>元素的背景颜色  
            $("li[class][title*='y']").css("background","red");
        });
    });
</script>
</head>
<body>
    <div id="box">
        <h2 class="odds" title="cartoonlist">动画列表</h2>
        <ul>
            <li class="odds" title="kn_jp">名侦探柯南</li>
            <li class="evens" title="hy_jp">火影忍者</li>
            <li class="odds" title="ss_jp">死神</li>
            <li class="evens" title="yj_jp">妖精的尾巴</li>
            <li class="odds" title="yh_jp">银魂</li>
            <li class="evens" title="hm_da">黑猫警长</li>
            <li class="odds" title="xl_ds">仙履奇缘</li>
        </ul>
    </div>
</body>
</html>

08.属性选择器

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
     $("h2").click(function(){
          //改变第1个<li>元素的背景颜色
         // $("li:first").css("background","pink");
          //改变最后一个<li>元素的背景颜色
         // $("li:last").css("background","pink");
          //改变class不为three的<li>元素的背景颜色
           //$("li:not(.three)").css("background","pink");
          //改变索引值为偶数的<li>元素的背景颜色
          // $("li:even").css("background","pink");
          //改变索引值为奇数的<li>元素的背景颜色
           //$("li:odd").css("background","pink");
          //改变索引值等于1的<li>元素的背景颜色
          // $("li:eq(1)").css("background","pink");
          //改变索引值大于1的<li>元素的背景颜色
           //$("li:gt(1)").css("background","pink");
          //改变索引值小于1的<li>元素的背景颜色
          // $("li:lt(1)").css("background","pink");
          //改变所有标题元素，例如<h1>,<h2>,<h3>……这些元素的背景颜色
          // $(":header").css("background","pink");
     });
     
    /*  $("input").click(function(){
       alert($(this).is(":focus")); //判断元素是否获取焦点
      //改变当前获取焦点的元素的背景颜色
       $(":focus").css("background","pink");
     }) */
     $("input").focus(function(){
       $(this).css("background","pink");
     })
});
</script>
</head>
<body>
获取焦点：<input type="text">
<h2>网络小说</h2>
<ul>
  <li>王妃不好当</li>
  <li>致命交易</li>
  <li class="three">迦兰寺</li>
  <li>逆天之宠</li>
  <li>交错时光的爱恋</li>
  <li>张震鬼故事</li>
  <li>第一次亲密接触</li>
</ul>
</body>
</html>

09.基本过滤选择器

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
     $("#show").click(function(){
         $("div:hidden").show();  //让所有隐藏的元素 显示
     });
     $("#hide").click(function(){
         $("div:visible").hide();  //让所有可见的元素 隐藏
     });
});
</script>
</head>
<body>
   <button id="show">show</button>
   <button id="hide">hide</button>
 <div>显示1</div>
 <div>显示2</div>
 <div style="display:none">显示3</div>

</body>
</html>

10.可见性过滤器

$(window).resize(function(){   //调整窗口大小时，触发的事件
                $("body").css("background","orange");
            })

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
        $(document).ready(function() {
            //点击提交按钮，如果为空则输入框的边框为红色
            $(":submit").click(function(){
                //获取用户名
                //01. alert($("[name='username']").val());
                //02. alert($(":text:eq(0)").val());
                //03. alert($(":text:first").val());
               var $userName=$(":text[name='username']");
                //获取密码
              var $password= $(":password[name='pwd']");
                //获取确认密码
              var $repwd= $(":password[name='repwd']");
                //获取昵称
               var $nickName=$(":text[name='nickname']");
                //获取已选单选按钮
                var $radio=$(":radio:checked");
                //获取已选复选框
                var $checkbox=$(":checkbox:checked");
                //获取已选下拉框
               var  $select=$(":selected");
               
               //调用方法
              checkText($userName);
              checkText($password);
              checkText($repwd);
              checkText($nickName);
              checkRadio($radio);
              checkBox($checkbox);
              checkSelect($select);
            });
        
        //验证输入框的值
        function  checkText(obj){
          if(obj.val()==""){
           obj.css("border","1px solid  red");
          }else{
          obj.css("border","1px solid  green");
          }
        }
        //验证单选按钮
        function  checkRadio(obj){
          if(obj.length==0){
           $(":radio").parent().css("border","1px solid  red");
          }else{
           $(":radio").parent().css("border","1px solid  green");
          }
        }
        //验证复选按钮
        function  checkBox(obj){
          if(obj.length==0){
           $(":checkbox").parent().css("border","1px solid  red");
          }else{
           $(":checkbox").parent().css("border","1px solid  green");
          }
        }
        
        //验证下拉框
        function  checkSelect(obj){
          if(obj.val()==""){
           $("select").css("border","1px solid  red");
          }else{   //两种方式  都可以
           (obj).parent().css("border","1px solid  green");
          }
        }
        
        });
    </script>
</head>
<body>
<fieldset>
    <legend>注册表单</legend>
    <form onsubmit="return false;">
        <input type="hidden" name="pid" value="1"/>
        <p>账号：<input type="text" name="username"  /></p>
        <p>密码：<input type="password" name="pwd"  /></p>
        <p>确认密码：<input type="password" name="repwd"  /></p>
        <p>昵称：<input type="text" name="nickname"  /></p>
        <p>性别：
            <input type="radio" name="sex" value="1">男
            <input type="radio"  name="sex" value="0">女
        </p>
        <p>爱好：
            <input type="checkbox" name="hobby"  value="篮球" />篮球
            <input type="checkbox" name="hobby"  value="足球" />足球
            <input type="checkbox" name="hobby"  value="羽毛球" />羽毛球
            <input type="checkbox" name="hobby"  value="其他" />其他
        </p>
        <p>省份：
            <select>
                <option value="">--省份--</option>
                <option value="北京">北京</option>
                <option value="云南">云南</option>
                <option value="云南">云南</option>
                <option value="其他" >其他</option>
            </select>
        </p>
        <input type="submit" value="提交表单" />
    </form>
</fieldset>
</body>
</html>

11.表单选择器

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript">
        $(document).ready(function(){
            //包含"运动鞋"的表格行背景色为蓝色
             //$("tr:contains('运动鞋')").css("background","pink");
            //没有内容的单元格背景色为红色
           //$("td:empty").css("background","pink");
            //包含连接的单元格背景色为绿色
             //$("td:has('a')").css("background","pink");
            //含有子节点或文本的表格背景色为灰色
             $("td:parent").css("background","pink");

        });
    </script>
</head>
<body>
<table>
    <thead >
        <tr style="background-color: #aaaaaa;">
            <th>序号</th>
            <th>订单号</th>
            <th>商品名称</th>
            <th>价格(元)</th>
        </tr>
    </thead>
    <tr>
        <td>1</td>
        <td>10035900</td>
        <td><a href="#">Nike透气减震运动鞋</a></td>
        <td>231.00</td>
    </tr>
    <tr>
        <td>2</td>
        <td>10036114</td>
        <td>天美太阳伞</td>
        <td>51.00</td>
    </tr>
    <tr>
        <td>3</td>
        <td>10035110</td>
        <td><a href="#">万圣节儿童蜘蛛侠装</a></td>
        <td>31.00</td>
    </tr>
    <tr>
        <td>4</td>
        <td>10035120</td>
        <td>匹克篮球运动鞋</td>
        <td>231.00</td>
    </tr>
    <tr>
        <td>5</td>
        <td>10032900</td>
        <td>jQuery权威指南</td>
        <td></td>
    </tr>
</table>
</body>
</html>

12.内容选择器

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { //判断复选框是否被选中

        /*  01. :checked
        $(":checkbox").click(function(){
             if($(":checked").length!=0){
                 alert("已同意！");
             }
          }) */

      //02.change
        $(":checkbox").change(function() {
           alert($(":checkbox:checked").length); //当前页面复选框被选中的个数
            if (this.checked) {
                alert("已同意！");
            }
        })

    });
</script>
</head>
<body>
    <input type="checkbox"> 协议
    <input type="checkbox"> 协议
    <input type="checkbox"> 协议
</body>
</html>

13.复选框是否被选中

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
/*
 json:是一个数据交换格式！
  语法规则：
  01.数据在键值对中
  02.数据之间使用,隔开
  03.花括号中保存对象
  04.方括号中保存集合


  */
    $(function() { 
      //定义json对象
      var  student={"name":"小黑黑","age":50};
      //取值 通过对象名.属性名  alert(student.name+"\n"+student.age);
      //集合
      var  clazz={
             "student":
             [
             {"name":"小黑黑1","age":51},
             {"name":"小黑黑2","age":52},
             {"name":"小黑黑3","age":53},
             {"name":"小黑黑4","age":54},
             ],
             "teacher":
             [
             {"name":"教师1","age":51},
             {"name":"教师2","age":52},
             {"name":"教师3","age":53},
             {"name":"教师4","age":54,
             "f":
             [
             {"son":"小白1"},
             {"son":"小白2"}
             ]},
             ]
      }
      
    //alert(clazz.student[1].name+"\n"+clazz.student[1].age);
    // alert(clazz.teacher[1].name+"\n"+clazz.teacher[1].age);
    //只要是集合就使用  [index]  来取值   alert(clazz.teacher[3].f[1].son);
    //循环遍历所有的学生姓名
     for(var i=0;i<clazz.student.length;i++){
        alert(clazz.student[i].name);
     }
    
    /*   for(var o in clazz){
       if(o=="student"){
         for(var name in clazz[o]){
           alert(clazz[o][name].name); 
         }
       }
     } */
    });
</script>
</head>
<body>
  <div>大家辛苦了！</div>
</body>
</html>

14.json

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
     $("[type='button']").click(function(){
       // $("div").html("<h1>小猫咪消失了...</h1>");  innerHtml
      $("div").text("<h1>小猫咪消失了...</h1>");   //innerText
     })
    
    });
</script>
</head>
<body>
   <button type="button">点击更换</button>
  <div><img src="images/cat.jpg"></img></div>
</body>
</html>

15.text和html

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
       //获取焦点
       $("input").focus(function(){
         if($(this).val()=="请输入用户名"){
            $(this).val("已经输入");
         }
       })
       //失去焦点
         $("input").blur(function(){
         if($(this).val()=="已经输入"){
            $(this).val("请输入用户名");
         }
       })
       
    
    });
</script>
</head>
<body>
     用户名：<input type="text"  value="请输入用户名">
</body>
</html>

16.focus和blur

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
      
    
    //创建子节点
    var $newNode=$("<li>节点6</li>");
    //把节点后置到ul中
    //$("ul").append($newNode);    $newNode.appendTo($("ul"));
    //把节点前置到ul中
    //$("ul").prepend($newNode);   $newNode.prependTo($("ul"));
     
     //创建同辈元素节点
     var $newUl=$("<ul style='list-style:none'><li>同辈的元素</li></ul>");
     //后置同辈节点
     //$("ul").after($newUl);    $newUl.insertAfter($("ul"));
     //前置同辈节点
     // $("ul").before($newUl);    $newUl.insertBefore($("ul"));
     
     
     //替换指定的节点   节点4   替换了  节点2  $("li:eq(1)").replaceWith($("li:eq(3)"));
     
     //替换所有的   节点2  替换了  节点4    $("li:eq(1)").replaceAll($("li:eq(3)"));
     $("li:eq(3)").click(function(){  //复制  节点的同时   也绑定了 对应的事件
       alert("haha");
     })
     $("li:eq(3)").clone(true).appendTo("ul");
     
    });
</script>
</head>
<body>
     
      <ul style="list-style:none">
      <li>节点1</li>
      <li>节点2</li>
      <li>节点3</li>
      <li>节点4</li>
      <li>节点5</li>
      </ul>
     
     
     
     
     
     
</body>
</html>

17.节点的操作

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
      var  $first=$("#first");
      //获取点击事件
        $first.click(function(){
          alert("first");
        })
         //清空节点  empty    $first.empty();
        //删除节点  $first.remove();  
         $first.detach();   // 删除节点但是  保留了 事件
         $first.prependTo("body");
    });
</script>
</head>
<body>
     
     <div id="main">
        main
       <div id="first">first</div>
     </div>
     
     
     
     
     
     
</body>
</html>

18.remove和detach的区别

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
       $("img").click(function(){
         alert($(this).attr("src"));  //获取指定的属性值
        // $(this).attr("title","这是一个可爱的小猫咪！");  增加单个属性
        $(this).attr({"title":"斗地主","alt":"大家一起斗地主！","src":"images/1.gif"});  //json格式设置多个属性
         alert($(this).attr("src"));
         //removeAttr
         $(this).removeAttr("src");
       })
         
    });
</script>
</head>
<body>
     <img src="images/cat.jpg"/>
</body>
</html>

19.attr

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
    
    //获取body的子元素个数  alert("body的子元素个数:"+$("body").children().length);
    
    //获取下个同辈元素  $("#first1").next().css("color","red");
    
    //获取上个同辈元素    $("#first3").prev().css("color","red");       
    
    //获取上下所有的同辈元素  $("#first2").siblings().css("color","red");   
    
     //获取父辈元素   $("#second1").parent().parent().css("color","red");
     
     //获取祖先元素   parents()查询的boby
     $("#third1").parents().css("color","red");
         
    });
</script>
</head>
<body>
  body
 <div id="main">
     main
     <div id="first1">
       first1
            <div id="second1">
                       second1
                         <div id="third1">
                           third1
                      </div>
            </div>
     </div>
     
     <div id="first2">
       first2
            <div id="second2">
                       second2
            </div>
     </div>
     <div id="first3">
       first3
            <div id="second3">
                       second3
            </div>
     </div>
 </div>
</body>
</html>

20.同辈和父辈节点的操作

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
    //遍历数组
   /* var  arr=["小黑1","小黑2","小黑3"];
    $.each(arr,function(i,item){
        alert("下标："+i+";元素值是："+item);
    })
     
    //遍历对象
    var  student={"name":"小黑","age":50,"score":100};
    $.each(student,function(key,value){
        alert("属性名："+key+";属性值是："+value);
    })
    */
    
    //遍历界面中li
    $("li").each(function(i){
     //alert($(this).html());  输出元素内容
     $(this).html("节点"+i);  //更改li中的值
    })
    
    });
</script>
</head>
<body>

<ul>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ul>
 
</body>
</html>

21.each

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
    //鼠标的移入移出  hover
       $("input").hover(function(){
          alert("mouseover");
       },function(){
         alert("mouseout");
       })
      
    
    });
</script>
</head>
<body>
  <input  type="button"  value="hover">
</body>
</html>

22.hover

<script type="text/javascript">

        /**
         * 绑定单个事件
         */
        /*$("div").bind("mouseover",function(){
             $(".topDown").show();
        })*/

        /**
         * 绑定多个事件
         *   选择器.bind({
         *     事件名称1:事件1（）｛
         *     ｝，
         *     事件名称2:事件2（）｛
         *     ｝...
         *  })
         *
         */
        $("div").bind({
            mouseover:function(){
                $(".topDown").show();
            },
            mouseout:function(){
                $(".topDown").hide();
            },
            click:function(){
                alert(11111);
            }
        });

    </script>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
     /*  $("input").mouseover(function(){
         alert("mouseover");
      }) */
      
      //同时绑定多个事件
      $("input").bind(
      {
        mouseover:function(){
         alert("mouseover");
        },
        mouseout:function(){
         alert("mouseout");
        },
        click:function(){
         alert("click");
        }
      })
      
      
    
    });
</script>
</head>
<body>
  <input  type="button"  value="bind">
</body>
</html>

23.bind

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function() {
          //给button按钮绑定事件
            $("button").bind(
                    {
                        mouseover:mb,
                        mouseout:ob,
                        click:cb
                    }
            );

            //获取解除绑定的按钮
            $("[type='button']").click(function(){
                //  $("button").unbind("mouseover");解除一个
                // $("button").unbind("mouseover").unbind("click");解除两个
                $("button").unbind("mouseover click");//解除两个   多个使用空格隔开
            })
        });
        function  mb(){
            $("button").css("color","red");
        }
        function  ob(){
            $("button").css("color","blue");
        }
        function  cb(){
            alert("大家辛苦了！");
        }

    </script>
</head>
<body>

<form action="#" method="get">
    用户名：<input type="text"  name="userName"  placeholder="请输入用户名">
    密码：<input type="password"  name="pwd"  placeholder="请输入密码">
    <button type="submit">登录</button>
    <button type="button">解除绑定</button>
</form>
</body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function() { 
      //事件循环执行     1.9之后 废除的属性
      $("input").toggle(function(){
        $("body").css("background","green");},
       function(){
        $("body").css("background","red");},
        function(){
        $("body").css("background","pink");
      })
    
    });
</script>
</head>
<body>
  <input  type="button"  value="toggle">
</body>
</html>

24.toggle

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <style  type="text/css">
        .haha{
            color: red;
            font-size: 10px;
            width: 50px;
            height: 50px;
            border: 1px solid red;
        }

    </style>

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("button").click(function(){
                $("div").toggleClass("haha");
            })
        })
    </script>
</head>
<body>
    <button type="button">hover</button>
<div>能改变我的样式吗？</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<style type="text/css" >
*{
    font-size:12px;
}

</style>
<script type="text/javascript">
$(document).ready(function(){
    //删除当前行商品元素   这种 只能删除  之前页面存在的元素
/*      $(".del").click(function(){
        $(this).parent().parent().remove();
     }) */
    
      $(document).on("click",".del",function(){
        $(this).parent().parent().remove();
     }) 
    
    
    //1.9之后的版本  废除了  此方法
    /*  $(".del").live("click",function(){
        $(this).parent().parent().remove();
     })  */
    
    
    
    
    
    
    //新增一行
     $(".add").click(function(){
         //创建节点
     var $newRow= $("<tr>"
      +"         <td>                                                                                  "
      +"         <input name='' type='checkbox' value=''/>                                             "
      +"     </td>                                                                                    "
      +"     <td>                                                                                     "
      +"            <img src='images/sang.gif' class='products'/><a href='#'>天堂雨伞</a></td><td>￥32.9元   "
      +"     </td>                                                                                    "
      +"     <td>                                                                                     "
      +"             <img src='images/subtraction.gif' width='20' height='20'/>                            "
      +"             <input type='text' class='quantity' value='1'/>                                   "
      +"             <img src='images/add.gif' width='20' height='20'/>                                "
      +"    </td>                                                                                     "
      +"    <td>                                                                                      "
      +"            <a href='#' class='del'>删除</a>                                                    "
      +"    </td>                                                                                     "
          +"</tr> ");
       //在table中新增节点
       $("table").append($newRow);   
     
     })
    
    
    
    
    
    
    
    
    
    
    
    
    


})

</script>
</head>
<body> 
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th><input type='checkbox' />全选</th>
            <th>商品信息</th>
            <th>宜美惠价</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
           <tr>
               <td>
               <input name="" type="checkbox" value=""/>
           </td>
           <td>
                  <img src="images/sang.gif" class="products"/><a href="#">天堂雨伞</a></td><td>￥32.9元
           </td>
           <td>
                   <img src="images/subtraction.gif" width="20" height="20"/>
                   <input type="text" class="quantity" value="1"/>
                   <img src="images/add.gif" width="20" height="20"/>
          </td>
          <td>
                  <a href="#" class="del">删除</a>
          </td>
       </tr>
       <tr>
               <td>
               <input name="" type="checkbox" value=""/>
           </td>
           <td>
               <img src="images/iphone.gif" class="products"/><a href="#">苹果手机iphone5</a></td><td>￥3339元
           </td>
           <td>
                   <img src="images/subtraction.gif" width="20" height="20"/>
               <input type="text" class="quantity" value="1"/>
               <img src="images/add.gif" width="20" height="20"/>
          </td>
          <td>
                  <a href="#" class="del">删除</a>
          </td>
       </tr>

 </table>
 
 <a href="#" class="add">添加</a>
</body>
</html>

25.增加商品

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单事件</title>
<style type="text/css">
#login{
    width: 400px;
    height: 250px;
    background-color: #f2f2f2;
    border:1px solid #DDDDDD;
    padding: 5px;
}
#login fieldset {
    border: none;
    margin-top: 10px;
}
#login fieldset legend{
    font-weight: bold;
}
#login fieldset p{
    display: block;
    height: 30px;
}
#login fieldset p label {
    display: block;
    float:left;
    text-align: right;
    font-size: 12px;
    width: 90px;
    height: 30px;
    line-height: 30px;
}
#login fieldset p input {
    display: block;
    float:left;
    border: 1px solid #999;
    width: 250px;
    height: 30px;
    line-height: 30px;
}
#login fieldset p input.code{
    width: 60px;
}
#login fieldset p img{
    margin-left: 10px;
}
#login fieldset p a{
    color: #057BD2;
    font-size: 12px;
    text-decoration: none;
    margin: 10px;
}
#login fieldset p input.btn{
    background: url("./images/login.gif") no-repeat;
    width: 98px;
    height: 32px;
    margin-left: 60px;
    color: #ffffff;
    cursor: pointer;
}
#login fieldset p input.input_focus{
    background-color: #BEE7FC;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    //鼠标事件 click事件提交表单
    $(".btn").click(function(){
    alert("表单提交");
      $("#login").submit();
    });
    //鼠标移至按钮，按钮字体变粗。移出按钮则字体为正常字体
    $(".btn").hover(function(){
      $(this).css("font-weight","bold");
    },function(){
      $(this).css("font-weight","normal");
    });
    
    //用户名输入框的焦点事件
     $("[name='member']").focus(function(){
     $(this).addClass("input_focus");
     });
     $("[name='member']").blur(function(){
     $(this).removeClass("input_focus");
     });


    //键盘事件，敲击回车键进行表单提交,keyCode的数值代表不同的键盘按键
   $(document).keypress(function(key){
      if(key.keyCode==13){
       $("#login").submit();
      }
   });
   

});
</script>
</head>
<body>
<form id="login">
  <fieldset>
    <legend>用户登录</legend>
    <p>
        <label>用户名：</label>
        <input name="member" type="text" />
    </p>
    <p>
        <label>密码：</label>
        <input name="password" type="text" />
    </p>
    <p>
        <label>验证码：</label>
        <input name="code" type="text" class="code" />
        <img src="images/code.gif" width="80" height="30" /><a href="#">换一张</a>
    </p>
    <p>
             <input name="" type="button" class="btn" value="登录" />
             <a href="#">注册</a><span>|</span><a href="#">忘记密码？</a>
    </p>
  </fieldset>
</form>
</body>
</html>

26.用户登陆

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function() { 
    //显示速度 有  slow  normal fast  还可以是具体的时间  单位是 毫秒
     $("#showImg").click(function(){
       //$("img").show("slow");
       $("img").fadeIn(3000);
     })
     
     $("#hideImg").click(function(){
      // $("img").hide("fast");
      $("img").fadeOut(3000);
     })
    
    });
</script>
</head>
<body>
  <input  type="button" id="showImg" value="显示">
  <input  type="button" id="hideImg" value="隐藏">
  
  <img  src="images/cat.jpg" style="opacity:1"/>
</body>
</html>

27.显示隐藏，淡入淡出

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style type="text/css" >
ul{
    list-style:none;
    padding:5px;
    width:210px;
    border:1px solid red;
}
a{
    text-decoration:none;
    line-height: 30px;
}
.menu_style li{
     border-bottom:1px solid #666;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function() {
    //让li下标大于5的显示和隐藏   toggle  也可以让元素 显示或者隐藏
/*     $("input").click(function(){
       $("li:gt(5):not(:last)").toggle();
    }) */
    //动态改变高度
    $("input").toggle(function(){
     $("li:gt(5):not(:last)").slideUp("slow");
    },function(){
     $("li:gt(5):not(:last)").slideDown("slow");
    });
    
    });
</script>
</head>
<body>
<div id="menu" class="menu_style">
  <ul>
    <li><a href="#">手机通讯、数码电器</a></li>
    <li><a href="#">食品饮料、酒水、果蔬</a></li>
    <li><a href="#">进口食品、进口牛奶</a></li>
    <li><a href="#">美容化妆、个人护理</a></li>
    <li><a href="#">母婴用品、个人护理</a></li>
    <li><a href="#">厨卫清洁、纸、清洁剂</a></li>
    <li id="menu_07" class="element_hide"><a href="#">家居家纺、锅具餐具</a></li>
    <li id="menu_08" class="element_hide"><a href="#">生活电器、汽车生活</a></li>
    <li id="menu_09" class="element_hide"><a href="#">电脑、外设、办公用品</a></li>
    <li class="btn">
      <input name="more_btn" type="button" value="展开或关闭菜单项" />
    </li>
  </ul>
</div>
</body>
</html>

28.slideUp，slideDown

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
    $(function() {
        $("input").click(function(){
            //图片的动画
             $("img").animate({
               "height":200,
               "width":200,
               "marginLeft":200},
               "slow","swing",function(){
                 $("#box").html("小猫咪变小了....");
               })
        })
    })
</script>
<body>
  <input  type="button" value="开始动画"/>
   <div id="box" style="border:1px  solid red">大家辛苦了！</div>
 
    <img src="images/cat.jpg">
</body>
</html>

29.动画效果

posted @ 2017-06-29 14:48 想太多先森阅读(181) 评论(0) 编辑收藏举报

刷新页面返回顶部

@想太多先森

jQuery

公告