jQuery 笔记

缺乏、安全感 2022-04-15 00:25 122阅读 0赞

1→jQuery简介  
1.jQuery引言  
    (1)框架:对现有代码的封装,便于后续的重复利用,提高开发效率.  
        jQuery是一个javascript框架.  
        对javascript代码的封装,javascript功能代码的半成品;  
    好处:  
        简化了javascript开发document.getElementById("");  
        屏蔽浏览器差异 IE WebKit(FF Chrome Safari);  
      
    作用:简化了javascript的开发   
      
        mybatis------> jdbc------>mybatisxx.jar  
        jQuery-------> js  ------>jQuery-1.xx.x.js  
            \*jquery.min 文件经过压缩,便于网络传输  
        运行在服务器端的:servlet+jsp(EL+JSTL)  
        运行在浏览器端的:HTML CSS JavaScript  
          
    使用jquery:  
        1.通过script标签引入外部js文件  
            <script type="text/javascript" src="jquerey-1.8.3"></script>  
        2.另外一个script标签中使用jQuery函数  
            根据id获得对象的方法  
            ID选择器:$("\#id")  
              
            jq.text();        //获取标签体内部的文本  ---->    相当于:dom对象.innerHTML  
            js.css('css属性名','css属性值');  
            \*jquery标签对象支持链式调用  
        3. 通过代码获得dom对象和jquery获得jq对象  
            \*dom对象.js属性或方法  
            \*jq对象.jq方法 | jq属性  
            \*如何获取jq对象:  
                ①通过jq选择器获得jquery对象  
                ②通过dom对象获得jquery对象        $(dom对象)  
                ③通过$('标签文本'),创建一个新的jq对象  $('<td></td>')  
        (4)选择器:通过既定的方式获取对应的标签对象  
            (1)基本选择器:      
                (1)ID选择器:$("\#id")                通过id获取标签对象  
                (2)元素选择器: ("标签名")              通过标签名获取对象  
                (3)类选择器:$(".样式类名")             通过 class的值来获取对象  
                (4)多路选择器:$("标签名,标签名")      
                (5)全选择器:$("\*")  
            (2)层级选择器  
                \*jquery对于多选择器共存时的解析规则:从左到右依此解析  
                $("selectorA selectorB")        后代选择器(包括子代和孙带等)  
                $("selectorA > selectorB")        【重点】(直接仅有子代)子代  选择器  
                $("selectorA+selectorB")        紧邻后续的兄弟选择器,选中紧邻selectorA标签的后续兄弟对象  
                $("selectorA~selectorB")        【重点】所有后续兄弟选择器(以selectorA后续所有兄弟标签)  
                  
            (3)简单过滤选择器  
                :first    $(sel:first)    选择第一个元素  
                :last    $(sel:last)        选择最后一个元素  
                :eq(i)    $(sel:eq(i))    下标为i的元素(下标从0开始)  
                :gt(i)    $(sel:gt(i))    选择下标>i的元素  
                :lt(i)    $(sel:lt(i))    选择下标<i的元素  
                :even    $(sel:even)        选择下标索引为偶数的元素  
                :odd    $(sel:odd)        选择下标索引为奇数 的元素  
                :not    $(sel:not(selectorA))        选择已在范围中排除掉sleectorA元素的其他元素  
              
            (4)内容过滤选择器 ---内容:子标签/标签体中文本  
                :empty                    在已有范围内中选取出没有标签体的元素  
                :parent                    (是父亲)在已有范围内中选取出含有标签体的元素  
                :contains(text)            【重点】在已有范围内中选取出含有对应文本的元素  
                :has(selector)            【重点】在已有范围内中选取出含有SelectorA后代的元素  
                  
            (5)可见性过滤器【重点】  
                visible            可见元素  
                hidden            隐藏的元素  
                  
            (6)属性过滤选择器  
                \['属性名'\]            过滤保留含有"属性名"属性的元素  
                \['属性名=属性值'\]    过滤保留含有"属性名",且该属性值为"属性值"  
                    \*表单属性过滤选择器  
                    :checked        只适用于被选中的 radio和checkbox  
                    :selected        适用于option  
                      
            (7)表达选择器  
                :text            获得文本显示框  
                :checkbox        获得所有的复选框  
                :radio            获得所有的单选按钮  
                  
            (8)遍历:【重点】  
                  
                $(selectorA)        -------->jquery对象 ------>size()    //元素个数  
                                    --------->eq(i) ----------->获得i位置下标的元素  
                  
                \*纯jquery方式操作数组的方式  
                var spans=$("sapn");    //选择全部的span 标签  
                    //遍历多个元素  
                    for(var i=0;i<spans.size();i++)\{  
                        //获取当前元素  
                        var s = spans.eq(i);  
                        console.log(s.text());  
                    \}  
                       
                dom对象操作的方式:  
                    var sp = spans.get(i);            //获得dom对象  
                    console.log($(sp));  
              
              
                jquery特有的each()遍历spans数组  
                    jquery对象.each(function()\{  
                        //this---当前被遍历的jq对象  
                        //$(this)    --当前被遍历的jq对象  
                    \});  
                    <script type="text/javascript">  
                    $(document).ready(function()\{  
                      $("button").click(function()\{  
                        $("li").each(function()\{  
                          alert($(this).text())  
                        \});  
                      \});  
                    \});  
                    </script>  
                      
                 返回指定元素的父标签  
                    children();        返回指定元素的所有子元素 ---->数组  
                    next();            返回相邻直接的下一个兄弟标签  
                    prev();            返回相邻直接的上一个兄弟标签  
                      
                    (1)attr()方法:可以获得对应标签的属性值 attr(“属性名”)  
                        attr()方法:可以设置对应标签的属性值 attr(“属性名”,”属性值”)   
                            注意:  
                            1 如果对应标签中 不存在这个属性,通过attr 还可以添加这个属性  
                            2可以通过attr()方法设置多个属性  
                                例如 $(“\#d”).attr(“class”,”a”).attr(“id”,”c”);  
                                     $(“\#d”).attr(\{  
                                       class:"a",  
                                       id:"c"  
                                    \});

removeAttr()方法:删除一个标签的特定属性 removeAttr(“属性名”)  
                    (2)通过jquery修改 获得css的样式属性  
                        css()方法:可以获取对应标签的css的样式属性 css(“css属性名”)  
                        css()方法:可以设置对应标签的css的样式属性 css(“css属性名”,”css的属性值”)  
                                  
                                注意:可以通过json形式设置多个css的样式属性 css(\{\})  
                                隐藏css(“display”,”none”)   hide(毫秒) 通过动画形式进行隐藏或者显示  
                                显示css(“display”,”block”)  show()

(3)通过jquery修改 删除css的样式类型  
                        addClass(“class名字”) 添加一个样式类型  
                        removeClass(“class名字”) 删除一个样式类型

总结:【重点】  
                将dom----------> ($(dom对象))  
                jquery对象----->dom对象    jq对象.get(0)  
                       
==================================================================================================  
                                                                day2\_1

1.                                                                  jQuery事件  
    1.基于HTML实现的事件绑定:  
        HTML:注册事件  
            function clicked()\{  
                xxxxxxx;  
            \}  
            <input type="button" value="click\_me" id="btn" οnclick="clicked()"/>                      
    (2)基于编程方式给标签添加事件  
        javascript:注册事件  
            window.οnlοad=function()\{//注册onload事件,在文档加载完成后触发执行  
                btn.οnclick=function()\{//对btn注册单机事件  
                    xxxxx;  
                \}                          
            \}  
                           
            <input type="button" value="click\_me" id="btn"/>  
                \*注意:在事件注册时,必须保证事件源已经加载了   
        javascript事件绑定:  
            <script type="text/javascript">  
                var btn = document.getElementById("btn");  
                btn.onclick = test;  
                function test()\{  
                    alert("按钮点击");  
                \}  
            </script>  
    (3)jQuery事件绑定  
        jQuery注册事件:  
            $(document).ready(function()\{    //在文档加载完成后触发执行  
                $("\#btn").click(function()\{  
                    //单机事件后执行的函数体  
                \});  
            \});  
                  
            <input type="button" value="click\_me" id="btn"/>  
                  
                  
        事件函数:  
            click();                单机事件  
            dblclick();                双击事件  
            focus();                获得焦点  
            blur();                    失去焦点  
            mouseover();            鼠标移入  
            mouseout();                鼠标移出  
            mousemove();            鼠标移动  
            mousedown();            鼠标按下  
            mouseup();                鼠标松开  
            change();                内容改变失去焦点  
              
    (4)在文档加载完毕之后运行  
        js:  
            window.onload(function()\{  
                //在文档加载完毕之后在执行  
                $("\#btn").click();  
            \});  
                  
        jquery:  
            $(document).ready(function()\{  
                //在文档加载完毕之后在执行  
                $("\#btn").click();  
            \});  
                  
            简化版:【重点】  
                $(function()\{  
                    //文档加载完毕  
                \});  
                  
                  
                  
    (5)其他事件  
        \*toggle(fn1,fn2,fn3,fn4,fn5,...,fnn):\[事件函数\]复合的单击事件  
                当第一次被单击的时候触发fn1,都二次单击触发fn2依此类推,可循环

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

###      语法 ###

$(selector).toggle(speed,callback,switch)

\*hover(fn1,fn2):一次性的注册mouseover和mouseout事件  
                当鼠标移入时执行fn1,当鼠标移出时执行fn2  
          
        \*submit();提交form【重点】  
            $("form").submit();        //将表单数据提交   
                  
==================================================================================================  
                                                                            jQuery Dom编程  
1.DOM编程  
    (1)DOM编程相关函数  
        (1)val()                    获得输入框的属性值  
        (2)val(新值)                修改input标签的value属性值  
        (3)append();                将参数的jquery对象添加至所有子元素的尾部  
           prepend();                在选择对象的前一个位置添加子对象   
        (4)prop('属性名');            通过获得该属性名所对应的值  
           prop('属性名','属性值')     给该属性赋新的属性值  
           prop("属性名",false/true);    //设置Boolean类型的属性的值  
            \*注意：在获取、设置boolean 类型的属性时attr存在问题,此时可使用prop方法  
                    prop方法是jquery-1.7.x之后对于attr的补充.  
        (5)attr('属性名')            通过标签名获得相应的属性值  
        (6)empty();                    将当前对象所有子标签清空  
        (7)remove();                删除当前自己本身标签对象  
        (8)text();                    获取元素标签体内部的文本  
           text(string);            设置标签体内部的文本  
        (9)html();                    获取html内部的代码  
           html(html);                设置Html内部的代码  
        (10)css("样式属性名");        获取属性 值  
            css("样式属性名","样式属性值");        设置对应的属性值  
            css(\{样式属性名:"属性值",样式属性名:"属性值",...\});  
        (11)addClass("样式类名");    增加样式类  
        (12)removeClass("样式类名");移出样式类  
        (13)before();                在原有对象之前追加一个子标签  
        (14)after();                在原有对象之后追加一个兄弟标签  
        注意:在事件函数中this,代表触发该事件的事件源  
        内置jquery的事件函数:------------->静态绑定  
            $jq.live(事件名称,函数);------>动态绑定【重点】  
                事件名称:  
                    click        单击  
                    dblclick    双击  
                    ...  
    两级联动:  
        function init()\{  
                //①将所有的省初始化在prov  
                for(var i=0;i<json.length;i++)\{  
                    var pro = json\[i\].name;  
                    on//创建opti  
                    var op = $("<option>"+pro+"</option>");  
                    $("select\[name='prov'\]").append(op);  
                \}  
                  
                // ②将河北的市显示在city里边  
                var cities = json\[0\].cities;  
                for(var j=0;j<cities.length;j++)\{  
                    //创建option  
                    var opj = $("<option>"+cities\[j\]+"</option>");  
                    $("select\[name='city'\]").append(opj);  
                \}  
            \}  
              
            //在文档加载完成后    运行  
            $(function()\{  
                init();  
                $("select\[name='prov'\]").change(function()\{  
                    //清空当前city下拉列表  
                    $("select\[name='city'\]").empty();  
                    /\*  
                     1.先获得选项的下标----json下标  
                     2.  
                     \* \*/  
                    //获得下拉列表在json中对应的位置  
                    var index = $("select\[name='prov'\]").get(0).selectedIndex;  
                    var cities = json\[index\].cities;  
                    for(var i=0;i<cities.length;i++)\{  
                         var op = $("<option>"+cities\[i\]+"</option>");  
                        $("select\[name='city'\]").append(op);  
                    \}  
                \});  
            \});  
        </script>  
    \*注意: 使用<a href='javascript:void(0)'> 可以取消超链接的默认事件   
=============================================================================  
DOM编程:  
        添加:  
            append(jq);         //向自标签的末尾追加jq元素  
            prepend(jq);     //向子标签的开头追加子标签  
            after(jq);       //向相邻的哥哥位置添加jq对象   
            before(jq);     //向相邻的弟弟位置添加jq对象  
            addClass();     //添加class属性值的  
        删除:  
            remove();        //删除当前行内容  
            empty();        //删除所有内容  
        修改:  
            val(String)  
            text(String);            //内部元素普通字符串文本  
            html();                    //内部包含有效的html标签  
            css("属性名","属性值");                    //修改标签的样式属性  
            css(\{'样式属性名':'属性值',样式属性名:'属性值'\});  
            removeClass();            //删除class属性值的      
                  
        修改属性:  
            attr();  
            prop();  
                prop('属性名','属性值')     //给该属性赋新的属性值  
            prop("属性名",false/true);        //设置Boolean类型的属性的值  
            \*注意：在获取、设置boolean 类型的属性时attr存在问题,此时可使用prop方法  
                  
                  
        事件问题:  
            $("\#xxx").click() .change() .blur()  
              
                只能为现有的标签加入事件处理,但是通过jquery程序动态创建的内容,  
            事件是添加不上的  
              
            使用live()函数解决上述问题:  
                $("\#btn").live("click",function()\{xxx\})  
                  
        jquery内置动画:  
            show(\[1000\]);            //显示    
            hiden(\[1000\]);            //隐藏  
            fadeIn(\[1000\]);            //浅入  
            fadeout(\[1000\]);        //浅出  
            slideDown(\[1000\]);        //下滑显示  
            slideuUp(\[10000\]);        //上滑显示  
              
========================================================================================  
                                                                            day2\_3  
1.jquery插件  
    (1)日期插件  
        1.引入datepicker插件相关的js文件和css文件,直接将文件夹引入WdatePicker.js即可  
            <script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>  
            <script type="text/javascript" src="../../My97DatePicker/calendar.js"></script>  
            <script type="text/javascript" src="../../My97DatePicker/WdatePicker.js"></script>  
              
            \*注意:主要就是 calendar.js 和 WdatePicker.js 这两个js文件来提供提起插件的页面  
        2.为标签通过绑定事件       
            <input class="Wdate" id="date" οnclick="WdatePicker()"/>      
            \*注意:在input增加class="Wdate",绑定单击事件,函数名WdatePicker()      
              
            修改日期格式:  
                给WdatePicker()传入一个对象,以Json形式  
                \{  
                    dateFmt:"yyyy年MM月dd日 HH:mm:ss",  
                    readOnly:true,  
                    isShowWeek:true  
                \}  
                  
    (2)放大镜插件              
        1.引入相关的js文件,css文件  
            <link rel="stylesheet" href="../../jquery放大镜插件使用/jquery.jqzoom.css" type="text/css"/>  
            <script type="text/javascript" src="../../jquery放大镜插件使用/jquery-1.8.3.js"></script>  
            <script type="text/javascript" type="text/javascript" src="../../jquery放大镜插件使用/jquery.jqzoom-core.js"></script>  
        2.$("\#超级链接id").jqzoom(\{  
            zoomWidth:200,  
            zonmHeight:200  
        \});

<a href="d2.jpg" id="mg1">  
            <img src="s2.jpg"/>  
        </a>  
        3.通过jquery代码添加放大镜效果  
            $(function()\{  
                //文档加载完毕之后  
                $("\#bg").jqzoom();  
            \});  
        4.可选参数  
            \{  
                zoomWidth:600,  
                zonmHeight:400  
            \}

(3)表单数据检验插件  
        1.引入相关js文件  
            <script type="text/javascript" src="../../jquery\_validate插件的使用/jquery-1.8.3.js"></script>  
            <script type="text/javascript" src="../../jquery\_validate插件的使用/jquery.validate.js"></script>  
            <script type="text/javascript" src="../../jquery\_validate插件的使用/message\_zh\_CN.js"></script>  
        2.对form添加validate()方法  
            $(function()\{  
                $("\#表单id").valodate(\{  
                    rules:\{  
                        name属性:\{规则\};  
                    \}  
                    messages:\{  
                        验证失败后显示文字(那个属性:验证属性)  
                    \}  
                \});  
            \});

规则:  
                required:true        //必填  
                minlength:数字        //字符的最小长度  
                email:true            //邮箱的格式  
                rangelength:\[6,10\]    //字符串长度是1到2之间  
                equalTo                //\#确 id值  
            eg：  
            <script type="text/javascript">  
                $(function()\{  
                    $("\#fm1").validate(\{  
                        rules:\{  
                            username:\{required:true,minlength:6\},  
                            pwd:\{required:true,minlength:6\},  
                            repwd:\{required:true,equalTo:'\#pwd1'\},  
                            email:\{required:true,email:true\}  
                        \},  
                        messages:\{  
                            username:\{required:"用户名不能为空",minlength:"用户名长度不能小于6位"\},  
                            pwd:\{required:"密码不能为空",minlength:"密码长度不能小于6位"\},  
                            repwd:\{required:"密码不能为空",equalTo:"两次密码不一致"\},  
                            email:\{required:"邮箱格式不正确,请核对后重新输入"\}  
                        \}  
                    \});  
                \});  
            </script>  
              
              
    jQuery【重点】:  
        选择器