JQuery的简略查阅学习

最新推荐文章于 2023-09-30 17:29:07 发布

安好安好33

最新推荐文章于 2023-09-30 17:29:07 发布

阅读量237

点赞数

分类专栏：前端文章标签： js jquery css

本文链接：https://blog.csdn.net/weixin_44093711/article/details/108966809

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了JQuery的核心特点、DOM操作、选择器、事件处理、动画效果、AJAX和分页操作，强调了其在JavaScript开发中的便利性和效率提升。通过实例展示了JQuery如何简化DOM操作、事件绑定和数据交互，以及在分页显示中的应用。

摘要由CSDN通过智能技术生成

JQuery

是JavaScript类库

特点

1）jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。
2）jQuery是免费、开源的，使用MIT许可协议。
3）jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。
4）除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页

开始入门

jQuery实现根据id、class和标签名称查找DOM元素的方式几乎与CSS选择器是一模一样的。不过需要注意的是，两者还是有些细微的差别的，jQuery选择器返回的是jQuery对象，document.querySelector和document.querySelectorAll返回的是DOM对象。

<body>
<div id="parent">

</div>

<table>
    <tr>
        <td>column1</td>
        <td>column2</td>
        <td>column3</td>
    </tr>
    <tr class="row">
        <td>column1</td>
        <td>column2</td>
        <td>column3</td>
    </tr>
    <tr class="row">
        <td>column1</td>
        <td>column2</td>
        <td>column3</td>
    </tr>
    <tr class="row">
        <td>column1</td>
        <td>column2</td>
        <td>column3</td>
    </tr>
</table>

<ul>
    <li class="list">
        cate1
    </li>
    <li class="list">
        cate1
    </li>
    <li class="list">
        cate1
    </li>
</ul>
<script>

    $(function () {
        // 获取 id 为 parent 的 div 元素
       // var parEl = $("#parent");
        //var parEl = document.getElementById("parent");
        // 获取所有 tr 标签元素
       // var trEls = $("tr");
        //var trEls = document.getElementsByTagName("tr");
        // 获取所有 class 为 list 的元素
       //var listEls =$(".list") ;
        //var listEls = document.getElementsByClassName("list");
        //console.log(parEl.nodeName + "+" + trEls.length + "+" + listEls.length);
        
        //css选择器
        var parEl = document.querySelector("div");
        console.log(parEl.nodeName);//div
        var parEl2 = document.querySelectorAll("tr");
        console.log(parEl2.length)
        var parEls = document.querySelectorAll("li");
        console.log(parEls.length)

    })
</script>
</body>

操作dom节点属性

增加节点，删除节点获取节点修改节点
toggleClass

$("button").click(function(){
  $("p").toggleClass("main");
});

这串代码的意思就是：如果所有 <p> 元素有class=‘main’就去除，若没有则加上，

 $("li").toggleClass("active",true);//有没有都加上（fasle不管有没有都去掉）

为li标签加上class属性，传入toggleClass方法的函数必须返回一个字符串值，并且这个返回的字符串值是以空格分隔的class名

<body>
<ul class="article-list">
    <li><h3>原始章第一</h3></li>
    <li><p>夫道、德、仁、义、礼五者，一体也。</p></li>
    <li><p>道者，人之所蹈，使万物不知其所由。</p></li>
    <li><p>德者，人之所得，使万物各得其所欲。</p></li>
    <li><p>仁者，人之所亲，有慈慧恻隐之心，以遂其生存。</p></li>
    <li><p>义者，人之所宜，赏善罚恶，以立功立事。</p></li>
    <li><p>礼者，人之所履，夙兴夜寐，以成人伦之序。</p></li>
</ul>
</body>
<script>
    var i =0;
    $("li").toggleClass(function () {
        i++;
        return 'bgcolor'+i;
    })
</script>

attr
attr(属性名)
获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined ）
attr(属性名, 属性值)
设置属性的值 （为所有匹配的元素设置一个属性值$(“.txt”).attr(“value”)"，前面跟"$(“.txt”).val()"一样

 $("a:first").attr("href","#1")

//获取下面这段HTML中的family2中的第二个链接的href值

<div id="family1"></div>
<div id="family2">
<ul>
    <li><a href="#1">Item 1</a></li>
    <li><a href="#2">Item 2</a></li>
    <li><a href="#3">Item 3</a></li>
    <li><a href="#4">Item 4</a></li>
    <li><a href="#5">Item 5</a></li>
</ul>

<script>
   $(function () {
     //获取下面这段HTML中的family2中的第二个链接的href值
     console.log($("#family2").find("a:nth-child(2)").attr('href'));#1
       console.log($($('ul a')[1]).attr('href'));//#2
       console.log($("li").first().next().children().attr("href"));//#2
       console.log($($("#family1").siblings().find('a')[1]).attr('href'));//#2
         console.log($("#family2").children().children().first().next().children().attr("href"))//#2

   })


</script>

遍历：
each

//在每个文章后面加入字数
    // var pList = $('p');
    // for (var i = 0; i < pList.length; i++ ) {
    //     var cont = $(pList[i]).text() ;
    //     $(pList[i]).text(cont + cont.length);
    // }

    $('p').each(function () {
        var cont = $(this).text();
        $(this).text(cont+cont.length)
    })

Dom对象与Jquery对象的转化

jQuery对象---->DOM对象，使用[index]或者get（index）：例如
var $cr = $("#cr"); //这是jQuery对象
var cr =$cr[0]; //从jQuery对象得到DOM对象 方式一
var cr = $cr.get(0) //从jQuery对象得到DOM对象 方式二
DOM对象----->jQuery对象，使用$()把DOM对象包装起来，就可以获得一个jQuery对象，例如：
var cr = document.getElementById("cr"); // 变量cr是DOM对象
var $cr = $(cr); //变量$cr是jQuery对象
转换后可以任意使用jQuery中的方法！

 $(function () {
            //获取dom对象
            var obj = document.getElementById("d");
            //获取jquery对象
            var obj2 = $("#d");

            //dom对象转化成jquery对象
            //$(obj).html("hello jquery");
            //jquery对象转化成dom
            obj2.get(0).innerHTML="hello jquery...."
        });

<body>
      <div id="d"></div>

</body>

window与document

window指浏览器的窗口，document指浏览器窗口中加载的dom元素。在浏览器中，当其中加载的页面超过一屏时， $(w i n d o w) . h e i g h t () 与$ (document).height()的值是不等的

load与ready

load事件在jquery中主要用来代替原生的window.onload
load事件需要页面完全加载完才可以触发事件，所谓的完全加载完，指dom结构加载完毕和所有的链接加载完。比如页面中有大量的图片，必须等每一个图片都加载完，才叫完全加载完毕。
不过，load事件跨浏览器兼容性很差，不推荐使用load事件

$(window).ready(fn),$(document).ready(fn),$('div').ready(fn)等
ready事件不要求等待页面完全加载完，只需要dom结构加载完就可以触发。

ready事件可以同时注册多个，执行时按照事件注册的先后顺序进行。

选择器

1.基本选择器：

 <script src="js/jquery.js"></script>
    <script  type="text/javascript">
       $(function () {
           //1.显示内容
            let val = $("#d1").html();//获得所有的html
           // alert(val)

           let text = $("#d1").text();//获取元素中的所有文本
          //  alert(text)

           //2.添加（将class=d2元素中的内容后面添加字段）
           $(".d2").each(function () {
             //   $(this).html($(this).html()+"加油")
           })

           //3.查看div的个数
           let size = $("div").size();
            alert(size)//4
           //4.将class=d2,id=d1里的内容改变
           $(".d2,#d1").html("java");

            //5.得到所有div中class=d2的位置（index）
               let index = $("div").index($(".d2"));//没找到-1，索引从0开始查找
               alert(index);
       })
    </script>

<body>
      <div id="d1"><a>超链接</a>jquery</div>
      <div class="d2">学习</div>
      <div class="d3">学习</div>
      <div>js</div>
</body>

2.层级选择器：
父子关系、兄弟关系

//1.获取id=d的所有<a>子元素
alert($("#d a").size());
//2.获取id=d的直接<a>子元素
alert($("#d>a").size);
//3.获取 id=d的第一个<p>兄弟元素
alert($("#d+ p").size());
//4.获取id=d的所有<p>兄弟元素
alert($("#d~p").size());
//5.将id=d下的所有子元素<a>的文本颜色设置红色
$("#id d").css({"color":"red"});

<div id="d">
	<a> java</a>
	<p><a>javase</a></p>
	<a>javaee></a>
</div>
<p>go</p>
<p>C</p>

3.基本过滤器：

 <script  type="text/javascript">

             $(function (){
                 //设置表格第一行为红色
              $("tr:first").css({"color":"red"})
                 //表格偶数行为红色 奇数行为黄色(从0开始)
                  $("tr:odd").css({"color":"yellow"})
                  $("tr:even").css({"color":"red"})
                 //除了第一行，其他行为红色
                 $("tr:not(tr:first)").css({"color":"red"})
                 $("tr:gt(0)").css({"color":"yellow"})
                 //设置页面的标题（h标签）
                 $(":header").css({"color":"red"});
             })
    </script>
<body>
        <h2>标题</h2>
        <a href="#">链接</a>
        <h1>商品信息</h1>
        <table border="1">
            <tr>
                <td>商品编号</td>
                <td>商品姓名</td>
                <td>商品评价</td>
                <td>商品价格</td>
            </tr>
            <tr>
                <td>1</td>
                <td>xxx</td>
                <td>好</td>
                <td>100</td>
            </tr>
            <tr>
                <td>2</td>
                <td>xxx</td>
                <td>坏</td>
                <td>90</td>
            </tr>
            <tr>
                <td>3</td>
                <td>xxx</td>
                <td>中</td>
                <td>80</td>
            </tr>
        </table>

</body>

3.2内容过滤选择器
根据元素内部文本内容进行选中
注意：使用祖先后代选择器，我们可以选择出被祖先包含的后代，那么如果我们只想过滤出包含特定后代的祖先呢？我们使用:has(selector) ，例如：
$(“li:has(‘span’)”).css(‘color’, ‘yellow’);
使用li:has(span)过滤出来的不是<span>，是包含了<span>的<li>
添加删除样式名—addClass()和removeClass()
在HTML中class是比较特别的一种属性，class里的值，可以是一个，也可以是多个，多个样式名可以使用空格分隔
而在jQuery里，却很方便，即使class=“foo bar”，我们仍然可以通过addClass(‘test’)将class变为”foo bar test”，保留foo和bar；如果要删除bar，我们可以使用removeClass(‘bar’)，这样foo和test也能保留.
如果removeClass()没有参数，删除所有的样式名！

<style type="text/css">
        .divColor{
            color: brown;
        }
    </style>
    <script  type="text/javascript">
        $(function (){
            //设置含有文本内容java的div字体颜色
            $("div:contains('java')").css({"color":"red"});
            //设置没有子元素的div文本内容为xxxx
           $("div:empty").html("xxxx");
            //设置包含<a>元素的div字体颜色
            $("div:has(a)").css({"color":"yellow"})
            //$("div:has(a)").addClass("divColor");
            //设置所有含有子元素的span字体颜色
            //parent匹配含有子元素或者文本的元素
            //$("div:has(span)").css({"color":"blue"})
            $("span:parent").css({"color":"blue"})

        })
    </script>
</head>

<body>
      <div>my java</div>
      <div>my ios</div>
      <div></div>
      <div>
          <a>bug</a>
      </div>
        <div>
            语言<a>javase</a>
        </div>
        <div>
            <span>调试</span>
        </div>
</body>

3.3可见性过滤选择器：

 <script  type="text/javascript">

            $(function (){
                //1.获取表单中隐藏域中的值
                alert($("input:hidden").val());
             
                //2.设置表格中所有可见tr背景色为红色
                $("tr:visible").css({"color":"red"})
                //3.获取表格中所有隐藏tr中文值
               alert($("tr:hidden").text())
                //将隐藏tr显示出来（show）
                $("tr:hidden").show();
                //将显示的tr隐藏起来
                $("tr:visible").hide();
            })
    </script>
</head>

<body>
     <form>
         <input type="text" name="email">
         <br>
         <input type="hidden" name="id" value="10"><!--隐藏-->
     </form>

        <table>
            <tr style="display: none"><!--隐藏-->
                <td>value 1</td>
            </tr>
            <tr>
                <td>value 2</td>
            </tr>
            <tr>
                <td>value 3</td>
            </tr>
        </table>
</body>

3.4属性过滤选择器：
attribute
^=匹配开始
$=匹配结尾
*=匹配包含

 <script  type="text/javascript">
            $(function (){
                //1.设置所有含有id属性的div字体颜色
                $("div[id]").css({"color":"red"})
                 $"div[id]").style.color = 'red';
                //2.获取name=username的value的值
               // alert($("input:text").val());
                //alert($("input[type='text']").val());
                //注意:attr(属性)拿到属性的值
                alert($("input[name='username']").attr("value"))
                //alert($("[name='username']").val())
                //3.设置所有多选框被选中
                //$("input[type='checkbox']").attr("checked",true);
                //4.设置class中包含item的多选框
                //$("input[type='checkbox'][class*='item']").attr("checked",true)
            })
    </script>
</head>

<body>
   <div id="d">
       这是一个DIV
   </div>
    <form>
        <input type="text" name="username" value="tom">
        <input type="checkbox" class="item1" name="food" value="米饭">米饭
        <input type="checkbox" class="item2" name="food" value="牛奶">牛奶
        <input type="checkbox" class="item3" name="food" value="肉">肉
    </form>
</body>

<input id="ipt" type="text" class="cls_ipt" />
<script type="text/javascript">
    $('input[id=ipt]').val('hello');
</script>
事实上等价于$('#ipt')，而$('input[class=cls_ipt]')也等价于$('.cls_ipt')，但是如果是其他的属性我们就只能属性选择器了

attr()设置或返回被选元素的属性值
3.5子元素过滤器
根据子元素顺序来获取
nth-child根据序号来选择，序号是从1开始，也可以设置odd even的奇偶来设置，也可以通过倍数来设置
first-child 获取第一个
last-child 获取最后一个
only-child获取只有一个子元素

<script  type="text/javascript">
        $(function (){
            //1.设置列表中第2个li的颜色
           // $("ul li:nth-child(2)").css({"color":"red","font-size":30})
            //2.设置列表中第一行字体为红色
           // $("ul li:first-child").css({"color":"red"});
            //3.设置列表中最后一行字体为红色
            //$("ul li:last-child").css({"color":"red"})
            //4.获取ul下只有一个li的信息
            alert($("ul li:only-child").text());
        })


    </script>
</head>

<body>
    <ul>
        <li>j</li>
        <li>a</li>
        <li>v</li>
        <li>a</li>
    </ul>
    <ul>
        <li>c</li>
        <li>+</li>
        <li>+</li>
    </ul>
<ul>
    <li>node</li>
</ul>

3.6表单过滤选择器
失去焦点事件 blur();
trim()去掉字符串左右空格
click()点击事件
submit()表单提交

<script  type="text/javascript">
        $(function (){
                //当username和Pwd文本框失去焦点时候，判断录入的数据不为空
            // $(":text,:password").blur(function (){
            //         let value = $(this).val();
            //         if(value.trim()==""){
            //             alert($(this).attr("name")+"不为空");
            //         }
            //
            //
            // })
            //对button添加点击事件,对表单的提交
            $(":button").click(function (){
                $("form").submit();
            });
        })
    </script>
</head>
<body>
        <form>
            用户名:<input type="text" name="UserName" value="">
            <br/>
            密码:<input type="password" name="Pwd" value="">
            <br/>
            <input type="button" value="提交">
        </form>
</body>

3.7表单对象属性过滤器：

<script  type="text/javascript">
        $(function (){
            $(":button").click(function (){
                //1.获取选中的性别信息
                //alert($(":radio:checked").val());
                //2.获取选中的爱好信息
                // $(":checkbox:checked").each(function (){
                //     alert($(this).val());
                // })
                //3.获取下拉框的值
                alert($("select option:selected").val());
            })
        })
    </script>
</head>

<body>
<form>
    性别:<input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女
    <hr/>
    <input type="text" name="username" value="tom">
    <input type="checkbox" class="item1" name="food" value="米饭">米饭
    <input type="checkbox" class="item2" name="food" value="牛奶">牛奶
    <input type="checkbox" class="item3" name="food" value="肉">肉
    <br/>
    城市:
    <select>
        <option value="">--请选择--</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>
    <br/>
    <input type="button" value="打印">
</form>

文档处理(重要)

元素内追加文本—append() 和 prepend()
使用append可以往一个元素的尾部中追加内容；
使用prepend在元素的头部追加内容。
$(‘p’).append(‘World’);
$(‘p’).prepend(’ World’);
元素外添加内容—after()和before()
preprend和append实际上操作的是元素的内部，如果想在当前元素平级的位置，前方或者后方添加内容，我们则需要使用after和before

$('p').after('<p>World</p>');

$('p').before('<p>World</p>');

复制元素—clone()

var cloned_p = $('p').clone();
$('p').after(cloned_p);

元素整个替换成其他内容—replaceWith()
如果仅仅使用html()或者text()，只能修改标签中的文本，而使用replaceWith是将整个标签替换成其他内容.

$('p').replaceWith('<b>World</b>');

元素包裹—wrap()和wrapInner()
wrap() //用来给某个元素外部再包围一对指定的标签
wrapInner() //在元素内部包围一对标签，请试验一下这个方法

$('p').wrap('<div></div>');
$('p').wrapInner('<div></div>');

清空子元素—empty()
用来清空当前选择器选择到的元素下所有的子元素
如果使用 $(‘body’).empty();
那么整个页面就只剩一个空的了
1.插入：

<script  type="text/javascript">
        $(function (){
           //内部插入
            //1.在select中最后添加一项
            //$("#city").append($("<option>广东</option>"));
           // $("<option>广东</option>").appendTo($("#city"));
            //在select中开始添加一项
            //$("#city").prepend($("<option>广西</option>"));
            //$("<option>西西</option>").prependTo($("#city"));

            //外部插入
            //在select中开始添加一项
           // $("#city option:first").before($("<option>广西</option>"))
            //$("<option>西西</option>").insertBefore($("#city option:first"));
            //$("<h1>标题</h1>").insertBefore($("#city"))
            //在select中最后添加一项
            //"<option>东东</option>".insertAfter($("#city option:last"));
            $("#city option:last").after($("<option>东东</option>"));

        })


    </script>
</head>

<body>

    <select id="city">

        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>


</body>

1.2.删除：
删除元素—remove()
在选择器后面调用remove方法，可以将选择到的元素从页面中删除；
另外，remove还可以在参数里添加选择器，此时，remove会按照选择器进行再次筛选，将筛选的结果删除.

$('li').remove(); //会删除所有的<li>
$('li').remove('.fruit'); //则只会删除class为fruit的<li>

  <script  type="text/javascript">
        $(function (){
          //清空
            //$("#city").empty();
            //删除第一个<option value="北京">北京</option>
            $("#city option:first").click(function (){
                alert('bbbbb')
            })
            //与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
           let a =  $("#city option:first").detach();
            //let a = $("#city option:first").remove();
            $("#show").append(a);
        })
    </script>
</head>
<body>
    <select id="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>
    <div id="show"></div>
</body>

1.3替换与克隆

 <script  type="text/javascript">
        $(function (){
            //将id=d2的div的第二个span替换成  <a>p1</a>
            $("#d1 p:first").click(function (){
                alert("点击");
            })
clone第一个参为true代表他的事件也会被克隆
clone第二个参数为true代表子元素的事件也被克隆
   $("a").mouseover(function (){
                alert("悬停");
            })
            let cp = $("#d1 p:first").clone(true,true);
           // $("#d2 span:last").replaceWith(cp);
            cp.replaceAll($("#d2 span:last"));
        })
    </script>
</head>

<body>
   <div id="d1">
       <p>
           <a>p1</a>
       </p>
       <p>p2</p>
   </div>
    <div id="d2">
        <span>span1</span>
        <span>span2</span>
    </div>
</body>

筛选

1.过滤

<script  type="text/javascript">
        $(function (){
           $("ul li:first").css({"color":"red"});
           $("li").last().css({"font-size":30})
        })
    </script>
</head>
<body>
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul>
</body>

1.2查找：

<script  type="text/javascript">
        $(function (){
          $("p span").css({"color":"red"})
            $("p").find("span").css({"font-size":30});
        })
    </script>
</head>
<body>
    <p>
        <span>Hello</span>, how are you?
    </p>
</body>

jquey中的事件

jquery中事件允许绑定多个函数，而javascript中一个事件只能绑定一个函数

<script  type="text/javascript">
        //页面加载时候执行操作$(document).ready(function)
        // $(function (){
        //     alert("加载1")
        // })
        // $(function (){
        //     alert("加载2")
        // })
        //传统js
        window.onload=function (){
            alert("加载1")
        }
        window.onload=function (){
            alert("加载2")
        }

    </script>

<script  type="text/javascript">
       $(function (){
           //按钮点击事件
           // $(":button").click(function (){
           //     alert("点击")
           // })
           // $(":button").bind("click",function (){
           //     alert("点击1")
           // })
           // //解除绑定
           // $(":button").unbind("click");
           // $("#btn").live('click',function (){
           //      alert("点击3")
           // })
           // // $("#btn").die("click");
           // $("body").append($("<input type='button value='新按钮'>"))
           //bind只能为存在的元素进行事件的绑定，而live它可以以为没有存在，后续添加通过代码**
           //添加的元素绑定事件
       })

    </script>
</head>
<body>
<input type="button" id="btn" value="按钮">
</body>

1.2事件处理
格式:
$(‘input’).on(‘click’, function() {
// code
});
以下是简写

 <script  type="text/javascript">
       $(function (){
       //     $("#btn").click(function (){
       //         alert("多次点击事件2");
       //     })
           // $("#btn").bind("click",function (){
           //     alert("。。。。")
           // })
          //一次点击事件
          //  $("#btn").one("click",function (){
          //      alert("一次点击事件");
          //  })

           //给按钮注册一个mouseenter事件，触发的是点击事件
          $("#btn").click(function (){
              alert("jquery")
              }
          )
           $("#btn").mouseenter(function (){
               $(this).trigger("click")
           })
         
       })
    </script>
</head>
<body>
<input type="button" id="btn" value="按钮">
</body>

1.3事件切换

<script  type="text/javascript">
       $(function (){
            $("div").hide();
            $("h1").hover(function (){
                //鼠标进入事件
               // $("div").show(2000);
               // $("div").slideDown(2000);
                $("div").fadeIn(2000);
            },function (){
                //鼠标离开事件
                //$("div").hide(2000);
               // $("div").slideUp(2000);
                $("div").fadeOut(2000);
            })
       })

    </script>
</head>
<body>
        <h1>jquery介绍</h1>
        <div>
            jquery是xxxxxx
            <br/>
            jquery是xxxxxx
            <br/>
            jquery是xxxxxx
            <br/>
            jquery是xxxxxx
            <br/>
            jquery是xxxxxx

        </div>

</body>

toggle

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

 <script  type="text/javascript">
       $(function (){
            $("img").toggle(function (){
                $(this).attr("src","image/2.jpg");
            },function (){
                $(this).attr("src","image/3.jpg");
            },function (){
                $(this).attr("src","image/1.jpg");
            })
       })
    </script>
</head>
<body>
       <img src="image/1.jpg" width="100" height="100">

</body>

动画

jQuery中，动画效果并不是其擅长的领域，jQuery的宗旨是简化代码
隐藏和显示

  $("#green").hide();
   $("#green").show();

淡入和淡出

$("#red").fadeOut(1000);
$('#red').fadeIn(1000);

简单实现动画效果：

<div align="center">
    <img src="../images/timg.jpg" style="width: 100px">
</div>
<script>
    //鼠标放入1s后宽高增加
    $("img").mouseenter(function () {
            $("img").animate({
                height:"+=200px",
                width:"+=200px",
            },1000)
    })
    //鼠标离开就减少
    $("img").mouseleave(function () {
        $("img").animate({
            height:"-=200px",
            width:"-=200px",
        },1000)

    });
    //自动播放一次
    $('img').trigger('mouseenter');
    $("img").trigger('mouseleave');

    //循环播放
    setInterval(function () {
        $('img').trigger('mouseenter');
        $("img").trigger('mouseleave');
    },2000)
</script>

ajax初体验

第一步：获得xhr对象
第二步：设置一个回调函数
回调函数他的作用就是用于处理服务器响应的数据
第三步：设置请求方式
第四步：通过send方法真正向服务器发送请求
第五步：在回调函数中获取服务器响应的数据

XMLHttpRequest对象详解

1.1 获取xhr对象
new XMLHttpRequest();
1.2 xhr常用属性
1.2.1onreadystatechange:它是绑定回调函数，当服务器响应数据回来后，我们可以在指定的回调函数中进行数据处理
1.2.2readyState描述的http请求的状态
1.2.3status描述的http状态码 200 404 500…
1.2.4获取服务器响应数据
responesText或responseXML
1.3xhr常用方法
1.3.1open:它是用于设置请求方式，url及是否异步
参数1：http请求方式POST/GET
参数2：url路径
参数3：true/false代表是否异步
1.3.2send是真正向服务器发送请求
如果请求方式为get,那么使用send(null);
因为：get请求方式是没有http请求体
只有post请求方式时，才有请求体，所以send的参数只是在post请求时使用
XmlHttpRequest.send(“username=xx&password=xxx”);
1.3.3setRequestHeader
注意：如果请求方式是POST,那么我们在使用时，必须设置一个请求头
xhr.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”);

<script>
    window.onload = function() {
        document.getElementsByTagName("a")[0].onclick = function() {
            //1.获取XhR对象
            var request = new XMLHttpRequest();
            //2.异步 配置ajax请求参数 ：请求类型，请求的url资源，请求方式，默认为true
            // request.open('GET', this.href);
            request.open('GET', this.href + '?=' + new Date())
                //3.将Ajax请求发送到服务器
            request.send(null);
            //4.Ajax对象的事件属性onreadystatechange，不断监听服务器端的响应
            request.onreadystatechange = function() {
                //5.当请求状态为4 响应码为200，表示响应成功，并返回用户数据
                if (request.readyState == 4 && request.status == 200) {
                    document.getElementsByTagName("h3")[0].innerHTML = request.responseText;
                }
            }
        };
    }
</script>

jquery中的ajax

1.load载入远程 HTML 文件代码并插入至 DOM 中。
1.1load方法是将服务器响应的数据直接插入到指定的dom元素中
1.2.jquery中load方法他的请求方式是？
a>有参数请求方式是post
b>没有参数请求时get

  <script  type="text/javascript">
       $(function (){
          //失去焦点的时候
           $("#username").blur(function (){
               //获取用户名
               let usernameValue = $("#username").val();
                let url = "/JavaWebTest/LoadServlet"
               //向服务器发送请求
               $("#username_span").load(url,{'username':usernameValue});
           })
       })

    </script>
</head>

<body>
      用户名:<input type="text" name="username" id="username"><span id="username_span"></span>

</body>

案例：判断输入的名字是否占用
$.ajax的使用：

<script  type="text/javascript">
       $(function (){
          //失去焦点的时候
           $("#username").blur(function (){
               //获取用户名
               let usernameValue = $("#username").val();
                let url = "/JavaWebTest_war_exploded/LoadServlet"
               //向服务器发送请求
              $.ajax({
                  url:"/JavaWebTest_war_exploded/LoadServlet",
                  data:{'username':usernameValue},
                  type:"POST",
                  dataType:"html",
                  success:function (data){
                      //参数data他接收了服务器响应的数据
                      $("#username_span").html(data);
                  }
              })
           })
       })
    </script>
    <body>
      用户名:<input type="text" name="username" id="username"><span id="username_span"></span>
</body>

服务器端：

public class LoadServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
       //解决中文乱码
//        req.setCharacterEncoding("utf-8");
//        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        //获取用户名
        String username =req.getParameter("username");
        if("tom".equals(username)){
            resp.getWriter().write("<font color='red'>用户名被占用</font>");

        }else {
            resp.getWriter().write("<font color='red'>用户名可以使用</font>");
        }
    }

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

$.get()（$.post的使用）：
url,[data],[callback],[type]String,Map,Function,StringV1.0url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

  $.get(url,{"username":usernameValue},function (data){
                    $("#username_span").html(data);
             },"html")

用ajax来判断用户输入的正确还是错误

 @RequestMapping("/ajaxTest2")
    public String getString(String username,String password) {
        //模拟数据中的数据
            String msg = "";
        System.out.println(username);
        System.out.println(password);
            if(username!=null){
                if(username.equals("admin")){
                    msg="用户名正确";
                }else{
                    msg = "用户名有误";
                }
            }
            if(password!=null)
            {
                if(password.equals("111111")){
                    msg="密码正确";
                }else{
                    msg="密码有误";
                }
            }
        return msg;
    }

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
</head>
<script src="${pageContext.request.contextPath}/lib/jquery-3.2.1.js"></script>
<script>
    //用户输入完之后脱离焦点触发ajax请求
    $(function (){
        $("#uer").blur(function (){
            var username = $("#uer").val();
            //alert("aaa");
            $.get({
                url:"/ajaxTest2",
                data:{"username":username},
                success:function (res){
                    if(res ==="用户名正确"){
                        //console.log("用户名正确")
                        $("#userInfo").css("color","green")
                    }else{
                        $("#userInfo").css("color","red")
                    }
                    $("#userInfo").html(res);

                }
            })
        });
        $("#pwd").blur(function (){
            var password = $("#pwd").val();
            //alert("aaa");
            $.get({
                url:"/ajaxTest2",
                data:{"password":password},
                success:function (res){
                    if(res ==="密码正确"){
                        console.log("密码正确");
                        $("#pwdInfo").css("color","green")
                    }else{
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(res);

                }
            })
        })

    })
</script>
<body>
<div>
    用户名:<input type="text" placeholder="请输入用户名" name="username" id="uer">
    <span id="userInfo"></span>
</div>
<div>
    密码:<input type="text" name="password" id="pwd"><br>
    <span id="pwdInfo"></span>
</div>

</body>
</html>

ajax解决跨域问题

跨域：
它是不同的域名（服务器）之间的相互的资源的访问
当协议、域名、端口号任意一个不相同，他们就是不同的域。
正常情况下，因为浏览器安全问题，不同域的资源不可以访问

$.ajax({
	url:url,
	type:"GET",
	dataType:"jsonp",
	jsonpCallback:"jcb",
	success.function(data){
}
})

还提供一种方法是：
$.getJSON(url,[data],[callback])
url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数。

<script  type="text/javascript">
        let url="http://localhost:8080/JavaWebTest_war_exploded/product?callback=?";
     $.getJSON(url,function (data){
        let jsonObj = eval(data);
     })

json跨域解决原理

 <script  type="text/javascript">
       //原理就是我们使用js代码在页面上来添加一个新的<script>标签
       function addScript(src){
           //创建script标签属性
           let script = document.createElement("script");
           //设置script标签属性
           script.setAttribute("type","text/javascript");
           script.src=src;
       }
       //页面完成后，给addScript传递参数，向服务器发送请求
       window.onload=function (){
           addScript("http://localhost:8080/JavaWebTest_war_exploded/product?callback=cb");
       }
       //设置回调函数
       function cb(data){
           let jsonObj = eval(data);
           alert(jsonObj[0].name);
       }
    </script>
</head>
<body>
</body>

传统的跨域方案是JSONP，虽然解决跨域，但是有一个很大的局限性，那就是只支持get请求，不支持其他的请求

分页的介绍

1.物理分页：使用数据库本身提供的分页操作来完成数据查询，查询到的就是当前页的信息。
mysql可以使用limit oracle数据库可以使用rownum来完成。这种方案的优点是性能比较好，但是它不通用
2.逻辑分页：利用数据库的游标来操作（将数据库所有数据操作都查询出来，存储在内存中），性能比较低，通用
分页基本原理：
分页实现可以使用ajax分页，也可以使用服务器端分页，他们原理是一样的
mysql中的limit如何完成分页数据查询操作？
seect * from 表名 limit num1,num2;
num1:代表的是从第几行开始查询，起始值是0
num2:代表的是要查询几条记录
后端操作：
每页显示条数自己规定pageSize
1.例如：查询第二页数据（每页显示5条）
select*from 表名 limit(页码-1)每页条数，(每页条数）
2.总页数的计算
总页数=总条数/每页数
将数据渲染到前端
浏览器页面上展示分页数据时，不仅有后端传递的数据，也有上一页、下一页、首页、尾页…
在浏览器端我们要通过js来进行逻辑操作

完成分页操作的必备条件

1.页码：pageNo 默认是1，会根据上一页、下一页、首页、尾页选择变化。我们通过js来操作
2.每页显示条数pageSize,自己设置
3.总页数
4.总页数=总条数/每页显示条数（要取整）
5.封装的当前页数的数据

javaee经典的三层架构

优点：利用开发与复用结构清晰，利用标准化
缺点：开发难度加大，性能得到一定的消耗
三层架构：
Web层：她主要包含的关于javaweb相关操作，例如request,response,session,cookie等对象操作，它调用业务层来实现具体的功能
业务层：它主要是业务逻辑操作，它不包含web常用对象，它只是java代码
数据访问层（dao层）：它主要是与数据库进行交互，完成crud操作
在完成分页之前先完成产品的查询操作
第一步:创建产品页面，向服务器发送请求（获取所有产品信息）
第二步：创建一个servlet来接受请求，获取所有的产品信息
第三步:创建业务层ProductService
第四步：创建持久化层ProductDao
准备jar包：在这里插入图片描述
还需要个c3p0-config.xml文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery的学习</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.js"></script>
    <style type="text/css">

    </style>
    <script  type="text/javascript">
        //页面加载完成后，向服务器发送请求，来获取产品信息，在表格中显示出来
        $(function (){
            $.ajax({
             url:"/JavaWebTest_war_exploded/ProductServlet",
                type:"POST",
                scriptCharset:'UTF',
                success:function (data){
                    let jsonObj = eval(data);
                    let html='';
                    for(let i=0;i<jsonObj.length;i++){
                       html += "<tr>";
                        html+="<td>"+jsonObj[i].id+"</td>"
                        +"<td>"+jsonObj[i].name+"</td>"
                        +"<td>"+jsonObj[i].count+"</td>"
                        +"<td>"+jsonObj[i].price+"</td>"
                        html+="</tr>";
                    }
                    $("#tab").append(html);
                }
            })
        })
    </script>
</head>
<body>
<div align="center">

    <table class="table table-bordered" id="tab">
        <tr>
            <td>序号</td>
            <td>名称</td>
            <td>数量</td>
            <td>价格</td>
        </tr>
    </table>
</div>
</body>
</html>

web层：

public class ProductServlet extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
            //处理响应数据中文乱码
        resp.setCharacterEncoding("utf-8");
        ProductService productService = new ProductService();
        try {
            List<Product> ps = productService.findAll();
            //将查询到的product对象转化成json响应到浏览器
           String json = JSONObject.toJSONString(ps);
           resp.getWriter().write(json);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    @Override
    public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        this.doGet(req, resp);
    }

service层：

public class ProductService {
    public List<Product> findAll() throws SQLException {
        ProductDao productDao = new ProductDao();

            return productDao.findAll();
    }
}

dao层：

/**
 * 数据库持久层
 */
public class ProductDao {
    //查询所有
    public List<Product> findAll() throws SQLException {
        QueryRunner queryRunner = new QueryRunner(JdbcUtils.getDataSource());
        return  queryRunner.query("select* from pro",new BeanListHandler<Product>(Product.class));
    }
}

完成产品的分页显示

第一步：在浏览器端提供pageNo与pageSize,将他们作为参数传递到服务器

  let pageNo=1;//自己设置第1页
            let pageSize=5;//每页显示条
            $.ajax({
            url:"/JavaWebTest_war_exploded/ProductServlet",
                type:"POST",
                scriptCharset:'UTF-8',
                data:{"pageNo":pageNo,"pageSize":pageSize},
                。。。。。。

第二步：服务器来处理分页
web:

   int pageNo = Integer.parseInt(req.getParameter("pageNo")) ;
        int pageSize = Integer.parseInt(req.getParameter("pageSize")) ;
         ProductService productService = new ProductService();
        try {
            List<Product> ps = productService.findAll(pageNo,pageSize);
            //将查询到的product对象转化成json响应到浏览器
           String json = JSONObject.toJSONString(ps);
           resp.getWriter().write(json);
        } catch (SQLException e) {
            e.printStackTrace();
            //向浏览器发送一条描述错误信息的json信息
        }
    }

service层：

public class ProductService {
    public List<Product> findAll(int pageNo,int pageSize) throws SQLException {
        ProductDao productDao = new ProductDao();

            return productDao.findAll(pageNo,pageSize);
    }
}

dao层：

public class ProductDao {
    //查询所有
    public List<Product> findAll(int pageNo,int pageSize) throws SQLException {
        QueryRunner queryRunner = new QueryRunner(JdbcUtils.getDataSource());
        return  queryRunner.query("select* from pro limit ?,?",
                new BeanListHandler<Product>(Product.class),
                (pageNo-1)*pageSize,pageSize);
    }
}

怎么样在浏览器展示分页条？
在分页条中需要总页数据，也就是说。总页数需要在服务器端查询获得到，需要服务器端返回它。
定一个PageBean这样一个对象，在这个PageBean中我们封装分页需要的数据，将它在服务器端生成，服务器就不需要直接返回List,而是返回一个PageBean的json数据

public class PageBean {
    private int pageNo;//当前页数
    private int pageSize;//每页显示多少条数据
    private int totalCount;//总的记录条数
    private int totalPage;//总页数

    List<Product> content;

我们可以在serivice中来对PageBean进行数据封装，servlet最终是将PageBean转化成json数据响应到浏览器

 //使用PageBean来处理分页数据
    public PageBean findAll(int pageNo,int pageSize) throws SQLException {
        ProductDao productDao = new ProductDao();
        List<Product> ps=productDao.findAll(pageNo,pageSize);

        PageBean pageBean = new PageBean();
        pageBean.setPageNo(pageNo);
        pageBean.setContent(ps);
        pageBean.setPageSize(pageSize);
        //总记录数可以通过dao层来获取到
        int totalCount=productDao.findAllCount();
        //总页数通过(totalCount/pageSize)
        int totalPage =(int)Math.ceil(totalCount*1.0/pageSize) ;
        pageBean.setTotalPage(totalPage);
        pageBean.setTotalCount(totalCount);

        return pageBean;
    }

响应到浏览器的json 数据：
这有点问题：但是在页面中显示是没有问题的

[{"count":20,"id":16,"name":"åŽä¸ºè€³æœº","price":299.0},{"count":10,"id":17,"name":"ç”µé£Žæ‰‡","price":300.0},{"count":29,"id":18,"name":"å†°ç®±","price":2890.0},{"count":10,"id":19,"name":"åŽç¡•ç”µè„‘","price":4950.0},{"count":20,"id":20,"name":"è”æƒ³ç”µè„‘","price":7920.0}]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery的学习</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.js"></script>
    <style type="text/css">

    </style>
    <script  type="text/javascript">
        //页面加载完成后，向服务器发送请求，来获取产品信息，在表格中显示出来
        $(function (){
            let pageNo=4;//自己设置第1页
            let pageSize=5;//每页显示条数
            let totalPage=5;
            $.ajax({
                url:"/JavaWebTest_war_exploded/ProductServlet",
                type:"POST",
                scriptCharset:'UTF-8',
                data:{"pageNo":pageNo,"pageSize":pageSize},
                success:function (data){
                    let jsonObj = eval(data);
                    let html='';
                    for(let i=0;i<jsonObj.length;i++){
                       html += "<tr>";
                        html+="<td>"+jsonObj[i].id+"</td>"
                        +"<td>"+jsonObj[i].name+"</td>"
                        +"<td>"+jsonObj[i].count+"</td>"
                        +"<td>"+jsonObj[i].price+"</td>"
                        html+="</tr>";

                    }
                   //展示分页数据
                    let pageMsg="<ul class='pagination pagination-sm'><li class='disabled'><a href='#' >&laquo;</a></li>";
                    for(let i=0;i<totalPage;i++){
                            pageMsg+= "<li class='active'><a href='#'>"+(i+1)+"</a></li>"
                    }
                    pageMsg+="<li><a href='#'>&raquo;</a></li></ul>"
                    $("#n").append(pageMsg);
                    $("#tab").append(html);
                }
            })
        })
    </script>
</head>
<body>
<div align="center">
    <table class="table table-bordered" id="tab">
        <tr>
            <td>序号</td>
            <td>名称</td>
            <td>数量</td>
            <td>价格</td>
        </tr>
    </table>
    <nav id="n">

    </nav>
</div>
<hr/>
</body>
</html>

由于pageNo数值固定，让分页条有效果，这时候前端页面需要改造下：
关于分页条码
是一个动态生成的数据，需要拼接html代码