标签 jQuery 下的文章

(function($) {…})(jQuery); 这里实际上是匿名函数，如下： function(arg){…} 这就定义了一个匿名函数，参数为arg 而调用函数时，是在函数后面写上括号和实参的，由于操作符的优先级，函数本身也需要用括号，即： (function(arg){…})(param) 这就相当于定义了一个参数为arg的匿名函数，并且将param作为参数来调用这个匿名函数 而(function($){…})(jQuery)则是一样的，之所以只在形参使用$，是为了不与其他库冲突，所以实参用jQuery 相当于funtion output(s){…};output(jQuery);或者var fn=function(s){…};fn(jQuery);

!function(){}();   与 ;!function(){}();

从语法上来开，Javascript中分号表示语句结束，在开头加上，可能是为了压缩的时候和别的方法分割一下，表示一个新的语句开始。所以，如果在一个单独的JS文件中，开头的分号是没有任何意义的，可以删掉。 叹号是逻辑运算符，是“非”的意思，常见这种写法 if(!true){}；而将运算符加载函数定义的前面，则是将函数看做一个整体，然后再调用这个函数，并对返回的结构进行逻辑运算。 说白了，此处就是构建了一个立即执行函数，自己写的时候，可以使用更清晰的格式：(function(){})();

补充一点：在函数声明 function (){} 后面加 () ，意思是执行这个函数声明。有的叫法是“匿名自动执行函数”，更准确的表示应该为“立即执行函数”。 但立即执行函数，要作为表达式的一部分才行，不然js解释器会报语法错误。一般，成为表达式的最容易理解方式是：在左右两端加一个圆括号，像这样 (function (){}) 。所以，立即执行函数最常见的写法是 (function (){})()，这是一个语句，在前面和后面都可以加 ; 。 其实立即执行函数还有N种写法，比如 (function (){}) 也行，在函数声明前加一元运算符也行： !function (){}() 、 ~function (){}() 。甚至，对一元运算符进行组合也可以： !!!!function (){}() 、 ~~~function (){}() 、 !~!function (){}() 。

$(function(){…}); 或者： jQuery(function($) { … }); 允许你绑定一个在DOM（不包含图片）文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。 全写是： $(document).ready(function(){ … });

今天在用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。