<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<%-------------------------------------------------------------------------------------------------------------------一1：般用法--%>
<%--<script type="text/javascript" language="javascript">
// <!-- $(function (){} 这一块相当一当页面加载完毕时候执行里边的函数-- >
$(function () {
$("<div id='test'>代码块三</div>").appendTo("body");
var red = $("#test");
red.css("font-size", "50px");
red.css("color", "red");
}
)
</script>--%>
<%--//dom转换为Jquery 然后可以使用Jquery的各种方法
<script type="text/javascript" language="javascript">
$(
function () {
var span = document.getElementsByTagName("span")[0]; //返回dom元素对象
var span = $(span); //把dom对象转换为Jquery对象 dom对象没有Jqery中的各种方法 例如css(a,b)
span.css("color", "red");
}
)
</script>--%>
<%--//each用法--%>
<%--<script type="text/javascript" language="javascript">
$(
function () {
var span = $("span");
span.each(
function (n) {
$(this).css("font-size", (n + 1) * 12 + "px");
}
)
}
)
</script>--%>
<%--Jquery size()与 Length-- Get与Get(index)（Jquery转换为Dom对象$()为JQuery对象，$().GET()为dom对象）------实际上$()（Jqery）得到的是一个数据集合--%>
<%--<script type="text/javascript" language="javascript">
function getlendth() {
alert($("span").size());
alert($("span").length);
}
</script>--%>
<%--获取Jqery对象中指定元素的索引值--%>
<%--<script type="text/javascript" language="javascript">
$(
function getlendth() {
var a = $("body *"); //获取body元素包含的所有子元素
var e = document.getElementsByTagName("div")[0]; //获取div元素在dom中的索引值
alert(a.index(e));
}
)
</script>--%>
<%--//------------------------------------------------------------------------------------------------------------------------------------------2.--访问dom的属性--%>
<%--attr(name)获取属性,attr(key,value)为Jquery对象设置一个属性值,attr(key,fn)为Jquery对象设置一个函数,attr(properties)为Jquery同时定义多个属性,removeattr(name)（移除某个属性）--%>
<%--<script type="text/javascript">
function getlendth() {
// var href = $("a").attr("href");
// alert(href);
// $("img").attr("width", "100");
//$("img").attr("title",function(){return this.src;});
// $("img").attr({"100",height:"800", title:"你好吗"});
$("img").removeAttr("title");
}
</script>--%>
<%--//-------------------------------------------------------------------------------------------------------------------------------------3.----访问dom的样式--%>
<%--<script type="text/javascript">
function getlendth() {
// $("p").addClass("red");
// $("p").removeClass("red");
$("p").attr("class", "red");
}
</script>--%>
<%--<style type="text/css">
.bg{ background:#FF99FF;}
.bg1{ background:#00CCFF;}
</style>
<script type="text/javascript">
$(function () {
$("li").each(
function () {
this.Onmouseover = function () { $(this).toggleClass("bg"); }
this.onmouseout = function () { $(this).toggleClass("bg"); }
this.onclick = function () { $(this).toggleClass("bg1"); }
}
);
}
)
</script>--%>
<%---------------------------------------------------------------------------------------------------------------------------------------------4.--------//访问dom元素包含信息--%>
<script type="text/javascript">
// $(function () {
// // alert($("p").text());//获取p中包含的文本，包含子标签中的
// // $("p").text("<img src='http://www.baidu.com' src='' title='你好，测试信息' />");//为p标签的内容赋予新的值 <得到的不是图片，而是文本>
// // alert($("P").html());//获取p标签内部的所有内容，包括内部标签
// // $("p").html("<img src='http://www.baidu.com' src='' title='你好，测试信息' />");得到的是图片，不是文本
// //获取下拉菜单的当前值(value)，
// // alert($("select").text()); //值为：选项1，选项2，等
// // alert($("select").html());//值为：<option value="1">选项1</option>等
// //那么怎样才能获取下拉菜单的当前值(value)呢？/？？？？？？？？？？？？？？？？？？？？？？？？？
// })
//那么怎样才能获取下拉菜单的当前值(value)呢？/？？？？？？？？？？？？？？？？？？？？？？？？？
// function change() {
// alert($("select").val()); //不过var()只能获取和结果匹配的一个值，如果为多个复选框，再来几个单选框，那么就不能这样用var()了。要这样
// alert($($("input")[1])).val()) 其实还是val(); ----------------------------------------------------------------------------------------------------------- 认真研究研究这一块
// }
//------------------------------------------------------------- -------------------------------5. ---------选择器----------------------------
//选择器分为：常用选择器$(id，class，标签) ，伪选择器：:hover,:first;:last，表单专用选择器
// $(function () {
// $("div:hidden").css("display", "block");
// // $(":input").css("border", " solid 3px red");
// $("input:text").css("border", "solid 3px gray");
// $("input:radio").css("border","solid 5px yellow");
// })
</script>
//<!---------------------------------------------------------------------------------------------------------------6.筛选函数------------，文档处理------------------------------------------------------------>
<script type="text/javascript">
//// $(function () { $("li:gp(2)").css("color", "red"); })
// $(function () { $("li:gt(2)").css("color", "red"); })
//// $(function () { $("li:lt(2)").css("color", "red"); })
// $(function () {
// var divs = $("div");
// // divs.eq(0).css("color", "Gray");
// // divs.filter(".red,#box1").css("color","red");
//// divs.slice(0, 2).css('color',"red");//0为起始位置，2为结束位置
// })
//
$(function () {
//插入操作
//插入内部
// $("div").eq(1).append("<div>你好，我爱你！<div>"); //插入内部，自动尾置
// $("div").eq(1).appendTo("#box1"); //把 $("div").eq(1) 个元素追加到ＩＤ为＃ｂｏｘ１的内部
//PrePend与PrePendTo 用于把信息追加到内部但是自动前置。
//插入外部
//After(Content) 在每个匹配的元素之后插入内容
// Before(Content) 在每个匹配的元素之前插入内容
//InsertBefore(content) 把所有匹配的元素插入到另一个元素或者集合的前面
//InsertAfter(content)把所有匹配的元素插入到另一个元素或者集合的后面
//嵌套结构 Ｗｒａｐ（可以理解为被包括，被缠绕） ｗｒａｐ（） ｗａｐａｌｌ（） ｗａｐｉｎｎｅｒ（放在对象的内部了，其他的在外部被包括） （ｈｔｍｌ）（ｅｌｅｍｅｎｔ）
//替换结构 Ｒｅｐｌａｃｅｗｉｔｈ用什么替换 与 ＲｅｐｌａｃｅＡｌｌ（什么替换所有的） 用法相反＄（＂ｐ＂）．Replacewith("<div ｉｄ＝＂ｃｏｎｔｅｎｔ＂>盒子</div>");
//删除和克隆结构 删除＄（＂ｄｉｖ＂）．ｅｍｐｔｙ（）删除所有的子节点及内容 ＄（＂ｄｉｖ＂）．ｒｅｍｏｖｅ（） 删除ｄｉｖ元素节点及子节点及内容 结构复制克隆用ｌｏｎｅ（）不能克隆事件与ｌｏｎｅ（ｔｒｕｅ）（可以克隆事件）方法
})
// <!----------------------------------------------------------------------------------------------------------------------css处理------------------------------------------------------------->
//css(name) css("",""),css({"200px",height:"300px"})
//OffSet 位移获取当前窗口的坐标，返回 ｌｅｆｔ，Ｔｏｐ
//显示大小 height(),width() 获取元素高度 , height(var),width(var) ｈｅｉｇｈｔ（１００）设定元素高度
// <!------------------------------------------------------------------------------------------------------------------事件处理---------------------------------------------------------------->
//页面初始化事件
//window.onload=function(){} <body onload="function()"> $(document).reday{function(){}}=$(function() {}) 页面加载完毕后执行，使用时候确保＜ｂｏｄｙ＞中没有Ｏｎｌｏａｄ函数事件，否则不会执行
//为Ｊｑｕｅｒｙ绑定事件ｂｉｎｄ，$("div").bind("click",function(){}) ,为ｂｉｎｄ传递参数，$("div").bind("click","{Who : zhu ?}",function(event){alert(event.data.who);}) 删除事件绑定$("div").Unbind("click");
//One()==用法===bind() 仅能绑定能够执行一次的事件处理函数 ，单击一次后事件自动注销
//trigger(type,[data]) $("div").bind("me",function(){alert($(this).text());}) me 是自定义事件，这样的事不能自动执行的，我们可以为他定义一个ｔｒｉｇｇｅｒ（）方法；$("div").bind("me",function(){alert($(this).text());}) 之后再执行$("div").trigger("me");
// $("div").bind("click", function () { alert($(this).text()); });
// $("div").bind("mouseover", function () { $("div").trigger("click"); });里边的ｃｌｉｃｋ可以换成自定义事件 ／／当单击时候触发事件，当鼠标经过时候也触发事件。
//triggerHandler(type,[data]);不会触发默认事件
</script>
<script type="text/javascript">
//<input type="text" value="">
//<button id="OK">OK</button>
//$("input").focus(function(){$("<span>单击一次！</span>")}).appendto("body");$("#OK").click(function(){$("input").trigger("focus")}) 触发两次，单击一次，浏览器默认的一次，如果ｔｒｉｇｇｅｒ换成ｔｒｉｇｇｅｒｈａｎｄｌｅｒ 则单击触发一次，默认的不会触发
</script>
//交互事件 ｈｏｖｅｒ（ｏｖｅｒ ，ｏｕｔ）鼠标经过移开事件 ｔｏｇｇｌｅ（ｆｎ，ｆｎ）单击两次事件显示不同
<script type="text/javascript">
$("p").hover(function () { $(this).css("color", "red"); }, function () { $(this).css("color", "transparent"); });
$("p").tooggle(function () { $(this).css("color", "red"); }, function () { $(this).css("color", "transparent"); }); //当鼠标第一次点击变红，当鼠标第二次点击回复原色，字体颜色透明。
</script>
//封装默认事件 方法（blue,blue(fn),change(),change(fn),click(),click(fn),dbclick(),dbclick(fn),error()focus ,onmouseover,onmouseout等等）
//动画处理省略
//ＡＪＡＸ
</head>
<body onload="getlendth()" >
<form id="form1" runat="server">
<%--
1. <span><p>文本块一</p></span>
<p><span>文本块二</span></p>
<div>div元素</div>
</div>
<a href="http://www.baidu.com" id="img" target="_blank">超级链接</a>
<a href="http://www.sina.com" id="A1" target="_blank">超级链接</a>
<a href="http://www.qq.com" id="A2" target="_blank">超级链接</a>
2.
<img id="image1" src="你好啊，我的朋友！" title="你好，我是title" />
3.
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>--%>
<%--4.
<p>段落文本<span>1</span></p>
<select onchange="change()">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3" selected="selected">选项3</option>
</select>
<input type="text" value="文本框" />
<input type="radio" value="单选按钮" />
<input type="checkbox" value="复选框" />
<input type="hidden" value="隐藏域" />
<input type="submit" value="提交按钮" />
5.
<div>盒子一</div>
<div style=" display:none;">盒子二，隐藏元素！</div>
<div><p>盒子三</p></div>--%>
6.筛选函数
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>div模块一</div>
<div id="box1">div模块二</div>
<div class="red">div模块三</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="donghuaxiaoguo.aspx.cs" Inherits="donghuaxiaoguo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
// 1 基本动画
// $(function () {
// $("p").show(10000, function () { alert($(this).text() + "显示完毕"); });//show(),show(speed,fn),hide(),hide(speed,fn),toggle
// })
// 2 //滑动动画
// $(function () {
// $("p").slideDown("slow"); //slow,normal,fast 效果和show（）相同
// $("p").slideUp("slow");
// })
// $(function () {
// $("p").slideToggle("slow");
// $("p").slideToggle("slow");
// // })
// 3 //淡入淡出 fadein(speed,fn),fadeout(speed,fn) fadeto(0到1的一个实数)设置透明度
// $(function () {
// // $("p").fadeIn(2000);
// // $("p").bind("mouseover", function () { $("p").fadeOut(1000); $("p").fadeIn(1000); fadeOut(1000); $("p").fadeIn(1000); fadeOut(1000); $("p").fadeIn(1000); });
// });
// $(function () {
// $("p").fadeTo("slow", 0.2, function () { $(this).fadeTo("slow", 1); });
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p style="display:none; font-size:48px;">基本动画</p>
</div>
</form>
</body>
</html>