jquery笔记

jQuery

$代表jQuery对象

以它开头的

function    ()

window.onload=function(){} 的代替 $(function(){})

可以多次执行  边执行边加载

想返回原生对象dom $().get(0) 或者用js代码getelementgetid()

有时候引入两个库 胡造成混乱解决办法

jquery在第三方库之前 $所有权是后者的

故jQuery对象就不能再用$表示

可以在前面 用var$$=jQuery 就把$$赋值给jQUery对象

如果jQuery在第三方库的后面 就先用jQuery.noConfulict  将$权给后者

再var$$=jQuery

length=size()

高级选择器

> 只选择子节点

等同于 children()

next()只获取当前节点的下一个同级节点

中间隔开会失效

~  nextAll() 下面所有的同级节点

prev  prevAll  当前节点上一个的同级节点

siblings 上下同级的节点

nextuntil(p) 下面同级节点直到遇到P停止

prevuntil    上面同级节点知道遇到  停止

css解锁是从右到左  所以右越小 速度越快

当然用find children next等速度也很快 他采取的是新的算法

属性选择器

a[title]  具有title属性的a

a[title!=name]  不等于Name的

a[title|=name]  可以选择name-1  name-n n为数字 -不可少

a[title*=name]  只要包括Name就可以被选中

a[][]  多属性选择

过滤选择器

:first  该元素第一个

:last  该元素最后一个

:even  从0开始的偶数元素

:odd    从0开始的基数元素

:eq()  指定第几个元素 填入数字  负数的话向后算从-1开始

:gt()  从第几个元素开始

:focus 给焦点元素加css  $().get().focus()默认情况下加上焦点

:content 通过文本选择一个元素

:empty  选择空的元素

:has(class)    子元素中包括这个class 这个父元素就被选中

parent()  选择当前元素父节点

parents() 选择当前元素的祖宗节点

:hidden  选择所有不可见元素

:visible  选择所有可见元素

first-chlid    每个父节点的第一个子节点

last-child      每个父节点的第一个子节点

nth-child(n/even/odd/eq())  传入参数每个父节点的第几个节点

$(class).is($())  选择器判断

检测class是否正确

eq返回jQuery对象  get()返回dom对象

$(class).is(function(){

return ($this)....

}) 自定义函数验证

$().slice(从第几个开始,到第几个);

content().sizi()  返回所有节点数目

filter() 可以传多个过滤器

也可以自定义方法

html()获取html内容    html(value)替换html内容

html(function(index,value){})

text() 获取文本内容  text(value)可以替换text内容 但会被转意

val() 设置选定内容 下拉菜单和单选等  val([value值])

设置和删除属性

attr({'title':'title'}) 设置属性

attr(id/title)  获取属性

attr(title,function(index,value){  //index 是索引第几个  value是以前的值

return 。。。。

})

removeAttr  删除属性

css样式

$().css(属性) 获取一个css样式属性

$().css(属性,“”) 设置一个样式

返回的是一个对象数组

遍历的时候用for(var i in class)

或者:

遍历原生态的对象数组 (直接用类名,标签名的):

$.each(class,function(属性,value){

return....

})

遍历jQuery的对象数组(用$()表示的)

$().each(function(index,element){

  return....

})

封装过的一些方法

.width() 直接获得一个数字 是该元素的长度

传参数表示设置该宽度  可以只传参不加单位

,width(function(){})

height 也相同

innerWidth width+padding 包括内边距

outerWidth width+padding+border 包括内边距和边框

outerWidth(true)  width+padding+border+margin 包括内边距外边距边框

offset 返回一个对象

应用offset().left  offset().top获得元素相对于窗口的偏移量

position

应用position().lest  position().top 获得元素相对于父元素的偏移量

scroll

应用 scrollTop() 获得滚动条竖直的值  right相同

scrollTop(value) 设置滚动条竖直的值

class

$()addClass  增加一个或者多个class

$()removeClass  移除class

toggleClass(样式)  默认样式和制定样式的切换  一般以click !(第二参数可完成点击的频率问题)

节点的操作

$().append() 在一个元素内部添加一个节点在最后

appendTo 将指定元素移入一个元素内 一般用法appendTo(document.createElement())

prepend 用法一致 是添加在最前面

after() 在一个元素后面添加一个节点

before() 在一个元素前面添加一个节点

insertAfter() 将指定节点插入一个元素后面

wrap(html/element) 用html或者element包裹一个节点

unwrap()移除一层包裹的内容

wrapAll() 用html或者element将所有元素包裹

wrapinner() 向指定元素的子节点包裹

表单原则器

:input 所有input

:text  :button  :select.....

返回的是元素的集合

表单过滤器

enabled  可用元素

disabled  不可用元素

checked  选取所有的被选中的元素 单选和复选

selectes 选取所有的被选中的元素 下拉列表

click 

dbclick

mousedown

mouseup

mousemove

mouseover

mouseout

change

select

submit

keydown

keypress

keyup

blur

focus

resize

scroll

error

用bind封装

bind(type,date,function)

bind(type,funcName)

bind(type:function,type:function)

unbind() 删除事件

可以填事件对象 也可以填事件的function

简写事件

click(function)

dblclick(function) 双击

mousedown(function) 鼠标按下

mouseup(function) 鼠标弹起

unload(function) 卸载一个页面 火狐不支持  其对象一般是window

resize(function) 窗口改变大小时

focus 必须是当前元素激活

focusin 可以是当前元素的子元素激活

bur

focusout 子元素可以激活

mouseout mousevoer 在子节点时也会激发

mouseenter mouseleave 只在离开当前节点才会触发

hover(function1,functon2) 复合事件 鼠标移入移出

事件对象  需要传参

type 获得这个时间类型

target 获得绑定事件的DOM对象 触发元素

currenTarget 监听元素 (绑定元素)

relateTarget 移入移出时最相邻的元素

date 获得额外数据

pageX 相对于页面原点的x位置

clientX 相对于页面视口的位置

screenX 相对于显示屏的位置

timeStamp 获得当前的时间戳

which 判断键盘鼠标的按键  鼠标左中右123

阻止冒泡行为

stopPropagation

阻止默认行为

preventDefault  可以用于表单不提交不跳转

若两个都想执行 用return false

isDefaultPrevented 是否调用阻止默认

isPropagationstopped 是否调用阻止冒泡

高级事件

trigger 模拟用户操作  打开网页就执行事件 额外数据,只有一条不用[]有多条要用[]

triggerHandler 1.不会执行默认行为 2.只会匹配一个元素  3.不会冒泡

命名空间bind("click.id",function)就给该click事件命名为id

事件委托 $(绑定元素--父元素)delegate(触发元素,触发形式,function) 为指定元素的一个或多个事件绑定事件

on和off代替bind.delegate

事件绑定 新元素节点不会事件  on(事件类型,function)

事件绑定 新元素节点也拥有该事件 on(触发形式,触发元素,function)

one()与on一致 但是只会执行一次事件触发

动画

show hide  toggle 一个按钮实现

有两个参数

第一个是速度 单位是毫秒

第二参数是一个函数

默认同步动画  列队动画要用递归

silde 卷式动画 sildeup/down/toggle

fade 淡入淡出 fadeTo透明度到

自定义动画

animate(css改变,毫秒数,function)

通过改变定位,实现移动

实现列队:点缀和回掉

css不是动画方法 不会与动画方法同步

故用queue(function(){css})包裹css就可以达到排队效果

如果queue后面还有动画 必须传参数next,并用next()表示还要经行下一个

clearQueue清理列队

stop 停止一个动画

如果是列队动画  会停止第一个而执行其他动画

填入参数true会立即停止 清除后面动画  如果第二个参数是true 则直接运动到终点 不会变大变小

动画的全局变量

$.fx.interval  帧数越小越流畅

$.fx.off=true  关闭动画

axaj

$().load('php(url)',function(response,status,xhr){})静态文件的异步获取

post('url','key:value',funtion)

$.post不能使用?传参,post可以使用键值对方式传参

$.get('url','key:value',function)get用?传参 也可以键值对

第四个参数指定返回类型json xml  php默认返回的是html和text

如果本来就是xml文件  强制转为html的话 返回值会带标签

$.ajax

(type,url,date,success:function)

$.ajaxSetup(){type,url,date}  可能会重复这几项数据所以将其封装  那么$.ajax中只用success

表单序列化

表单元素多时 date修改麻烦 会减少id的使用  以字符串返回 name+value

  serialize()返回一般数据

json格式数据$(function() {

        var data = $("form").serializeArray();

        console.log(JSON.stringify(data, null, 4));

});

等待与超时,错误

$(document).ajaxStart 提交时运行

$(document).ajaxStop  提交完成时运行

ajax的第5个参数 timeout:  超时的时间

错误提示第6个参数 error:function(xhr,errorText,errorType){}

局部错误用.error(function)

全局错误用$(document).ajaxError(function(event,xhr,settings,info){})

请求前后

.ajaxSend(function) 请求之前

.ajaxCompete(function) 请求完成后 无论成功失败

.ajaxError

.ajaxSuccess

工具函数

$.trim()

$.each(arr,function)  遍历元素

$.map(arr,function)  修改数据

inArray  返回所找元素下标

merge合并数组

unique 删除重复DOM元素

Toarray 合并多个DOM元素

isArray

isFunction

isEmptyObjct 

isPlianObjct  是否是一个纯粹的对象

contains 判断DOM节点是否包含一个DOM节点

type 判断数据类型

isNumeric 判断是否是一个数值

isWindow 判断数据是都是一个window对象

proxy() 调制this指针

json文件格式

[{key}:'value',{key}:'value']

composer config -g repo.packagist composer https://packagist.phpcomposer.com

composer create-project topthink/think composer_tp5 --prefer-dist

你可能感兴趣的:(jquery笔记)