`

YUI学习一

YUICSSjQueryJavaScriptStruts 
阅读更多

学习了下YUI3， 比jquery大多了， 查文档不像jquery那样方便 ， 把学到的东西在这记一下， 方便查找。

使用YUI().use("node",function(Y)) {}时候， node的意思就是对dom的基本操作（个人理解）

Y.one("#idname")相当于document.getElementById("idname");

Y.one("#idname").set("value", value); 相当于document.getElementById("idname").value=value;

Y.one("#idname").setStyle('visibility', 'visible') 相当于document.getElementById('idname').style.visibility='visible';

Y.on("change", changefunction,Y.one("#idname")); // 为ID为idname的元素添加onchange事件
Y.on("keyup", changefunction,Y.one("#idname")); // 为ID为idname的元素添加onkeyup事件

 

// 遍历class为onmouse_out的所有元素， 为这个元素添加onmouseover事件

Y.all('.onmouse_out').on('mouseover', function(e) {
   e.currentTarget.set("className",'onmouse_over');
});

 

以下为使用YUI3实现的简单的自动提示功能， 支持方向键选择和鼠标两种方式 取数据的过程很简单，就是从数据库中查询数据。

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>operation</title>
        <link rel="stylesheet" type="text/css" href="./js/yui/build/cssreset/reset-min.css">
        <link rel="stylesheet" type="text/css" href="./js/yui/build/cssfonts/fonts-min.css">
        <link rel="stylesheet" type="text/css" href="./js/yui/build/cssgrids/grids-min.css">
        <link rel="stylesheet" type="text/css" href="./js/yui/build/cssbase/base-min.css">
        <style type="text/css">
        #demo {
            height: 300px;
            width: 400px;
            border: 1px solid black;
            background-color: #8DD5E7;
            cursor: move;
            text-align:center;
        }
        #search_result {
            position:relative;
            visibility:hidden;
            overflow:auto;
            float:left;
            height:200px;
            background-color:#ccc;
            border:1px solid #000;
        }
        .onmouse_over {
            padding:2px;
            background-color: #fff;
        }
        .onmouse_out {
            padding:2px;
            background-color: #ccc;
        }
        .onkey_fo {
        }
        </style>
        <script type="text/javascript" src="./js/yui/build/yui/yui.js"></script>
        <script type="text/javascript" src="./js/yui/build/yui/yui-min.js"></script>
            
  </head>
 
  <body class="yui3-skin-sam">
        <div class="yui3-g" id="bd">
            <div class="yui3-u" id="main">
               <div id="productsandservices" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav">
                    <div class="yui3-menu-content">
                        <ul class="first-of-type">
                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="save.jsp">Add User</a></li>
                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="listUser.action">List Users</a></li>
                        </ul>            
                    </div>
                </div>
                <br>
                <input type="text" id="searchname" style="display:block"/>
                <div id="search_result"> </div>
            </div>
        </div>
        <div id="footer">
            <p></p>
        </div>
        <!-- YUI Seed -->
        <script type="text/javascript">
            //  Call the "use" method, passing in "node-menunav".  This will load the
            //  script and CSS for the MenuNav Node Plugin and all of the required
            //  dependencies.
        YUI().use("node-menunav", "dd-drag", "attribute", "io", function(Y) {
                var historyvalue = Y.one("#searchname").get("value");
                //  Retrieve the Node instance representing the root menu
                //  (<div id="productsandservices">) and call the "plug" method
                //  passing in a reference to the MenuNav Node Plugin.
                var menu = Y.one("#productsandservices");
                menu.plug(Y.Plugin.NodeMenuNav);
                //  Show the menu now that it is ready
                menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
                
//              var dd = new Y.DD.Drag({
//                  node: '#demo'
//              });   
                  
                function handleSuccess(ioId, o) {
                    if (o.responseText !== undefined) {
                        var rtnText = o.responseText;
                        rtnText = rtnText.replace(/(, *$)|(^, *)/,"");
                        var rtnArr = rtnText.split(",");
                        var s = document.getElementById("search_result");
                        s.innerHTML = "";
                        for(var i = 0; i < rtnArr.length; i++) {
                               var suggest = '<div ';   
                               suggest += 'class="onmouse_out">' + rtnArr[i] + '</div>';   
                               s.innerHTML += suggest;
                        }
                        Y.one("#search_result").setStyle('visibility', 'visible');
                        // 为每个DIV添加onmouseout,onouseover和onclick事件
                        Y.all('.onmouse_out').on('click', function(e) {
                                Y.one("#searchname").set("value",e.currentTarget.get("innerHTML"));
                                Y.one("#search_result").set("innerHTML","");
                                Y.one("#search_result").setStyle("visibility","hidden");
                            });
                        Y.all('.onmouse_out').on('mouseout', function(e) {
                            e.currentTarget.set("className",'onmouse_out');
                        });
                        Y.all('.onmouse_out').on('mouseover', function(e) {
                            e.currentTarget.set("className",'onmouse_over');
                        });
                    }
                }
                function handleFailure() {
                    alert('failue');
                }
                var cfg = {
                         on:{
                            success:handleSuccess,
                            failure:handleFailure
                         },
                         method: "POST",
                         data: ""
                 };
                 var url = "http://localhost:8080/auction/ajaxUserListAction.action";
                function makeRequest(e) {
                    // key down
                    if(e.keyCode === 40) {
                        if(Y.one("#search_result").get("lastChild").get("className") == 'onmouse_over') {
                            Y.one("#search_result").get("firstChild").set("className", "onmouse_over");
                            Y.one("#search_result").get("lastChild").set("className", "onmouse_out");
                        }
                        else {
                            if(Y.one(".onmouse_over")){
                                Y.one(".onmouse_over").get("nextSibling").set("className", "onkey_fo");
                                Y.one(".onmouse_over").set("className", "onmouse_out");
                                Y.one(".onkey_fo").set("className", "onmouse_over");
                            }
                            else{
                                Y.one("#search_result").get("firstChild").set("className", "onmouse_over");
                            }
                        }
                        return ;
                    }
                    if(e.keyCode === 38) {
                        if(Y.one("#search_result").get("firstChild").get("className") == 'onmouse_over') {
                            Y.one("#search_result").get("lastChild").set("className", "onmouse_over");
                            Y.one("#search_result").get("firstChild").set("className", "onmouse_out");
                        }
                        else {
                            if(Y.one(".onmouse_over")){
                                Y.one(".onmouse_over").get("previousSibling").set("className", "onkey_fo");
                                Y.one(".onmouse_over").set("className", "onmouse_out");
                                Y.one(".onkey_fo").set("className", "onmouse_over");
                            }
                            else{
                                Y.one("#search_result").get("lastChild").set("className", "onmouse_over");
                            }
                        }
                        return ;
                    }
                    if(e.keyCode === 13) {
                        Y.one("#searchname").set("value",Y.one(".onmouse_over").get("innerHTML"));
                        Y.one("#search_result").set("innerHTML","");
                        Y.one("#search_result").setStyle("visibility","hidden");
                        return;
                    }
                    if(Y.one("#searchname").get("value") == historyvalue) {
                        return ;
                    }
                    else {
                        historyvalue = Y.one("#searchname").get("value");
                        cfg.data = "firstname=" + Y.one("#searchname").get("value");
                        Y.io(url, cfg);
                    }
                }
                Y.on("keyup", makeRequest,Y.one("#searchname"));

            });
            
        </script>
  </body>
</html>

 

 

下面是对应的javascript中关于dom操作的一点函数

特性/方法                      类型/返回类型                说明

nodeName                    String                节点的名字;根据节点的类型而定义
nodeValue                     String                节点的值;根据节点的类型而定义
nodeType                      Number            节点的类型常量值之一
ownerDocument             Document          指向这个节点所属的文档
firstChild                        Node                 指向在childNodes列表中的第一个节点
lastChild                        Node                指向在childNodes列表中的最后一个节点
childNodes                    NodeList          所有子节点的列表
parentNode                   Node               该节点的父节点
previousSibling              Node                指向前一个兄弟节点;如果这个节点就是第一个兄弟节点，那么该值为null
nextSibling                     Node               指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点，那么该值为null
hasChildNodes()            Boolean           当childNodes包含一个或多个节点时,返回真
attributes                       NamedNodeMap    包含了代表一个元素的特性的Attr对象;仅用于Element节点
appendChild(node)         Node              将node添加到childNodes的末尾
removeChild(node)         Node              从childNodes中删除node
replaceChild(newnode,oldnode)     Node           将childNodes中的oldnode替换成newnode
insertBefore(newnode,refnode)    Node          在childNodes中的refnode之前插入newnodd
getAttribute(name)－－等于attributes.getNamedItem(name).value;
setAttribute(name,newvalue)－－等于 attribute.getNamedItem(name).value=newvalue;
removeAttribute(name)－－等于attribute.removeNamedItem(name)。

分享到：
| 键盘上各种符号的英文名称
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    《YUI使用文档》汉语版的yui学习材料

    《YUI使用文档》汉语版是一份详细的YUI学习材料，它涵盖了这个JavaScript库的核心功能和使用方法。YUI，全称Yahoo! User Interface Library，是Yahoo开发的一个开放源代码的JavaScript库，旨在帮助开发者创建交互式...

    yui3-master.zip

    通过“yui3-master.zip”这个压缩包，开发者不仅可以了解到YUI3的基本架构，还可以通过阅读源码来学习和掌握JavaScript的最佳实践，提升自身的前端开发能力。无论是初学者还是经验丰富的开发者，都能从中受益匪浅。...

    关于yui的学习

    User Interface Library（简称YUI）是一个广泛使用的开源JavaScript库，它提供了丰富的功能来帮助开发者构建交互式、高性能的Web应用程序。YUI涵盖了CSS样式、JavaScript组件和工具，使得前端开发变得更加高效和...

    yui.rar 例子

    《深入理解YUI：基于“yui.rar 例子”的解析》 ...学习并掌握YUI，不仅可以提高开发效率，还能为用户提供更优质的交互体验。无论是新手还是经验丰富的开发者，都可以从YUI中获益，打造出更加健壮和高效的Web应用。

    YUI2.8.1包括demo api是学习的好东西

    YUI 2.8.1是该库的一个特定版本，包含了丰富的功能和工具，对于想要深入学习前端开发，尤其是使用Yahoo框架的人来说，是一个非常宝贵的学习资源。 在YUI 2.8.1中，我们主要可以关注以下几个关键知识点： 1. **模块...

    【YUI组件】基于YUI的表单验证器

    1. **YUI库**：了解YUI的基本结构、模块化设计和如何引入到项目中，是使用YUI表单验证器的前提。 2. **表单验证**：表单验证的常见规则包括非空检查、长度限制、格式验证（如邮箱、电话号码等）和自定义验证函数。 3...

    YUI3.6文档及示例

    1. **模块系统**：YUI3引入了模块化设计，允许开发者按需加载组件，降低页面的初始化时间。模块可以通过`YUI.use()`方法来加载，实现了代码的异步加载和依赖管理。 2. **事件系统**：YUI的事件处理机制强大且灵活，...

    yahoo3.0 YUI　Ｅxamples

    【标签】"yahoo3.0 YUI　Ｅxamples"再次强调了主题，这些标签有助于搜索和分类，便于用户找到相关的YUI学习材料。 【压缩包子文件的文件名称列表】"developer.yahoo.com"可能是指包含YUI 3.0 Examples的源码或文档...

    Yui_ext 学习笔记

    【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展，主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识，适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...

    YAHOO yui2.7 文档+ 代码+例子

    **YUI 2.7：一个全面的JavaScript和CSS框架** YUI（Yahoo! User Interface Library）是雅虎公司开发的一个开源的JavaScript和CSS库，它为构建高性能、跨平台的Web应用程序提供了丰富的工具和资源。YUI 2.7是这个库...

    YUI-EXT使用详解

    1. **组件（Components）**：YUI-EXT的核心就是组件，每个组件都是一个自包含的、可重用的UI元素，如按钮、面板、树形视图等。这些组件都有自己的生命周期，包括创建、初始化、渲染和销毁等阶段，便于开发者进行控制...

    yui_3.8.1.zip

    Yahoo UI Library（简称YUI）是一款开源的JavaScript库，由Yahoo公司开发并维护，旨在帮助开发者构建高性能、可扩展的Web应用程序。YUI 3.8.1是其发展过程中的一个重要版本，包含了丰富的组件和工具，为前端开发者...

    yui_2.5.2 类库

    YUI 2.5.2是该库的一个特定版本，包含了源码和说明文档，对于学习和使用YUI具有很高的参考价值。 1. **YUI概述** YUI的核心理念是模块化和可定制性。它允许开发者按需选择所需的组件，减少页面加载时间，提高性能...

    yui3.10.3最新版

    **YUI 3.10.3：一个强大的JavaScript库** YUI（Yahoo! User Interface Library）是一个开源的JavaScript库，由雅虎公司开发并维护，旨在帮助开发者构建富交互性和高性能的Web应用。YUI 3.10.3是这个库的一个重要...

    YUI 详细说明文档

    ### YUI 详细说明文档 ...以上概述了YUI的一些核心概念和技术细节，希望对学习YUI有所帮助。YUI不仅提供了强大的工具库，还有一系列实用的组件，这些都大大简化了Web开发的工作量，并提高了项目的质量。

    YUI3.7.3 最新版本 带API

    1. **模块系统**：YUI3引入了CommonJS风格的模块系统，允许开发者通过`YUI.use()`方法加载所需模块，实现按需加载，减少页面初始化时的加载量。 2. **事件处理**：YUI3提供了强大的事件系统，支持DOM事件、自定义...

Magicbox
Global site tag (gtag.js) - Google Analytics