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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 关于SetCapture() 和 ReleaseCapture()的用法的个人理解[通俗易懂]

    关于SetCapture() 和 ReleaseCapture()的用法的个人理解[通俗易懂]1.函数功能:在当前线程的指定窗口里设置鼠标捕获。一旦窗口捕获了鼠标,所有鼠标输入都针对该窗口,无论光标是否在窗口的边界内还是边界外。同一时刻只能有一个窗口捕获鼠标。2.失效条件: A.当鼠标在其他窗口按下;B.调用ReleaseCapture释放。3. SetCapture和ReleaseCapture必须成对出现通俗来讲,例如:一只羊被一根弹性的

    2022年5月3日
    76
  • Hibernate5.0配置C3P0连接池步骤详解

    Hibernate5.0配置C3P0连接池步骤详解Hibernate5.0拥有自己的数据库连接池,但是无论性能和功能都不如C3P0(本人新手,查取资料得知),由于之前苦搜资源都不得愿,所以写下此篇文章以供像我一样苦于搜索的新手,以供参考。   Hibernate5.0整合C3P0实现连接池的步骤如下:   首先第一步   1).到https://sourceforge.net/projects/hibernate/到该网站

    2022年5月7日
    33
  • python—pyquery

    python—pyqueryPyQuery"""强大又灵活的网页解析库pipinstallpyquery官方文档http://pyquery.readthedocs.io/API风格和前段jquery相似"""初始化字符串初始化html=”’&lt;div&gt;&lt;ul&gt;&lt;liclass="item-0"&gt;first

    2022年6月1日
    43
  • java爬虫实现

    java爬虫实现爬虫入门手写一个Java爬虫本文内容 涞源于 罗刚 老师的 书籍&lt;&lt;自己动手写网络爬虫一书&gt;&gt;;本文将介绍1:网络爬虫的是做什么的? 2: 手动写一个简单的网络爬虫;1: 网络爬虫是做什么的? 他的主要工作就是跟据指定的url地址 去发送请求,获得响应, 然后解析响应, 一方面从响应中查找出想要查找的数据,另一方面从响应中解析出新的URL…

    2022年7月8日
    21
  • 微积分常用公式

    微积分常用公式一 基本导数公式二 导数的四则运算法则三 高阶导数的运算法则四 基本初等函数的 n 阶导数公式五 微分公式与微分运算法则六 微分运算法则七 基本积分公式八 补充积分公式九 下列常用凑微分公式十 分部积分法公式十一 第二换元积分法中的三角换元公式十二 重要公式十三 下列常用等价无穷小关系十四 三角函数公式十五 几种常见的微分方程

    2025年8月26日
    4
  • 缓存穿透,缓存击穿,缓存雪崩解决方案分析

    缓存穿透,缓存击穿,缓存雪崩解决方案分析前言设计一个缓存系统,不得不要考虑的问题就是:缓存穿透、缓存击穿与失效时的雪崩效应。缓存穿透缓存穿透是指查询一个一定不存在的数据,由于缓存是不命中时被动写的,并且出于容错考虑,如果从存储层查不到数据则不写入缓存,这将导致这个存在的数据每次请求都要到存储层去查询,失去了缓存的意义。在流量大时,可能DB就挂掉了,要是有人利用不存在的key频繁攻击我们的应用,这就是漏洞。解决方案

    2022年6月30日
    22

发表回复

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

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