jQuery

jQuery

1.选择页面元素

$(document) //整个文档
$('#div')   //选择id是div的
$('.class') //选择 class 是 first 的input
$('input[name=first]')//选择那么是 first 的 input

　　特有的筛选器　　$('.box:first')

:first    //第一个
:odd    //奇数
:even    //偶数
:visible    //可见的
:gt(2)    //下标大于2 的
:lt(2)    //下标小于2的
:animated       //选择处于动画

2.改变结果集　　$('.myclass').has('p')

.has('p')        //包含p的
.not('.box')     //没有 box这个class 的
.filter('.box')     //选择有 box这个 class 的
.first()            //第一个
.eq()            //选择第6 个元素 特殊的筛选器 可以两次调用
.get()            //选择第6个元素   返回值是 dom

　　Dom树上的移动方法　　$('.myclass').next('p')

.next('p')    //选择下面的第一个p
.parent()    //选择 父元素
.parents()    //选择所有祖先节点
.closest('form')    //选择就近的form父元素
.children()        //选择所有子集   仅限子集，孙子集不算
.find()            //所有的后代 find可以传参 进行筛选
.siblings()    //选择所有的兄弟节点
.end()        //后退一步返回的结果（jq每次执行都会返回一个结果，执行end（）就会后退一下集合）
.prev()　　　　//前一个兄弟节点
.wrap('strTag')　　　　//将元素用strTag抱起来，只传头部即可
.before()　　　　//在前面添加元素

3.链式操作

　　

$('div').find('h3').eq(2).html('hello') 

　　作用分别是   $('div')　　　　找到div元素

　　　　　　　　.find('h3')　　　选择其中的h3元素

　　　　　　　　.eq(2)　　　　选择第3个 h3 元素

　　　　　　　　.html('hello')　 将第三个 h3 的内容 换成 hello

4.元素的操作：取值和赋值

　　.html()　　//取出或设置html内容
　　.text()　　//取出或者设置text内容
　　.width()　//获取或者设置某个元素的宽度
　　.height() 　//获取或设置摸个元素的高度
　　.attr()　　//获取或者设置某个元素的属性
　　.val()　　//获取某个表单元素的值

 

5.元素操作  移动

$('#myid')InsertAfter($('p'))    //把mydiv移动到 p后面
$('p').after($('div'))                //把div移动到p后面

　　差别：前面返回值是 　　p　　然而后面的返回值是 $('#div')

　　　　　　∴ 前面的写的多点多点用的也多　　 这样好链式调用

　　类似的操作　　//添加 css属性的时候 要加上 单位

.insertAfter()    //    .after外后插
.insertBefor()    //   .befor外前插
.appendTo()    //    .aooend 内后插
.prependTo    //    .prepend 内前插

 6.元素的操作  复制、删除 和 创建

　　复制　　.coloe()

　　删除　　.remove()　　不保留被删除的元素的的事件　　

　　　　　　.detach()　　删除的元素会保留原有的事件

　　清空　　.empty()　　清空元素的内容 ，但不删除元素

7.工具方法

　　$.trim()　　去除字符串两段的空格

 　   $.each()　　遍历数组或对象

　　$.inArray()　　返回一个值在数组中的索引位置  不在返回-1

　　$.grep()　　返回数组中符合某种标准的元素

　　$.extend()　　将多个对象合并成一个对象

　　$.makeArray()　　将对象转换成数组

　　$.type()　　判断对象的类型

　　$.isArray()　　判断是不是数组

　　$.isEmptyObject()　　判断是不是空的对象

　　$.isFunction()　　判断是否是函数

　　$.isPlainObject()　　判断某个参数是否是用   '{}'   或者　new Object 创造出来的对象

　　$.support()　　判断浏览器是否支持某个属性

8.事件操作　

 　　.blur()　　失去焦点时

　　.change()　　表单元素的值改变时

　　.click()　　单击

　　.dbclick()　　双击

　　.focusin()　　子元素获得焦点

　　.focusout()　　子元素失去焦点

　　.hover()　　同时为 mouseenter 和 mouseleave 事件绑定 处理函数

　　.keydown()　　按下键盘，多长时间 都返回一个值

　　.keypress()　　按下键盘，一直按返回多个值

　　.keyup()　　键盘松开

　　.load()　　元素加载完成

　　.mousedown()　　鼠标按下

 

　　.mouseenter()　　鼠标移入 　 不冒泡　（进入子元素不触发）

 　　.mouseleave()　　鼠标移出　　不冒泡　　（离开子元素不触发）

 　　.mouseover()　　鼠标移入  冒泡

　　.mouseout()　　鼠标移出　　冒泡

 

 　　.mousemove()　　鼠标在元素内移动

　　.mouseup()　　鼠标抬起

　　.ready()　　Dom解析完成

　　.resize()　　浏览器窗口大小发生变化

　　.scroll()　　滚动条滚动

　　.submit()　　用户提交表单

　　.toggle()　　根据鼠标点击次数 一次运行多个函数

　　.unload()　　用户离开页面

 

以上这些事件都是  .bind()的快捷方法

$('input').bind(
    'click change',    //同时绑定 click 和 change事件
    function(){
      alert('hello');   
    }
)

当只想让事件运行一次的时候   用  .noe() 进行绑定事件

$('p').one('click',function(){console.log('one')})

 解除事件绑定　　.unbind()

$('p').unbind('click');

event上的属性和方法

　　event.pageX　　鼠标距左上角的X

   　event.pageY　　鼠标距左上角的Y

　　event.type　　触发事件的类型

　　event.which 　　按下了那个键子

　　event.data　　在事件对象上绑定数据　　然后传入事件处理函数

　　event,target()　　事件针对的页面元素

　　event.preventDefault()　　阻止默认事件

　　event.stopPropagation()　　阻止冒泡

　　

　　在事件处理函数中 可以用 $('this')标识   事件对应的dom元素

 

　　用代码触发事件处理函数   trigger()　 或 　　triggerHandler()

$('p').trigger('click');

9.特殊效果  除了 .show()&.hide() 其他都默认  400ms　　都可以再传一个回调函数

 $('h1').show()　　//展示h1

　　.fadeIn()　　//淡入

 　　.fadeOut()　　//淡出

　　.fadeTo()　　//设置透明度　　三个参数　　（动画时间  透明度 callback）

　　.hide()　　//隐藏元素

　　.slideDown()　　//向下展开

　　.sideUp()　　//向上展开

　　.toogle()　　//依次显示或隐藏 某个元素 　　show再触发就 hide

　　.animate()　　//动画  同元素排队

　　.stop()　　　//停止特效的执行   还可传参   (是否清除队列，是否瞬间执行完毕)   默认（false，false）　　

 　　.delay()　　//延缓特效执行

　　.css()　　//设置css     传值可以不写单位   ， 还支持 .css({'' +=200}) 对象传参

 　　.finish()　　//瞬间完成动画队列

　　.is()　　//判断是不是   括号里写  选择器   返回 true  /false

　　　　

$('.box').is(':animated')//处于运动状态中

 10.Ajax请求

 　　

$.get(URL,{},callback)    //get请求

$.post(URL,{},callback)   //post请求

$.cajax(URL,{'type':'get','data':{},'success':function(){},'error':function(){}},)   //ajax请求

　　回调函数

　　　　beforeSend　　在发送之前调用，并且传入一个 XMLHTTPRequest 作为参数

　　　　error　　在请求出错时调用,传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）

　　　　dataFilter　　在请求成功之后调用， 传入返回的数据 以及 dataType参数的值  并且必须返回新的数据（可能是处理过的） 传递给 success回调函数

　　　　success　　当请求之后调用    传入返回后的数据  ，以及包含成功带啊的字符串

　　　　complete　　请求完成之后 调用这个函数  无论成功 失败 ， 传入XMLHttpRequest对象，以及一个包含成功或 错误的代码的字符串

 

　　ajax的使用中可能会用到 表单序列化   

　　　　serialize()　　表单序列化 ，把form表单里的所有 表单元素 以 key value 拼接成字符串

　　　　serializeArray()　　序列化成数组