MyJquery

                                                             Jquery  

  1. 防止缓存对数据显示的影响

      $.ajaxSetup({ cache: false });

  1. 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();

        }

    });

 

 

 

  1. 全局文档执行结束后执行的函数

$(function() {

    ..events..

});

 

 

 

 

 

 

  1. 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();

}

});

 

 

  1.  文本框 赋值和获取值

  <asp:TextBox ID="txtRecipients" runat="server" Width="500px" CssClass="txtAutoComplete"

                    TextMode="MultiLine" Rows="3"></asp:TextBox>

 

 

----值空

  $(".txtAutoComplete").val("");

--读取值

var txtRecipients = $(".txtAutoComplete").val();

--- 绑定事件

 

  1. 自动提醒功能

 

 

 

 

 

 

 

  1. 绑定事件

   <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();

        }

 

  1. 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;

}

 

  1. 打开样式

         <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());
});

亲自试一试

 

posted @ 2016-06-23 17:31  光阴的故事-SKY  阅读(464)  评论(0)  编辑  收藏  举报