Jquery基础资料
首先应该添加Jquery引用文件
<script src="Js/jquery-1.7.js" type="text/javascript"></script>
<script src="Js/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
//加载完成后执行的事情
window.onload = function () {
TestFunction();
}
//在鼠标改变浏览器的长宽时触发
$(window).resize(function () {
SetScreenWH();
});
//设置该页面的宽度和高度
function SetScreenWH() {
var widthW = $(window).width(); //获取浏览器的宽度
var ScreenWidth = screen.width; //获取电脑屏幕的宽度
if (widthW < 1175) {
window.resizeTo(ScreenWidth-40, 65); //设置该页面的宽度和高度
}
}
function SS() {
var v_PX = "20px";
setTimeout(SetPX, 2000); //setTimeout方法为5秒后执行SetPX()方法
function SetPX() {
v_PX = "-20px";
$("*[id$=tbOutnum]").val(v_PX); //Jquery获取服务器控件的ID方法（一）【服务器控件为<asp:TextBox ID="tbOutnum" runat="server" />】
$("input[id*=tbOutnum]").val(v_PX); //Jquery获取服务器控件的ID方法（二）【服务器控件为<asp:TextBox ID="tbOutnum" runat="server" />】
$("#<%=tbOutnum.ClientID %>").val(v_PX); //Jquery获取服务器控件的ID方法（三）【服务器控件为<asp:TextBox ID="tbOutnum" runat="server" />】
}
}
//几秒倒计时，计时完成后并执行相应的方法【实现方法一】
function AfterSomeSecondsDo() {
var v_Seconds = 5; //定义5秒
var v_Intervalid;
v_Intervalid = setInterval(SetSomeThing, 1000); //间隔一秒后执行SetSomeThing()方法
function SetSomeThing() {
if (v_Seconds == 0) {
AfterSomeSecondsDo(); //等于0秒时执行AfterSomeSecondsDo()方法
clearInterval(v_Intervalid); //clearInterval() 方法可取消由 setInterval() 设置的 timeout【clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值】
}
$("#<%=tbOutnum.ClientID %>")[0].value = "倒数" + v_Seconds + "秒后弹出消息框";
v_Seconds--;
}
}
//几秒倒计时，计时完成后并执行相应的方法【实现方法二】
var v_Sec = 6;
function TimeJian() {
v_Sec -= 1;
$("#<%=tbOutnum.ClientID %>")[0].value = (v_Sec)+"秒倒计时";
setTimeout(TimeJian, 1000);
if (v_Sec == 0) {
alert("Over");
}
}
//使用load方法将页面嵌入某区域【相当于IFrame效果】
function FillHtmlInAspx() {
$(".div_InnerNewAspx").load("CCSS.aspx", function () { alert("我使用的是Jquery中的AJAX方法load"); });
}
//Jquery为集合对象中的控件赋值
function FillAllTextBoxValue() {
//声明集合对象v_AllTextBox（此时该集合对象中存储的对象有两个，一个是ID=tbOutnum和ID=tbWorkid的文本框）
var v_AllTextBox = $("#<%=tbOutnum.ClientID %>,#<%=tbWorkid.ClientID %>");
//循环为集合对象中控件赋值
for (i = 0; i < v_AllTextBox.length; i++) {
v_AllTextBox[i].value = i + 1;
}
}
//Jquery中hover方法控制鼠标滑过或者离开对象时的样式或者执行相应的方法【hover中有两个方法函数，第一个为鼠标滑过时的方法，第二个则为离开时的方法】
function FillAllTextBoxValue() {
$("#test").hover(
function () {
$("#<%=tbOutnum.ClientID %>")[0].value = "鼠标滑过";
}, function () {
$("#<%=tbOutnum.ClientID %>")[0].value = "鼠标离开";
});
}
//检测浏览器版本
function DetectionBrowserVersion() {
//IE浏览器
if ($.browser.msie) {
if (($.browser.version == "5.0") && !$.support.style) {
alert("您的浏览器为【IE】浏览器，版本为【5.0】");
}
if (($.browser.version == "5.5") && !$.support.style) {
alert("您的浏览器为【IE】浏览器，版本为【5.5】");
}
if (($.browser.version == "6.0") && !$.support.style) {
alert("您的浏览器为【IE】浏览器，版本为【6.0】");
}
if (($.browser.version == "7.0") && !$.support.style) {
alert("您的浏览器为【IE】浏览器，版本为【7.0】");
}
if (($.browser.version == "8.0") && !$.support.style) {
alert("您的浏览器为【IE】浏览器，版本为【8.0】");
}
}
//火狐浏览器
if ($.browser.mozilla) {
alert("您的浏览器为【火狐】浏览器");
}
//opera浏览器
if ($.browser.opera) {
alert("您的浏览器为【opera】浏览器");
}
//苹果safari
if ($.browser.safari) {
alert("您的浏览器为【苹果safari】浏览器");
}
//苹果的Safari、谷歌的Chrome浏览器
if ($.browser.WebKit) {
alert("您的浏览器为【opera】浏览器");
}
}
function TestFunction() {
var v_ClearTrim = " 888888 "; //我是用来测试trim方法的，去除空格
if (!$("#tbWorkid").val()) {//$("#tbWorkid").val()代表获取id为tbWorkid的值（$("#tbWorkid")[0].value等价于之前的取值方法），在前面加一个“!”表示是否为空
$("#tbWorkid").val("赋值"); //$("#tbWorkid").val("赋值")代表为id为代表获取id为tbWorkid的值赋值（方法一）
$("#tbWorkid").[0].value="赋值"; //$("#tbWorkid").val("赋值")代表为id为代表获取id为tbWorkid的值赋值（方法二）
}
else {
$("#tbWorkid").val($.trim(v_ClearTrim)); //$.trim(v_ClearTrim)表示去除字符串v_ClearTrim的空格
}
$("#test").css("display", "block"); //表示为某控件设置样式
$("#tbWorkid").focus(); //设置某控件为默认的选中焦点
var v_InnerHTML = "<table style='color:red;'><tr><td>1</td></tr><tr><td>2</td></tr><table>";
$("#divtest").html(v_InnerHTML); //将html代码添加到id为divtest的div中
$("tr").css("cursor", "pointer"); //当鼠标移动到所有tr行上的时候，设置鼠标的样式（hand、pointer、crosshair、help）
$(document).ready(function () {//点击tr行的时候跳转到指定的页面
$("tr").click(function (event) {
var row = jQuery(this)
var firstParam = row.children("td:eq(0)").text();//获取点击行第一个td的值
var secondParam = row.children("td:eq(1)").text(); //获取点击行的二个td的值
var navUrl = "Login.aspx?cid=" + firstParam + "&cname=" + secondParam;
top.location = navUrl;//执行跳转的页面
});
});
$(".td_BG_05").height(900); //设置class为td_BG_05的高度为900px
alert($(".td_BG_07").height()); //返回class为td_BG_07的高度
}
</script>
/********************************/
<!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 src="../Js/jquery-1.7.js" type="text/javascript"></script>
<script src="../Js/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
onload = function () {
// SetInfo();
}
$(function () {
SetInfo();
});
function SetInfo() {
$("#hide").click(function () {
$("img").hide(500);
});
$("#show").click(function () {
$("img").show(500);
});
$("#fadein").click(function () {
$("img").fadeIn(500);
});
$("#fadeout").click(function () {
$("img").fadeOut(500);
});
$("#slideup").click(function () {
$("div").add("img").slideUp("fast");
});
$("#slidedown").click(function () {
$("div").add("img").slideDown("fast");
});
$("#btnSize").click(function () {
alert("我返回的是对象的总数量。\n在这里返回的是img图片标签的数量为【" + $("img").size() + "】张！\n在这里的用法为$('img').size()。");
});
$("#btnLength").click(function () {
alert("我返回的是对象的总数量。\n在这里返回的是img图片标签的数量为【" + $("img").length + "】张！\n在这里的用法为$('img').length。");
});
$("#btnGet").click(function () {
$("img").get().reverse();
alert("我返回的是对象的总数量。\n在这里返回的是img图片标签的数量为【" + $("img").get(0) + "】张！\n在这里的用法为$('img').length。");
});
var v_Css = {background:"gray",font-size};
$(document.body).css("background", "gray");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="hide" value="Hide隐藏" />
<input type="button" id="show" value="Show显示" />
<input type="button" id="fadeout" value="FadeOut隐藏" />
<input type="button" id="fadein" value="FadeIn显示" />
<input type="button" id="slideup" value="slideDown隐藏" />
<input type="button" id="slidedown" value="slideUp显示" />
<br />
<div id="div" style="width: 231px; height: 147px; border: 1px solid green;">
</div>
<img src="../Image/1.jpg" />
<img src="../Image/2.jpg" />
<br />
<br />
<input type="button" id="btnSize" value="size()方法" />
<input type="button" id="btnLength" value="length方法" />
<input type="button" id="btnGet" value="get()方法" />
</form>
</body>
</html>
/********************************/
