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