VQuery高级特性

Posted 2020-07-31 distant-遥远

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VQuery高级特性相关的知识，希望对你有一定的参考价值。

VQuery高级特性

css方法

同时设置多个--for in

链式操作

函数，链式操作

css 方法链式操作

json的使用

阻止冒泡，默认事件

VQuery插件

插件机制

可以扩展库的功能

extend

为VQuery添加方法

原型

实例

animate---动画

                else
                {
                    iCur=parseInt(getStyle(obj, attr));
                }
                
                //2.算速度
                var iSpeed=(json[attr]-iCur)/8;
                iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                
                //3.检测停止
                if(iCur!=json[attr])
                {
                    bStop=false;
                }
                
                if(attr==\'opacity\')
                {
                    obj.style.filter=\'alpha(opacity:\'+(iCur+iSpeed)+\')\';
                    obj.style.opacity=(iCur+iSpeed)/100;
                }
                else
                {
                    obj.style[attr]=iCur+iSpeed+\'px\';
                }
            }
            
            if(bStop)
            {
                clearInterval(obj.timer);
                
                if(fn)
                {
                    fn();
                }
            }
        }, 30)
    }
});

运动的的封装.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; filter:alpha(opacity: 30); opacity:0.3;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.7.1.js"></script>
<script>
$(function (){
    $(\'#div1\').hover(function (){
        $(this).animate({width: \'200px\', height: \'200px\', opacity: 1});
    }, function (){
        $(this).animate({width: \'100px\', height: \'100px\', opacity: 0.3});
    });
});
</script>
</head>

<body>

运动的实例

drag---拖拽

$().extend(\'drag\', function (){
    var i=0;
    
    for(i=0;i<this.elements.length;i++)
    {
        drag(this.elements[i]);
    }
    
    function drag(oDiv)
    {
        oDiv.onmousedown=function (ev)
        {
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            var disY=oEvent.clientY-oDiv.offsetTop;
            
            document.onmousemove=function (ev)
            {
                var oEvent=ev||event;
                
                oDiv.style.left=oEvent.clientX-disX+\'px\';
                oDiv.style.top=oEvent.clientY-disY+\'px\';
            };
            
            document.onmouseup=function ()
            {
                document.onmousemove=null;
                document.onmouseup=null;
            };
        };
    }
});

vquery拖拽的封装

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="VQuery.js"></script>
<script src="VQuery_drag.js"></script>
<script>
$(function (){
    $(\'div\').drag();
});
</script>
</head>

<body>

拖拽的应用

以上是关于VQuery高级特性的主要内容，如果未能解决你的问题，请参考以下文章

VQuery选择器

js Vquery

vquery 一些应用

传递额外的值 Passing Extra Values |在视图中生成输出URL | 高级路由特性 | 精通ASP-NET-MVC-5-弗瑞曼

JavaScript笔试题（js高级代码片段）

23.Flink-高级特性-新特性-Streaming Flie Sink介绍代码演示Flink-高级特性-新特性-FlinkSQL整合Hive添加依赖和jar包和配置