Jquery能做什么
访问和操作DOM元素 控制页面样式 对页面事件进行处理 与Ajax技术完美结合 设置
动态效果 获取页面元素 无需刷新页面获得服务器信息 简化常见的javasrcipt任务
Jquery的优势
体积小，压缩后只有100KB左右 l强大的选择器出色的DOM封装 可靠的事件处理机制
出色的浏览器兼容性 使用隐式迭代简化编程 丰富的插件支持
怎么通过Jquery设置样式
1）.通过$(“选择器”).css(“属性名”,”属性值”);
//这里的书写的属性名和css中书写的一致
2）.$(“选择器”).html():获取两个标签之间的html代码
3）.$(“选择器”).addClass(“属性值”)
可以动态的改变dom文档结构。进而设置样式。
案例详解：
<body>
<form id="form1" runat="server">
<div>
<%-- 光棒效果 改变li的背景色--%>
<ul>
<li>看这呀！</li>
<li>看着呢！</li>
</ul>
<%--文字显示--%>
<p id="txt_hide">点击按钮，我会被隐藏哦~</p>
<p id="txt_show">隐藏的我，被显示了，嘿嘿~</p>
<input id="btn1" type="button" name="show" value="点击显示文字 " />
<input id="btn2" type="button" name="hide" value="点击隐藏文字 " />
<%--p标签添加动态效果--%>
<p>哈哈哈</p>
<asp:Button ID="Button1" runat="server" Text="取消事件" />
<%-- 页面无刷新 获取服务端信息--%>
<input id="a" value="啦啦啦" />
<button onclick="test()">按钮</button>
<%-- DOM元素插入--%>
<input type="button" value="添加" id="btu">
<input type="button" value="指定添加b标签" id="btun">
<div id="re">
我是DIV
</div>
<p id="p">P标签</p>
<p id="pi">b标签</p>
<%-- 获取节点元素 追加信息--%>
名字：<input id="name" type="text" /><br />
评论：<input id="pinglun" type="text" /><br />
<input id="Button1" type="button" value="提交" /><br />
<table>
<tr>
<td>姓名：</td>
<td>新增评论：</td>
</tr>
</table>
<%-- jquery和ajax技术的结合--%>
<div style="font-size: 12px; padding-left: 15px; padding-top: 15px;">
当点击"测试"按钮时触发FunAjax函数
<input type="button" id="btn_ok" value="测试" onclick="FunAjax()" />
<span id="span_content">显示结果</span>
</div>
</div>
</form>
</body>使用JQuery：
<style type="text/css">
#txt_show {
display: none;
color: #00C;
}
#txt_hide {
display: block;
color: #F30;
}
</style>
<script src="Scripts/jquery-1.11.3.js"></script>
<script>
$(function () {
//光棒效果 改变li的背景色
$('li').mouseover(function () {
$(this).css('background', 'red');
}).mouseout(function () {
$(this).css('background', '');
})
});
//显示隐藏文字呀
//$(function () {
// $("#btn1").click(function () {
// $('p:hidden').show();//显示文字
// })
// $("#btn2").click(function () {
// $('p:visible').hide();//隐藏文字
// })
//});
//设置动态效果呀
//$(function () {
// //先给元素添加事件
// $("p").click(function () {
// $(this).slideToggle();
// })
// //再把元素的事件删除
// $("#Button1").click(function () {
// $("p").unbind();
// })
//})
//页面无刷新 获取服务端信息
//function test() {
// var a = $("#a").val();
// alert(a);
//}
//DOM元素插入
//$(function () {
// $('#btu').click(function(){
// //向匹配的元素内部追加内容。
// $('#re').appendTo('p');
// })
// $('#btun').click(function () {
// //把匹配的元素追加到另一个指定的元素集合中 追加到b标签
// $('#re').appendTo('#pi');
// })
//})
//获取节点元素 追加
//$(function () {
// $("#Button1").bind("click", function () {
// var $name = $("#name").val();
// var $pinglun = $("#pinglun").val();
// var Name = $("table");
// Name.append("<tr><td >" + $name + "</td><td >" + $pinglun + "</td></tr>");
// })
//})
//jquery和ajax技术的结合
//function FunAjax() {
// $.ajax({
// type: "POST",
// url: "jQueryAjaxTest.ashx",
// data: "begin=1&end=9",
// beforeSend: function () {
// $("#span_content").text("数据处理中...");
// },
// success: function (msg) {
// $("#span_content").text("两个数的和为： " + msg);
// }
// });
//}
</script>使用ajax代码：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int iBegin = 0;
int iEnd = 0;
//接收参数 传过来的值1和9
int.TryParse(context.Request["begin"].ToString(), out iBegin);
int.TryParse(context.Request["end"].ToString(), out iEnd);
Thread.Sleep(1000); //为了能体现加载过程，在此我将程序延迟了一秒钟 引入using System.Threading;
//计算并返回结果
context.Response.Write((iBegin + iEnd).ToString());
}
