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