jQueryUI的基础知识

小咪咪 2022-08-07 13:46 191阅读 0赞

1.Jquery与Javascript的关系  
    1.Jquery是Javascript的程序库之一,他是javascript对象和使用函数的封装  
    2.Jquery的用途  
        1.访问和操作DOM元素  
        2.控制页面样式  
        3.对页面事件的处理  
        4.方便的使用Jquery插件  
        5.与Ajax技术的完美结合  
    3.Jquery的优势  
        1.轻量级  
        2.强大的选择器  
        3.出色的DOM封装  
        4.可靠的事件处理机制  
        5.出色的浏览器兼容性  
        6.隐式迭代  
        7.丰富的插件支持  
    4.Jquery的语法结构    $(selector).action();  
        1.工厂函数    $();    $(document).ready();  
        2.选择器    selector  
        3.方法        action();  
            1.类样式的添加            Jquery对象.addClass("ClassName");  
            2.类样式的移除            Jquery对象.removeClass("ClassName");  
            2.元素CSS样式的添加        Jquery对象.css("样式属性","样式的值");  
            3.操作连缀的书写        Jquery对象.next();  
    5.Jquery与DOM的相互转换      
        1.Jquery对象        通过Jquery包装DOM对象后产生的对象.Jquery对象类似于数组的对象  
        1.Jquery转换为DOM对象                //可以通过$obj\[index\]或$obj.get(index);      
            1.var $obj=$();                        //该为Jquery对象  
            2.var obj=$obj\[0\];  var obj=$obj.get(0);        //该为DOM对象  
        2.DOM对象转换为Jquery对象  
            1.var $obj=$(obj);  
    6.判断jQuery对象是否为空的方法  
        1.通过jQuery的size()方法判断是否为0  
        2.通过jQuery的length属性进行判断是否为0  
        3.通过DOM的\[0\]判断是否为null  
        4.通过DOM的get(0)判断该对象是否为null  
\--------------------------------------------------------------------  
css()与addClass()的区别  
    css()为所匹配的元素设置指定的CSS样式  
    addClass为所匹配的元素添加一个或多个类.类与类之间用空格隔开,该方法不会移除原来的类样式,仅在原来的类样式的基础上进行追加  
    addClass()更能体现样式的分离,基于结构与样式的分离,一般程序采用的addClass()要比css()的情形多  
\--------------------------------------------------------------------  
2.jQuery选择器  
    1.CSS选择器  
        1.基本选择器  
            1.标签选择器        $("div");        选取标签为div的元素            返回值为:元素集合  
            2.类选择器        $(".div");        选取类名为div的元素            返回值为:元素集合  
            3.Id选择器        $("\#div");        选取id为div的元素            返回值为:单个元素  
            4.并集选择器        $("div,.div,\#div");    选取标签为div,类名为div,id为div的元素    返回值为:元素集合  
            5.交集选择器        $("div.div");        选取标签为div下的类名为div的元素    返回值为:元素集合或单个元素  
            6.全局选择器        $("\*");            所有的元素                返回值为:元素集合  
        2.层析选择器  
            1.后代选择器        $("div span");        选取div下的元素span            返回值为:元素集合  
            2.子选择器        $("div>span");        选取div下的子元素span            返回值为:元素集合  
            3.相邻元素选择器    $("div+span");        选取紧邻div元素之后的同辈元素span    返回值为:元素集合  
            4.同辈元素选择器    $("div~span");        选取div元素之后所有的同辈的元素span    返回值为:元素集合  
        3.属性选择器  
            1.通过属性名        $("\[href\]");        选取含有href属性的所有元素        返回值为:元素集合  
            2.通过特定属性值    $("\[href='\#'\]");    选取href属性值为\#的元素 / $("\[href!='\#'\]");选取href属性值不为\#的元素    返回值为:元素集合  
            3.属性值以指定值开始    $("\[href^='en'\]");    选取href属性值以en开头的元素        返回值为:元素集合  
            4.属性值以指定值结尾    $("\[href$='en'\]");    选取href属性值以en结尾的元素        返回值为:元素集合  
            5.属性值包含某些值    $("\[href\*='en'\]");    选取href属性值包含en的元素        返回值为:元素集合  
            6.复合属性        $("li\[id\]\[title='新闻标题'\]");选取含有id属性和title属性为'新闻标题的'li的元素            返回值为:元素集合  
    2.顾虑选择器      
        1.基本过滤选择器  
            1.选取第一个元素    $("li:first");                            返回值为:单个元素  
            2.选取最后一个元素    $("li:last");                            返回值为:单个元素  
            3.选取索引是偶数的元素    $("li:even");                            返回值为:元素集合  
            4.选取索引是奇数的元素    $("li:odd");                            返回值为:元素集合  
            5.选取索引等于index的元素    $("li:eq(5)");    选取li索引等于5的元素            返回值为:单个元素  
            6.选取索引大于index的元素    $("li:gt(5)");    选取索引大于5不包括5的元素        返回值为:元素集合  
            7.选取索引小于index的元素    $("li:lt(5)");    选取索引小于5不包括5的元素        返回值为:元素集合  
            8.选取不是指定属性值的元素    $("li:not(.info)");class属性值不是info的li元素        返回值为:元素集合  
            9.标题元素            $(":header");    选取网页中所有的标题元素如:h1-h6    返回值为:元素集合  
            10.当前获取焦点的元素        $(":focus");    选取当前获得焦点的元素            返回值为:元素集合  
        2.可见性过滤选择器  
            1.选取所有可见的元素        $("div:visible");    选取所有可见的元素        返回值为:元素集合  
            2.选取所有隐藏的元素        $("div:hidden");    选取所有隐藏的元素        返回值为:元素集合  
        3.表单对象过滤选择器  
        4.内容过滤选择器  
        5.子元素过滤选择器  
        6.属性过滤选择器  
\--------------------------------------------------------------  
3.jQuery中的事件      
    1.简单事件  
        1.window事件  
            1.文档就绪事件        ready();  
        2.鼠标事件  
            1.鼠标的点击事件       click(function()\{\});  
            2.鼠标指针的移过事件    mouseover(function()\{\});  
            3.鼠标的移出事件    mouseout(function()\{\});  
        3.键盘事件  
            1.按下按键时的事件    keydown(function()\{\});  
            2.释放按键时的事件    keyup(function()\{\});  
            3.产生可打印字符时的事件keypress(function()\{\});  
        4.表单事件  
            1.获得焦点的事件    focus(function()\{\});  
            2.失去焦点的事件    blur(function()\{\});  
        5.绑定与移除事件  
            1.绑定单个事件        bind("click",function()\{\});  
            2.绑定多个事件        bind(\{click:function()\{\},mouseover:function()\{\},mouseout:function()\{\}\});  
            3.移除单个事件        bind("click",function()\{\});    //参数不是必须  
            4.移除多个事件        unbind(\{click:function()\{\},mouseover:function()\{\},mouseout:function()\{\}\});  
            5.移除所有的绑定事件    unbind();        //即不带任何参数  
    2.复合事件  
            1.鼠标指针悬停事件    hover(mouseover,onmouseout);  
            2.模拟鼠标连续点击事件    toggle();  
\--------------------------------------------------------------  
4.使用jQuery操作DOM  
    1.DOM操作分类  
        1.DOM Core  
        2.HTML-DOM  
        3.CSS-DOM  
    2.jQuery中的DOM操作  
        1.样式操作  
            1.直接设置样式        css();  
            2.追加样式和移除样式    addClass();removeClass();  
            3.切换样式        toggleClass();  
        2.文本操作  
            1.HTML代码操作        html();  
            2.标签内容的操作    text();  
            3.属性值的操作        val();  
        3.value属性值操作  
        4.节点操作  
            1.属性操作  
            2.节点遍历  
            3.CSS-DOM操作  
\-------------------------------------------------------------------------------------------------------------------------------------------------  
\*\*\*jquery中的$命名冲突\*\*\*\*\*\*  
    1.jquery.js在prototype.js之前引入  
        $代表的是prototype对象.要使用jQuery..则需要使用全名jQuery(selector).css();  
    2.jquery.js在prototype.js之后引入  
        $代表的是jquery对象..如果要使用prototype对象...有三种方法  
            1.使用jQuery.noconflict()放弃对$的所有权.    则$代表的为prototype对象..而再次使用jQuery对象,则需要使用全名  
            2.定义jQuery的别名    var $j=jQuery,noconflict();    则$j代表的就是jQuery对象.$代表的为prototype对象  
            3.使用语句块        (function($)\{  
                            $(selector).css();        //此处的$仍然为Jquery对象  
                        \})(jQuery)  
\------------------------------------------------------------------------UI-----------------------------------------------------------------------  
5.jQuery UI的使用的一般步骤                                                  
    WebRoot┐  
           ├js┐  
               ├jqueryUI┐  
                 ├themes┐  
                 │      ├base┐  
                 │            ├\*\*\*.css  
                     ├ui┐  
                        ├\*\*\*.js  
               ├jquery-1.8.3.js  
        META-INF  
        WEB-INF  
            lib  
            web.xml  
    1.基本的步骤  
        1.导入样式文件  
            <link rel="stylesheet" type="text/css" href="js/jqueryUI/themes/base/jquery.ui.all.css"/>  
        2.导入jquery的核心文件  
            <script type="text/javascript" src="js/jquery-1.8.3.js"></script>  
        3.导入对应的js文件  
            <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.core.js"></script>  
            <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.widget.js"></script>  
\------------------------------------------------------------------------cookie-----------------------------------------------------------------------  
6.Cookie插件的使用  
    1.添加jquery.cookie.js文件  
    2.设置值 $.cookie("名字","值",\{expires:7,path:'/',domain:'itcast.cn',secure:true\}).  
    3.取值 var a=$.cookie("名字");  
    4.清空cookie    $.cookie("username",null);  
\-----------------------------------------------------------------------dialog-----------------------------------------------------------------------  
7.Dialog弹出框插件的使用  
    1.导入对应的js文件  
        <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.dialog.js"></script>  
    2.编写html  
        <div id="dialog" title="用户注册">  
            <label>用户名:</label><input type="text" name="username" id="username"/><br /><br />  
            <label>密码:</label><input type="password" name="password" id="password"/><br />  
        </div>  
    3.更改Dialog弹出框的样式  
        <style type="text/css">  
            .ui-dialog \{ position: absolute;top: 50%;left: 50%;margin: -150px 0 0 -200px;width: 400px;height: 300px;overflow: hidden;\}  
        </style>  
    4.编写script  
        <script type="text/javascript">  
            $(document).ready(function()\{  
                $("\#dialog").dialog(\{  
                    autoOpen:false,            //是否自动打开  
                    buttons:\{            //窗体包含的按钮  
                        "登录":function()\{\},  
                        "注册":function()\{\}  
                    \},  
                    closeOnEscape: true,        //是否支持按esc键退出  
                    dialogClass: "main",        //弹出框的类样式  
                    width:300,            //窗体的宽度  
                    height: "auto",            //窗体高度是否为自动  
                    maxHeight: false,        //最大高度  
                    maxWidth: false,        //最大宽度  
                    minHeight: 150,            //最小高度  
                    minWidth: 150,            //最小宽度  
                    title:"",            //窗体的标题  
                    resizable:true,            //是否支持尺寸调节  
                    modal:true,            //是否为模式窗体  
                    position:\[300,200\],        //定位  
                    hide:"explode",            //窗体隐藏的特效  
                    show:"blind"            //窗体打开的特效  
                \});  
            \});  
        </script>  
\------------------------------------------------------------------------tabs-----------------------------------------------------------------------  
8.tabs选项卡插件的使用  
    1.导入对应的js文件  
        <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.tabs.js"></script>  
    2.编写html  
        <div id="tabs" title="">  
            <ul>  
                <li><a href="\#tab1">tab1</a></li>            //静态选项卡  
                <li><a href="\#tab2">tab2</a></li>  
                <li><a href="getInfo.action">tab3</a></li>        //动态选项卡  
            </ul>  
            <div id="tab1">第一个面板显示的内容</div>  
            <div id="tab2">第二个面板显示的内容</div>  
        </div>  
    3.更改选项卡的样式  
        <style type="text/css">  
            .ui-tabs \{ position: relative; padding: .2em; zoom: 1; \}        //设置选项卡框的样式  
        <style>  
    4.编写script  
        <script type="text/javascript">  
            $(function()\{  
                $("\#tabs").tabs(\{  
                    active:1,            //默认打开的选项卡编号..编号头从0开始.编号尾从-1开始  
                    collapsible: true,        //是否支持折叠特性  
                    hide:"explode",            //窗体隐藏的特效  
                    show:"blind"            //窗体打开的特效  
                    activate: function()\{\},        //打开选项卡触发的事件      
                    beforeActivate: function()\{\},    //打开之前触发的事件  
                    beforeLoad: function()\{\},    //加载之前触发的事件        ui.jqXHR.error(function() \{ui.panel.html("请求发生错误");\});  
                \});  
            \});  
        </script>  
\------------------------------------------------------------------------menu-----------------------------------------------------------------------  
9.menu菜单插件的使用  
    1.导入对应的js文件  
        <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.position.js"></script>  
        <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.menu.js"></script>  
    2.编写html  
        <ul id="menu">  
            <li class="ui-state-disabled"><a href="\#">在线投票系统</a></li>        //此处的class类样式为插件自带.可以限制访问  
            <li><a href="\#">用户管理</a>  
                <ul>  
                    <li><a href="addUser.action">添加用户</a></li>  
                    <li><a href="delUser.action">删除用户</a></li>  
                    <li><a href="updUser.action">修改用户</a></li>  
                    <li><a href="selUser.action">查询用户</a></li>  
                </ul>  
            </li>  
        </ul>  
    3.更改选项卡的样式  
        <style type="text/css">  
            .ui-menu\{width:150px;\}        //设置菜单的样式  
        </style>  
    4.编写script  
        <script type="text/javascript">  
            $(function()\{  
                $("\#menu").menu(\{  
                    menus:"ul"/"ol"            //指定菜单根的标签  
                \});  
            \});  
        ---------------------------  
            $.get("menuMenu.action", function(result) \{            //实现从服务器端获取数据动态生成菜单  
                $("\#menu").append(result);      
                $("\#menu").menu(\{  
                    menus : "ul", //设置根菜单的标签  
                \});  
            \});  
        </script>  
\------------------------------------------------------------------------autocomplete-----------------------------------------------------------------------  
10.autoComplete自动完成功能插件的使用  
    1.导入对应的js文件  
        <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.position.js"></script>  
        <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.menu.js"></script>  
        <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.autocomplete.js"></script>  
    2.编写html  
        <div>  
            请输入要查询的内容:<input type="text" id="tag"/>  
        </div>  
    3.编写css样式  
        <style>  
            .ui-autocomplete \{\}  
        </style>  
    4.编写script  
        //在source参数为固定值的情况下  
        <script>  
            var source=\["ActionScript","AppleScript","Asp","Jsp","Php","Basic","Java","JacaScript"\];  
            $(function()\{  
                $("\#tag").autocomplete(\{  
                    source:source,  
                \});  
            \});  
        </script>  
        //从服务器端读取source的值  
        <script>  
            $("\#tag").autocomplete(\{  
                source:function(request,response)\{  
                    $.get("search.action","term="+request.term,function(result)\{  
                        var data=$.parseJSON(result);  
                        response(data);  
                    \});  
                \}  
            \});  
        </script>  
\------------------------------------------------------------------------lazyload-----------------------------------------------------------------------  
11.lazyloda延迟加载插件的使用  
    1.添加jquery.lazyload.js文件  
    2.找到像对应的对象,使用$("img").lazyload(\{  
        threshold:200,            //提前开始多少高度的时候开始加载  
        effect:"fadeIn",        //图载入时的效果 show(直接显示) fadeIn(渐入) slideDown(下拉)  
        event:"click"            //事件触发加载  
    \});  
\------------------------------------------------------------------------accordion-----------------------------------------------------------------------  
12.accordion折叠栏插件的使用  
    1.导入对应的js文件  
        <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.accordion.js"></script>  
    2.编写html  
        <div id="accordion">  
            <h3>菜单栏1</h3>  
            <div>相关菜单栏1的介绍</div>  
            <h3>菜单栏2</h3>  
            <div>相关菜单栏2的介绍</div>  
        </div>  
    3.编写css样式  
        <style type="text/css">  
            .ui-accordion\{width:100px;\}  
        </style>  
    4.编写script  
        <script type="text/javascript">  
            $(function()\{  
                $("\#accordion").accordion(\{  
                    active:0,            //初始化打开的第一个折叠栏  
                    event:"click",            //触发的事件  
                    collapsible:true,        //支持重复折叠  
                    activate:function()\{\},        //访问后调用事件  
                    beforeActivate:function()\{\}    //访问前调用事件  
                \});  
            \});  
        </script>  
\------------------------------------------------------------------------datepicker-----------------------------------------------------------------  
13.datepicker日期控件的使用  
    1.导入对应的js文件  
        <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.datepicker.js"></script>  
    2.编写html  
        <input type="text" name="date" id="date"/>  
        <input type="text" name="date" id="show"/>  
    3.编写css样式  
        <style type="text/css">  
            .ui-datepicker\{width:100px;\}  
        </style>  
    4.编写script  
        <script type="text/javascript">  
            $(function()\{  
                $("\#date").datepicker(\{  
                    disable:true,            //是否可用  
                    altField:"\#show",        //把结果绑定带指定字段  
                    altFormat:"yy-dd-mm",        //绑定字段的输出格式  
                    dateFormat:"yy-dd-mm"        //日期显示的格式  
                \});  
            \});  
        </script>  
\------------------------------------------------------------------------draggable-----------------------------------------------------------------  
14.draggable可抓动窗体插件的使用  
    1.导入对应的js文件  
        <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.mouse.js"></script>  
        <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.draggable.js"></script>  
    2.编写html  
        <div id="draggable" class="ui-widget-content">这个可以抓动</div>  
    3.编写script  
        <script type="text/javascript">  
            $(function()\{  
                $("\#draggable").draggable(\{  
                    revert:true            //相关参数查看帮助文档.和js插件  
                \});  
            \});  
        </script>  
\------------------------------------------------------------------------progressbar-----------------------------------------------------------------  
15.progressbar进度条插件的使用  
    1.导入相应的js文件  
        <script type="text/javascript" src="js/jqueryUI/ui/jquery.ui.progressbar.js"></script>  
    2.编写html  
        <div id="progressbar"></div>  
    3.编写css样式  
        <style type="text/css">  
            .ui-progressbar\{width:100px;\}  
        </style>  
    4.编写script  
        var i=0;  
        $(function()\{  
            $("\#progress").progressbar(\{  
                value:i+=Math.round(Math.random()\*10)  
            \});  
            if(i<100)\{  
                setTimeout(arguments.callee, 200);  
            \}  
        \});