YUI3 入门

YUI3 入门YUI3入门,算是自己学习YUI3的GettingStarted.

大家好,又见面了,我是你们的朋友全栈君。

1. 调用方法:

既然我们是使用的YUI这个js库,那么肯定第一步就是引用这个文件,刚才在上面已经说了我们要使用的是yui-min.js这个文件,当然你可以对他进行改名,你只需要到你下载的yui库的文件中找到他,将其拷到你需要的目录就OK啦,那么掉用方法的是:

在之间插入以下代码:

<script src=”yui-min.js” type=”text/javascript”></script>

注意:src后面的地址请根据实际情况填写,当然你也可以使用官方提供的地址,请看: <script src=”http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js” type=”text/javascript”></script>

我个人觉得如果你仅仅想试一下yui的功能,可以用用官方的地址,免得自己下载啦,嘿嘿!

 

2. 实现我们的功能

当我们已经调用好Yui这个js库以后,接下来就得看我们自己的了,如何通过Yui来实现我们想要的功能呢,嘿嘿,请看:

1、Yui 3最基本的使用格式:

YUI().use(”node”, function(Y) {

// 书写你的js代码

});

就是要使用Yui 3提供的方法,就必须得将他们写在上面这个大括号之内,不然无法使用。

2、Yui 3获取对象的方法:她获取对象的方法有很多种,下面我们来看看常用的几种方法:(在使用这些方法的时候都需要在方法前加Y)

a、get()方法

get方法获取id和class对象的方法:Y.get(”#id”);Y.get(”.class”);

注意,在括号中必须用引号将他们引起来,看看,如果你对CSS很熟悉的话,就应该知道,我们在为id书写样式的时候前面用的是#,为class书写 样式的时候前面使用的是.号。在Yui 3的get方法中也是这样的。那么get方法获取到的都是单个对象,还有就是如果你又想获取一个对象,他又有Id又有class的呢,那也可以使用get 方法:Y.get(”#id”).get(”.class”);这样就可以啦。

b、all()方法

刚才我们看了get方法获取的都是单个对象,那如果我们想获取所有据有相同class的属性的对象怎么办,哈哈,不要急,Yui想到了,他提供了很 多种方法,但是我觉得最简单的一种方法就是:Y.all(”.calss”);这样就可以获取到了所有据有class名称的class的对象,注意,这里 得到是一个数据。

3、addClass()

这个一看,就应该明白了吧,我们经常在js中都可能用到的为一个对象增加class,哈哈,在这里我们可以使用它啦,使用方法就是:myNode.addClass(’foo’);

4、styles()

光有了设置class还不行,因为有时候我们还需要设置对象的style值,故而引入了styles()方法,使用方法:myNode.setStyle(’opacity’, 0.5);

5、Yui事件监听函数:

Y.on(事件,函数,对象);

如果你对js比较熟悉的话,你应该清楚,js中有事件监听函数,但是IE和DOM是有区别的,注意,Opera支持IE和DOM的两种监听函数,以 前为了兼容多个浏览器,我们需要单独写一个兼容的函数,而在Yui3不需要,如果你想使用的话,可以直接使用Y.on(事件,函数,对象);

事件分为多种,一般我们经常用到的是鼠标与键盘:

鼠标:click,dblclick,mouseover,mousedown,mousemove,mouseup

我们只需要将相应的事件用引号包起来填入事件的值就行了。还有就是这里的对象可以接受单个的对象,他还可以接受数组,比如单个的id,我们可以使 用#id,也可以设置id下的标签,#id li,还可以使用为多个对象设置,就是上面说到的是数组方式[“#id”,”#id1″]依次类推。

 

yui不仅仅只有这几个方法的,还有很多,比如 set,get,appendChild,test,removeClass,getXY,getX,gety还有很多。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/157963.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 测试集(2)-words

    测试集(2)-words aa.ma.mabandonabandonabattoirabilityabilityableableabnormalabnormalaboardaboardaboutaboutaboveaboveabracadabraabroadabroadabsenceabsenceabsentabsent

    2022年7月21日
    18
  • 兴师动众解决由cookie引发的400报错问题

    兴师动众解决由cookie引发的400报错问题背景是这样的,做的是一个机票的购票业务,包括了购票(单程购票和往返购票)等功能。购票的航班信息需要从航班搜索页带到下单页,所以在跳转至下单页前将航班信息存在了cookie,用于在下单页展示所选航班信息。遇到的问题是购买单程机票的时候,一切流程正常(从航班查询页,选择需要的购买的航班,进入到下单页,进行下单操作);但是购买往返机票的时候,进入到下单页时,发现下单页所有接口都报了400的错误,继而再访问该网站的其他页面也都报了400的错误。一般来说400报错是因为前后端参数格式或者请求头不一致导致的问题,前.

    2022年6月10日
    32
  • 基于android的_android studio创建activity

    基于android的_android studio创建activityAndroid如何判断一个应用在运行 在一个应用中,或一个Service、Receiver中判断一个应用是否正在运行,以便进行一些相关的处理。这个时候我们需要得到一个ActivityManager,这个Manager顾名思意就是管理Activity的,它有一个方法叫getRunningTasks,可以得到当前系统正在运行的Task的列表,代码如下:  A

    2022年9月6日
    4
  • vscode前端插件安装「建议收藏」

    vscode前端插件安装「建议收藏」1.修改语言,如果英语六级的话,便就可以不用修改,按住ctrl+shift+x打开拓展,安装LanguagePacks插件,然后按住Ctrl+Shift+P打开命令调色板,搜索ConfigureDisplayLanguage命令然后按Enter键,将locale.json创建一个文件,其默认值设置为您的操作系统语言。修改为zh-cn语言即可。2.HTMLSnippets:超级实用且初级的H5代码片段以及提示;3.HTMLHint:html代码检测;4.HTMLCSSSupp

    2022年7月25日
    10
  • springbootapplication运行机制_航空器运行阶段是指什么

    springbootapplication运行机制_航空器运行阶段是指什么SpringApplication运行阶段围绕run(String…)方法展开,该过程结合初始化阶段完成的状态进一步完善了运行时所需要准备的资源,随后启动Spring应用上下文,在此期间伴随SpringBoot和Spring事件的触发,形成完整的SpringApplication生命周期:SpringApplication准备阶段SpringApplication启动阶段SpringApplication启动后阶段1、SpringApplication准备阶段本阶段涉及的范围从run(St

    2022年9月8日
    0
  • Mysql ID生成器

    Mysql ID生成器Mysql可以作为分布式序列号生成器,写下笔记以防忘记。需要一张表server_id_table表中的role为服务器角色名,nextId为当前Id,startId为开始Id,endId为结束Id。使用下列sql语句可以实现分布式Id生成器的功能,而且是线程安全的

    2022年6月16日
    17

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号