YUI学习一
学习了下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 id="bd">
??????????? <div id="main">
?????????????? <div id="productsandservices" href="save.jsp">Add User</a></li>
??????????????????????????? <li 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 += '+ 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)。
