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

例子：

<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方法都可以传递多个名值对设置属性，还有函数设置属性。

offset()获取偏移量相对于文档
position()获取偏移量相对于父元素

8.jQuery获取元素的宽高问题（有趣）

width(),height()：获取的是内容的宽高（不包括内边距，边框，外边距）
innerWidth(),innerHeight()：获取的是包括内边距的宽高
outerWidth(),outerHeight():获取的是包括内边距，边框的宽高
outerWidth(true),outerHeight(true):获取的是包括内边距，边框，外边距的宽高

具体见：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会在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方法。

一些插件约定：

转载于:https://www.cnblogs.com/momox/p/5047169.html

jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]相关推荐

Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)
Table of Contents appendTo appendTo(source, target) 源代码 append prependTo prependTo源码 prepend ...
嵌入式系统设计师学习笔记二十八：嵌入式程序设计③——高级程序设计语言
嵌入式系统设计师学习笔记二十八:嵌入式程序设计③--高级程序设计语言解释程序和编译程序编译器的工作阶段示意图语法错误:非法字符,关键字或标识符拼写错误语法错误:语法结构出错,if--endif ...
uniapp 学习笔记二十二购物车页面结构搭建
uniapp 学习笔记二十二购物车页面结构搭建 cart.vue <template><view><view class="flex padding" ...
Polyworks脚本开发学习笔记(二十)-补充几个常见操作指令的使用
Polyworks脚本开发学习笔记(二十)-补充几个常见操作指令的使用大概要写到结尾了,最后几篇就将手册的各常用命令再看一遍,组合一下,并列举出常见的一些有用的操作. DATA_COLOR_MAP数 ...
立创eda学习笔记二十八：在嘉立创购买pcb板并贴片（smt）
完整的写一下,分为两部分: 1.下pcb订单这个可以看之前写的一个博客: 立创eda学习笔记三:pcb购买_Gutie_bartholomew的博客-CSDN博客补充一下,买pcb可以直接有几个途 ...
JVM 学习笔记二十六、JVM监控及诊断工具-GUI篇
二十六.JVM监控及诊断工具-GUI篇 1.工具概述使用上一张命令行工具或组合能帮您获取目标Java应用性能相关的基础信息,但他们存在下列局限: (1)无法获取方法级别的分析数据,如方法间的调用关系 ...
JVM 学习笔记二十五、JVM监控及诊断工具-命令行篇
二十五.JVM监控及诊断工具-命令行篇 1.概述性能诊断是软件工程师在日常工作中经常面对和解决的问题,在用户体验至上的今天,解决好应用软件的性能问题能带来非常大的收益. Java作为最流行的编程语言 ...
MyCat 学习笔记第十五篇 . 数据分片后的迁移验证
本篇前言前面几篇把 mycat 分片.批量压力测试的功能都验证了一把,这回体验下系统上线前做数据分片规划,上线后若服务器压力过大时做数据迁移的过程. 其实做起来还是比较简单的验证,就是把之前几篇和d ...
Mr.J-- jQuery学习笔记(二十四)--剖析jQuery源码--extend
定义和用法 jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象. 注意:1. 如果只为$.extend()指定了一个参数,则意味着参数target被省略.此时,target就 ...

jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]相关推荐

最新文章

热门文章