jQ随手笔记

随手记录一些小知识点

1.问题:js使用slideToggle如何获取当前隐藏或者开启状态

解决方法:

 $("#segmentGraph").slideToggle("slow",function(){
    if($(this).is(':hidden')){
        // close
    }else{
        // open
    }
});
2.js阻止事件冒泡和浏览器的默认行为

解决方法:

//阻止事件冒泡
function stopBubble(e) { 
    //如果提供了事件对象,则这是一个非IE浏览器 
    if ( e && e.stopPropagation ) 
        //因此它支持W3C的stopPropagation()方法 
        e.stopPropagation(); 
     else 
        //否则,我们需要使用IE的方式来取消事件冒泡 
        window.event.cancelBubble = true; 
} 

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    if ( e && e.preventDefault ) 
        //阻止默认浏览器动作(W3C) 
        e.preventDefault(); 
    else 
        //IE中阻止函数器默认动作的方式
        window.event.returnValue = false; 
    return false; 
}
3.使用对象作为函数参数
  • 一个函数--函数接受几个参数,但是这几个参数都不是必填的,函数该怎么处理?
  • 如果一个函数,参数很多,又该怎么处理?
  • 如果函数参数有多个,需求突然改了,操作函数也要改,调用函数的时候参数也要一个一个修改?
  • 如果一个函数有很多的参数,看上去是不是不太美观,而且也不好找参数?
4.js中size()和length的区别

size()是方法:是jQuery提供的函数,只能在jQuery下使用。
length是属性: 定义在dom和javascript中,不使用jQuery也可以使用。

使用情况:
1.针对标签对象元素,比如数html页面有多少个段落元素<p></p>,那么此时的$("p").size() == $("p").length
2 .计算一个字符串的长度或者计算一个数组元素的个数
那么此时只能用length而不能用size()(size()在1.8之后就删除了)

5.DOM节点转jQuery对象,jQuery对象转DOM节点

DOM节点转jQuery对象

var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象

jQuery对象转DOM节点
两种转换方式讲一个 jQuery 对象转换成 DOM 对象: [index] 和 .get(index);
(1) jQuery 对象是一个数据对象,可以通过 [index] 的方法,来得到相应的 DOM 对象。

var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中

(2) jQuery 本身提供,通过.get(index) 方法得到相应的 DOM 对象

var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

6.$.each()和$(selector).each()的区别

$.each(object, [callback])
参数详解:
object:需要例遍的对象或数组。
callback:每个成员/元素执行的回调函数。
如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。

$(selector).each(callback)
参数详解:
callback:对于每个匹配的元素所要执行的函数.
返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

使用场景:
$().each 在dom处理上面用的较多
$.each通常处理数组或者对象
更多参考:关于JQuery中的$.each()与$().each的理解

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 3,865评论 0 3
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,214评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,906评论 0 1
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,745评论 18 503
  • 对于开发人员来说,其应用性能是需要特别关注的。在用户体验至上的大环境要求下,性能优化是十分必要的。无意中在知乎看到...
    OneAPM阅读 2,415评论 1 3