YUI学习一

最新推荐文章于 2020-12-04 05:08:52 发布

iteye_9202

最新推荐文章于 2020-12-04 05:08:52 发布

阅读量186

点赞数

分类专栏： javascript 文章标签： YUI CSS jQuery JavaScript Struts ViewUI

本文链接：https://blog.csdn.net/iteye_9202/article/details/81934169

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

学习了下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>
        
        <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)。

iteye_9202

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
YUI学习一

学习了下YUI3，比jquery大多了，查文档不像jquery那样方便，把学到的东西在这记一下，方便查找。使用YUI().use("node",function(Y)) {}时候， node的意思就是对dom的基本操作（个人理解）Y.one("#idname")相当于document.getElementById("idname");Y.one("#idname").set(...
复制链接

扫一扫