pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/jquery.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/operTable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//(一 选择器)
//var length = $("span").length;
//测试选择器
//(1) id选择器
var menu1 = $("#menu1").text();
// alert(menu1);
// (2)class选择器
var div1 = $("div.showMenuDiv#item1 ul li:first");
var div2 = $(".showMenuDiv");
//alert(div1.text());
//(3)标签选择器
var span = $("span");
//alert(span.length);
//(4)属性选择器
var item1href = $("[href^='menu1']");
//alert(item1href.length);
var ahref = $("a[href]");
//alert(ahref.length);
$("a[href]").each(function() {
// alert($(this).attr("href"));
});
$("span[id^='menu']").click(function() {
$(this).next().toggle(2000);
});
//(5)层次选择器
//alert($("#item1 li").length);
//alert($("#item1>ul").length);
var nextVar = $("#menu1+next");
// alert(nextVar.attr("id"));
//过滤选择器
//(1)基本过滤选择器
//对一个table的操作
var tableDiv = $("#tableDiv");
$("[name='createTable']").click(function() {
createTable(tableDiv);
testPend();
myReplace();
//给每一列加上事件
var tds = $("#myTable tr td");
changeTrCss(tds);
});
//createTable(tableDiv);
//事件
//在任意位置添加行
var addButton = $("input[value='添加新行']");
addButton.click(function() {
var rowNumber = $("input[name='rowNumber']").val();
//alert(rowNumber);
addRow(rowNumber);
});
//删除任意位置的行
var deleteButton = $("input[value='删除行']");
deleteButton.click(function() {
var rowNumber = $("input[name='rowNumber']").attr("value");
//alert(rowNumber);
deleteRow(rowNumber);
});
//(2)内容过滤选择器
//eg:取到所有包含menu文本的超链接 //是个模糊定位
var a = $("a[href]:contains('menu')");
$.each(a, function(x, data) {
// alert($(data).attr('href'));
});
//(3)可见性过滤器
var visibleSelecter = $("div:hidden");
$.each(visibleSelecter, function() {
// alert($(this).attr("id"));
});
//(4)子元素过滤器
var firstChild = $("#myTable:nth-child(2)");
//alert(firstChild.text());
//(5)表单对象属性过滤选择器
var formSelecter = $(":enabled");
$.each(formSelecter, function() {
// alert($(this).attr('type'));
});
//(6)表单选择器
var inputSelecter = $("[name='rowNumber']");
//alert(inputSelecter.length);
inputSelecter = $("[name='rowNumber']:input");
//alert(inputSelecter.val());
//(二)dom操作
//dom操作见operTable.js
//(四css操作)
//css操作
//(1)addClass
$("[value='addCss']").click(function(){
$("#testSpan").addClass("testCss");
});
//(2)移去css
$("[value='removeCss']:button").click(function(){
$("#testSpan").removeClass("testCss");
});
//(六) 常用的遍历节点方法
//children
var child = $("#item1 ul").children();
//alert(child.length);
//next
var liNext = $("#item1 ul li:first").next();
//alert(liNext.children().attr("href"));
//prev
var div1 = $("#item1");
//alert(div1.prev().attr("id"));
});
</script>
</head>
<body>
<span id="menu1">menu1</span>
<div id="item1" class="showMenuDiv">
<ul>
<li><a href="menu1_item1.html">menu1_item1</a>
</li>
<li><a href="menu1_item2.html">menu1_item2</a>
</li>
<li><a href="menu1_item3.html">menu1_item3</a>
</li>
<li><a href="menu1_item4.html">menu1_item4</a>
</li>
</ul>
</div>
<br>
<span id="menu2">menu2</span>
<div id="item2" class="showMenuDiv">
<ul>
<li><a href="menu2_item1.html">menu2_item1</a>
</li>
<li><a href="menu2_item2.html">menu2_item2</a>
</li>
<li><a href="menu2_item3.html">menu2_item3</a>
</li>
<li><a href="menu2_item4.html">menu2_item4</a>
</li>
</ul>
</div>
<div id="tableDiv"></div>
<span name="rowNumber"></span>
<br>
<input type="button" name="createTable" value="创建table">
<form action="">
第：<input type="text" name="rowNumber" value="1">行<input
name="button" type="button" value="添加新行"><br> <input
name="button" type="button" value="删除行"><br>
append,prepend 测试<br> <input type="button" name="append"
value="append"><br> <input type="button" name="prepend"
value="prepend"><br> replaceWith 测试，eg,将1，3的值互换<br>
<input type="button" value="replace" name="replace">
</form>
<br><br><br>
<span id="testSpan">测试css</span><input type="button" value="addCss"><input type="button" value="removeCss">
<br>
<br>
<a href="goajax.html">jquery ajax</a>
</body>
</html>
document.write("<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>");
document.write("<script language='javascript' src='jquery-1.8.0.js'></script>");
function createTable(tableDiv){
var tableString ="";
tableString+="<table id='myTable' align='center' border='1' width='200' height='100'>";
tableString+="<tr><td>key</td><td>value</td></tr>";
for(var i = 0 ; i <5 ; i++){
tableString+="<tr><td>key"+i+"</td><td>value"+i+"</td></tr>";
}
tableString+="</table>";
tableDiv.html(tableString);
}
//动态改变每行的样式
function changeTrCss(tds){
tds.click(function(){
//tds.css("background-color","red");
$(this).css("background-color","red");
alert($(this).text());
});
}
//给table动态的加上一行
function addRow(index){
var length = $("#myTable tr").length;
var inserter;
if(index>length||""==index||null==index||index<=0){
inserter = $("#myTable tr:last");
}else{
inserter = $("#myTable tr:eq("+(index-1)+")");
}
var newRow = "<tr><td>newKey</td><td>newValue</td></tr>";
$(newRow).insertAfter(inserter);
}
function deleteRow(index){
var length = $("#myTable tr").length;
if(index>length||index==""||index==null||index<=0){
alert("删除的行不存在".toLocaleString());
return ;
}
else{
index = index -1 ;
var removeTr = $("#myTable tr:eq("+index+")");
removeTr.remove();
}
}
//append ,prepend测试
function testPend(){
var newRow = $("#myTable tr:eq(3)").clone(true);
$("[name*='pend']").click(function(){
var name= $(this).attr("name");
if("append"==name){
$("#myTable").append(newRow);
}else{
$("#myTable").prepend(newRow);
}
});
}
//替换节点 将1，3的值互换
function myReplace(){
$("[name='replace']").click(function(){
var row1 = $("#myTable tr:eq(0)");
var row3 = $("#myTable tr:eq(2)");
row1.replaceWith(row3.clone());
row3.replaceWith(row1.clone());
});
}
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
