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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,458评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,030评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,879评论 0 358
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,278评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,296评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,019评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,633评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,541评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,068评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,181评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,318评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,991评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,670评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,183评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,302评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,655评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,327评论 2 358

推荐阅读更多精彩内容

  • 眼界、学识 书名《傅雷家书》 今天读了傅雷家书中的几篇,有以下感受 父母是孩子的最根本的老师,父母的眼界、学识在对...
    Cateeya阅读 436评论 0 0
  • 准备工作 python2 与 python3 共存的问题 Terminal 创建一个目录mkdir test #创...
    xk537阅读 293评论 0 0
  • 高考结束,曾经设想过无数次的旅行并没有实现。 相反,我照旧过上了吃喝拉撒睡的毫无意义的日子。说实话...
    第n个张三阅读 1,247评论 0 0
  • 又是一个阴沉的午后 云堆积在天空,像是沉默的兽 窗外的草坪上,三只猫你追我赶 被婴儿突然的哭闹声,吓得一哄而散 我...
    鲍鲍不爱说话阅读 245评论 12 10
  • 从最表面的皮肤开始 穿梭过骨与肉的纠缠 疼痛,沿着跳动的血管 刹那席卷了人间 颤抖包裹着身体 无意义的胶着拉扯着 ...
    躲进麦田阅读 271评论 0 1