美文网首页
锋利的jQuery 记录的部分笔记

锋利的jQuery 记录的部分笔记

作者: 抓住时间的尾巴吧 | 来源:发表于2016-11-08 11:03 被阅读15次
Window.onload $(document).ready()
执行时机 必须等待网页中所有的内容(包括图片)加载完毕后才能执行 网页中所有DOM结构绘制完毕就执行,可能DOM元素关联的东西并没有加载完
编写个数 不能同时编写多个,<br />以下代码无法正确执行:<br />Window.onload =function(){<br /> alert('test1');<br />} <br />Window.onload =function(){<br /> alert('test2');<br />}<br />结果只会输出"test2" 能同时编写多个,<br />以下代码正确执行:<br />$(document).ready(){<br /> alert('hello world');<br />} <br />$(document).ready(){<br /> alert('hello again');<br />} <br />结果两次都输出
简化写法 $(document).ready(){}<br />可以简化写成<br />$(function(){})

jquery链式操作代码块风格

子元素的操作推荐缩进

$(this).addClass('highlight')
 .children('li').show().end()
.siblings().removeClass('highlight')
 .children('li').hide()

事件冒泡(阻止事件冒泡和自身的默认行为)

$(element).bing('click', function(){ //点击事件的处理 event.stopPropagation(); //停止事件冒泡 })
页面某些元素有默认行为,比如submit的表单提交
event.preventDefault();//可以阻止元素的默认行为

只能使用一次的点击事件,用one绑定

$(element).one('click', function(){})

序列化元素

  • serialize()
    当表单中的内容比较多时,一个一个获取Input的内容显然是不合适的,此时就可以用到serialize(),例如
    $('#form').serialize()
    $(":checked,:radio").serialize()只会将选中的值序列化
    $('#form').serializeArray()不是返回字符串了,而是返回json
  • $.param()方法
    var obj = {a:1,b:2,c:3}
    var k = $.param(obj)
    此时k输出为a=1&b=2&c=3
  • $(element).ajaxStart({})//ajax开始之前,比如在页面部分地方显示加载中。。。
  • $(element).ajaxStop({})

JQuery validator

`//自定义一个验证方法
$.validator.addMethod(
"functionName",
function(value,element,param){
return value == eval(param)
},
'错误提示信息'
)

`

闭包

闭包1.png 闭包2.png

常见的JQuery插件写法

;(function($){ /*这里放置代码*/ })(jQuery);

JQuery.png

jQuery判断浏览器类型

`$(document).ready(){
//Firefox 2 and above
if ( $.browser.mozilla && $.browser.version >= "1.8" ) {
//do something
}
//Safari
if ( $.browser.safari ) {
//do something
}
//Chrome
if ( $.browser.chrome ) {
//do something
}
//Opera
if ( $.browser.opera ) {
//do something
}
//IE6 and below

if ( $.browser.mise &&  $.browser.version <= "6" ) {
    //do something
}
//anything above IE6
if ( $.browser.mise &&  $.browser.version > 6 ) {
    //do something
}

}
`

相关文章

  • 锋利的jQuery 记录的部分笔记

    jquery链式操作代码块风格 子元素的操作推荐缩进 $(this).addClass('highlight') ...

  • 《锋利的JQuery》笔记

    删除节点 jQuery提供了三种删除节点的方法,remove()、detach()和empty()。 remove...

  • 锋利的jquery笔记

    Jquery 对象转换成 DOM 对象的二中方法 DOM 元素转换成 Jquery 对象的方法 Jquery 对象...

  • 锋利的jQuery笔记2

    标签: 我的笔记 JQuery中的动画 显隐 show、hide 加特效 duang slow() 600毫秒, ...

  • 锋利的jQuery笔记1

    标签: 我的笔记 认识jQuery jQuery对象和DOM对象 DOM对象可以通过javascript获取。 j...

  • 锋利的jQuery学习笔记

    看书时随手整理的jQuery的相关内容及API,之后会将相应的功能与JavaScript进行比对整理。 jQuer...

  • 锋利的jquery 学习笔记

    Menu 第1章 认识jQuery 1.3 jQuery代码的编写 1.4 jQuery对象和DOM对象 1.4....

  • jQuery学习笔记-1

    阅读锋利的jQuery,做下笔记。第二章 jQuery选择器 1. jQuery选择器优势 简洁的写法 支持CSS...

  • 跟我一起学jQuery——第一集

    《锋利的JQuery》第二版阅读笔记-第一章 jQuery对象和DOM对象 想学习jQuery,首先要学会区分jQ...

  • 锋利的jQuery

    01 DOM操作*remove()和detach() 同样会删除元素,调用删除之后会返回删除的节点,删除之后仍然...

网友评论

      本文标题:锋利的jQuery 记录的部分笔记

      本文链接:https://www.haomeiwen.com/subject/apyduttx.html