开发者社区> shy丶gril> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

简介:
+关注继续查看
1.$和jquery在全局命名空间中定义的唯一两个变量。
 
2.jquery是工厂函数,不是构造函数。他返回一个新创建的对象。
 
3.jquery的四种调用方式:
    <1>传递CSS选择器(字符串)给$()方法
 
    <2>传递Element,Document或Window对象给$()方法
 
    <3>传递HTML文本字符串给$()方法。
    如:
复制代码
var img=$("<img/>",        //新建一个<img>元素
               {
                   src:url,                     //具有html属性
                   css:{borderWidth:5},    //CSS样式
                   click:handleClick    //事件处理程序
             }           
        )
复制代码

 

    <4>传入一个函数给$()方法。
    如:
 jQuery(function(){    //文档加载时调用
         //所有的jQuery代码放这里
   })
 
 
4.jquery函数
   是jQuery或$的值。该函数可以用来创建jQuery对象,用来注册DOM就绪时需要调用的处理函数。
<1>jQuery对象
    jQuery对象是由jQuery函数返回的对象。
<2>jQuery方法
    jQuery方法是由jQuery函数返回的jQuery对象的方法。
 
例子:
 
5.
    <1>jQuery对象是类数组
   
 $("body").length    //1 一个文档只有一个body属性
 $("body")[0]    //等于document.body
 
    <2>其他三个属性
    $(参数一,参数二,参数三)
    参数一:选择器
    参数二:content属性是上下文对象,如果没传递的话,就是Document对象
    参数三:名为jquery的属性
 
例子:
 
   <3>
 
prepend()    
在元素的前面添加内容,依旧在标签内部。
 
回调函数是什么?
 
<4>jQuery的几个基础方法
jQuery的map()方法
jQuery的each()方法
jQuery的is()方法
 
6.jQuery的setter与getter
 
7.jQuery
css(),attr(),addClass()等jQuery的setter方法都可以传递多个名值对设置属性,还有函数设置属性。
  1. offset()获取偏移量相对于文档
  2. position()获取偏移量相对于父元素
 
8.jQuery获取元素的宽高问题(有趣)
  1. width(),height():获取的是内容的宽高(不包括内边距,边框,外边距)
  2. innerWidth(),innerHeight():获取的是包括内边距的宽高
  3. outerWidth(),outerHeight():获取的是包括内边距,边框的宽高
  4. outerWidth(true),outerHeight(true):获取的是包括内边距,边框,外边距的宽高
 
 
 
9.获取和设置元素数据(重要)
jQuery定义了一个名为data()的getter/setter方法,可用来设置或获取与文档元素,Document或Window对象相关联的数据。可以将数据与任意元素关联。这也是jQuery的事件处理程序注册和效果队列机制的基础。
 
 
10.clone()
clone() 方法生成被选元素的副本,包含子节点、文本和属性。
 
11.replaceWidth()与replaceAll()
这两者区别在于:replaceAll()不能使用函数替换
 
12.包裹元素warp()余unwarp()
13.remove()与detach(),filter()
 
14.jQuery事件对象
jQuery通过定义自己的Event对象来隐藏浏览器之间的实现差异。
 
15.bind()的高级特性之事件的注册
<1>语法:$(selector).bind(event,data,function)
例子:
$("button").bind("click",function(){
    $("p").slideToggle();
  });
替代语法:

$(selector).bind({event:function, event:function, ...})
例子:
$("button").bind({
    click:function(){},
    mouseover:function(){},  
    mouseout:function(){}  
  });
 
<2>bind()有三个参数:
参数一:事件类型字符串,空格分隔多个事件
参数二:传递到函数的额外数据。
参数三:处理程序函数
 
<3>
特性一:bind的一个重要特性是允许为注册的事件处理程序指定命名空间。
如:
$('a').bind('mouseover.myfunction',f) 
$('a').bind('mouseover.myfunction1.myfunction2',f)     //以及分配多个命名空间
 
特性二:bind的第一个参数可以是一个对象
 
与bind()绑定一样的还有one()也可以绑定事件。
 
 
16.unbind()之事件的解除
<1>注销命名空间下的处理程序
复制代码
$('a').unbind("mouseover.myfunction1")
 
//取消绑定在myfunction1命名空间下的所有事件
$('a').unbind('.myfunction1');
 
//去向绑定在myfunction1于myfunction2下的click事件
$('a').unbind('click.myfunction1.myfunction2');
复制代码
 
 
17.事件触发
trigger()
 
18.实时事件(依赖于冒泡
delegate()
 
19.动画(animate)
<1>禁用动画:
jQuery.fx.off=true;
 
动画速度:
fast->200ms
slow->600ms
 
自定义动画速度:
jQuery.fx.speeds["med-fast"]=300;
 
 
<2>jQuery动画是异步的。默认是队列化的。
当然我们也可以将他们不队列化。
如:
$("img").fadeIn(500).animate({"width","+=100"},{queue:false,duration:1000})
                .fadeOut(500);
这个效果就是:fadeIn与fadeOut是队列化的。animate是非队列化的。
fadeIn与animate开始时间相同,
而fadeOut会在fadeIn完成时立即开始。
 
<3>缓动动画
自定义缓动动画:
jQuery.easing["squr"]=Math.sqrt;
 
<4>动画取消(stop),延迟(delay)和队列
$("img").stop().animate()
 
$("img").fadeTo(100,0.5).delay(200).slideUp()
//快速淡出为半透明,等200ms,然后向上滑动
 
20.jQuery的Ajax
<1>jquery的load()
$("img").load(function(){   })一个是事件方法
$("img").load('a.txt')一个是ajax方法
具体调用哪个通过后面的参数决定。
 
post与get有和区别?
 
<2>jQuery.getScript()
动态异步加载脚本文件,它能同时适用于同源和跨源脚本的加载。
适用:
jQuery.getScript("http://eaxo.com/js/wpsl.js",function(){
    //调用且执行完毕后执行回调
})
=>等同于
$.ajax({
  url: url,
  dataType: "script",
  success: success
});

MIME是什么?jsonP?
 
<3>jQuery.getJson()
 
<4>jQuery.get()和jQuery.post()
 
<5>
jQuery.browser
jQuery.contains()
jQuery.each()
jQuery.extend()
 
 
21.jQuery的插件扩展
关键点:jQuery.fn是所有jQuery对象的原型对象。
如果给该对象添加一个函数,该函数会成为一个jQuery方法。
 
一些插件约定:
 
 
 转载:http://www.cnblogs.com/zqzjs/p/4896114.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《jQuery与JavaScript入门经典》——2.6 小结
您还完成了多个调试HTML、CSS和JavaScript问题的示例。您在本章学到的调试方法对阅读本书以及开发项目很有帮助,因为这些方法有助于消除常见的简单语法错误,为您节省大量时间,避免令人沮丧的情况发生。
1141 0
《jQuery与JavaScript入门经典》——2.7 问与答
就Cookie调试而言,您只需知道是否启用了Cookie、浏览器设置了哪些Cookie、这些Cookie的值是什么以及它们什么时候到期。这些信息都可在Firebug的Cookies选项卡中找到。Chrome和Internet Explorer在开发人员控制台中提供了类似的功能。
1071 0
《jQuery与JavaScript入门经典》——1.4 问与答
为渲染HTML以及与JavaScript交互,浏览器使用了一个引擎,这个引擎对来自服务器的数据进行分析、创建对象并将其交给图形渲染引擎,后者再将这些对象显示到屏幕上。由于浏览器使用的引擎各不相同,因此它们解释脚本的方式存在细微差别,尤其是未标准化的边缘元素。
1158 0
《jQuery与JavaScript入门经典》——1.3 小结
在本章中,您学习了Web服务器和浏览器通信的基本知识、GET和POST请求的差别以及服务器端和客户端脚本的用途,还学习了DOM以及浏览器如何使用它来渲染显示给用户的网页。
1288 0
jQuery插件开发的五种形态[转]
这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细。 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课。开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多。这里我把我
2703 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1019 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
942 0
+关注
1876
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载