起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 21854|回复: 58

X5.3中常用到的jQuery整理

  [复制链接]

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
发表于 2015-7-27 21:58:13 | 显示全部楼层 |阅读模式
自从起步科技发布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属性的元素

长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-7-27 21:59:56 | 显示全部楼层
                /*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') ;
长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 1 反对 0

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-7-27 21:58:40 | 显示全部楼层
                        /*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元素
长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 反对

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-7-27 21:58:56 | 显示全部楼层
                        /*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兄弟节点
长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 反对

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-7-27 21:59:15 | 显示全部楼层
                        /*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子元素中的奇数元素
长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 反对

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-7-27 21:59:34 | 显示全部楼层
                /*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值
长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 反对

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-7-27 22:02:22 | 显示全部楼层
我把这些jQuery用X5界面做成了一个示例页面,如果需要查看每个函数的运行效果,可以将对应语句的注释去掉,单击页面的“演示”按钮,就可以看到该jQuery语句的运行效果

jQueryTest.zip

19.58 KB, 下载次数: 42

售价: 5 金币  [记录]

长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 反对

使用道具 举报

6

主题

30

帖子

120

积分

初级会员

Rank: 2

积分
120
发表于 2015-7-27 22:51:18 | 显示全部楼层
大牛哈!
回复

使用道具 举报

1

主题

3

帖子

22

积分

新手上路

Rank: 1

积分
22
QQ
发表于 2015-7-28 08:40:45 | 显示全部楼层
感谢楼主奉献
回复 支持 反对

使用道具 举报

6

主题

185

帖子

2825

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2825
发表于 2015-7-28 09:17:15 | 显示全部楼层
支持楼主,好东西!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-29 13:34 , Processed in 0.096762 second(s), 28 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表