JQuery基础

最新推荐文章于 2018-11-28 13:57:00 发布

MMMMMMMay

最新推荐文章于 2018-11-28 13:57:00 发布

阅读量459

点赞数 3

分类专栏： java 文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_36066908/article/details/75212636

版权

java 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JQuery

jQuery
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery 很容易学习。

jQuery就是一个JavaScript 库，里面封装了很多js的方法。

jQuery 选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。
$(“p”) 选取 p标签元素。
$(“p.intro”) 选取所有 class=”intro” 的p标签元素。
$(“p#demo”) 选取所有 id=”demo” 的 p标签元素。

选择器语法	描述	案例
$(“#myDiv”)	查找 ID 为”myDiv”的元素	goto
$(“div”)	根据给定的元素标签名匹配所有元素	goto
$(“.myClass”)	根据给定的css类名匹配元素	goto
$(“div,span,p.myClass”)	将每一个选择器匹配到的元素合并后一起返回,你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内	goto
$(“form input”)	在给定的祖先元素下匹配所有的后代元素	goto
$(“form > input”)	在给定的父元素下匹配所有的子元素	goto
$(“label + input”)	匹配所有紧接在 prev 元素后的 next 元素	goto

最常用的：id，calss，标签这三个是最常用的。

AJAX

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示

优点：

减轻服务器的负担,按需取数据,最大程度的减少冗余请求。
局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验。
基于xml标准化,并被广泛支持,不需安装插件等进一步促进页面和数据的分离。
节省用户带宽。
-

所有实例如下：

<%@ 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 'myjquery.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">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <style type="text/css">
        div{
            width: 500px;
            background:#F0F0F0;
            height:30px;
            border:1px red solid;
            font-size: 25px;
        }
    </style>
    <script type="text/javascript" src="./plugin/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        /*AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。*/
         $(document).ready(function(){
            $("#ALAX").click(function(){
                $("#TESTAL").load("./index.jsp");
            });
         });
         /*$.get() 方法通过 HTTP GET 请求从服务器上请求数据。*/
         $(document).ready(function(){
            $("#BUGET").click(function(){
                $.get("./index.jsp",function(data,status){
                    $("#GET").text("数据："+data+"  状态: "+status);
                });
            });
         });
         /*noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。**/
        /* $(document).ready(function(){
            var jq = $.noConflict();//会影响其他的$函数
            jq("#BUNOCONF").click(function(){
                jq("#NOCONF").text("noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。");
            });
         });*/
         /*$(this).hide()演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。*/
         $(document).ready(function(){
            $(".HIDE").click(function(){
                $(this).hide("slow",function(){
                    $(".DIVHIDE").slideToggle("slow");
                });
            });
         });
         /*fadeOut()*/
         $(document).ready(function(){
            $("#FADEOUT1").click(function(){
                $(this).fadeOut();
            });
            $("#FADEOUT2").click(function(){
                $(this).fadeOut("slow");
            });
            $("#FADEOUT3").click(function(){
                $(this).fadeOut(3000);
            });
         });
         /**/
         $(document).ready(function(){
            $("#BIGDIV #BHIDE").click(function(){
                $(this).parents("#BIGDIV").hide(3000);
            });
         });
         /*向上隐藏和向下隐藏*/
         $(document).ready(function(){
            $("#TOGGLE").click(function(){
                $("#TOGGLEHIDE").slideToggle("slow");
            });
         });
         /*animate动画 */
         $(document).ready(function(){
            $(".ANIMATE").click(function(){
                $(".DIVANIMATE").animate({height:'300px',opacity:'0.4'},'slow');
                $(".DIVANIMATE").animate({width:'100px',opacity:'0.1'},3000);
                $(".DIVANIMATE").animate({height:'300px',opacity:'0.9'},'slow');
                $(".DIVANIMATE").animate({width:'300px',opacity:'0.9'},3000);
                $(".DIVANIMATE").animate({height:'30px',opacity:'0.9'},'slow');
            });
         });


         $(document).ready(function(){
                $("#TESTALAX").click(function(){
                    var username=$("#INOUTALAX").val();
                    var password=$("#INOUTALAXPWD").val();
                    $.post("AlaxLogin?username="+username+"&password="+password,function(data){
                         if(data=="0"){
                            alert("失败");
                         }else if(data=="1"){
                            alert("成功");
                         }
                    });
                });
         });

         $(document).ready(function(){
            $("#EACH").bind("click",function(){
                $("li").each(function(){
                    alert($(this).text());
                });
            });
         });

        /*  $(document).ready(function(){
            $("#TESTALAX").bind("click",function(){
                $("form input").each(function(){
                    alert($(this).val());

                });
            });
          });*/

          $(document).ready(function(){
            $("#TESTALAX").bind("click",function(){
                $("form input").each(function(i,n){
                    alert("第"+i+"input:"+$(n).val());
                });
            });
          });

         $(document).ready(function(){
                $("#TESTDIV,span.TESTSPAN,P").css({"fontSize":"20px","color":"red"});
          });

           $(document).ready(function(){
                $("div ul li span").css({"fontSize":"10px","color":"green"});
          });

         $(document).ready(function(){
                $("#UL>li").css({"fontSize":"10px","color":"pink"});
          });

           $(document).ready(function(){
                $("label+input").css({"fontSize":"10px","color":"yellow"});
          });

         /*以逗号隔开的选择器找出来的是这些选择器找出来的数组;以空格隔开的选择器找出来的是最后代元素;以>隔开的选择器是指
         找到前面选择器的儿子;+连接的选择器是在第一个选择器下面找第二个选择器找紧接着元素（结果可能是多个）;
         ~连接的选择器是找第一个选择器下面的之后的兄弟选择器
         */
          $(document).ready(function(){
             $("#REMOVEBU").click(function(){
                $("table tr #td1").remove();
             });
              $("#EMBU").click(function(){
                $("table tr #td2").empty();
             });

          });
    </script>
  </head>

  <body>
     <p id="TESTAL">ALAX</p>
     <button id="ALAX">ALAX</button>
     <hr/>
       <p id="GET">向页面发送 HTTP GET 请求，然后获得返回的结果($GET)</p>
        <button id="BUGET">向页面发送 HTTP GET 请求，然后获得返回的结果($GET)</button>
     <hr/>
     <p id="NOCONF">noConflict()</p>
     <button id="BUNOCONF">noConflict()</button>
     <hr/>
     <div class="HIDE">hide()点击隐藏当前的 HTML元素</div>
     <br/>
      <div class="DIVHIDE">slideToggle</div>
      <hr/>
      <div id="FADEOUT1"></div><br/>
      <div id="FADEOUT2">slow</div><br/>
      <div id="FADEOUT3">3000</div>
      <hr/>
      <h3>慢慢隐藏</h3>
      <div id="BIGDIV">我会慢慢隐藏<button id="BHIDE">hide</button></div>
      <hr/>
      <div id="TOGGLEHIDE">
        <p>jQuery this is myselfstudy</p>
      </div>
      <p id="TOGGLE">点我</p>
      <hr/>
      <div  class="DIVANIMATE" style="background:green"></div> 
      <button class ="ANIMATE">animate动画</button> 
      <hr/>
        <form action="">
        姓名： <input type="text" name="username" id="INOUTALAX"/>
        密码： <input type="text" name="password" id="INOUTALAXPWD"/>
        <button id ="TESTALAX">alax异步验证用户名</button> 
        </form>
        <hr/>
        <ol>
            <li>Number one</li>
            <li>Number two</li>
            <li>Number three</li>
        </ol>
        <button id ="EACH">each</button> 
        <hr/>
        <div id="TESTDIV">WO SHI DIV</div>
        <span class="TESTSPAN">WO SHI SPAN</span>
        <p>WO SHI P</p>
        <hr/>
        <div>
            <ul>
                <li>
                    <span>WO SHI SPAN</span>
                </li>
            </ul>
        </div>

            <ul id="UL">
                <li>
                    WO SHI SPAN
                </li>
            </ul>
            <hr/>
            <form>
    <label>Name:</label>
    <input name="name"  value="qinbo"/>
        <fieldset>
        <label>Newsletter:</label>
        <input name="newsletter" value="qinbo"/>
    </fieldset>
    </form>
        <input name="none" value="qinbo" />
        <hr/>
        <div id="DIV1">
            <ol>
                <li>WO SHI NI</li>
                <li id="IL">WO SHI NI</li>
                <li>WO SHI NI</li>
            </ol>
        </div>
        <hr/>
        <table border="1" width="100px" height="30px">
            <tr>
                <td id="td1">1</td>
            </tr>
            <tr>
                <td id="td2">2</td>
            </tr>
        </table>
        <button id="REMOVEBU">remove</button>
        <button id="EMBU">empty</button>

  </body>
</html>

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 'day0717.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">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="./plugin/jQuery/jquery-1.7.1.min.js"></script>
  </head>
  <script type="text/javascript">
    /*jquery能够获取就可以设置 */

    /*selected , checked , readyonly , disabled,noresize(key=keyvalue)*/
    /*ready()不能和onload连用*/
        // var jq=$.noConflict();/*取别名(不管在哪儿都作用全局)*/
        $(document).ready(function(){
            $("#BUTTON1").click(function(){
                alert($("a").attr("href"));
            });
            /*当点击BUTTON2时对A标签的href属性设置url*/
            $("#BUTTON2").click(function(){
                $("a").attr("href","http://localhost/WebLoginTest/myjquery.jsp");
            });
        });

        $(document).ready(function(){
        /*当点击BUTTON3时对SPAN1标签设置style属性*/
            $("#BUTTON3").click(function(){
                $("#SPAN1").css("color","gray");
            });

            $("#BUTTON4").click(function(){
        /*当涉及到多个参数的修改时就需要用到对象的方式设置多哥属性*/        $("#SPAN1").css({"color":"green","fontSize":"20px"});
            });
            /*移除某个标签的属性*/
            $("#BUTTON5").click(function(){
                $("img").removeAttr("src");
            });
            $("#BUTTON6").click(function(){
                $("img").attr("src","image/wrong.jpg");
            });
            /*获取容器的宽高*/
            $("#BUTTON7").click(function(){
                alert($("#DIV1").height());
                alert($("#DIV1").width());
            });
            /*在一个标签对象上绑定多个事件*/
            $("#BUTTON8").bind({
                mouseover:function(){$("#P1").css("color","pink");},/*鼠标移动到标签上事件*/
                click:function(){$("#P1").hide();},/*点击事件*/
                mouseout:function(){$("#P1").css("fontSize","20px")},/*鼠标移出到标签外*/
                dblclick:function(){$("#P1").show()}/*双击事件*/

            });

            $("input").focus(function(){/*当标签获取焦点事件*/
                $("input").val("我是focus");
            }); 

            $("input").keydown(function(e){ /*键盘事件*/
                    if(e.keyCode==13){
                        alert($(this).val());
                        }
            });
            /*向网页写入内容*/
            $("#BUTTON9").click(function(){
                $("#UL1").append("<li>22222222</li>");
            });
            $("#BUTTON10").click(function(){
                $("<li>hello word!</li>").appendTo("#UL1");
            });
            /*向网页写入内容（写在前面）*/
            $("#BUTTON11").click(function(){
                $("#SPAN2").after("<div>after</div>");
            });
            /*向网页写入内容（写在后面）*/
            $("#BUTTON12").click(function(){
                $("#SPAN2").before("<div>before</div>");
            });
            /*找到first/lastli标签的text内容*/
            $("#BUTTON13").click(function(){
                alert($("li:last").text());
            });
            /*找到input标签且属性不为checked="checked"的标签*/
            $("#BUTTON15").click(function(){
                alert($(".input:not(:checked)").val());    
            });
            /*找到索引为4的span标签*/
            $("#BUTTON16").click(function(){
                alert($("span").eq(4).text()); 
            });
            /*找到索引大于2的span标签*/
            $("#BUTTON17").click(function(){
                $("span:gt(2)").each(function(){
                    alert($(this).text());
                }); 
            });


        });
        /*全局的键盘监听*/
        $(function(){
            document.onkeydown=function(event){
                var event=document.all?window.event:e;
                if(event.keyCode==13){
                    alert($(this).text());
                }
            }
        });
        /*
        $(document).ready();最常用
        $().ready();很少用
        $();常用
        */
  </script>


  <body>
    <span  id ="SPAN" style="color:green;font-size:25px;">This is my JQuery Test</span> </br></br>
    <table width="500px" cellspacing="10" border="0" >
        <tr>
            <td><a href="http://www.baidu.com">GoTOBaiDu</a></td>
            <td><button id="BUTTON1">jquery能够获取就可以设置 </button></td>
            <td><button id="BUTTON2">jquery能够获取就可以设置</button></td>
        <tr>
            <td><span  id ="SPAN1" style="color:green;">JQuery</span></td>
            <td><button id="BUTTON3">css设置属性</button></td>
            <td><button id="BUTTON4">css设置属性</button></td>
        </tr>
            <td><img src="image/right.jpg"/></td>
            <td><button id="BUTTON5">removeAttr()删除属性</button></td>
            <td><button id="BUTTON6">attr()设置属性</button></td>
        </tr>
        <tr>
            <td><div id="DIV1" style="background:pink">DIV</div></td>
            <td><button id="BUTTON7">height(),width()获取宽高</button></td>
        </tr>
        <tr>
            <td><p id="P1">HIDE()</p></td>
            <td><button id="BUTTON8">click(),hide(),dblclick(),bind()-->多事件绑定</button></td>
        </tr>
        <tr>
            <td><input type="text" value="这个是测试focus()"/></td>
        </tr>
        <tr>
            <td><ul id="UL1"><li>1111111</li><li>222222</li></ul></td>
            <td><button id="BUTTON9">append()</button></td>
            <td><button id="BUTTON10">appendTo()</button></td>
        </tr>
        <tr>
            <td><span id="SPAN2">SPAN</span></td>
            <td><button id="BUTTON11">after()</button></td>
            <td><button id="BUTTON12">before()</button></td>
        </tr>
        <tr>
            <td><div style="background:pink;" id="SPAN3">DIV</div></td>
            <td><button id="BUTTON13">parent:first/last</button></td>
        </tr>
        <tr>
            <td><input type="text" value="这个是测试no checked" class="input"/></td>
            <td><input type="text" value="这个是测试checked" checked="checked" class="input"/></td>
            <td><button id="BUTTON15">checked</button></td>
        </tr>
        <tr>
            <td><span>1</span><span>2</span><span>3</span></td>
            <td><button id="BUTTON16">eq()</button></td>
            <td><button id="BUTTON17">gt()</button></td>
        </tr>

    </table>


  </body>
</html>