分类 网络 下的文章

jQuery中$(function()与(function($)等的区别

发布于 , 1122 次浏览

(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 1.6+ .prop()与.attr()方法比较

发布于 , 1118 次浏览

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

发布于 , 1252 次浏览

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

发布于 , 1183 次浏览

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

发布于 , 1186 次浏览

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

发布于 , 1113 次浏览

这篇文章主要介绍了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固定位置返回顶部效果

发布于 , 1096 次浏览

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

发布于 , 1037 次浏览

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

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

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

CSS3选择器大全

发布于 , 1065 次浏览

"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换行问题

发布于 , 1081 次浏览

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

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