2016年9月

[转]Jquery 1.6+ .prop()与.attr()方法比较

发布于 , 1079 次浏览

今天在用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()的使用:

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

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

jquery设置元素的readonly和disabled

发布于 , 1218 次浏览

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属性

jquery的checked

发布于 , 1138 次浏览

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

页面加载完成后执行JS的几种方法

发布于 , 1146 次浏览

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种方法

发布于 , 1077 次浏览

这篇文章主要介绍了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:建议使用方法二

简单的jquery固定位置返回顶部效果

发布于 , 1058 次浏览

我们通常会在网站中加入固定在右侧的返回顶部按钮,这里实现的效果是,有上下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。

为长文字添加省略号的CSS写法

发布于 , 999 次浏览

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

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

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

CSS3选择器大全

发布于 , 1030 次浏览

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

选择器 例子 例子描述 CSS
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的所有元素。 1
* * 选择所有元素。 2
element p 选择所有 <p> 元素。 1
element,element div,p 选择所有 <div> 元素和所有 <p> 元素。 1
element element div p 选择 <div> 元素内部的所有 <p> 元素。 1
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。 2
element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:first-letter p:first-letter 选择每个 <p> 元素的首字母。 1
:first-line p:first-line 选择每个 <p> 元素的首行。 1
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2
:before p:before 在每个 <p> 元素的内容之前插入内容。 2
:after p:after 在每个 <p> 元素的内容之后插入内容。 2
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 2
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。 3
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 3
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 <input> 元素。 3
:disabled input:disabled 选择每个禁用的 <input> 元素 3
:checked input:checked 选择每个被选中的 <input> 元素。 3
:not(selector) :not(p) 选择非 <p> 元素的每个元素。 3
::selection ::selection 选择被用户选取的元素部分。 3

解决IE6/IE7中右浮动float:right换行问题

发布于 , 1044 次浏览

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

<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就尽量避免!