Ajax

ajax基础知识

*定义：封装javascript，提供了很多API，是一个基于JavaScript开发的库

*优点：1.体积小，运行率高 2.支持css3选择器 3.跨浏览器兼容好

*目的：写得少，做的多，开发效率高

*使用：

一、下载

1.直接下载文档到本地(目前推荐)

版本：1.x的版本支持IE6.7.8 浏览器兼容较好

3.x的版本不支持IE低版本浏览器

 

压缩版本与未压缩版本 ：压缩后体积较小看不到源码，开发中使用未压缩的，有利于我们查看代码

2.CDN加速(受网络和服务器影响)

3.通过npm安装

 

二、引入

script标签引入

 

*$(document).ready():入口函数，所有代码都要写在入口函数里；

$是jQuery的简称

 

*入口函数的几种写法

$(document).ready()

$(function(){})

iQuery(document).ready()

jQuery(function(){})

 

*$()里面可以写什么：

1.入口函数

2.dom字符串

3.dom对象

 

*window.onload入口函数和 $(document).ready入口函数的区别

1.window.onload是等DOM以及所有资源(图片，音乐,js文件等)加载完毕后执行

$(document).ready()等待dom解析完以后执行，不包括图片及其他资源

2.window.onload写多个时，只会执行最后一个

$(document).ready可以写多个，都会执行

 

 

选择器

*选择器

$('div') :选择标签为div的元素

$('#box') :选择ID为box的元素

$('.box') :选择类名为box的元素

$('*') :选择全部

$('.box span') :后代

$("div>p") :子元素

$("div+p") :相邻的p元素

 

*内容选择器

contains(text) :选择包含指定文本的元素 text：参数，文本内容

empty :选择空的元素，空指的是没有元素节点和文本节点

has(selector) :选择指定元素的标签/元素，操作的都是父元素

parent :选择有子元素或者文本的父级元素(除了空的)

 

*基本选择器

$("div:first") ：获取第一个元素

$("div:last") ：获取最后一个元素

$("div:even") ：获取所有索引值为偶数的元素，从 0 开始计数

$("div:odd") ：获取所有索引值为奇数的元素，从 0 开始计数

$("div:gt()") ：获取到大于给定索引值的元素

$("div:lt()") ： 获取到小于给定索引值的元素

$("div:not()") ：不能筛选子元素，筛选的是元素本身

$("div").eq() ：获取一个给定索引值的元素，从0开始

 

*属性选择器

$("input[type == button]")

$("input[type == text]")

$("input[type="text"]")：找到以text元素

$("input[type*="text"]")       

$("input[type^="text"]")  

$("input[type$="text"]")

 

*子元素

:first-child：所给选择器( :之前的选择器)的第一个子元素

:last-child：表示匹配最后一个子元素

$('div span：nth-child(2)')：其父元素下的第N个子或奇偶元素,从1开始

 

:last与:last-child的区别

:last 表示匹配最后一个元素

:last-child 表示匹配最后一个子元素

 

*表单属性

:checked：匹配所有被选中元素(复选框、单选框等，select中的option)

:selected：匹配所有选中的option元素

 

*添加样式

1.选择器.css('样式名') --- 获取样式

2.选择器.css('样式名','值') ---- 添加一个样式

3.选择器.css({ker1:value1,key2:value2,....keyN:valueN}) --- 添加多个样式 键值对

 

$('button').on('click',function(){ $('div').css({//设置多个样式 'width':'200px', 'height':'300px', 'background':'blue', }) })

 

*解决$冲突问题：jQuery.noConflict()

var a = jQuery.noConflict() a('div').css('color','red')

 

*方法：

1.静态方法：自身方法

function Person(){} Person.showtime = function(){ alert('静态方法') } Person.showtime();

 

2.实例方法：构造函数原型的方法

用构造函数模拟类

function Person(){} Person.prototype.showAge = function(){ alert('实例方法') } var p1 = new Person(); p1.showAge();

 

trim():去掉字符串的首尾空格

var str = ' 骑上我心爱的小摩托 '; console.log(str); console.log($.trim(str));

 

 

each():遍历数组、伪数组、对象

 var arr = ['apple','orange','banana'];
 var obj = { 0:'a', 1:'p', 2:'p', 3:'l', 4:'e', }
 var person = { name : 'dasha', age:20, }
 arr.forEach(function(item,index){ console.log(index,item) })
 obj.forEach(function(item,index){ console.log(index,item) })
 person.forEach(function(item,index){ console.log(index,item) })
 $.each(arr,function(a,b){ console.log(a,b) })
 $.each(obj,function(a,b){ console.log(a,b) })
 $.each(person,function(key,value){ console.log(key,value) })

 

对比：js中的foreach不能遍历伪数组和对象，jQuery中的each可以遍历伪数组和对象

 

get([index]):取得其中一个匹配的元素,从0开始，返回DOM对象

 

addBack:把当前事件发生的对象也添加到队列里

 

CSS

*操作尺寸

width():获取的是内容的宽度，不包括padding+border

height():获取的是内容的高度，不包括padding+border

innerWidth():内容宽度+padding大小

innerHeight():内容高度+padding大小

outerWidth():内容宽度+padding大小+border

outerHeight():内容高度+padding大小+border

//获取宽度 $('.box').width() //设置宽度,px可写可不写 $('.box').width("200") //获取高度 $('.box').height() //设置高度,px可写可不写 $('.box').height("200")

 

*操作位置

offset

距离屏幕左边的宽度：元素.offset().left()

$('.son').offset().left()

距离屏幕上边的高度：元素.offset().top()

$('.son').offset().top()

 

scroll

scrollTop:滚动条距离上边的滚动距离

//设置 $('.box').scrollTop(200) //获取 $('.box').scrollTop()

scrollLeft:滚动条距离左边的滚动距离

//设置 $('.box').scrollLeft(200) //获取 $('.box').scrollLeft()

 

position:距离定位父级的距离,如果没有定位父级，那么参考的是浏览器

$('.son').position() $('.son').position().left()

 

给浏览器获取滚动距离，设置滚动距离

$(window) $(document)都不能加引号

$(window).on('scroll',function(){ console.log($(document).scrollTop()) })

 

 

属性

设置属性

jQ:attr ----- js:setAttribute

设置属性：元素.attr('属性名','属性值')

注意：设置所有匹配到属性的元素

 

获取属性：元素.attr('属性名')

注意：获取到第一个属性的元素

 

移除属性： removeAttr("属性名")

 

jQ:prop

设置属性：元素.prop('属性名','属性值')

注意同attr

 

获取属性：元素.prop('属性名')

注意同attr

 

移除属性：removeProp("属性名")

 

如果设置相同属性会被覆盖

给某个属性设置多个属性值,用空格隔开

 

如果是checked disable selected针对这些属性,我们选择prop,其余都选择attr

 

*操作class

addClass('名称')：添加类名

removeClass('名称')：移除类名

hasClass('名称')：判断类名是否存在，返回布尔值

toggleClass('名称')：切换类名(添加与删除)

 

HTML代码/文本/值

.val()：用于获取表单元素的值

value，不接收任何参数

.text()

html和text的区别：html可以解析元素，而text不能解析元素，会把元素当作字符串输出到浏览器上

console.log($('div').html()) // 获取文本内容 console.log($('div').html('<p>马上就周五了！！！</p>')) //修改文本内容 console.log($('div').text());//获取文本 console.log($('div').text('<p>123654789</p>'));//设置文本

 

change()：当元素的值发生改变时,会发生 change 事件,仅适用于文本域（text field），以及 textarea 和 select 元素

当用于 select 元素时，change 事件会在选择某个选项时发生。

当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

 

文档处理

*内部与外部插入

内部插入

append():添加到元素内部的尾部

appendTo():将...添加到元素内部的尾部

A是爸爸B是儿子

A.append(B)

B.appendTo(A)

 

prepend():添加到元素内部的最前面

prependTo():将...添加到元素内部的最前面

A是爸爸B是儿子

A.prepend(B)

B.prependTo(A)

 

外部插入

after()：后面插入一个文本

A.after(B) 向A元素后面添加内容B

 

before()

A.before(B) 向A元素前面添加内容B

 

insertAfter():把A剪切到B的后面(B在前A在后)

A.insertAfter(B) A,B都是DOM元素

 

insertBefore():把A剪切到B的前面(A在前B在后)

A.insertBefore(B) A,B都是DOM元素

 

 

 

*删除

empty(): 移除子节点，不移除本身

删除元素的所有节点，文本节点，元素节点，空节点，注释节点

 

remove([expr]):若不传参，移除本身及所有子节点

若传参,传入选择器，移除指定元素

 

detach([expr]):参数是选择器,效果同remove

但是有区别：

用remove方法移除的元素，该元素上的属性及事件也会被删除

而用detach方法移除的元素，该元素上的属性或者事件会保留

 

 

链式调用

原理：对象调用方法，返回的还是这个对象

$("div").css({ "width":"100px", "height":"100px", "background":"red", }).html("我是div").click(function(){ alert(1) })

 

效果

参数根据需求添加，也可以不添加

参数：

speed:速度 有两种表示方法：1.slow,normal,fast(用字符串)

2.用毫秒表示

ease：运动形式 默认swing，可写linear(匀速)

fn：运动完成后执行的函数

*普通

show('speed','ease',fn)：让css属性的display属性为none的元素或状态为hide()时的元素显示出来

hide('speed','ease',fn)：让css属性的display属性为block的元素或状态为show()时的元素隐藏出来

toggle('speed','ease',fn)

 

*滑动

slideDown('speed','ease',fn)：向下卷曲

slideUp('speed','ease',fn)：向上卷曲

slideToggle('speed','ease',fn)：切换

 

*淡入淡出

控制元素的透明度，来控制元素淡入淡出的效果

fadeIn('speed','ease',fn)：淡入

fadeOut('speed','ease',fn)：淡出

fadeTo('speed','opacity','ease',fn)：指定透明度的大小

fadeToggle('speed','ease',fn)：切换

 

*自定义动画

animate():animate({},'speed','ease',fn)4个参数

1.{}里面写运动变化的属性样式 复合样式要用驼峰命名 比如margin-top ---> marginTop

注意：带数值的样式可以创建动画，字符串样式不可以创建动画比如'background:red',并且大括号里的样式是同时进行的

2.speed 速度

3.ease 运动形式

4.fn 运动完成执行的函数

 

stop(cleanQuene,jumpToEnd):停止运动效果

参数：

　　1.cleanQuene 布尔值 true:结束当前动画

　　2.jumpToEnd 布尔值 true:跳到动画队列的结尾

 

delay(毫秒数)：延迟运动结果

 

 

事件

*JQ相关事件

1.元素.事件名称

$('div').click()

编码效率高，有提示

事件类型有限制

同一个元素绑定多个事件同时会触发

 

2.元素.on(" ",function(){})

$('div').on('click',fn )

编码效率低，无提示

事件类型无限制，只要js中存在的事件都可以写

同一个元素绑定多个事件同时会触发

 

3.移除事件

元素.off()

三个参数，事件名称，选择器，fn

不传参：移除所有事件

传一个参数：移除一个事件

传两个参数：移除指定元素的某一个事件

 

4.单独触发一次事件

元素.one('事件名',fn)事件只触发一次，触发完就销毁

 

 

用户体验好：

mouseenter([[data],fn]):鼠标移入

mouseleave([[data],fn])：鼠标移开

 

用户体验不好：

mouseover([[data],fn])：鼠标移入

mouseout([[data],fn])：鼠标移开

 

hover(fn,fn)：

fn1：表示鼠标移入执行的函数

fn2：表示鼠标移开执行的函数

 

 

筛选

查找

parent():查找直接父级

parents():查找直接父级及以上

children():查找元素的子节点(直接的子节点),只考虑子元素不考虑后代元素

不传参：所有的子元素

传参：找指定的子元素

find()：可以找任意子元素

必须传参：参数是选择器

next()：寻找指定元素的下一个同级元素

nextAll()：寻找指定元素后面的所有同级元素

可以传参，参数是可以获取到的参数

prev()：寻找指定元素的上一个同级元素

prevAll()：寻找指定元素前面的所有同级元素

siblings():查找所有兄弟节点

 

 

 

jQ取消冒泡：

1.return false

2.event.stopPropagation()

 

jQ取消默认事件：

1.return false

2.event.preventDefault()

 

jQ事件委托: 用于给动态添加的元素绑定事件

通俗的讲 某件事自己不去亲自完成，而是让别人代替你完成并且把完成结果返回给你

可以解决后面创建元素的问题

 

delegate('目标元素','事件类型',fn) 目前被废弃

on('事件类型','目标元素',fn)

 

事件冒泡：

捕获阶段：事件从window到目标元素之前触发的事件这个阶段叫事件捕获

冒泡阶段：当事件到达目标元素，会按照捕获阶段的路线反向触发事件

 

 

 

异常捕获机制

try...catch

先尝试执行try里面的的代码,如果try中代码有问题,那么会执行catch里面的代码,并且try中代码问题原因可以在catch中捕获到

如果try中代码没问题,那么catch中代码不会执行,try...catch外部的代码不会影响执行

 

 

XML

xml:类似于html,扩展标记语言，html是显示文本或者数据，而xml是传输数据的

语法规则：

1.必须有一个根元素

2.没有规定的元素供使用,元素都是自定义的

3.对大小写敏感

4.标签都是闭合的,没有单标签

5.标签必须合理嵌套,不能错位嵌套

6.元素命名区分大小写,不能使用数字,特殊符号开头

 

 

jsonp

jsonp:做跨域请求的技术,由于浏览器的同源策略,ajax请求被这种策略限制,

对于非同源的请求ajax无法实现,jsonp可以解决跨域问题

 

同源策略：是浏览器的安全机制，防止其他网站攻击导致信息泄露,或者向其他网站请求资源，导致自己的信息泄露

 

*什么叫同源：

协议，域名，端口号必须完全相同，三者中有一个不同就是非同源

http://www.baidu.com 和 https://www.abc.com 非同源，协议不同 https：加密

http://www.baidu.com 和 http://www.NEF.com 非同源，域名不同

http://www.baidu.com:80 和 http://www.NEF.com:8000 非同源，端口不同

http://www.baidu.com:80 和 http://www.baidu.com:80?numm = 1 同源

 

*什么是跨域？ 非同源即跨域

*json与jsonp的关系：没关系

jsonp:json with padding ：把数据内容填充到函数调用中

 

*script,img,link的src与href属性没有同源策略的限制

 

*jsonp的原理：

1.动态创建script标签,利用script标签的src属性没有同源策略的限制,向请求地址发送一个get请求;

2.预先定义一个函数,这个函数的作用是用来接收返回的数据,并且要把这个函数名通过url携带参数的方式发送给服务器;

3.服务器拿到函数名以后,这个函数名包裹着服务器返回的数据,也就是服务器返回的是函数的调用.

 

*jquery中使用jsonp的方式：

      1.jsonp：可以指定参数名，不写的话默认callback

      2.jsonpCallback：指定函数名

      3.dataType："jsonp"：告知服务器返回的数据格式

 

js对象和jQuery对象相互转换的方法

 

oBox.html("hello")这么写会报错的原因:

    oBox是DOM对象 js对象不能使用jQuery对象的方法，jQuery对象也不能使用DOM对象的方法

    可以共存，但不可以混用

    例如：

    innerHTML js中的方法

    html() jquery对象中的方法

    setAttribute js中设置属性的方法

    attr("name")  jquery中设置属性的方法

    value js中设置值得方法

    val() jQuery中设置值得方法

 

js对象和jquery对象相互转换的方法？

    1.js对象转成jQuery对象的方法？

        把js对象使用$()包裹起来

    2.jQuery对象转成js对象？[index] get(index)

        2.1.使用中括号[0]

        2.2.使用get(0)