Jquery 基础教程测试
<%@ 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({width:"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) 个元素追加到ID为#box1的内部
//PrePend与PrePendTo 用于把信息追加到内部但是自动前置。
//插入外部
//After(Content) 在每个匹配的元素之后插入内容
// Before(Content) 在每个匹配的元素之前插入内容
//InsertBefore(content) 把所有匹配的元素插入到另一个元素或者集合的前面
//InsertAfter(content)把所有匹配的元素插入到另一个元素或者集合的后面
//嵌套结构 Wrap(可以理解为被包括,被缠绕) wrap() wapall() wapinner(放在对象的内部了,其他的在外部被包括) (html)(element)
//替换结构 Replacewith用什么替换 与 ReplaceAll(什么替换所有的) 用法相反$("p").Replacewith("<div id="content">盒子</div>");
//删除和克隆结构 删除$("div").empty()删除所有的子节点及内容 $("div").remove() 删除div元素节点及子节点及内容 结构复制克隆用lone()不能克隆事件与lone(true)(可以克隆事件)方法
})
// <!----------------------------------------------------------------------------------------------------------------------css处理------------------------------------------------------------->
//css(name) css("",""),css({width:"200px",height:"300px"})
//OffSet 位移获取当前窗口的坐标,返回 left,Top
//显示大小 height(),width() 获取元素高度 , height(var),width(var) height(100)设定元素高度
// <!------------------------------------------------------------------------------------------------------------------事件处理---------------------------------------------------------------->
//页面初始化事件
//window.onload=function(){} <body onload="function()"> $(document).reday{function(){}}=$(function() {}) 页面加载完毕后执行,使用时候确保<body>中没有Onload函数事件,否则不会执行
//为Jquery绑定事件bind,$("div").bind("click",function(){}) ,为bind传递参数,$("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 是自定义事件,这样的事不能自动执行的,我们可以为他定义一个trigger()方法;$("div").bind("me",function(){alert($(this).text());}) 之后再执行$("div").trigger("me");
// $("div").bind("click", function () { alert($(this).text()); });
// $("div").bind("mouseover", function () { $("div").trigger("click"); });里边的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")}) 触发两次,单击一次,浏览器默认的一次,如果trigger换成triggerhandler 则单击触发一次,默认的不会触发
</script>
//交互事件 hover(over ,out)鼠标经过移开事件 toggle(fn,fn)单击两次事件显示不同
<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等等)
//动画处理省略
//AJAX
</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>