jq及ajax-ZhiMap思维导图

jq及ajax
进入思维导图模式
- jquery选择器
  - 选择器用法:CSS里怎么查找,jquery里一样 .class,#id,div ul,
  - 样式属性获取
- jquery动画
  - 显示隐藏，开关方法，淡入淡出，划上划下
  - 自定义动画animate
  - 动画顺序/stop()方法
- 原生ajax
  - 本地服务器:把本地电脑变成服务器环境-可用集成环境
  - json数组:
    var json=[
    {'name':'aa','age':18},
    {'name':'bb','age':20}
    ]
  - Ajax原理实现
    1.买手机 var xhr=new XMLHttpRequest()
    2.拨打号码 xhr.open('get','url地址',true) //请求类型 get ,post 路径:url地址 true:异步请求，false :同步请示
    3.按下拨号键 xhr.send() 发送
    4.发送是否成功 xhr.onreadystatechange=function(){if(xhr.readyState==4){ //有没有发送成功: http请求状态 :0,1,2,3,4
    if(xhr.status==200) //服务器响应状态: 200<=xhr.status<300||xhr.status=304 代表成功
    {
    //请求成功后做的事：响应内容
    //console.log(xhr.responseText);
    }
    else
    {
    //请求失败做的事:给你一个状态
    // console.log(xhr.status);
    }
    }}
  - 服务器响应：200 – 服务器成功返回网页
    304 – 未修改
    失败的状态码：
    404 – 请求的网页不存在
    503 – 服务器暂时不可用
    500 – 服务器内部错误
- jquerydom方法
  - 创建元素,然后填加内容：$('<ul></ul>').text('bb')
  - 元素追加-append，prepend，insertBefore，after，remove，replaceWith()
  - 获取父级子集兄弟元素-parent，children，next，prev
- jquery事件绑定与取消冒泡
  - bind/unbind 绑定/解除解绑
    jqObj.bind(事件类型,函数)
  - mouseover/out mousedown/up click 会冒泡
    解决：mouseenter/mouseleave hover
    阻止： return false;
  - 只阻止冒泡：ev.stopPropagation();或 ev.cancelBubble();
    只阻止默认：ev.preventDefault(); ev不需做兼容
- jq尺寸，位置获取
  - 尺寸-jqObj.width()，jqObj.height()
  - 位置-position，offset
- get/post
  - get与post方式提交
    get: http://网址路径/?user=aa&pass=1 user,pass代表你提交的表单name名，aa,1代表你的表单value值
  - post提交敏感数据时要进行加密处理:
    1.前端加密md5处理，后台md5解密
    2.全站改造成https协议
- jq链式操作，对象转换，each循环
  - 连缀：是否可以连缀，要看返回值获取操作时，有可能不可连缀
  - 转换：DOM（原生）-->JQ（对象) $(DOM对象)
    JQ(对象)--->DOM(原生) jqObj.get(n)
    jqObj[0]
    get是jq一函数，找jq对象里面第0个子元素
  - 循环：
    jqObj.each(function(index,element){
    index == 每一个jqObj的索引
    element == 每一个jqObj里面的元素(DOM)
    this == 每一个jqObj里面的原生DOM
    this==element
    });
- jsonp跨域
  - jsonp跨域:解决不同服务器之间的访问
  - 原理:利用一些允许跨域的标签(script,link,img等)，script标签的src=""进行跨域
- 序列化表单
  - 序列化:
    传数据到后台时，数据格式最终要变为： name=考拉&age=18&sex=男&hobby=篮球&hooby=足球 ,这个就是表单序列化
  - jq 序列化方法:
    $('form').serialize();
- ajax数据
  - 通用方法:
    $.ajax({
    url:'url'
    type:'get',
    data:{},
    
    })
  - 单个方法:$.ajax({
    url: url,
    data:{},
    success:function(str){
    
    },
    });
- jq插件
  - 定义：
    $.fn.属性名=12
    $.fn.属性名='bmw';
    $.fn.属性名=function(){}; 定义插件
  - 批量定义：
    $.fn.extend(json);
- jq组件
  - 对面向对象的深入应用（UI组件，功能组件）
    将配置参数、方法、事件，三者进行分离
    创建自定义事件
    有利于多人协作开发代码
    如何去挂载自定义事件与事件函数
  - 例子 : 基于JQ的选项卡的组件开发模式
    Trigger() extend()等方法的使用

jq及ajax

​jquery选择器

​选择器用法:CSS里怎么查找,jquery里一样 .class,#id,div ul,

​样式属性获取

​jquery动画

​显示隐藏，开关方法，淡入淡出，划上划下

​自定义动画animate

​动画顺序/stop()方法

​原生ajax

​本地服务器:把本地电脑变成服务器环境-可用集成环境

​json数组: var json=[ {'name':'aa','age':18}, {'name':'bb','age':20} ]

​服务器响应：200 – 服务器成功返回网页304 – 未修改失败的状态码：404 – 请求的网页不存在503 – 服务器暂时不可用500 – 服务器内部错误

​jquerydom方法

​创建元素,然后填加内容：$('<ul></ul>').text('bb')

​元素追加-append，prepend，insertBefore，after，remove，replaceWith()

​获取父级子集兄弟元素-parent，children，next，prev

​jquery事件绑定与取消冒泡

​bind/unbind 绑定/解除解绑 jqObj.bind(事件类型,函数)

​mouseover/out mousedown/up click 会冒泡解决：mouseenter/mouseleave hover 阻止： return false;

​只阻止冒泡：ev.stopPropagation();或 ev.cancelBubble(); 只阻止默认：ev.preventDefault(); ev不需做兼容

​jq尺寸，位置获取

尺寸-​jqObj.width()，jqObj.height()

​位置-position，offset

​get/post

​get与post方式提交 get: http://网址路径/?user=aa&pass=1 user,pass代表你提交的表单name名 ，aa,1代表你的表单value值

​post提交敏感数据时要进行加密处理: 1.前端加密md5处理，后台md5解密 2.全站改造成https协议

jq​链式操作，对象转换，each循环

​连缀：是否可以连缀，要看返回值获取操作时，有可能不可连缀

​转换：DOM（原生）-->JQ（对象) $(DOM对象) JQ(对象)--->DOM(原生) jqObj.get(n) jqObj[0] get是jq一函数，找jq对象里面第0个子元素

​循环： jqObj.each(function(index,element){ index == 每一个jqObj的索引 element == 每一个jqObj里面的元素(DOM) this == 每一个jqObj里面的原生DOM this==element });

​jsonp跨域

​jsonp跨域:解决不同服务器之间的访问

​原理:利用一些允许跨域的标签(script,link,img等)，script标签的src=""进行跨域

​序列化表单

​序列化:传数据到后台时，数据格式最终要变为： name=考拉&age=18&sex=男&hobby=篮球&hooby=足球 ,这个就是表单序列化

​jq 序列化方法:$('form').serialize();

​ajax数据

​通用方法:$.ajax({ url:'url' type:'get', data:{}, })

​单个方法:$.ajax({ url: url, data:{}, success:function(str){ },});

​jq插件

​定义： $.fn.属性名=12 $.fn.属性名='bmw'; $.fn.属性名=function(){}; 定义插件

​批量定义： $.fn.extend(json);

​jq组件

​对面向对象的深入应用（UI组件，功能组件）将 配置参数、方法、事件，三者进行分离创建自定义事件有利于多人协作开发代码如何去挂载自定义事件与事件函数

​例子 : 基于JQ的选项卡的组件开发模式Trigger() extend()等方法的使用

jquery选择器

选择器用法:CSS里怎么查找,jquery里一样 .class,#id,div ul,

样式属性获取

jquery动画

显示隐藏，开关方法，淡入淡出，划上划下

自定义动画animate

动画顺序/stop()方法

原生ajax

本地服务器:把本地电脑变成服务器环境-可用集成环境

json数组:
var json=[
{'name':'aa','age':18},
{'name':'bb','age':20}
]

服务器响应：200 – 服务器成功返回网页
304 – 未修改
失败的状态码：
404 – 请求的网页不存在
503 – 服务器暂时不可用
500 – 服务器内部错误

jquerydom方法

创建元素,然后填加内容：$('<ul></ul>').text('bb')

元素追加-append，prepend，insertBefore，after，remove，replaceWith()

获取父级子集兄弟元素-parent，children，next，prev

jquery事件绑定与取消冒泡

bind/unbind 绑定/解除解绑
jqObj.bind(事件类型,函数)

mouseover/out mousedown/up click 会冒泡
解决：mouseenter/mouseleave hover
阻止： return false;

只阻止冒泡：ev.stopPropagation();或 ev.cancelBubble();
只阻止默认：ev.preventDefault(); ev不需做兼容

jq尺寸，位置获取

尺寸-jqObj.width()，jqObj.height()

位置-position，offset

get/post

get与post方式提交
get: http://网址路径/?user=aa&pass=1 user,pass代表你提交的表单name名，aa,1代表你的表单value值

post提交敏感数据时要进行加密处理:
1.前端加密md5处理，后台md5解密
2.全站改造成https协议

jq链式操作，对象转换，each循环

连缀：是否可以连缀，要看返回值获取操作时，有可能不可连缀

转换：DOM（原生）-->JQ（对象) $(DOM对象)
JQ(对象)--->DOM(原生) jqObj.get(n)
jqObj[0]
get是jq一函数，找jq对象里面第0个子元素

循环：
jqObj.each(function(index,element){
index == 每一个jqObj的索引
element == 每一个jqObj里面的元素(DOM)
this == 每一个jqObj里面的原生DOM
this==element
});

jsonp跨域

jsonp跨域:解决不同服务器之间的访问

原理:利用一些允许跨域的标签(script,link,img等)，script标签的src=""进行跨域

序列化表单

序列化:
传数据到后台时，数据格式最终要变为： name=考拉&age=18&sex=男&hobby=篮球&hooby=足球 ,这个就是表单序列化

jq 序列化方法:
$('form').serialize();

ajax数据

通用方法:
$.ajax({
url:'url'
type:'get',
data:{},

})

单个方法:$.ajax({
url: url,
data:{},
success:function(str){

},
});

jq插件

定义：
$.fn.属性名=12
$.fn.属性名='bmw';
$.fn.属性名=function(){}; 定义插件

批量定义：
$.fn.extend(json);

jq组件

对面向对象的深入应用（UI组件，功能组件）
将配置参数、方法、事件，三者进行分离
创建自定义事件
有利于多人协作开发代码
如何去挂载自定义事件与事件函数

例子 : 基于JQ的选项卡的组件开发模式
Trigger() extend()等方法的使用