`

小知识(十二)

 
阅读更多

 

1.jQuery的replaceWith方法

可用请求的数据(数据可以是一个页面)来无刷新替代当前页面的某个局部地区(也可以替代当前整个页面,只要你指定的范围够大)

 

<div class="tn-box tn-widget tn-widget-content tn-corner-all tnc-search-history">
  <div class="tn-box-header tn-widget-header tn-corner-top tn-border-bottom">
     <div class="tn-option"><a id="clear-histories" class="tnc-deletle" href="#">清空</a></div>
     <h3 class="tn-helper-reset">搜索历史</h3>
     </div>
     <div class="tn-box-content tn-widget-content tn-corner-bottom">
                        @if (Model != null)
                        {
                           <ul id="search-histories" class="tn-list">
                        @foreach (var item in Model)
                        {
                           <li data-history-value='@item'><a title='@item' href="javascript:void()">@HtmlUtility.TrimHtml(item, 14)</a></li>
                        }
                        </ul>
                        }
                    </div>
                </div>

 <script type="text/javascript">

    $(function () {
        var searchForm = $('#searchForm');
        var keyword = $('#keyword', searchForm);
        //注册点击搜索历史事件
        $('#search-histories').delegate("a", "click", function (e) {
            e.preventDefault();
            keyword.val($(this).attr("title"));
            searchForm.submit();
        });
        //点清空
        $("#clear-histories").click(function (e) {
            e.preventDefault();
            var clearUrl='@Html.Raw(SiteUrls.Instance().SearchHistories(Spacebuilder.Blog.BlogSearcher.CODE, true))';
            $.get(clearUrl,function (data) {
                $('.tnc-search-history').replaceWith(data);
            })
        })
    })
</script>

 

2.做页面离开提示时应知

 

链接里的href可以是#和javascript:void(0)，这时点击链接都不会有页面的跳转，但是用#会跳到页面的开始，我们通常用jquery的e.preventDefault()来防止这种默认行为，其实可以有一种更简单的做法：

可以使用 <a href="###"></a>防止锚点

另外，实际使用的时候应该尽量避免使用javascript:void(0)这样的写法，因为ie对这种行为的解释又是与众不同，例如在判断是否要离开页面时需要判断window.onbeforeunload事件，ie会认为点击了javascript:void(0)也是要离开页面，firefox、chrome就不会

 
3.$.post(url,$("form").serialize()) 与 $("form").ajaxSubmit()
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>FormSerialize</title>
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
  <form action="#" method="post" id="formId">
  <input type="hidden" name="LYR" value="1" />
  <input type="hidden" name="LYNR" value="2" />
  <input type="hidden" name="TOLYR" value="3" />
  <input type="checkbox" name="CB" value="4" />
  <input type="checkbox" name="CB" value="5" />
  <input type="checkbox" name="CB" value="6" />
  <input type="hidden" name="LYSJ" value="8" />
  <input type="button" name="TJ" id="TJ" value="9" />
  </form>
</body>
</html>
<script>
    $(function () {
        $("#TJ").click(function () {
            alert($("#formId").serialize());
            alert($("#formId").serializeArray()[0].value);
            $.post("/LeaveWord/FormSerialize.asp", $("#formId").serialize(), function (data) {
 
            })
        })
    })
</script>
serialize() 会将表单的元素序列化为 LYR=1&LYNR=2&TOLYR=3&CB=4&CB=5&CB=6&LYSJ=8 
serializeArray() 会将表单的元素序列化为 [{name:LYR,value:1},{name:LYNR,value:2},{name:TOLYR,value:3},{name:CB,value:4}{name:CB,value:5},{name:CB,value:6},{name:LYSJ,value:8} ]
这两种方式都可以被ASP.NET MVC的模型绑定很好的绑定数据
ajaxSubmit是一个jQuery插件 使用也差不多
<script>
    $(function () {
        $("#TJ").click(function () {
            $("#formId").ajaxSubmit({
                success: function () { },
                url:"/LeaveWord/AjaxSubmit.asp"
            })
        })
    })
</script>
ajaxSubmit这种方式，可以不指定url，默认是提交到表单指定的url
 
4.构造函数:this() :base()
在类的构造函数后面加冒号，再跟this() 或 base()  的意思就是 先执行冒号后面的构造函数，再执行当前的构造函数。
 
 /// <summary>
 /// 构造函数
 /// </summary>
 public AskService()
        : this(new AskAnswerRepository(), new AskQuestionRepository())
 {
 }
 /// <summary>
 /// 构造函数
 /// </summary>
/// <param name="askAnswerRepository">问答仓储实现</param>
/// <param name="askQuestionRepository">问答仓储实现</param>
 public AskService(IAskAnswerRepository askAnswerRepository, IAskQuestionRepository askQuestionRepository)
 {
    this.askAnswerRepository = askAnswerRepository;
    this.askQuestionRepository = askQuestionRepository;
 }
上面那样写，在实例化AskService时就不用传AskAnswerRepository和AskQuestionRepository的实例了，直接
AskService askService = new AskService() 就可以直接实例化它们了
 
public class SupportOpposeEventArgs : CommonEventArgs
{
    public SupportOpposeEventArgs(long objectId, long userId,string type) : base(type) 
}
 上面是先执行基类的构造函数并且给其传了一个参数，然后执行本类的构造函数
 
5.C#字典的使用
Dictionary.Add(key,value)
Dictionary[key]=value
一般来说用第二种，第一种有可能会出现key重复的情况，而第二种的情况是没有这个key就添加，有这个key的话就更新。
 
6.VS调试小技巧
VS在调试时除了可以给表达式添加监视外，还有一个调用堆栈（它可以从当前调试的方法往外找直到找到这个方法的参数的最初赋值的地方，当然有些从其他DLL传过来的值会显示外部代码），还有一个即时窗口（你可以在这里使用当前所调试方法的任何一个参数，当然你也可以在这里定义变量，它们都可以在这里编译并执行，然后显示出结果）
 
7.jQuery插件控制滚动条的滚动
 
8.通过浏览器书签栏执行js
下面第一个就是花瓣网通过浏览器书签栏执行js调用其外站图片采集的js
这段a标签里的js会存储在浏览器里，所以它可以操作任何一个页面，并且你如果改了这段js，必须重新将其拖入标签栏才会奏效
并且在执行的js中传入了当前页面的window和document对象
<a href="javascript:void(function(d,a,c,b){a[c]&&typeof a[c].showValidImages=='function'?a[c].showValidImages():(b=a.createElement('script'),b.id='huaban_script',b.setAttribute('charset','utf-8'),b.src='http://huaban.com/js/pinmarklet.js?'+Math.floor(+new Date/1E7),a.body.appendChild(b))}(window,document,'__huaban'));" onclick="javascript:alert('把这个按钮拖到你的浏览器书签栏'); return false;" class="pin-button">采集到花瓣<span class="drag-arrow"></span></a>

<a href="javascript:void(alert('123'));" onclick="javascript:alert('把这个按钮拖到你的浏览器书签栏'); return false;" class="pin-button">采集<span class="drag-arrow"></span></a>
看其源码会发现
var global="__huaban";
document[global].showValidImages = showImagesAndInitPinBtn;
而showImagesAndInitPinBtn是一个函数，这里将这个函数存到document的showValidImages里面了，所以这里在调用的时候传了一个'__huaban'，然后通过a[c].showValidImages()直接调用了这个函数，开始执行一系列js。
保存在document里貌似是因为作用域更大一些
更多信息如下：
加载后先运行
showValidImages()即showImagesAndInitPinBtn()
获取当前网站页面的图片
getCurrentPageImagesWithEncapsulation()
isValidImage()验证图片  encapsulateImage()封装图片 getVideoOnCustomerPage()
showImages(e)显示要采集的图片 构造一个显示这些图片的div等
参数e是getCurrentPageImagesWithEncapsulation()的返回值
thunderpinImage()快速采集 pinImage()采集
全局变量可搜__huaban，都在它附近
 
9.input file标签在弹出框中过滤文件类型
<input id="photoFile" class="photoFile" name="photoFile" type="file" accept="image/gif,image/jpeg,image/bmp,image/jpg,image/png"/>
 
 10.VS2010多线程调试
VS2010下的多线程窗口
 
12. SQL Server2005使用CTE实现递归
 
分享到：
| 正则表达式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics