2. 技术
    3. 04-javaWeb-jQuery

    04-javaWeb-jQuery

    技术2022-07-11  74

    目录

    jQuery

    jquery中效果

    案例1-弹出广告

    选择器总结

    案例2-隔行换色

    属性和css操作总结

    对属性的操作

    对css操作

    案例3-全选或者全不选

    jQuery数据遍历、val设置、标签设置、元素创建

     案例4-省市联动

    选择器——表单对象属性过滤选择器

    案例5-左右移动

    总结

    jQuery

    技术:

            定时器         jQuery

    jquery和html的整合

            jquery是单独的js文件                 通过script标签的src属性导入即可

    获取一个jquery对象

            $("选择器")  或者 jQuery("选择器")

    <script src="../js/jquery-1.11.0.min.js"></script> <body> <input type="text" id="username" value="jack"/> </body> <script> //通过原生js //alert(document.getElementById("username").value) //通过jquery 获取jquery对象 var $username=$("#username"); //var $username=jQuery("#username"); alert($username.val()); </script>

     

    dom对象和jquery对象之间的转换

            dom对象===>jquery对象                         $(dom对象)

    <script> //dom >>>>jquery $(dom对象) //1.获取dom对象 var obj=document.getElementById("username"); //2.转化 var $user=$(obj); alert($user.val()); //alert($user.value);错误的 </script>

            jquery对象===>dom对象                 方式1:                         jquery对象[index]

    <script> //jquery>>>>dom //1.获取jquery独享 var $u=$("#username"); //2.转换 //方式1 var obj = $u[0]; alert(obj.value); </script>

                    方式2:                         jquery对象.get(index)

    <script> //jquery>>>>dom //1.获取jquery独享 var $u=$("#username"); //2.转换 //方式2 var obj=$u.get(0); alert(obj.value); </script>

     

    页面加载:

            js:                 window.οnlοad=function(){}//在一个页面中只能使用一次         jquery 在一个页面中可以使用多次                 方式1:                         $(function(){...})                 方式2:                         $(document).ready(function(){...});

    <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> onload=function(){ alert(12); } /*onload=function(){ alert(34); }*/ $(function(){ alert("abc"); }) $(function(){ alert("ab1c"); }) $(function(){ alert("ab3c"); }) </script>

     

    派发事件:

            $("选择器").click(function(){...});//去掉  on   οnclick=>click         等价于 原生js中                 dom对象.οnclick=function(){....}

    <script type="text/javascript"> $(function(){ //派发事件 $("#bId").click(function(){ alert(123) }); }); </script>

     

            掌握事件:

                    focus                 blur                 submit                 change                 click

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常见事件</title> <style type="text/css"> #e02{ border: 1px solid #000000; height: 200px; width: 200px; } </style> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#e01") .blur(function(){ $("#textMsg").html("文本框失去焦点：blur"); }) .focus(function(){ $("#textMsg").html("文本框获得焦点：focus"); }) .keydown(function(){ $("#textMsg").append("键盘按下：keydown"); }) .keypress(function(event){ $("#textMsg").append("键盘按：keypress"); }) .keyup(function(){ $("#textMsg").append("键盘弹起：keyup"); }); var i = 0; $("#e02").mouseover(function(){ $("#divMsg").html("鼠标移上：mouseover"); }).mousemove(function(){ //$("#divMsg").html("鼠标移动：mousemove , " + i++ ); }).mouseout(function(){ $("#divMsg").html("鼠标移出：mouseout"); }).mousedown(function(){ $("#divMsg").html("鼠标按下：mousedown"); }).mouseup(function(){ $("#divMsg").html("鼠标弹起：mouseup"); }); $("#e03").click(function(){ $("#buttonMsg").html("单击：click"); }).dblclick(function(){ $("#buttonMsg").html("双击：dblclick"); }); }); </script> </head> <body> <input id="e01" type="text" /><span id="textMsg"></span> <br/> <hr/> <div id="e02" ></div><span id="divMsg"></span> <br/> <hr/> <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/> </body> </html>

     

    jquery中效果

            隐藏或展示

                    show(毫秒数)

                    hide(毫秒数)

                    toggle(毫秒数) //切换

            滑入或滑出

                    slideDown(毫秒数):向下滑入                 slideUp(毫秒数):向上滑出

            淡入或淡出

                    fadeIn(int):淡入                 fadeOut(int):淡出

    <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ //藏b1div $("#b1").click(function(){ //$("#b1Div").hide(1000); //$("#b1Div").hide(); //切换 $("#b1Div").toggle(1000); }); //滑出/滑入b2Div $("#b2").click(function(){ //$("#b2Div").slideUp(2000); $("#b2Div").slideToggle(1000); }); //出/淡入b3Div $("#b3").click(function(){ $("#b3Div").fadeOut(1000); }); }) </script> <body> <input type="button" id="b1" value="显示/隐藏 b1Div" /> <div id="b1Div"></div> <br/> <input type="button" id="b2" value="滑出/滑入b2Div"/> <div id="b2Div"></div> <br/> <input type="button" id="b3" value="淡出/淡入b3Div" /> <div id="b3Div"></div> </body>

     

    案例1-弹出广告

    步骤分析：

            1.页面加载成功之后$(function(){...}) 开始一个定时器 setTimeout();

            2.编写展示广告方法 

                    获取div,然后调用效果方法                 设置另一个定时器 隐藏

            3.编写隐藏广告的方法

                    获取div,然后调用效果方法

    <script src="../js/jquery-1.11.0.min.js"></script> <script> $(function(){ //开启一个定时器 2秒之后展示div setTimeout(showAd,2000); }); //编写展示的方法 function showAd(){ //获取div,调用效果 //$("#ad").show(1000); //$("#ad").slideDown(1000); $("#ad").fadeIn(1000); //开启另一个隐藏的定时器 setTimeout("hideAd()",3000); } //编写隐藏方法 function hideAd(){ //$("#ad").hide(1000); //$("#ad").slideUp(1000); $("#ad").fadeOut(1000); } </script> <div id="ad" style="width:100%;display: none;"> <img src="../img/ad_.jpg" width="100%" /> </div>

     

    选择器总结

            基本选择器★

                    $("#id值")  $(".class值")  $("标签名")                   

                    了解:$("*")  所有

                    理解:获取多个选择器 用逗号隔开

                            $("#id值,.class值")

    <script type="text/javascript"> $(function(){ //<input type="button" value="选择 id为 one 的元素." id="btn1"/> $("#btn1").click(function(){ $("#one").css("background-color","#ff0"); }); //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> $("#btn2").click(function(){ $(".mini").css("background-color","#ff0"); }); // <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> $("#btn3").click(function(){ $("div").css("background-color","#ff0"); }); // <input type="button" value="选择 所有的元素." id="btn4"/> $("#btn4").click(function(){ $("*").css("background-color","#ff0"); }); //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> $("#btn5").click(function(){ $("span,#two").css("background-color","#ff0"); }); }) </script>

     

            层次选择器 ★

                    a b:a的所有b后代                 a>b:a的所有b孩子                 a+b:a的下一个兄弟(大弟弟)                 a~b:a的所有弟弟

    <script type="text/javascript"> $(function(){ // <input type="button" value="选择 body内的所有div元素." id="btn1"/> $("#btn1").click(function(){ $("body div").css("background-color","#f0f"); }); // <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> $("#btn2").click(function(){ $("body>div").css("background-color","#f0f"); }); // <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> $("#btn3").click(function(){ $("#one+div").css("background-color","#f0f"); }); // <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> $("#btn4").click(function(){ $("#two~div").css("background-color","#f0f"); }); }) </script>

     

            基本过滤选择器:★

                    :frist 第一个——div:first                 :last 最后一个                 :odd  索引奇数                 :even 索引偶数                 :eq(index) 指定索引                 :gt(index) >                 :lt(index) <

    <script type="text/javascript"> $(function(){ // <input type="button" value="选择第一个div元素." id="btn1"/> $("#btn1").click(function(){ $("div:first").css("background-color","#0f0"); }); // <input type="button" value="选择最后一个div元素." id="btn2"/> $("#btn2").click(function(){ $("div:last").css("background-color","#0f0"); }); // <input type="button" value="选择索引值为偶数 的div元素." id="btn3"/> $("#btn3").click(function(){ $("div:even").css("background-color","#0f0"); }); // <input type="button" value="选择索引值为奇数 的div元素." id="btn4"/> $("#btn4").click(function(){ $("div:odd").css("background-color","#0f0"); }); // <input type="button" value="选择索引值等于3的div元素." id="btn5"/> $("#btn5").click(function(){ $("div:eq(3)").css("background-color","#0f0"); }); // <input type="button" value="选择索引值大于3的div元素." id="btn6"/> $("#btn6").click(function(){ $("div:gt(3)").css("background-color","#0f0"); }); }); </script>

     

            内容过滤:

                    :has("选择器"):包含指定选择器的元素

    <script type="text/javascript"> // <input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/> $(function(){ $("#btn1").click(function(){ $("div:has('.mini')").css("background-color","#0ff"); }); }); </script>

     

            可见过滤:

                    :hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none                 :visible 

    <script type="text/javascript"> $(function(){ // <input type="button" value=" 选取所有可见的div元素" id="b1"/> $("#b1").click(function(){ $("div:visible").css("background-color","#f0f"); }); // <input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> $("#b2").click(function(){ $("div:hidden").css("background-color","#f0f").show(1000); }); }); </script>

     

            属性过滤器:★

                    [属性名]                 [属性名="值"]   （!=   ^=    *=    $=）

    <script type="text/javascript"> $(function(){ // <input type="button" value="选取含有 属性title 的div元素." id="btn1"/> $("#btn1").click(function(){ $("div[title]").css("background-color","#ff0"); }); // <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> $("#btn2").click(function(){ $("div[title='test']").css("background-color","#ff0"); }); }); </script>

     

            表单过滤:

                    :input  所有的表单子标签  input select textarea button                 input   只要input 标签

    <script type="text/javascript"> $(function(){ //<input type="button" value="选取所有的表单子元素" id="btn1"/> $("#btn1").click(function(){ //alert($("#form1 :input").size()); 16 //alert($("#form1 :input").length); alert($("#form1 input").size());//去掉不是input 的 个数 }); }); </script>

     

    案例2-隔行换色

    技术分析:

            1.页面加载成功         2.获取所有的（大于0行的）奇数行 添加一个css         3.获取所有的（大于0行的）偶数行 添加一个css

    <script> $(function(){ /*$("tr:odd").css("background-color","#BCD68D"); $("tr:even").css("background-color","#FFFFCC");*/ /*$("tr:gt(0):odd").css("background-color","#BCD68D"); $("tr:gt(0):even").css("background-color","#FFFFCC");*/ $("tr:gt(0):odd").addClass("odd"); $("tr:gt(0):even").addClass("even"); }) </script>

     

    属性和css操作总结

    对属性的操作

            attr():设置或者获取元素的属性

                            方式1:获取

                                    attr("属性名称")

                            方式2:设置一个属性

                                    attr("属性名称","值");

                            方式3:设置多个属性  json

                                    attr({                                         "属性1":"值1",                                         "属性2":"值2"                                 })

                    removeAttr("属性名称"):移除指定属性

            添加class属性的时候 

               1、attr("class","值");

               2、addClass("指定的样式值"); 相当于 attr("class","指定的样式值");                  removeClass("指定的样式值");

    对css操作

            操作元素的style属性

                    css():获取或者设置css样式

                            方式1:获取        

                                    css("属性名")

                            方式2:设置一个属性

                                    css("属性名","值")

                            方式3:设置多个

                                    css({                                         "属性1":"值1",                                         "属性2":"值2"                                 });

            获取元素的位置和尺寸

                    offset()

                    width()                 height()

    <script type="text/javascript"> $(document).ready(function(){ //1.1给username添加title属性 var $username=$("[name='username']"); $username.attr("title","姓名"); //1.2获取username的title属性 alert($username.attr("title")); //1.3给username添加value和class属性 $username.attr({ "value":"许多多", "class":"textClass" }); //1.4删除username的class属性 $username.removeAttr("class"); //2.1给username添加一个名为textClass的样式 $username.addClass("textClass"); //2.2删除username的名为textClass的样式 $username.removeClass("textClass"); //4.1 给div添加边框样式 var $div=$("div"); $div.css("border","1px solid red"); //4.2 获取div的表框样式 //alert($div.css("border")); //4.3 给div添加多种样式 $div.css({ "width":"100px", "height":"100px", "background-color":"#ff0" }); //5 获取div的位置 alert($div.offset().left) //6 获取div的高和宽 alert($div.width()); }); </script>

     

    案例3-全选或者全不选

    需求:

            就是将内容中复选框的选中状态和最上面的复选框状态保持一致

    步骤分析:

            1.确定事件 复选框的单击事件         2.函数中                 a.获取当前复选框的选中状态  attr(获取不了checked属性)|prop                 b.获取所有的复选框修改他们的状态

    注意:

            若jquery版本>1.6           统一使用 prop操作元素的属性

    <script type="text/javascript"> $(function(){ $("#selectAll").click(function(){ //1.获取当前元素的选中状态 this在funcation中代表的是当前dom对象 //alert(this.checked); //jQuery对象，获取属性 //alert($(this).attr("checked"));//获取undefined //alert($(this).prop("checked")); //2.获取所有的复选框 让其状态和 当前元素的选中状态保持一致 $(".itemSelect").prop("checked",$(this).prop("checked")); }); }); </script>

     

    jQuery数据遍历、val设置、标签设置、元素创建

            遍历数组

                    数组.each(function(){});——用 this 或者 参数 对属性进行操作

    <script type="text/javascript"> $(function(){ $("#b1").click(function(){ //1.获取文本隐藏 //alert($("input:hidden").size()) $("input:hidden").each(function(index,dom){ //function不带参数时，用this //alert(this.value) //alert($(this).val()); //function带有参数时，第一个为索引，第二个为dom对象 alert(index)//索引 alert(dom.value) }); }); </script>

                    $.each(数组对象,function(){});

    <script> $("#b2").click(function(){ $.each($("input:hidden"), function() { alert($(this).val()); }); }); }); </script>

     

            注意:

                    each的function中可以加两个参数 index和dom                         index是当前遍历的索引值                         dom指代的是当前遍历的dom对象(开发中一般使用this即可)  

            设置或者获取value属性

                    jquery对象.val():获取                 jquery对象.val("...."):设置  

    <script type="text/javascript"> $(document).ready(function(){ var $username=$("[name='username']"); $username.prop("value","许木木"); //3.1 获取 username的value属性的值 //alert($username.val()); //3.2 设置 username的默认值为"许多多" $username.val("许多多") </script>

     

            设置获取获取标签体的内容 

                    html()                 text()                                  xxxxx():获取标签体的内容                 xxxxx("....."):设置标签体的内容

    <script type="text/javascript"> //3.3通过html获取div标签体的内容 var $div=$("div"); alert($div.html()); //3.4通过html设置div标签体的内容 $div.html("已满18,请带墨镜"); //3.5通过text获取div标签体的内容 alert($div.text()); //3.6通过text设置div标签体的内容 $div.text("已满18,请带墨镜"); </script>

                            设置的区别:

                                    html:会把字符串解析                                 text:只做为普通的字符串

                            获取的区别:

                                    html:获取的html源码                                 text:获取只是页面展示的内容

    ​ <script type="text/javascript"> //3.7 两者设置值的区别 $div.html("<a href='#'>我是一个连接</a>");//就是一个超链接 $div.text("<a href='#'>我是一个连接</a>");//表括号里面的内容作为普通的字符串 //3.8 两者获取值的区别 alert($("#sp").html());//获取源码 外span<a href='#'>内超链</a></span> alert($("#sp").text());//获取只是展示的内容 外span内超链 </script> ​

     

            创建一个元素: $("<标签></标签>") <script type="text/javascript"> //创建一个元素: $("<标签></标签>") $div.html($("<a href='#'>").html("我")); }); </script>         追加元素——文档操作

            内部插入

                    a.append(c):将c插入到a的内部(标签体)后面——尾                 a.prepend(c):将c插入到a的内部的前面——头

    <script type="text/javascript"> $(document).ready(function(){ //0.获取两个元素 var $city=$("#city"); var $fk=$("#fk"); //1.在city的后面内部追加 反恐——添加到末尾 //$city.append($fk); //2.在city的前面内部插入 反恐——添加到头部 $city.prepend($fk) }); </script>

                         appendTo                 prependTo

            外部插入

                    a.after(c):将c放到a的后面                 a.before(c):将c放到a的前面

    <script type="text/javascript"> $(document).ready(function(){ //获取两个元素 var $city=$("#city"); var $p2=$("#p2"); //1.在 p2 的后面插入 city $p2.after($city); //2.在 p2 的前面插入 city $p2.before($city); }); </script>

                                   a.insertAfter(c)                 a.insertBefore(c)

            删除

                    empty() 清空元素——原码中还有                 remove() 删除元素

    <script type="text/javascript"> $(document).ready(function(){ //1.清空ul //$("#city").empty(); //2.移除天津 remove $("#tj").remove(); }); </script>

     

     案例4-省市联动

    步骤分析:

            1.确定事件 省份的下拉选变化的时候  change

            2.编写函数

                    a.获取当前省份的value值

                    b.通过数组获取该省下的所有市 返回值:数组

                    c.遍历数组,拼装成option元素 追加到市下拉选即可 append

                    注意:每次改变的时候初始化市的值.

    <script type="text/javascript"> $(function(){ $("[name='pro']").change(function(){ //1、获取市下拉选 var $city=$("[name='city']"); //2、先初始化 市选项 $city.html($("<option>").html("-请选择-")); //3、省所在的数字下标 var pro=$(this).val(); //4、获取所有的市数组，转为jQuery对象 var cities=$(arr[pro]); //alert(cities); //遍历数组,拼装成option 追加到市下拉选中 cities.each(function(){ $city.append("<option>"+this+"</option>"); //$city.html("<option>"+this+"</option>"); //每次只写一个 }); }); }); </script>

     

     

    选择器——表单对象属性过滤选择器

                    :enabled   可用的                 :disabled  不可用                 :checked         选中的(针对于单选框和复选框的)                 :selected         选中的(针对于下拉选)

    案例5-左右移动

    步骤分析:

            1.确定事件 单击事件         2.编写函数:                 移动一个:                         右边的下拉选追加一个 左边的选中的第一个                 移动多个:                         左边选中的 追加到右边的下拉选中                 移动全部:                         将左边的所有option追加到右边的下拉选中

    <script type="text/javascript"> $(function(){ //移动一个 $("#toRight1").click(function(){ //儿子选择器 ">" $("#left>option:selected:first").appendTo($("#right")); }); //移动多个 $("#toRight2").click(function(){ //后代选择器 " " $("#right").append($("#left option:selected")); }); //移动全部 $("#toRight3").click(function(){ $("#right").append($("#left option")); }); }) </script>

     

    总结

    js类库:         对常见的方法和对象进行了封装,方便开发. jquery和html的整合         script标签的src属性导入即可 获取jquery对象         $("选择器")  jQuery("选择器") dom对象和jquery对象之间的转换         dom>>>jquery                         $(dom对象)         jquery>>>dom                 方式1:                         jquery对象[index]                 方式2:                         jquery对象.get(index) jquery中的选择器:         基本选择器★                 $("#id值") $(".class值") $("标签名")  $("#one,#two,.mini")         层次选择器★                 a b:后代                 a>b:孩子                 a+b:大弟弟                 a~b:弟弟们                          基本过滤选择器                 :frist :last                 :odd :even                 :eq(index) :gt|lt..         内容过滤                 :has(选择器)         可见性过滤                 :visible                 :hidden 指代是 input type=hidden  和 display:none         表单的过滤                 :input         属性选择器:                 [属性]                 [属性=值]         表单对象属性过滤选择器                 :enabled   可用的                 :disabled  不可用                 :checked         选中的(针对于单选框和复选框的)                 ★:selected         选中的(针对于下拉选)

    派发事件:                 jquery对象.事件(function(){.....});                 例如:                         $("#btn1").click(function(){.....});

    页面加载成功         $(function(){                 ......         })                  $(document).ready(function(){                         }); 属性和css         attr():设置或者获取属性(1.6版本之前)                 attr("属性名"):获取                 attr("属性名","值"):设置一个                                 attr({                         "属性名":"值",                         "属性名":"值"                  })                          prop():和attr用法一致(1.6版本之后)                  (了解)addClass("存在的样式")                  removeAttr()         (了解)removeClass()           css():设置获取获取元素的样式                 css("属性"):获取                 css("属性","值"):设置                 css({                         "":"",                         "":"",                         "":""                 }):设置多个                  width()         heigh 

    文档处理:                 内部插入(2组方法 任意掌握一组)                 外部插入(2组方法 任意掌握一组)                 删除(empty remove)

    val、html、text

                    val :设置或者获取values属性                 html:获取或者设置标签体内容 遍历数组         方式1:                 jquery对象.each(function(){});         方式1:                 $.each(jquery对象,function(){}); 在jquery中创建元素         $("<标签名>").prop(属性).html(内容)  

     附件：相关代码、文档、学习视频https://download.csdn.net/download/qq_38247809/12569224

    Processed: 0.010, SQL: 9