2016年9月

今天在用JQuery的时候发现一个问题用.attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined.

解决这个文章我参考了这个帖子： http://bugs.jquery.com/ticket/9812

为什么jquery 1.6+增加了.prop()方法，因为在有些浏览器中比如说只要写disabled，checked就可以了，而有的要写成disabled = "disabled"，checked="checked"。所以，从1.6开始，jq提供新的方法“prop”来获取这些属性。 以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr，什么时候使用prop？？

1.添加属性名称该属性就会生效应该使用prop.

2.是有true,false两个属性使用prop.

3.其他则使用attr 项目中jquery升级的时候大家要注意这点！ 以下是官方建议attr(),prop()的使用：

转自：http://www.cnblogs.com/lujiahong/articles/2289867.html

jquery的api中提供了对元素应用disabled和readonly属性的方法，在这里记录下。如下： 1.readonly

<input type="text" readonly="readonly">

对于为元素设置readonly属性和取消readonly属性的方法有如下几种：

$('input').attr("readonly","readonly")//将input元素设置为readonly
$('input').removeAttr("readonly");//去除input元素的readonly属性

$('input').attr("readonly",true)//将input元素设置为readonly
$('input').attr("readonly",false)//去除input元素的readonly属性

$('input').attr("readonly","readonly")//将input元素设置为readonly
$('input').attr("readonly","")//去除input元素的readonly属性

$('input').prop("readonly",true)//将input元素设置为readonly
$('input').prop("readonly",false)//去除input元素的readonly属性

判断元素是否设置readonly属性有如下几种：

if($('input').attr("readOnly")=="readonly")//判断input元素是否已经设置了readonly属性

if($('input').prop("readOnly")==true)//判断input元素是否已经设置了readonly属性

if($('input').is(":readOnly")==true)//判断input元素是否已经设置了readonly属性

2.disabled

<input type="text" disabled="disabled">

对于为元素设置disabled属性和取消disabled属性的方法有如下几种：

$('input').attr("disabled","disabled")//将input元素设置为disabled
$('input').removeAttr("disabled");//去除input元素的disabled属性

$('input').attr("disabled",true)//将input元素设置为disabled
$('input').attr("disabled",false)//去除input元素的disabled属性

$('input').attr("disabled","disabled")//将input元素设置为disabled
$('input').attr("disabled","")//去除input元素的disabled属性

$('input').prop("disabled","disabled")//将input元素设置为disabled
$('input').prop("disabled","")//去除input元素的disabled属性

$('input').prop("disabled",true)//将input元素设置为disabled
$('input').prop("disabled",false)//去除input元素的disabled属性

判断元素是否设置disabled属性有如下几种：

if($('input').attr("disabled")=="disabled")//判断input元素是否已经设置了disabled属性

if($('input').prop("disabled")==true)//判断input元素是否已经设置了disabled属性

html代码为：

<input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked="checked" />

  jquery判断checked方法:

.attr('checked'):   //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false
.prop('checked'):        //16+:true/false
.is(':checked'):         //所有版本:true/false//别忘记冒号哦

jquery赋值checked的几种写法: 所有的jquery版本都可以这样赋值:

$("#cb1").attr("checked","checked");
$("#cb1").attr("checked",true);

jquery1.6+:prop的4种赋值:

$("#cb1").prop("checked",true);
$("#cb1").prop({checked:true});
$("#cb1").prop("checked",function(){
      return true;//函数返回true或false
});

还有这种:

$("#cb1").prop("checked","checked");

1、DOM加载完毕后添加元素（传统方法）

window.onload = function(){
    // Add code
}

虽然能够在DOM完整加载后再添加新的元素，但是浏览器执行的window.onload不仅仅是在DOM构建完后，也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示之后，所以如果某个图片或其他资源加载的时间比较长，访问者就会看到一个不完整的页面，甚至在图片加载之前就执行了需要依赖动态 添加的的元素的脚本而导致脚本的错误。 解决方法： 使用jquery的$()在图像和外部资源加载之前就执行我们的函数。 2、jquery使用动态创建的$(document).ready(function){}方法

$(document).ready( function() {
    // Add code
});

也可使用简便方法：

$( function() {
    // Add code
});

这篇文章主要介绍了jQuery判断checkbox是否选中的3种方法,本文中的方法使用ID选择器实现，需要的朋友可以参考下。

方法一：

if ($("#checkbox-id")get(0).checked) {
     // do something
 }

方法二：

if($('#checkbox-id').is(':checked')) {
// do something
}

方法三：

if ($('#checkbox-id').attr('checked')) {
     // do something
 }

Tips:建议使用方法二

我们通常会在网站中加入固定在右侧的返回顶部按钮，这里实现的效果是，有上下2个按钮，上面按钮是某种提示按钮会始终显示，下面按钮是返回顶部的按钮，只在页面向下滚动后显示。 下面是具体步骤：

1、HTML代码：

<div class="fixback">
  <div class="mobile"><img src="imgs/fl_btn_m.png" alt=""/>  </div>
  <div class="backtop" id="backtop"> <a href="javascript:;"><img src="imgs/fl_btn_t.png" alt="返回顶部" /></a> </div>
</div>

2、CSS代码：

.fixback {
    width:40px;
    position:fixed;
    bottom:100px;
    right:0px;
}
.fixback .mobile {
    cursor:pointer;
}
.fixback a {
    outline:0;
}
.fixback .backtop {
    margin-top:2px;
    display:none;
}

3、JS代码：

<script type="text/javascript">
    $(window).scroll(function() {
        var scrolls = $(this).scrollTop();
        if(scrolls > 100){
            $("#backtop").show();
        }else{
            $("#backtop").hide();
        }
    });
    $("#backtop").click(function(){
        $("html, body").animate({
            scrollTop: 0
        }, 250);
    });
</script>

Tips:本方法兼容IE7以上，Firefox，Chrome。

通常对于文章列表来说，文章标题长的话会导致换行使排版变乱，解决方式有几张， 1、后台程序截取固定长度字符； 2、CSS添加省略号 此处介绍的是CSS方法，几行CSS即可解决：

white-space:nowrap;
text-overflow:ellipsis; 
overflow:hidden;

Tips: 需要注意包含文字的块元素需要定义宽度。

"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）

做前端的可能够遇到过这种情况，假设原来的前端布局方式：

<div>推荐文章<span style="float:right">更多</span></div>

在IE8以上及火狐、Chrome浏览器等都是正常的，可是到了IE6及IE6中，你就会发现，“更多”飘到下一行去了。 下面是解决右浮动元素换行的方法：

一、CSS hack解决IE7浮动元素的问题（不推荐）

加个*margin-top:负边距

二、调整html元素的布局方式解决IE7浮动元素的问题（推荐）

<div><span style="float:left">推荐文章</span><span style="float:right">更多</span></div>

或

<div><span style="float:right">更多</span>推荐文章</div>

注意发布日期的容器span元素的style浮动样式及显示的位置。 Tips：前端布局的时候，能不使用css hack就尽量避免！