JavaScript笔记杂谈篇(啥都有)

时间：2022-12-11 13:14:26

二维码缩放比例以43PX的倍数缩放最为标准.

NuGet相关管理http://www.cnblogs.com/dudu/archive/2011/07/15/nuget.html

学习笔记: http://kb.cnblogs.com/page/143190/

动态创建标记,给标记添加样式,class,等等   vardtProductName=$("<dt></dt>",{style:"text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"});

CSS样式选择器

定义和用法

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

提示：p:last-child 等同于 p:nth-last-child(1)。

在JavaScript中，使用childNodes属性可以返回一个数组，这个数组包含给定元素节点的全体子节点，如代码所示:

01

<body>

02

<ul id="action">

03

    <li title="第一段文字">第一个</li>

04

    <li title="第二段文字">第二个</li>

05

</ul>

06

<script type="text/javascript">

07

var attr_p = document.getElementById("action");

08

alert(attr_p.childNodes[1].childNodes[0].nodeValue);

09

</script>

10

</body>

如果要取得id为action的ul的第一个li内的文本节点（如取得：第一个），可以使 用…childNodes[1].childNodes[0].nodeValue这种方法找到，使 用…childNodes[1].firstChild.nodeValue同样可以找到第一个li的文本节点，
结论childNodes[0]等价于firstChild，无论何时何地，重要需要访问childNodes[]数组的第一个元素，我们就可以把它写成firstChild，DOM还提供一个与之对应的lastChild属性。
需要注意的是，ff的空格节点问题，可以使用nodeType属性对节点类型判断，直到发现元素节点为止

通过 JavaScript 调用

在 CSS 中添加 position:
relative; 之后，通过 JavaScript 代码启动滚动监听插件：

复制

$('body').scrollspy({ target: '#navbar-example' })

方法

.scrollspy('refresh')

当使用滚动监听插件的同时在 DOM 中添加或删除元素后，你需要像下面这样调用此刷新（ refresh） 方法：

复制

$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') })

参数

可以通过 data 属性或 JavaScript 传递参数。对于 data 属性，其名称是将参数名附着到 data- 后面组成，例如 data-offset=""。

名称

类型

默认值

描述

offset

number

10

计算滚动位置时相对于顶部的偏移量（像素数）。

事件

事件类型

描述

activate.bs.scrollspy

每当一个新条目被激活后都将由滚动监听插件触发此事件。

 
$('#myScrollspy').on('activate.bs.scrollspy', function () { // do something… })

NuGet  安装指定版本的程序包教程

1,NuGet程序命令

http://docs.nuget.org/consume/package-manager-console-powershell-reference

2教程

使用Nuget 安装指定版本package或者更新package到指定版本

最近在琢磨MVC和EntityFramework,使用的VS是2013版的，在Nuget的GUI界面下安装了EntityFramework(默认安装最新版的，怎么安装指定版本还没找到),按照MVC的示例项目MusicStore逐步做的过程中发现MVC4不支持EntityFramwok 6。

尝试去更新MVC版本各种失败，只能试着去降低EntityFramework版本。但是通过Nuget的GUI界面无法安装或更新到指定版本的EntityFramwok。在网上搜了搜相关资料（事实上也很容易搜到），做个备忘。

首先打开程序包管理器控制台：工具→Nuget程序包管理器→程序包管理器控制台

打开如下图所示的命令行界面

安装指定版本的Package(例如：EntityFramework 5.0)：

PM> Install-Package EntityFramework -ProjectName MusicStore -Version 5.0

更新到指定版本的Package(例如EntityFramewrok 6.0):

PM> Update-Package EntityFramework -ProjectName MusicStore -Version 6.0
Update-Package命令相关参数说明： 

Parameter

Type

Description

-Id

string

Specifies the Id of the package to be updated.

-ProjectName

string

Specifies the name of the project in which packages should be updated.

-Version

SemanticVersion*

Specifies the new target version of the package as a result of the update.

-Source

string

Specifies where to look for package updates, overriding the package sources that are specified in the Options dialog. This value can be either a url to a remote repository or a path to a local repository or the name of a package source specified in the Options dialog.

-IgnoreDependencies

Switch parameter

If set, NuGet will ignore dependency packages and only update the main package.

-Safe

Switch parameter

If set, NuGet will only update to a new version that has the same major and minor versions as the previous package. For example, if the old version is 1.2.0, NuGet will accept the update package with version of 1.2.1 or 1.2.9999 but it will not accept 1.3.0.

-IncludePrerelease

Switch parameter

If set, NuGet will consider prerelease packages as candidates for updates.

-Reinstall

Switch parameter

If set, instead of updating the package to the latest version, NuGet will uninstall the package and reinstall the same version. This is useful when, for example, you‘ve updated the target framework of your project, e.g. from .NET 4.0 to .NET 4.5, and you want to reference .NET 4.5-specific assemblies in the package. You can‘t set this parameter together with the -Version parameter.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　参考资料：http://docs.nuget.org/docs/reference/package-manager-console-powershell-reference

基本语法if(data){...}

!data状态为空 或者undefined 或者false 都会执行下面的方法

data 就不会继续执行下面的方法

storage事件

storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

if(window.addEventListener){      window.addEventListener("storage",handle_storage,false); }else if(window.attachEvent){      window.attachEvent("onstorage",handle_storage); } function handle_storage(e){      if(!e){e=window.event;}         }

storage事件对象的具体属性如下表：

Property

Type

Description

key

String

The named key that was added, removed, or moddified

oldValue

Any

The previous value(now overwritten), or null if a new item was added

newValue

Any

The new value, or null if an item was added

url/uri

String

The page that called the method that triggered this change

博客园,汤姆大叔[Eval()用法参考]

使用新的Function()构造就类似于eval()，应小心接近。这可能是一个强大的构造，但往往被误用。如果你绝对必须使用eval()，你 可以考虑使用new Function()代替。有一个小的潜在好处，因为在新Function()中作代码评估是在局部函数作用域中运行，所以代码中任何被评估的通过var 定义的变量都不会自动变成全局变量。另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。

考虑下面这个例子，这里仅un作为全局变量污染了命名空间。

console.log(typeof un);    // "undefined"

console.log(typeof deux); // "undefined"

console.log(typeof trois); // "undefined"

var jsstring = "var un = 1; console.log(un);";

eval(jsstring); // logs "1"

jsstring = "var deux = 2; console.log(deux);";

new Function(jsstring)(); // logs "2"

jsstring = "var trois = 3; console.log(trois);";

(function () {

   eval(jsstring);

}()); // logs "3"

console.log(typeof un); // number

console.log(typeof deux); // "undefined"

console.log(typeof trois); // "undefined"

另一间eval()和Function构造不同的是eval()可以干扰作用域链，而Function()更安分守己些。不管你在哪里执行 Function()，它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中，eval()可以访问和修改它外部作用域中的变量，这是 Function做不来的（注意到使用Function和new Function是相同的）。

(function () {

   var local = 1;

   eval("local = 3; console.log(local)"); // logs "3"

   console.log(local); // logs "3"

}());

(function () {

   var local = 1;

   Function("console.log(typeof local);")(); // logs undefined

}());

你可以会想到，在使用eval对JSON进行执行的时候，JSON字符串通常被包含在一个圆括号里：eval('(' + json + ')')，这样做的原因就是因为分组操作符，也就是这对括号，会让解析器强制将JSON的花括号解析成表达式而不是代码块。

  try {

    { "x": 5 }; // "{" 和 "}" 做解析成代码块

  } catch(err) {

    // SyntaxError

  }

  

  ({ "x": 5 }); // 分组操作符强制将"{" 和 "}"作为对象字面量来解析

还有一点需要提醒一下，函数声明在条件语句内虽然可以用，但是没有被标准化，也就是说不同的环境可能有不同的执行结果，所以这样情况下，最好使用函数表达式：

  // 千万别这样做！

  // 因为有的浏览器会返回first的这个function，而有的浏览器返回的却是第二个

  if (true) {

    function foo() {

      return 'first';

    }

  }

  else {

    function foo() {

      return 'second';

    }

  }

  foo();

  // 相反，这样情况，我们要用函数表达式

  var foo;

  if (true) {

    foo = function() {

      return 'first';

    };

  }

  else {

    foo = function() {

      return 'second';

    };

  }

  foo();

我们知道，这个匿名函数调用返回的函数（带有标识符g的函数），然后赋值给了外部的f。我们也知道，命名函数表达式会导致产生多余的函数对象，而该对象与返回的函数对象不是一回事。所以这个多余的g函数就死在了返回函数的闭包中了，因此内存问题就出现了。这是因为if语句内部的函数与g是在同一个作用域中被声明的。这种情况下 ，除非我们显式断开对g函数的引用，否则它一直占着内存不放。

  var f = (function(){

    var f, g;

    if (true) {

      f = function g(){};

    }

    else {

      f = function g(){};

    }

    // 设置g为null以后它就不会再占内存了

    g = null;

    return f;

  })();

案例小知识点

  public int？ WareHouseLinkManTel

        {

            get { return _wareHouseLinkManTel; }

            set { _wareHouseLinkManTel = value; }

        }

int? 意思是可以给int 空值

一个简单的加载状态代码:

.tipinit {

            display:none;

            background-color: rgba(230,230,230,.5);

            position: absolute;

            left:;

            top:;

            width: 100%;

            height: 100%;

            padding-top:40%;

        }

            .tipinit div:first-child {

                width: 170px;

                height: 150px;

                background-color: gray;

                color: #fff;

                text-align: center;

                font-size: 14pt;

                line-height: 150px;

                border-radius: 4px;

                background-color: gray;

                color: #fff;

                margin:0 auto;

            }

$(".tipinit").css("display", "block");

$(".tipinit").css("display", "none");

.tipinit {

            display:none;

            background-color: rgba(230,230,230,.5);

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            padding-top:40%;

        }

 

            .tipinitdiv:first-child {

                width: 170px;

                height: 150px;

                background-color: gray;

                color: #fff;

                text-align: center;

                font-size: 14pt;

                line-height: 150px;

                border-radius: 4px;

                background-color: gray;

                color: #fff;

                margin:0auto;

            }

$(".tipinit").css("display","block");

$(".tipinit").css("display","none");

引用一下别人针对Booststrap框架的兼容性总结:

Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。
bootstrap3支持的浏览器：

Chrome (Mac、Windows、iOS和Android)
Safari (只支持Mac和iOS版，Windows版已经基本死掉了)
Firefox (Mac、Windows)
Internet Explorer
Opera (Mac、Windows)
Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的，只是官方并不提供支持。
Internet Explorer 8 和 9的很多CSS3属性和HTML5元素，例如圆角矩形和投影，不支持。
Internet Explorer 6 几乎不支持，nav,  pagination 等在ie6上表现都特别差。
使用bootstrap2的bsie插件 http://www.bootcss.com/p/bsie/ ，提取插件里的 bootstrap-ie6.css 和ie.css，在页面的head里bootstrap.css之下加入如下代码：
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/css/bootstrap-ie6.css?1">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/css/ie.css">
<![endif]-->
禁用响应式布局：

<link href="/css/non-responsive.css" rel="stylesheet" media="screen">

html里的css代码：

<style type="text/css">
body {
    padding-top: 60px;
    padding-bottom: 40px;
}
/* 禁用响应式布局：重新设置container的宽度。如果没有后面三行的代码，在IE6环境下navbar-top会显示为940px宽度 */
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
    width:1140px;
}
</style>

打开 bootstrap-ie6.css文件，将文件里的pager替换为pagination，用于支持bootstrap3的分页组件。并在底部加入如下代码，代码作用请看注释：

/*　栅栏系统，溢出的问题 */
.col-xs-1 {
  width: 5.7%;
}
.col-xs-2 {
  width: 13.96%;
}
.col-xs-3 {
  width: 22.2%;
}
.col-xs-4 {
  width: 30.5%;
}
.col-xs-5 {
  width: 38.8%;
}
.col-xs-6 {
  width: 47%;
}
.col-xs-7 {
  width: 55.2%;
}
.col-xs-8 {
  width: 63.5%;
}
.col-xs-9 {
  width: 72%;
}
.col-xs-10 {
  width: 80%;
}
.col-xs-11 {
  width: 88.3%;
}
.col-xs-12 {
  width: 100%;
}

/* 修复ie6下分页组件css解析失败的问题 */
.pagination .active a,
.pagination .active span {
  z-index: 2;
  color: #ffffff;
  cursor: default;

  border-color: #428bca;
}

/* 修复ie6下input样式被重写的问题*/
.form-control{
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
}
在html页body之上添加如下代码：

<!--[if lte IE 6]>
<script type="text/javascript" src="/js/bootstrap-ie.js"></script>
<![endif]-->
<script type="text/javascript">
(function ($) {
  $(document).ready(function() {
    if ($.isFunction($.bootstrapIE6)) $.bootstrapIE6($(document));
  });
})(jQuery);
</script>

html整个头部文件如下：

<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Bootstrap theme -->
<link href="/css/bootstrap-theme.min.css" rel="stylesheet">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/css/bootstrap-ie6.css?1">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/css/ie.css">
<![endif]-->
<link href="/css/non-responsive.css" rel="stylesheet" media="screen">
<link href="/css/showLoading.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="/js/html5shiv.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
body {
    padding-top: 60px;
    padding-bottom: 40px;
}
/* 禁用响应式布局：重新设置container的宽度。如果没有后面三行的代码，在IE6环境下navbar-top会显示为940px宽度 */
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
    width:1140px;
}
</style>

ASP.NET Identity登录原理-->Claims-based 认证-->

微软对OWin的开源实现Katana-->Start up 类-->Forms认证有以下几不足-->

MVC 5默认的start up配置类

OWin Application( OWin 应用程序 )

这个程序引入了OWin的dll，同时会使用OWin中的一些组件完成对request的一些处理，比如说我们下面要讲的OWin 认证。

OWin 组件

我们也可能管它叫中间件，它通过暴露一个应用程序代理，也就是接收一个IDictionary<string,object>，返回一个Task来参与到OWin对request和处理管道中。

Start up 类

每一个OWin的应用程序都需要有一个start up的类，用来声明我们要使用的OWin组件（即中间件)。Start up 类有以下几种声明方式：

  1. 命名约定: Owin会扫描在程序集的根下名叫 startup的类作为默认启动配置类
  2. OwinStartup 标签 
    [assembly: OwinStartup(typeof(StartupDemo.TestStartup))]
  3. config 文件  
    <add key="owin:AutomaticAppStartup " value="false" />

Owin的很大亮点之一就是它可以让我们的ASP.NET 网站摆脱IIS，但是毕竟大多数的ASP.NET 网站还是host在IIS上的，所以Katana项目还支持在IIS集成模式中运行Owin组件。 我们只需要在我们的项目中加上 Microsoft.Owin.Host.SystemWeb这个包就可以了，其实默认MVC5程序已经为我们加上了。我们在VS2013中新建一个MVC5的站点，默认会为我们加上以下的dll:

  • OWin.dll
  • Microsoft.Owin.dll
  • Microsoft.Owin.Host.SystemWeb
  • Microsoft.Owin.Security
  • Microsoft.Owin.Security.Cookie

原文链接地址:http://www.tuicool.com/articles/rem2umi

这些日子用到一个滑动控件 swiper 很多童鞋都用到过用法很简单 官网三分钟就会了www.swiper.com.cn这个网址,但是这个滑动控件针对微信的支持不是很好所以打算制作微信网页的童鞋很慎重使用!而且针对设备的系统和屏幕分辨率比较敏感,今天有台测试机咋弄都不加载JS所以小伙伴儿们也要小心这一点

jquery中prop()方法和attr()方法的区别浅析

官方例举的例子感觉和attr()差不多，也不知道有什么区别，既然有了prop()这个新方法，不可能没用吧，那什么时候该用attr()，什么时候该用prop()呢
 

jquery1.6中新加了一个方法prop()，一直没用过它，官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。

大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = "disabled"，checked="checked"，比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。

jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
项目中jquery升级的时候大家要注意这点！

以下是官方建议attr(),prop()的使用：

Attribute/Property .attr() .prop()
accesskey √  
align √  
async √ √
autofocus √ √
checked √ √
class √  
contenteditable √  
draggable √  
href √  
id √  
label √  
location ( i.e. window.location ) √ √
multiple √ √
readOnly √ √
rel √  
selected √ √
src √  
tabindex √  
title √  
type √  
width ( if needed over .width() ) √  

相关文章