Jquery
- 防止缓存对数据显示的影响
$.ajaxSetup({ cache: false });
- Checkbox 获取是否checked 与 Change
<asp:CheckBox ID="chkFeedback" runat="server" CssClass="csschkFeedback" />
<span id="divReplyCode" style="display: none">
<asp:Label….
<asp:TextBox…
</span>
----初始化
if ($(".csschkFeedback input").prop('checked')) {
$('#divReplyCode').show();
}
else {
$('#divReplyCode').hide();
}
----绑定change 事件
$(".csschkFeedback input").change(function() {
if ($(this).prop('checked')) {
$('#divReplyCode').show();
}
else {
$('#divReplyCode').hide();
}
});
- 全局文档执行结束后执行的函数
$(function() {
..events..
});
- Radio获取是否checked 与 Change
<asp:RadioButton ID="rbnNow" runat="server" GroupName="grpSendTime" Text="Now/及时发送"
Checked="true" CssClass="cssRbnNow" />
if ($('.cssRbnNow input').prop('checked')) {
$('#divCalendar').hide();
}
else {
$('#divCalendar').show();
}
$(".cssRbnNow input").change(function() {
if ($(this).attr('checked')) {
$('#divCalendar').hide();
}
else {
$('#divCalendar').show();
}
});
- 文本框 赋值和获取值
<asp:TextBox ID="txtRecipients" runat="server" Width="500px" CssClass="txtAutoComplete"
TextMode="MultiLine" Rows="3"></asp:TextBox>
----值空
$(".txtAutoComplete").val("");
--读取值
var txtRecipients = $(".txtAutoComplete").val();
--- 绑定事件
- 自动提醒功能
- 绑定事件
<asp:Button ID="btnSubmit" runat="server" Text="Submit/提交" OnClick="btnSubmit_Click"
CssClass="smsBtnSubmit" />
$(".smsBtnSubmit").click(function() {
//003 Get aprrovalCount
var approvalCount = "";
$.ajax({
type: "GET",
async: false,
url: 'GetContactData.aspx?Action=GetFlowApproveCountAction&Parms=' + msgType, //SMS and MMS should get this configuration from differenct db records, edit by eric
success: function(data) {
if (data != "") {
approvalCount = data;
}
},
error: function(err) {
approvalCount = 200;
}
});
});
string action = Request["Action"];
if (!string.IsNullOrEmpty(action) && action == "GetFlowApproveCountAction")
{
var parms = Request.QueryString["Parms"];
int msgType = 0;
if (!string.IsNullOrEmpty(parms))
{
int.TryParse(parms, out msgType);
}
string strRes = GetFlowApproveCount(msgType);
Response.Write(strRes);
Response.End();
}
- JS 读取webconfig
<appSettings>
<add key="DefaultSignature" value="【罗氏诊断】"/>
</appSettings>
function ReadSignatureSettingsFromWebConfig() {
var DefaultSignatrue = '<%=ConfigurationManager.AppSettings["DefaultSignature"].ToString() %>'
if (DefaultSignatrue == null || DefaultSignatrue == undefined || DefaultSignatrue == "") {
DefaultSignatrue = "【掉的大】";
}
return DefaultSignatrue;
}
- 打开样式
<div id="dialog-form" title="Select Templete/选择模板" style="display: none">
<div>
<table width="100%" border="0" cellspacing="0" bgcolor="#E5E5E5">
<tr>
<td>
<div id="divAllTempleteList" runat="server">
</div>
</td>
</tr>
</table>
</div>
</div>
private void GettingSMSTemplates()
{
this.divAllTempleteList.InnerHtml = _smsSendlogic.GetSMSTemplates(AppContext.Current.Roles, AppContext.Current.UserID, AppContext.Current.Department);
}
public string GetSMSTemplates(IEnumerable<string> roles, string userID, string department)
{
List<SMSTemplateDTO> listRes = service.GetSMSTemplates(roles, userID, department).ToList();
string res = GetSelectTempleteContent(listRes);
return res;
}
private string GetSelectTempleteContent(List<SMSTemplateDTO> listRes)
{
StringBuilder sb = new StringBuilder();
if (listRes.Count > 0)
{
sb.Append("<table style=\"width:100%;line-height:25px\" cellspacing=\"0\" cellpadding=\"0\" bordercolorlight=\"#C0C0C0\" bordercolordark=\"#FFFFFF\">");
for (int i = 0; i < listRes.Count; i++)
{
sb.AppendFormat("<tr><td style=\"vertical-align:top;width:20px;\"><input type=\"radio\" name=\"radioName\" value='group' /><textarea id=\"messageTextarea{0}\" style=\" height:100%; display:none;\" >{1}</textarea></td>",
i, listRes[i].SMSContent);
sb.AppendFormat("<td>{0}</td></tr>", HttpUtility.HtmlEncode(listRes[i].Title));
}
sb.Append("</table>");
}
return sb.ToString();
}
<input type="button" id="selectTemplete" value="Select Templete/选择模板" />
$("#selectTemplete")
.button()
.click(function() {
$("#dialog-form").dialog("open");
});
$("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 600,
modal: true,
buttons: {
"Select": function() {
var bValid = true;
if (bValid) {
call_click();
$(this).dialog("close");
$(".txtMessageContent").change();
}
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
}
});
function call_click() {
var i;
var strValue;
for (i = 0; i < $("input[name='radioName']").length; i++) {
if ($("input[name='radioName']")[i].checked) {
strValue = $("#messageTextarea" + i.toString()).val();
}
}
$(".txtMessageContent").val(strValue);
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色:
$("p").css("background-color","red");
<script type="text/javascript">
$(document).ready(function(){
//文档加载完成后才能执行的函数
$("button").click(aa);
});
//
function aa()
{
$("p").css("background-color","blue");
}
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
更多的选择器实例
语法 | 描述 |
$(this) | 当前 HTML 元素 |
$("p") | 所有 <p> 元素 |
$("p.intro") | 所有 class="intro" 的 <p> 元素 |
$(".intro") | 所有 class="intro" 的元素 |
$("#intro") | id="intro" 的元素 |
$("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
$("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
$("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
下面是 jQuery 中事件方法的一些例子:
Event 函数 | 绑定函数至 |
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
Query 拥有可操作 HTML 元素和属性的强大方法。
jQuery DOM 操作
jQuery 中非常重要的部分,就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
提示:DOM = Document Object Model(文档对象模型)
DOM 定义访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。”
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:
实例
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值:
实例
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});