博客 (25)

<input name="aaa" id="theinput" type="checkbox" />

// 选中它

$('input[name="aaa"]').prop("checked", true);

// 取消它

$('input[name="aaa"]').prop("checked", false);

// 顺便提一下将 select 选中首项

$("#ddl_types option:first").prop('selected', true);

// 获取选中的项

$('input[name="aaa"]:checked').each(function(){ });

// 获取项是否选中

$('#theinput').is(':checked')

$('#theinput').prop('checked')

theinput.checked

// 获取 radio 选中项的值

$('input[name="aaa"]:checked').val()
xoyozo 7 年前
3,773
xoyozo 8 年前
3,335

jQuery 请求代码:

$.ajax({
  url: "xxxxxx",
  //method: "GET", // 默认 GET(当 dataType 为 jsonp 时此参数无效,始终以 GET 方式请求)
  data: $('#myForm').serialize(), // 要传递的参数,这里提交表单 myForm 的内容
  dataType: "jsonp"
  //, jsonp: "callback" // 请求中的回调函数的参数名,默认值 callback
  //, jsonpCallback: "jQuery_abc" // 本地回调函数名,不指定则随机
})
  .done(function () {
    alert("done");
    if (true) {
      $('#myForm')[0].reset();
    }
  })
  .fail(function () { alert("fail"); })
  .always(function () { alert("complete"); });

ASP.NET 处理代码:

JavaScriptSerializer jss = new JavaScriptSerializer();

string json = jss.Serialize(new { result = new { success = true, msg = "成功" } });

if (!string.IsNullOrWhiteSpace(Request["callback"])
  && Regex.IsMatch(Request["callback"], @"[_$a-zA-Z][$\w]*"))
{
  Response.ContentType = "application/javascript; charset=utf-8";
  Response.Write(json + Request["callback"] + "(" + json + ")");
}
else
{
  Response.ContentType = "application/json; charset=utf-8";
  Response.Write(json);
}

Response.End();
xoyozo 9 年前
3,780

Apple’s newest devices feature the Retina Display, a screen that packs double as many pixels into the same space as older devices. For designers this immediately brings up the question, “What can I do to make my content look outstanding on these new iPads and iPhones?”. First there are a few tough questions to consider, but then this guide will help you get started making your websites and web apps look amazingly sharp with Retina images!

retina image comparison

Things to Consider When Adding Retina Images

The main issue with adding retina images is that the images are double as large and will take up extra bandwidth (this won’t be an issue for actual iOS apps, but this guide is covering web sites & web apps only). If your site is mostly used on-the-go over a 3G network it may not be wise to make all your graphics high-definition, but maybe choose only a select few important images. If you’re creating something that will be used more often on a WI-FI connection or have an application that is deserving of the extra wait for hi-res graphics these steps below will help you target only hi-res capable devices.

Simple Retina Images

The basic concept of a Retina image is that your taking a larger image, with double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and setting the image to fill half of that space (100 x 100 pixels). This can be done manually by setting the height and width in HTML to half the size of your image file.

<img src="my200x200image.jpg" width="100" height="100">

If you’d like to do something more advanced keep reading below for how you can apply this technique using scripting.

Creating Retina Icons for Your Website

When users add your website or web app to their homescreen it will be represented by an icon. These sizes for regular and Retina icons (from Apple) are as follows:
ios icon samples

iPhone 57 x 57
Retina iPhone 114 x 114
iPad 72 x 72
Retina iPad 144 x 144

For each of these images you create you can link them in the head of your document like this (if you want the device to add the round corners remove -precomposed):

<link href="touch-icon-iphone.png" rel="apple-touch-icon-precomposed" />
<link href="touch-icon-ipad.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
<link href="touch-icon-iphone4.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
<link href="touch-icon-ipad3.png" rel="apple-touch-icon-precomposed" sizes="144x144" />

If the correct size isn’t specified the device will use the smallest icon that is larger than the recommended size (i.e. if you left out the 114px the iPhone 4 would use the 144px icon).

Retina Background Images

Background images that are specified in your CSS can be swapped out using media queries. You’ll first want to generate two versions of each image. For example ‘bgPattern.png’ at 100px x 100px and ‘bgPattern@2x.png’ at 200px x 200px. It will be useful to have a standard naming convention such as adding @2x for these retina images. To add the new @2x image to your site simply add in the media query below (You can add any additional styles that have background images within the braces of the same media query):

.repeatingPattern {
     background: url(../images/bgPattern.png) repeat;
     background-size: 100px 100px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
     .repeatingPattern {
          background: url(../images/bgPattern@2x.png) repeat;
     }
}

JavaScript for Retina Image Replacement

For your retina images that aren’t backgrounds the best option seems to be either creating graphics with CSS, using SVG, or replacing your images with JavaScript. Just like the background images, you’ll want to create a normal image and one ‘@2x’ image. Then with JavaScript you can detect if the pixel ratio of the browser is 2x, just like you did with the media query:

if (window.devicePixelRatio == 2) {

//Replace your img src with the new retina image

}

If you’re using jQuery you could quickly replace all your images like this very basic example below. It’s a good idea to add a class to identify the images with hi-res versions so you don’t replace any others by mistake. I’ve added a class=”hires” for this example. Also make sure you have the standard (non-retina) image height and width set in the HTML:

<img class="hires" alt="" src="search.png" width="100" height="100" />
<script type="text/javascript">
$(function () {

	if (window.devicePixelRatio == 2) {

          var images = $("img.hires");

          // loop through the images and make them hi-res
          for(var i = 0; i < images.length; i++) {

            // create new image name
            var imageType = images[i].src.substr(-4);
            var imageName = images[i].src.substr(0, images[i].src.length - 4);
            imageName += "@2x" + imageType;

            //rename image
            images[i].src = imageName;
          }
     }

});
</script>

Server-Side Retina Images

If you’d like to implement a server-side retina image solution, I recommend checking out Jeremy Worboys’ Retina Images (which he also posted in the comments below). His solution uses PHP code to determine which image should be served. The benefit of this solution is that it doesn’t have to replace the small image with the retina one so you’re using less bandwidth, especially if you have lots of images that you’re replacing.

Website Optimization for Retina Displays

If you’re looking for additional information on creating Retina images, I’ve recently had a short book published called Website Optimization for Retina Displays that covers a range of related topics. It contains some of what is above, but also includes samples for many different situations for adding Retina images. It explains the basics of creating Retina images, backgrounds, sprites, and borders. Then it talks about using media queries, creating graphics with CSS, embedding fonts, creating app icons, and more tips for creating Retina websites.

K
转自 Kyle Larson 12 年前
4,058

在使用jQuery时,VS2008有提供整合jQuery IntelliSense,
这样在写jQuery时更简单容易,

设定的方式如下:
安装VS2008 sp1 (已经安装过就可以跳过此步骤)
安装 hotfix 让VS2008 可以自动去读取 “-vsdoc.js”来提供Javascript Lib 的 InterlliSense
下载 jQuery-1.3.2.min.js 以及 jQuery-1.3.2-vsdoc2.js
将 jQuery-1.3.2.min.js 重新命名为 jQuery-1.3.2.js
将 jQuery-1.3.2-vsdoc2.js 重新命名为 jQuery-1.3.2-vsdoc.js
将 jQuery-1.3.2.js 以及 jQuery-1.3.2-vsdoc.js 加入到专桉裡
在vs2008编辑Javascript时,点选 "编辑”/“IntelliSense”/”更新JScript IntelliSense”

结果 左下角显示 " 更新JScript IntelliSense 时发生错误,请参阅错误清单”
错误内容为 "'div.childNodes' 是 null 或不是一个物件"
请打开 jQuery-1.3.2-vsdoc.js  
将其中一段

elem = jQuery.makeArray( div.childNodes );
替换成
if (div && div.childNodes) elem = jQuery.makeArray( div.childNodes );
再重新 点选 "编辑”/“IntelliSense”/”更新JScript IntelliSense”
完工

补充: 步骤2 的hotfix 可以选择性安装,如果没有安装的话,必须自己在页面加上
<script src="Js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
有安装hotfix的话vs2008会自动去读取相同档名,但是后面带有-vsdoc的档桉产生IntelliSense内容,
建议是安装,这样就不用每次使用都要加上 -vsdoc.js

另外分享几个小技巧
如果要在 js档 裡面使用 IntelliSense 的话,可以加上这行
/// <reference path="~/js/jquery-1.3.2.js" />
如果要在 MasterPage 或是 使用者控制项(User Control) ,使用 IntelliSense ,又怕跟主页面重複一直呼叫 js 档,可以利用这方法
<% if(false) { %>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<% } %>
这样就可以在设计阶段有 IntelliSense ,在执行阶段时又不会被输出到页面。

10,032