X5.3中常用到的jQuery整理

Masion

自从起步科技发布5.3后，界面更加的灵活，如果就掌握jQuery的知识，设计X5的前台和交互会更加得心应手。
我把有可能需要的jQuery整理在这里，便于以后使用查询.
jQuery函数主要有四大类
1、jQuery选择器    2、jQuery属性函数（取值赋值合体） 3 jQuery 方法    4jQuery工具类


                        /*1.1基本选择器*/
                //$('*').css('background','red');                                                                //选择本页所有元素
                //$(this.getElementByXid("div1")).css('background','red');                //选择Xid值为div1的元素
                //$('li').css('background','red');                                                                //返回所有li元素
                //$('.x-col-10').css('background','red');                                                //返回所有class类为.x-col-10的元素
                //$(".x-titlebar-left").css('background','red');                                      //返回class为x-titlebar-left的元素
                //$("[src]").css('width','290px');                                                      //返回所有带src属性的元素

Masion

                /*3、jQuery方法*/
                /*if($(this.getElementByXid("div1")).css("display")=='none'){
                        $(this.getElementByXid("div1")).show();                                                                                //显示div1元素
                }else{
                        $(this.getElementByXid("div1")).hide();                                                                                //隐藏div1元素
                }*/
       
                /*if($(this.getElementByXid("image1")).css("display")=='none'){
                        $(this.getElementByXid("image1")).show(400);                                                                //在400毫秒内显示div1元素
                }else{
                        $(this.getElementByXid("image1")).hide(400);                                                                //在400豪秒内隐藏div1元素
                }*/       
                //$(this.getElementByXid("image1")).toggle(400);                                                                //上面四行的整合（以后不再提示）
               
                /*if($(this.getElementByXid("div1")).css("display")=='none'){
                        $(this.getElementByXid("div1")).slideDown("slow");                                                        //下滑显示div1
                }else{
                        $(this.getElementByXid("div1")).slideUp("slow");                                                        //上滑隐藏div1
                }*/
                //$(this.getElementByXid("div1")).slideToggle("slow");

                /*if($(this.getElementByXid("div1")).css("display")=='none'){
                        $(this.getElementByXid("div1")).fadeIn("slow");                                                                //淡入div1
                }else{
                        $(this.getElementByXid("div1")).fadeOut("slow");                                                        //淡出div1
                }*/
                //$(this.getElementByXid("div1")).fadeToggle("slow");
               
                //$(this.getElementByXid("image1")).animate({height:'50px',width:"50px"});                //将image1的高度和宽度都动画变成50px
                //$(this.getElementByXid("image1")).animate({height:'+=50px',width:"+=50px"});        //将image1的高度和宽度都动画增加50px
                //$(this.getElementByXid("row2")).remove();                                                                                //删除row2及其子元素
                //$(this.getElementByXid("row2")).empty();                                                                                //删除row2子元素，保留frow2
               
                /*if($(this.getElementByXid("row2")).hasClass("blue")){
                        $(this.getElementByXid("row2")).removeClass('blue') ;                                                //给row2添加blue类
                }else{
                        $(this.getElementByXid("row2")).addClass('blue') ;                                                        //给row2去除blue类
                }*/
                //$(this.getElementByXid("row2")).toggleClass('blue') ;

Masion

                        /*1.2过滤选择器*/
                //$("img[src$='jpg']").css('width','290px');                                           //返回所有属性src以jpg结尾的image元素
                //$("img[src*='head.jpg']").css('width','290px');                                //返回属性src包含head.jpg的img元素
                //$('lidd').css('background','red');                                                        //返回偶数行的li元素
                //$('li:even').css('background','red');                                                        //返回奇数行的li元素
                //$('li:first').css('background','red');                                                //返回第一个li元素
                //$('li:last').css('background','red');                                                        //返回最后一个li元素
                //$('li:eq(2)').css('background','red');                                                //返回第二个li元素
                //$('li:gt(2)').css('background','red');                                                //返回第二个以后的li元素
                //$('li:lt(2)').css('background','red');                                                //返回第二个以前的li元素
       
                //$("li:not(:empty)").css('background','red');                                        //返回不为空的li元素
                //$("div:empty").css('background','red');                                                //返回空的div元素
                //$("li div:contains('冀')").css('background','red');                        //在li元素下面选择文本包含冀的div元素
                //$("li div:has(input)").css('background','red');                                //在li元素下面，选择有子元素input的div元素
                //$("li:visible").css('background','red');                                                //选择可见的li元素
                //$("ul li:nth-child(3n + 1)").css('background','red');                        //选择3n+1（n=1,2,3.。。。）的li元素

Masion

                        /*1.3组合选择器*/
            /*$("A B") 查找A元素下面的所有子节点，包括非直接子节点
                $("A>B") 查找A元素下面的直接子节点
                $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
                $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点*/
               
                //$("li input").css('background','red');                                                //选择li元素下面所有的input
                //$("li>div").css('background','red');                                                        //选择里元素下面的input子元素
                //$('.col-title .x-col-10').css('background','red');                        //选择col-title类下面的x-col-10的类元素
               
                //$('.col-title >*').css('background','red');                                        //选择类col-title下面所有的子元素
                //$('.col-title >div').css('background','red');                                        //选择类col-title下面所有的div元素
                //$('.col-title, .x-col-10').css('background','red');                        //选择col-title和x-col-10的元素
                //$('.x-col-10 + div').css('background','red');                                        //选择类x-col-10后面的所有div元素
                //$('.col-title ~ div').css('background','red');                                //选择类x-col-10后面的div兄弟节点

Masion

                        /*1.3DOM函数选择器*/
                //$(this.getElementByXid("image1")).parent().css('background','red');                //选择image1元素的父亲
                //$(this.getElementByXid("row2")).children().css('background','red');                //选择row2的所有子元素
                //$(this.getElementByXid("row2")).children(":even").css('background','red');//选择row2子元素中的奇数元素

Masion

                /*2、jQuery函数（取值赋值合体）*/
                //alert($(this.getElementByXid("col8")).text());                                                        //读取col8元素的值
                //$(this.getElementByXid("col8")).text("测试");                                                                //给col8元素赋值
                //alert($(this.getElementByXid("col8")).html());                                                        //读取col8元素的值（包括html标记）
                //$(this.getElementByXid("col8")).html("测试");                                                                //给col8元素赋值（包括html标记）
                //$(this.getElementByXid("col8")).css("background-color","yellow");                        //修改col8元素的css
                //alert($(this.getElementByXid("col8")).css("background-color"));                        //读取col8元素的css
                //$(this.getElementByXid("col8")).css({"background-color":"yellow","font-size":"200%"});        //更改多个css值
                //alert($(this.getElementByXid("div1")).height());                                                        //读取div1的height值（不包括内边距，边框和外边距）
                //$(this.getElementByXid("div1")).height(180);                                                                //设置div的height值
                //$(this.getElementByXid("div1")).height('180px');                                                        //设置div的height值
                //alert($(this.getElementByXid("div1")).innerHeight());                                                //读取div1的innerheight值（不包括边框和外边距）
                //$(this.getElementByXid("div1")).innerHeight(180);                                                        //设置div的innerheight值
                //alert($(this.getElementByXid("div1")).outerHeight());                                                //读取div1的outerheight值（不包括外边距）
                //alert($(this.getElementByXid("div1")).outerHeight(true));                                        //读取div1的outerheight值（包括外边距）
                //$(this.getElementByXid("div1")).outerHeight(180);                                                        //设置div的outerheight值

Masion

我把这些jQuery用X5界面做成了一个示例页面，如果需要查看每个函数的运行效果，可以将对应语句的注释去掉，单击页面的“演示”按钮，就可以看到该jQuery语句的运行效果

神爱

大牛哈！

dragonsz1

感谢楼主奉献

make

支持楼主，好东西！