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对象的法子。

 

例子:

Ajax 1

Ajax 2

 

5.

   
<1>jQuery对象是类数组

 
 

 $("body").length    //1 一个文档只有一个body属性
 $("body")[0]    //等于document.body

 

    <2>其他三只属性

    $(参数一,参数二,参数三)

    参数一:选择器

   
参数二:content属性是上下文对象,如果无传递来说,就是Document对象

    参数三:名为jquery的属性

 

例子:

Ajax 3

Ajax 4

 

   <3>

Ajax 5

 

Ajax 6

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):获取之是包括外边距,边框,外边距的宽高

Ajax 7

 

Ajax 8

具体见:http://www.w3school.com.cn/jquery/jquery_dimensions.asp

 

 

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会在AjaxfadeIn完成时这开始。

 

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

 

一对插件约定:

 Ajax 9

Ajax 10

Ajax 11

Ajax 12

 

 

22.SVG

 

相关文章