jQuery的使用教程

前端

jQuery的使用教程(一个js的库)

库与框架的区别
- 库是对代码和方法的封装,使要开发更高效,一些常用重复的功能不需要再次开发
- 框架不仅仅是代码和方法的封装,更多的是一种开发规范,一种开发流程,规定了开发的不同代码要放在指定的路径下,框架的功能往往更强大
$(function (){})等价于window.onload= function (){}
$()可以理解成是一个函数[可以定义function$ (id)}..]
$("\#btn01")底层：document.getElementById("btn01"),注意$("#btn01")不能写成$("btn01"),通过id获得jQuery对象需要在id前加上"#"
通过$("#btn01")返回的对象就是jquery.对象（即进行了封装），而不是原生的dom对象
jQuery对象是一个数组对象
jQuery快速入门演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    使用jQuery前需要引入jQuery的js包-->
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //$(function(){}) 等价于 原生js的 window.onload = function(){}

        $(function (){
            // 获得一个jQuery对象
            // 通过id获得需要在id前加上"#",通过标签名获得,直接写标签名即可
            //jQuery对象的变量名,约定第一个符号是"$"
            //jQuery对象是一个数组对象
            var $button1 = $("#button1");
            //绑定点击事件,调用相应的方法,传入一个事件触发后执行的函数
            $button1.click(function (){
                alert("jQuery对象的事件机制被触发")
            });
        });
    </script>
    <title>使用jQuery实现点击按钮弹窗</title>
</head>
<body>
<button name="button1" id="button1">按钮</button>

</body>
</html>

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

dom对象转jQuery对象,直接使用$()方法
jquery对象转dom对象,使用数组的方式,或者使用jQuery对象的get()方法
使用jQuery对象获得dom对象时,如果目标对象不存在就返回undefined,不会报错
使用documents对象获得dom对象是,如果目标对象不存在就返回undefined,会报错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        window.onload = function () {
            //获得dom对象
            var elementById = document.getElementById("radio");
            // dom对象转换成jQuery对象
            var $radio = $(elementById);
        }
        $(function () {
            //获得jQuery对象
            var $radio1 = $("#radio");
            //将jQuery对象转换成dom对象
            //方式一,通过数组的方式
            var radio1Element = $radio1[0];
            //方式二,通过jQuery对象的get()方法
            var newVar = $radio1.get(0);
        });
    </script>
    <title>jQuery对象和dom对象的相互转换</title>
</head>
<body>
<h1>jQuery对象和dom对象的相互转换</h1>
<input name="radio" type="radio" id="radio">
</body>
</html>

jQuery选择器(与css的选择器类似)

基本选择器

"*":选择所有的元素
"#id":通过id选择元素,id选择器
".class":通过类名选择,类选择器
还可以通过标签的名字选择,标签选择器

选择器	实例	选取
[*](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_all.asp.htm)	$("*")	所有元素
[#id](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_id.asp.htm)	$("#lastname")	id="lastname" 的元素
[.class](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_class.asp.htm)	$(".intro")	所有 class="intro" 的元素
[element](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_element.asp.htm)	$("p")	所有元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 200px;
            height: 50px;
            background: aqua;
            display: inline-block;
        }
    </style>
  <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
  <script>
      $(function (){
            $("#a").click(function (){
                //使用jQuery对象的css()方法设置css属性,前一个参数是属性名,后一个参数是属性值
                $("#b1").css("background","red");
            });
            $("#b").click(function (){
                $("span").css("background","red");

            });
          $("#c").click(function (){
              $(".bu").css("background","red");

          });
          $("#d").click(function (){
              $("*").css("background","red");

          });

      })
  </script>
    <title>基础选择器</title>
</head>
<body>
<button id="a">选择id为b1</button>
<button id="b">选择span标签</button>
<button id="c">选择class为bu的</button>
<button id="d">全部选择</button>
<button></button>
<button></button><br>

<div id="b1">id=b1</div>
<div class="bu">class=bu</div>
<div></div>
<span style="display: block;background: aqua;width: 200px;height: 50px ">span</span>

</body>
</html>

层次选择器

通过标签选择
parent > child:子选择器,选择下一级所有子元素
prev + next:选择下一个元素
prev ~ nexts:选择后面所有的同级元素
siblings:选择所有同级的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div.mini {
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
    $(function (){

        // 改变所有div的背景颜色
        $("#b1").click(function (){
            $("div").css("background","#0000FF");
        })
        //改变 <body> 内子(第一层) <div> 的背景色
        $("#b2").click(function (){
            $("body>div").css("background","#FF0033");
        })
        //改变 id 为 one 的下一个 <div> 的背景色
        $("#b3").click(function (){
            $("#one+div").css("background","#0000FF");
        })
        //改变 id 为 two 的元素后面的所有兄弟(同级)<div>的元素的背景色
        $("#b4").click(function (){
            $("#two~div").css("background","#0000FF");
        })
        //改变 id 为 two 的元素所有 <div> 兄弟元素
        $("#b5").click(function (){
            $("#two").siblings("div").css("background","#0000FF");
        })


    })
    </script>
    <title>层次选择器</title>
</head>
<body>
<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"
       id="b3"/>
<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为
# #0000FF" id="b4"/>
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为
#0000FF" id="b5"/>
<hr/>
<div id="one" class="mini">
    div id 为 one
</div>
<div id="two">
    div id 为 two
    <div id="two01">
        id two01
    </div>
    <div id="two02">
        id two02
    </div>
</div>
<div id="three" class="mini">
    div id 为 three
    <div id="three01">
        id three01
    </div>
</div>
</body>
</html>

基础过滤选择器

":first":选择第一个元素
":last":选择最后一个
":not(selector)":选择不符合条件的
":even":选择索引是偶数的
":odd":选择索引是奇数的
":eq(index)":选择索引是index的
":gt(index)":选择索引大于index的
":lt(index)":选择索引小于index的
":header":选择所有标题元素
":animated":选择正在执行动画的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基础过滤选择器-应用实例</title>
  <style type="text/css">
    div,span{
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float:left;
      font-size: 17px;
      font-family:Roman;
    }

    div.mini{
      width: 80px;
      height: 30px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family:Roman;
    }
  </style>
  <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function (){
      //*****改变第一个 div 元素的背景色为 #0000FF
      $("#b1").click(
              function (){
                // $("div:first").css("background", "#0000FF");
                $("div:eq(0)").css("background", "#00FF00");
              }
      )

      //*****改变最后一个 div 元素的背景色为 #0000FF
      //小伙伴可以理解成 基础过滤器就是写 简单select
      //所谓最后一个指的是是从上到下，从左到右去搜，最后的一个
      //老韩要求：不需要你记得住, 但是可以看懂...
      $("#b2").click(
              function (){
                $("div:last").css("background", "#0000FF");
              }
      )

      //***改变class不为 one 的所有 div 元素的背景色为 #0000FF
      $("#b3").click(
              function (){
                $("div:not(.one)").css("background", "#0000FF");
              }
      )
      //********改变索引值为偶数的 div 元素的背景色为 #0000FF
      $("#b4").click(
              function (){
                $("div:even").css("background", "#0000FF");
              }
      )
      //********改变索引值为奇数的 div 元素的背景色为 #0000FF
      $("#b5").click(
              function (){
                $("div:odd").css("background", "#0000FF");
              }
      )

      //*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF

      $("#b6").click(
              function (){
                $("div:gt(3)").css("background", "#0000FF");
              }
      )

      //改变索引值为等于 3 的 div 元素的背景色为 #0000FF

      $("#b7").click(
              function (){
                $("div:eq(3)").css("background", "#0000FF");
              }
      )

      //**改变索引值为小于 3 的 div 元素的背景色为 #0000FF
      $("#b8").click(
              function (){
                $("div:lt(3)").css("background", "#0000FF");
              }
      )

      //****改变所有的标题元素的背景色为 #0000FF
      $("#b9").click(
              function (){
                $(":header").css("background", "#0000FF");
              }
      )

    });
  </script>
</head>
<body>
<h1>H1标题</h1>
<h2>H2标题</h2>
<h3>H3标题</h3>

<input type="button" value="改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
<hr/>
<div id="one" class="mini">
  div id为one
</div>
<div id="two">
  div id为two
  <div id="two01">
    id two01
  </div>
  <div id="two02">
    id two02
  </div>
</div>

<div id="three" class="one">
  div id为three class one
  <div id="three01">
    id three01
  </div>
</div>
</body>
</html>

内容过滤选择器

":context(text)":选择元素中含有text的元素
":empty":选择元素中内容为空的元素(没有子元素或者文本内容为空)
":parent":选择元素中内容不为空的元素(有子元素或者文本内容不为空)
":has(selector)":选择元素中含有selector选择器的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>内容过滤选择器应用实例</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }

    div.mini {
      width: 80px;
      height: 30px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family: Roman;
    }
  </style>
  <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //********改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF
      $("#b1").click(
              function () {
                $("div:contains('di')").css("background", "#0000FF")
              }
      )

      //**************改变不包含子元素(或者文本元素) 的 div 的背景色为 pink
      $("#b2").click(
              function () {
                $("div:empty").css("background", "pink")
              }
      )

      //******改变含有 class 为 mini 元素的 div 元素的背景色为 green

      $("#b3").click(
              function () {
                //这个写法是选择 有 class='.mini' 的div的父元素(div)
                $("div:has(.mini)").css("background", "pink")
                //这个是选择有 class='.mini' div
                //$("div.mini").css("background", "pink");
              }
      )
      //****改变含有子元素(或者文本元素)的div元素的背景色为 yellow
      $("#b4").click(
              function () {
                $("div:parent").css("background", "yellow")
              }
      )
      //****改变索引值为大于 3 的 div 元素的背景色为 #0000FF
      $("#b5").click(
              function () {
                $("div:gt(3)").css("background", "#0000FF")
              }
      )

      //***改变不含有文本 di; 的 div 元素的背景色 pink
      //不要求，小伙伴记住, 但是需要可以看懂.
      $("#b6").click(
              function () {
                $("div:not(:contains('di'))").css("background", "pink")
              }
      )

    });
  </script>
</head>
<body>

<input type="button" value="改变含有文本 ‘di’ 的 div 元素的背景色为 black" id="b1"/>
<input type="button" value="改变不包含子元素(或者文本元素) 的 div 的背景色为 pink" id="b2"/>
<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 green" id="b3"/>
<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 yellow" id="b4"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色 pink" id="b6"/>
<hr/>
<div id="xxxx">
  <div id="one" class="mini">
    div id为one
  </div>
</div>

<div id="two">
  div id为two
  <div id="two01">
    id two01
  </div>
  <div id="two02">
    id two02
  </div>
</div>

<div id="three" class="one">
  div id为three class one
  <div id="three01">
    id three01
  </div>
</div>

<div id="four" class="one">
  XXXXXXXXXX
</div>
<div id="five" class="one"></div>
<div id="mover">
  执行动画
</div>
</body>
</html>

可见度过滤选择器

":hidden":选择元素中不可见的元素
":visible":选择元素中可见的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可见度过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //*****改变所有可见的div元素的背景色为 #0000FF
            $("#b1").click(
                function () {
                    $("div:visible").css("background", "red");
                }
            )
            //**选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
            $("#b2").click(
                function () {
                    $("div:hidden").css("background", "green");
                    $("div:hidden").show();
                }
            )
            //**选取所有的文本隐藏域, 并打印它们的值
            $("#b3").click(
                function () {
                    //1. 先得到所有的hidden 元素
                    //2. $inputs 是一个jquery对象，而且是数组对象
                    var $inputs = $("input:hidden");
                    //alert("length= " + $inputs.length)
                    //3. 遍历-认真
                    //方式1 - for
                    // for (var i = 0; i < $inputs.length; i++) {
                    //     //这里input 就是一个dom对象
                    //     var input = $inputs[i];
                    //     console.log("值是= " + input.value);
                    // }
                    //方式2 - jquery each() 可以对数组遍历
                    // 老韩说明
                    //(1) each 方法，遍历时，会将 $inputs 数组的元素
                    //    取出, 传给 function() {} -> this
                    $inputs.each(function (){
                        //这里可以使用this获取每次遍历的对象
                        //this 对象是是dom对象
                        console.log("值是(dom方式)=" + this.value);

                        //也可以将this -> jquery 对象使用jquery方法取值
                        console.log("值是(jquery方式)=" + $(this).val())
                    })

                }
            )
        });
    </script>
</head>
<body>

<input type="button" value="改变所有可见的div元素的背景色为 #0000FF" id="b1"/> <br/><br/>
<input type="button" value="选取所有不可见的div, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/> <br/><br/>
<input type="button" value="选取所有的文本隐藏域, 并打印它们的值" id="b3"/> <br/><br/>
<hr/>

<input type="hidden" value="hidden1"/>
<input type="hidden" value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden" value="hidden4"/>

<div id="one" class="visible">
    div id为one
</div>

<div id="two" class="visible">
    div id为two
</div>

<div id="three" class="one">
    div id为three
</div>

</body>
</html>

属性过滤选择器

"[attribute]":选择元素中含有attribute属性的元素
- 用法：$("div[id]")
"[attribute=value]":选择属性中含有attribute属性,且属性值为value的元素
- 用法：$("input[name='newsletter']")
"[attribute!=value]":选择属性中含有attribute属性,且属性值不为value的元素,没有attribute属性的元素也会被选中
- 用法：$("input[name!='newsletter']")
"[attribute^=value]":选择属性中含有attribute属性,且属性值为value开头的元素
- 用法：$("input[name^='news']")
"[attribute$=value]":选择属性中含有attribute属性,且属性值为value结尾的元素
- 用法： $("input[name$ ='news']")
"[attribute*=value]":选择属性中含有attribute属性,且属性值含有value的元素
- 用法：$("input[name*='man']")

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>属性过滤选择器-应用实例</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }

    div.mini {
      width: 30px;
      height: 30px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family: Roman;
    }


    div.visible {
      display: none;
    }
  </style>
  <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //*****含有属性title 的div元素.
      $("#b1").click(
              function () {
                $("div[title]").css("background", "green");
              }
      )

      //****属性title值等于test的div元素
      $("#b2").click(
              function () {
                $("div[title='test']").css("background", "green");
              }
      )

      //属性title值不等于test的div元素(没有属性title的也将被选中)

      $("#b3").click(
              function () {
                $("div[title!='test']").css("background", "green");
              }
      )

      //属性title值 以te开始 的div元素
      $("#b4").click(
              function () {
                $("div[title^='te']").css("background", "green");
              }
      )

      //属性title值 以est结束 的div元素
      $("#b5").click(
              function () {
                $("div[title$='est']").css("background", "green");
              }
      )

      //属性title值 含有es的div元素
      $("#b6").click(
              function () {
                $("div[title *= 'es']").css("background", "green");
              }
      )

      //选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
      $("#b7").click(
              function () {
                $("div[id][title *= 'es']").css("background", "green");
              }
      )

    });
  </script>
</head>
<body>

<input type="button" value="含有属性title 的div元素." id="b1"/><br/><br/>
<input type="button" value="属性title值等于test的div元素" id="b2"/><br/><br/>
<input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/><br/><br/>
<input type="button" value="属性title值 以te开始 的div元素" id="b4"/><br/><br/>
<input type="button" value="属性title值 以est结束 的div元素" id="b5"/><br/><br/>
<input type="button" value="属性title值 含有es的div元素" id="b6"/><br/><br/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/><br/><br/>

<div id="one" title="test">
  div id为one test
</div>

<div id="one-1" title="texxx">
  div id为one-1 texxx
</div>

<div id="one-2" title="xxxest">
  div id为one-2 xxxest
</div>

<div id="one-3" title="xxxesxxxxxt">
  div id为one-3 xxxesxxxxxt
</div>

<div id="two" title="ate">
  div id为two
</div>

<div id="three" class="one">
  div id为three
</div>
</body>
</html>

子元素过滤选择器
1. ":nth-child(index/even/odd/equation)":子元素选择器,可以通过索引以及索引的形式获取元素
  - 用法：$("ul li:nth-child(2)")
2. ":first-child":获取元素的第一个子元素
  - 用法：$("ul Ii:first-child")
3. ":last-child":获得最后一个元素
  - 用法：$("ul Ii:last-child")
4. ":only-child":获得只有一个的子元素
  - 用法：$("ul li:only-child")

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子元素过滤选择器示例-应用实例</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 70px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }
    div.visible {
      display: none;
    }
  </style>
  <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //****每个class为one的div父元素下的第2个子元素
      $("#b1").click(
              function () {
                $("div .one:nth-child(2)").css("background", "yellow");
              }
      )

      //*****每个class为one的div父元素下的第一个子元素
      //老师再说 $("div .one")
      $("#b2").click(
              function () {
                $("div .one:first-child").css("background", "green");
                //$("div .one:nth-child(1)").css("background", "green");
              }
      )


      //*****每个class为one的div父元素下的最后一个子元素
      $("#b3").click(
              function () {
                $("div .one:last-child").css("background", "red");
              }
      )


      //**如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
      $("#b4").click(
              function () {
                $("div .one:only-child").css("background", "pink");
              }
      )

    });
  </script>
</head>
<body>

<input type="button" value="每个class为one的div父元素下的第2个子元素" id="b1"/><br/><br/>
<input type="button" value="每个class为one的div父元素下的第一个子元素" id="b2"/><br/><br/>
<input type="button" value="每个class为one的div父元素下的最后一个子元素" id="b3"/><br/><br/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/><br/><br/>


<div class="one">
  <div id="one" class="one">
    XXXXXXXXX id=one
  </div>
  <div id="two" class="one">
    XXXXXXXXX id=two
  </div>
  <div id="three" class="one">
    XXXXXXXXX id=three
  </div>
  <div id="four" class="one">
    XXXXXXXXX id=four
  </div>
</div>

<div class="one">
  <div id="five" class="one">
    XXXXXXXXX id=five
  </div>
</div>
</body>
</html>

表单属性过滤选择器
1. ":enabled":选择表单中启用的元素
  - 用法：$("input:enabled')
2. ":disabled":选择表单中没有启用的元素
  - 用法：$("input:disabled")
3. ":checked":选择表单中复选框中被选中的元素
  - 用法：$("input:checked")
4. ":selected":选择下拉选择框中被选中的元素
  - 用法：$("select option:selected")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单对象属性过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function (){
            //*利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值

            $("#b1").click(
                function () {
                    //老师解读
                    //$jquery对象.val() , 如果() 是空的，就表示返回value
                    //$jquery对象.val('值') , 就表示给该对象value设置值
                    $("input[type='text']:enabled").val("台球");
                }
            )

            //利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值

            $("#b2").click(
                function () {
                    //老师解读
                    //$jquery对象.val() , 如果() 是空的，就表示返回value
                    //$jquery对象.val('值') , 就表示给该对象value设置值
                    $("input[type='text']:disabled").val("足球");
                }
            )
            //利用 jQuery 对象的 length 属性获取多选框/复选框选中的个数
            $("#b3").click(
                function () {
                    alert($("input[type='checkbox']:checked").length);
                }
            )
            //****利用 jQuery 对象的 text() 方法获取下拉框选中的内容
            $("#b4").click(
                function () {
                    //如果我们希望选择指定的select , 可以加入属性过滤选择器
                    //var $selects = $("select[属性='值'] option:selected");
                    var $selects = $("select option:selected");
                    $selects.each(function (){
                        alert("你选择了= " + $(this).text())
                    })
                }
            )

        });
    </script>
</head>
<body>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值" id="b1"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值" id="b2"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/><br/><br/>
<br>
<input type="text" value="篮球1"/>
<input type="text" value="篮球2"/>
<input type="text" value="篮球3" disabled="true"/>
<input type="text" value="篮球4" disabled="true"/>
<br>
<h1>选择你的爱好</h1>
<input type="checkbox" value="爱好1"/>爱好1
<input type="checkbox" value="爱好2"/>爱好2
<input type="checkbox" value="爱好3"/>爱好3
<input type="checkbox" value="爱好4"/>爱好4
<br>
<h1>选项如下:</h1>
<select name="job" size=9 multiple="multiple">
    <option value="选项1">选项1^^</option>
    <option value="选项2">选项2^^</option>
    <option value="选项3">选项3^^</option>
    <option value="选项4">选项4^^</option>
    <option value="选项5">选项5^^</option>
    <option value="选项6">选项6^^</option>
</select>

<select id="hsp" name="edu">
    <option value="博士">博士^^</option>
    <option value="硕士">硕士^^</option>
    <option value="本科">本科^^</option>
    <option value="小学">小学^^</option>
</select>
</body>
</html>

表单元素选择过滤选择器

[:input](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_input.asp.htm)	$(":input")	所有元素
[:text](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_input_text.asp.htm)	$(":text")	所有 type="text" 的元素
[:password](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_input_password.asp.htm)	$(":password")	所有 type="password" 的元素
[:radio](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_input_radio.asp.htm)	$(":radio")	所有 type="radio" 的元素
[:checkbox](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_input_checkbox.asp.htm)	$(":checkbox")	所有 type="checkbox" 的元素
[:submit](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_input_submit.asp.htm)	$(":submit")	所有 type="submit" 的元素
[:reset](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_input_reset.asp.htm)	$(":reset")	所有 type="reset" 的元素
[:button](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_input_button.asp.htm)	$(":button")	所有 type="button" 的元素
[:image](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_input_image.asp.htm)	$(":image")	所有 type="image" 的元素
[:file](mk:@MSITStore:D:\2023\第二阶段 Javaweb\JavaWeb学习资料\JavaWeb学习资料\资料\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/jquery/selector_input_file.asp.htm)	$(":file")	所有 type="file" 的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单选择器-应用实例</title>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //选择所有的button
            //这里我们就不绑定事件，直接演示
            //老师解读 $(":button") 会选择<input type="button" value="按钮1"/><br/>
            //还会选择  <button>按钮2</button>
            var $button = $(":button");
            alert("$button 大小=" + $button.length)//3

            //得到type="button" 的元素
            //老韩解读 $("input[type='button']") 只会得到 <input type="button" value="按钮1"/>
            var $button2 = $("input[type='button']");
            alert("$button2 大小=" + $button2.length)//1

            //得到<button />按照元素标签取值
            //老韩解读 $("button") 只会按照元素标签获取 <button>按钮2</button>
            var $button3 = $("button");
            alert("$button3 大小=" + $button3.length)//2
        });
    </script>
</head>
<body>
<form>
    <input type="text"/><br/>
    <input type="checkbox"/><br/>
    <input type="radio"/><br/>
    <input type="image" src="../image/2.png" height="100"/><br/>
    <input type="file"/><br/>
    <input type="submit"/><br/>
    <input type="reset"/><br/>
    <input type="password"/><br/>
    <input type="button" value="按钮1"/><br/>
    <select>
        <option/>
    </select><br/>
    <textarea></textarea><br/>
    <button>按钮2</button>
    <button>按钮3</button>
    <br/>
</form>
</body>
</html>

jquery操作dom对象的属性

创建节点
1. 创建节点：使用jQuery的工厂函数 $()：$ (html标签)；会根据传入的html标记字符串创建一个jQuery对象，并返回.
2. 动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入到文档中；
3. 当创建单个元素时，需注意闭合标签和使用标准的XHTML格式.例如创建一个元素，可以使用$("\")或$("\\"),但不能使用$("")或$("")
4. 创建文本节点就是在创建元素节点时直接把文本内容写出来；创建属性节点也是在创建元素节点时一起创建
修改属性
1. css():该方法可以一次修改一个属性
2. attr():该方法可以一次修改多个属性,也可以用来获取属性
  1. 传入一个参数时,就是获取属性
  2. 传入两个参数时,就是设置属性
3. removeAttr():删除指定的属性
4. jQuery对象的方法大多数都一个方法实现多个功能,既能设置属性,也能获取属性
添加元素(插入)
- 内部插入法
  1. append():将传进进去的jQuery对象追加到调用方法jQuery对象的最后一个子元素的后面
  2. prepend():将传进进去的jQuery对象追加到调用方法jQuery对象的第一个子元素的前面
  3. appendTo():将调用方法的jQuery对象加入到指定的jQuery对象的最后一个子元素的后面
  4. prependTo():将调用方法的jQuery对象加入到指定的jQuery对象的第一个子元素的前面
- 外部插入法
  1. after():将指定的jQuery对象插入到调用方法的jQuery对象后面
  2. before():将指定的jQuery对象插入到调用方法的jQuery对象前面
  3. insertAfter():将调用方法的jQuery对象加入到指定的jQuery对象后面
  4. insertBefore():将调用方法的jQuery对象加入到指定的jQuery对象前面
dom对象的移动(也是使用after()方法或者before()方法)
删除dom对象(节点)
1. remove():删除调用该方法的dom对象(包括子节点),并返回它的引用
2. empty():清空调用该方法的dom对象的所有后代节点和该节点的内容(文本)
复制节点(克隆节点)
1. clone():仅克隆该节点,不具备该节点的事件
2. clone(ture):设置参数为true,会将该节点的事件一同克隆
替换节点
1. replaceWith():将调用方法的dom对象替换成指定的dom对象
2. replaceAll():将指定的dom对象替换为调用方法的dom对象
样式操作
1. addClass():给调用该方法的dom对象添加一个class属性
2. removeClass():如果没有指定参数,将调用方法的dom对象的所有class属性删除,如果指定了class的名字,就删除指定的class属性
3. toggleClass():样式切换,当调用该方法的dom对象存在指定的class属性,就将其删除,如果不存在,就添加该class属性
4. hasClass():判断一个class属性是否存在,存在就返回true,反之返回false
获取和设置html、文本和值
1. html():获取html内容(当html标签是双标签时使用,单标签时使用val()方法)
2. text():获得标签内的文本内容
3. val():获得value属性的值,设置值的时候可以同时设置多个值(传进一个数组即可),给数组类型的jQuery对象设置值必须传数组类型的参数(只有一个参数也要)
常用遍历节点的方法
1. children():获得所有的子节点(下一级节点)元素
2. next():获得同级节点的下一个节点元素
3. nextAll():获得后面所有同级节点元素
4. prev():获得同级节点的是一个节点元素
5. prevAll():获得前面所有同级节点元素
6. siblings():获得所有的同级节点元素
7. next().eq(index):获得后面指定index的同级节点元素
8. next().filter():获得后面过滤后的指定节点元素
jQuery对CSS-DOM的操作
1. 获取和设置元素的样式属性：css()
2. 获取和设置元素透明度：opacity属性
3. 获取和设置元素高度，宽度：height(),width("20).在设置值时，若只传递数字，则默认单位是px.如需要使用其他单位则需传递一个字符串，例如$("p:first").height("2em");
4. 获取元素在当前视窗中的(以窗口的左上角为原点)相对位移：offset(),其返回对象包含了两个属性：top,Ieft.该方法只对可见元素有效
5. prop()是将一个属性设置为真或假,如果没有该属性就先添加,如果有就修改

数据交互(JSON与AJAX)

JSON是JavaScript一个内置的对象(JavaScript Object Notation)
- JSON 指的是 JavaScript 对象标记法（JavaScript Object Notation）
- JSON 是一种轻量级的数据交换格式
- JSON 具有自我描述性且易于理解
- JSON 独立于语言,是一种特殊规则的文本
在前端JSON与JSON格式字符串的转化
1. JSON.stringify():将一个JSON对象转化为JSON格式的字符串
2. JSON.parse():将一个JSON格式的字符串转化为JSON对象
java中Json对象与Json字符串的转换
- 需要使用到Gson.jar包
- 使用Gson对象的toJson()方法可以将一个Java的对象转为Json格式的字符串
- 使用Gson对象的fromJson()方法可以将一个Json格式的字符串转化为一个Java对象
- 数据交互就通过Json格式的字符串传递实现

package com.json;

import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;

import java.lang.reflect.Type;
import java.util.ArrayList;
import java.util.HashMap;

/**
 * @Projectname: json_ajax
 * @Filename: JavaJson
 * @Author: 杨逸
 * @Data:2023/4/14 10:10
 * @Description: TODO
 */
public class JavaJson {
    public static void main(String[] args) {
        //创建一个javaBean对象
        Book book = new Book("韩顺平零基础学Java", 1);
        //创建一个gson工具对象,用于进行json对象操作
        Gson gson = new Gson();
        //使用Gson对象的toJson()方法,将一个javaBean对象转换成Json格式的字符串
        String s = gson.toJson(book);
        System.out.println(s);
        //使用Gson对象的fromJson()方法,将一个Json格式的字符串转换成一个Java(Json对象)对象
        /**
         * 传进一个Json格式的字符串和一个目标对象的class类对象
         * 这里是利用反射的机制创建Book对象
         */
        Book book1 = gson.fromJson(s, Book.class);
        System.out.println(book1);

        /**
         * List集合转Json字符串
         * Json字符串转List集合
         */
        ArrayList<Book> books = new ArrayList<>();
        books.add(new Book("西游记",2));
        books.add(new Book("三国演义",3));
        //List集合转Json字符串,也是使用toJson()方法,将list集合对象传进去
        String s1 = gson.toJson(books);
        System.out.println(s1);
        //list集合的Json格式字符串转list集合对象
        //也是使用fromJson()方法,传进一个Json格式的list集合字符串和list集合和存储对象类的全路径
        Type type = new TypeToken<ArrayList<Book>>() {}.getType();//这里通过TypeToken对象的匿名内部类的getType()方法获得类的全路径
        /**
         * 这里为什么需要大括号?因为TypeToken对象的无参构造器是被protected修饰的(跨包是不能访问的)
         * 所有需要使用匿名内部类来间接调用它的无参构造器
         * 为什么要使用到泛型?因为getType()方法是通过泛型指定的类型来动态获得对应类的全路径
         * 没有使用泛型,运行时会报错
         */
        System.out.println(type);
        Object bookList = gson.fromJson(s1, type);
        System.out.println(bookList);

        /**
         * Map集合对象转Json格式字符串
         * Json格式字符串转Map集合对象
         */

        HashMap<String, Book> stringBookHashMap = new HashMap<>();
        stringBookHashMap.put("k1",new Book("java入门",5));
        stringBookHashMap.put("k2",new Book("python入门",6));
        //转Json格式字符串
        String s2 = gson.toJson(stringBookHashMap);
        //Json格式字符串转Map集合对象
        //获得全路径
        Type type1 = new TypeToken<HashMap<String,Book>>() {}.getType();
        //转Map集合对象
        Object bookMap = gson.fromJson(s2, type1);
        System.out.println(bookMap);
    }
}

AJAX
1. AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML)
2. AjaX是一种浏览器异步发起请求，局部更新页面的技术

使用AJAX技术实现验证用户名是否可用

前端创建一个XMLHttpRequest对象,用于传输局部的数据
使用它的open()和send()方法发送请求
通过他的onreadystatechange事件(该事件监听需要在send()方法前监听)监控服务器返回的数据
前端部分

<!DOCTYPE html>
<html lang="en">
<head>
<!--    <base href="/json_ajax/">-->
    <meta charset="UTF-8">
    <style>
        #a{
            color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            //给按钮绑定点击事件
            var elementsByTagName = document.getElementById("b");
            elementsByTagName.onclick=function(){
                //创建一个XMLHttpRequest对象(AJAX引擎对象)
                var xmlHttpRequest = new XMLHttpRequest();
                //获得表单中用户名的信息
                var elementById = document.getElementById("uname");
                var value = elementById.value;

                //使用open()和send方法准备发送数据
                //open()方法的参数:第一个:请求类型,第二个:请求目标URL,第三个:是否异步(true)
                xmlHttpRequest.open("GET","/json_ajax/loginCheckServlet?uname="+value,true);
                /**
                 * 在调用send()方法前绑定onreadystatechange事件
                 * 当AJAX对象的statechange发生改变时会触发该事件
                 *
                 */
                xmlHttpRequest.onreadystatechange = function(){
                    //当readystate=4,且状态码为200时
                    if (xmlHttpRequest.readyState==4&& xmlHttpRequest.status==200){
                        var responseText = xmlHttpRequest.responseText;//获得返回的信息
                        //显示到相应的位置
                        console.log(responseText)
                        var elementById1 = document.getElementById("a");
                        if (responseText == ""){
                            elementById1.innerText = "用户名不可用";
                        }else {
                            elementById1.innerText = "用户名可用";
                        }
                        var elementsByTagName1 = document.getElementsByTagName("div");
                        elementsByTagName1.item(0).innerHTML = responseText;
                    }
                }
                //使用send()方法正式发送,如果是post请求,该方法就需要传入参数
                xmlHttpRequest.send();
            }
        }

    </script>
    <title>使用ajax验证用户名是否可用</title>
</head>
<body>
<h1>用户注册</h1>
<form action="/json_ajax/loginCheckServlet">
用户名:<input type="text" id="uname" name="username">&nbsp;<input type="button" value="检验" id="b">&nbsp;<span id="a"></span>
    <br><input type="submit" value="注册">
</form>
<h1>返回的JSON数据</h1>
<div id="div1"></div>
</body>
</html>

后端部分

package com.ajax;



import com.google.gson.Gson;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * @Projectname: json_ajax
 * @Filename: LoginCheckServlet
 * @Author: 杨逸
 * @Data:2023/4/15 9:54
 * @Description: TODO
 */
public class LoginCheckServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获得表单的参数
        String uname = req.getParameter("uname");
        if ("king".equals(uname)){
            User user = new User(uname);
            //转JSON字符串
            Gson gson = new Gson();

            String s = gson.toJson(user);
            //响应
            resp.setContentType("text/html;charset=utf-8");
            PrintWriter writer = resp.getWriter();
            writer.write(s);
            writer.flush();
            writer.close();
        }else {
            resp.setContentType("text/html;charset=utf-8");
            PrintWriter writer = resp.getWriter();
            writer.write("");
            writer.flush();
            writer.close();
        }
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}

jQuery操作AJAX

$.ajax()方法的常用参数
1. url:请求的地址
2. type:请求的方式get或post
3. data：发送到服务器的数据。将自动转换为请求字符串格式
4. success:成功后的回调函数(参数:data,status,xmlHttpRequest)
5. error:失败后的回调函数(参数:data,status,xmlHttpRequest)
6. dataType:返回的数据类型,常用json或text
.get()方法和.post()方法常用参数(本质调用的还是$.ajax())
- url:请求的URL地址
- data:请求发送到服务器的数据
- success:成功时回调函数
- type:返回内容格式，xml,html,script,json,text
$.getJS0N()方法的常用参数
- url:请求发送的哪个URL
- data:请求发送到服务器的数据
- success:请求成功时运行的函数

代码演示(完成用户可用的验证)
前端部分

<!DOCTYPE html>
<html lang="en">
<head>
<!--    <base href="/json_ajax/">-->
    <meta charset="UTF-8">
    <style>
        #a{
            color: red;
        }
    </style>
    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function (){
            $("#b").click(function (){
                //发出AJAX请求
                // $.ajax({
                //     url:"/json_ajax/loginCheckServlet2",
                //     type:"POST",
                //     data:{//这里给的是JSON格式的数据
                //         username:$("#uname").val(),
                //         date:new Date(),
                //     },
                //     error:function(){
                //         //失败后的回调函数
                //         console.log("失败后的回调函数");
                //     },
                //     success:function(data,status,xhr){
                //         console.log(data);
                //         $("#div1").html(data);
                //         var username = JSON.parse(data).username;
                //         if ("king"==username){
                //             $("#a").html("用户名不可用")
                //         }else{
                //             $("#a").html("用户名可用")
                //         }
                //
                //         //成功的回调函数
                //         console.log("成功的回调函数被调用");
                //     },
                //     datatype:"JSON"
                // });

                //$.get()方法的使用
                //$.get()的参数不用指定参数名,但需要按循序传入,
                // 依次是url,date,success,datatype

                // $.get(
                // "/json_ajax/loginCheckServlet2",
                // {//这里给的是JSON格式的数据
                //     username:$("#uname").val(),
                //         date:new Date()
                // },function(data,status,xhr) {
                //         console.log(typeof data);
                //         $("#div1").html(JSON.stringify(data));
                //         if ("king" == data.username) {
                //             $("#a").html("用户名不可用");
                //         } else {
                //             $("#a").html("用户名可用");
                //         }
                //         console.log("get的成功回调函数");
                //     },
                //     "JSON"
                // );

                //$.post()方法的使用,与$.get()方法的使用方式一样
                // $.post(
                //     "/json_ajax/loginCheckServlet2",
                //     {//这里给的是JSON格式的数据
                //         username:$("#uname").val(),
                //         date:new Date()
                //     },function(data,status,xhr) {
                //         console.log(typeof data);
                //         $("#div1").html(JSON.stringify(data));
                //         if ("king" == data.username) {
                //             $("#a").html("用户名不可用");
                //         } else {
                //             $("#a").html("用户名可用");
                //         }
                //         console.log("post的成功回调函数");
                //     },
                //     "JSON"
                // );

                //使用$.getJSON()方法
                //当需要使用get请求获得JSON格式的数据时,就用$.getJSON()方法
                $.getJSON(
                    "/json_ajax/loginCheckServlet2",
                    {//这里给的是JSON格式的数据
                        username:$("#uname").val(),
                        date:new Date()
                    },function(data,status,xhr) {
                        console.log(typeof data);
                        $("#div1").html(JSON.stringify(data));
                        if ("king" == data.username) {
                            $("#a").html("用户名不可用");
                        } else {
                            $("#a").html("用户名可用");
                        }
                        console.log("getJSON的成功回调函数");
                    }
                );

            })
        })
    </script>
    <title>使用ajax验证用户名是否可用</title>
</head>
<body>
<h1>用户注册</h1>
<form action="/json_ajax/loginCheckServlet2">
用户名:<input type="text" id="uname" name="username">&nbsp;<input type="button" value="检验" id="b">&nbsp;<span id="a"></span>
    <br><input type="submit" value="注册">
</form>
<h1>返回的JSON数据</h1>
<div id="div1"></div>
</body>
</html>

后端部分

package com.ajax;

import com.google.gson.Gson;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * @Projectname: json_ajax
 * @Filename: LoginCheckServlet2
 * @Author: 杨逸
 * @Data:2023/4/15 17:41
 * @Description: TODO
 */
public class LoginCheckServlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");//这里的参数取决于$.ajax()方法data参数的内容
        System.out.println(req.getParameter("date"));
        Gson gson = new Gson();
        resp.setContentType("text/JSON;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        if("king".equals(username)){
            User user = new User(username);
            String s = gson.toJson(user);
            writer.write(s);
        }else{
            User user = new User("不存在");
            String s = gson.toJson(user);
            writer.write(s);
        }

        writer.flush();
        writer.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

如果觉得文章对你有用，请随意赞赏

原创

jQuery的使用教程

http://anyi.space/archives/1711030299924

作者

杨逸

发布于

2023-05-14

更新于

2024-03-21

许可协议

CC BY 4.0

jQuery的使用教程

jQuery的使用教程(一个js的库)

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

jQuery选择器(与css的选择器类似)

jquery操作dom对象的属性

数据交互(JSON与AJAX)

作者

发布于

更新于

许可协议

评论