jQuery必知必会

Posted 2022-11-12

原文地址：https://my.oschina.net/u/218421/blog/37391

jQuery优势

   轻量级 
   强大的选择器
   出色的DOM操作的封装
   可靠的事件处理机制
   完善的Ajax
   不污染顶级变量
   出色的浏览器兼容性
   链式操作方式
   隐式迭代
   行为和结构层分离
   丰富的插件支持
   完善的文档
   开源

 jQuery选择器是其最核心的部分  分为四大类

     基本选择器

     层次选择器

     过滤选择器  

     表单选择器

 

基本选择器是最常用的选择器  可以根据标签的名字、ID名字或者class名字来选择元素
#id  根据指定的id来匹配元素
.class   根据制定的类名字来匹配元素
element   根据指定的元素的名字匹配元素
*   匹配所有的元素
selector1,selector2,…selectorN   将每一个匹配到的元素合并到一起返回

 

层次选择器
jQuery(‘ancestor   descendant’):选取ancestor中的所有的descendant(后代)元素
jQuery(‘parent>child’):选取parent中的所有的child(子元素)
jQuery(‘prev+next’):选取紧跟在prev后的同级别的next元素可用next()方法代替
jQuery(‘prev~siblings’):选取紧跟在prev后的同级别的所有的元素  可用nextAll()方法代替  

 

过滤选择器分为：

基本过滤选择器
内容过滤选择器
可见性过滤选择器 
子元素过滤选择器
属性过滤选择器
表单过滤选择器

 

基本过滤选择器
:first    选取第一个元素
:last     选取最后一个元素
:not(selector)  去除与跟定选择器匹配的元素
:even    选取索引值为偶数的所有的元素 从0开始
:odd      选取索引值为奇数的所有的元素 从0开始
:eq(index)   选取索引值等于index的所有的元素 从0开始
:gt(index)     选取索引值大于index的所有的元素 从0开始
:lt(index)      选取索引值小于index的所有的元素  从0开始
:header    选取所有的标题元素 例如h1 h2  h3等
:animated   选取所有的正在执行动画的元素

 

内容过滤选择器
:contains(text)    选取含有文本内容为text的元素
:empty    选取不包含子元素的空元素
:has(selector)   选取含有选择器所匹配的元素的元素
:parent   选取含有子元素的元素

 

可见性过滤选择器 
:hidden    选取所有的不可见的元素
:visible     选取所有的可见的元素

 

属性过滤选择器
[attribute]    选取拥有此属性的元素
[attribute=value]    选取属性值为value的元素
[attribute!=value]   选取属性值不等于value的元素 也包括不含属性名为attribute的元素
[attribute^=value]   选取属性值以value开头的元素
[attribute$=value]    选取属性值以value结尾的元素
[attribute*=value]    选取属性值含有value的元素
[selector1][selector2][selector3]   用属性选择器合并成一个复合选择器

 

子元素过滤选择器
nth-child(index/even/odd/equation)   选取每个父元素下的第index子元素/奇元素/偶元素/比较元素  索引从1开始
first-child   选取每个父元素的第一个子元素
last-child    选取每个父元素的最后一个元素
only-child   如果该元素是其父元素的唯一的子元素  那么该元素就会匹配到
注意与基本过滤选择器的区别

 

表单过滤选择器
:enabled     选取所有的可见的元素
:disabled    选取所有的不可见的元素
:checked    选取所有的选中的元素(单选框、复选框)
:selected    选取所有的被选中的元素(下拉菜单)

 

表单选择器
:input     选取所有的<input>、<textarea>、<select>、           <button>元素
:text       选取所有的单行文本框
:password     选取所有的密码框
:radio    选取所有的单选按钮
:checkbox   选取所有的复选按钮
:submit       选取所有的提交按钮
:image   选取所有的图像按钮
:reset    选取所有的重置按钮
:button  选取所有的button
:file     选取所有的上传域
:hidden  选取所有的不可见元素 (包括display为none的)

jQuery中DOM操作：
append()     向匹配的元素追加内容
appendTo()    颠倒append()操作
prepend()    向匹配的元素前置内容
preprendTo()   颠倒prepend()操作
after()    在匹配的元素后插入内容
insertAfter()   颠倒after()操作
before()  在匹配的元素前插入内容
insertBefore()   颠倒before()操作

 

元素操作：
remove()  删除节点  例 jQuery(‘ul li’).remove()  也可在remove()中添加过滤条件 jQuery(‘ul li’).remove(‘li[title!=菠萝]’)
empty()  清空节点  jQuery(‘ul li:eq(1)’).empty()  清空第二个li元素中的内容
clone()   复制节点 jQuery(‘#li’).clone().appendTo(‘ul’)  如果想在复制节点的同时也具有行为 可用clone(true)
replaceWith()  替换节点  如jQuery(‘p’).replaceWith(‘<strong>你最不喜欢的水果是?</strong>’)
replaceAll()   颠倒replaceWith()操作  如jQuery(‘<strong>你最不喜欢的水果是？</strong>’).replaceAll(‘p’);
wrapAll()    将所有的匹配的元素用一个元素来包裹  如jQuery(‘strong’).wrapAll(‘<b></b>’)  会得到
        <b>
             <strong>你最喜欢的水果1</strong>
             <strong>你最喜欢的水果2</strong> 
        </b>
wrap()  将每个匹配的元素用一个元素包裹起来 如jQuery(‘strong’).wrap(‘<b></b>’)   会得到
        <b><strong>你最喜欢的水果1</strong></b>
        <b><strong>你最喜欢的水果2</strong></b>
wrapInner()  将每个匹配的子元素用另外一个元素包裹起来

 

属性操作
 获取和设置属性   
      获取:   jQuery(‘p’).attr(‘title’)
      设置属性:jQuery(‘p’).attr(‘title’,’your title’);
      删除属性：jQuery(‘p’).removeAttr(‘title’)
样式操作
       jQuery(‘p’).attr(‘class’,’classname’);
追加样式
        jQuery(‘p’).addClass()
移除样式
        jQuery(‘p’).removeClass()

 

toggleClass()    切换样式
hasClass()  判断是否含有某个样式 同is(‘.className’)
html()     获取或者设置html代码
text()    获取或者设置文本框的值
val()    获取或者设置表单元素的值
children()   获取匹配元素的子元素 
next()    获取匹配元素后紧邻的同辈的元素
prev()    获取匹配元素前紧邻的同辈的元素
nextAll()   获取匹配元素后的所有的同辈的元素
siblings()   获取匹配元素前台所有的同辈的元素
closest()  获取匹配元素最近的元素
find()   查找匹配元素的所有的后代元素
css()   设置获取获取css样式  可以传输json格式的参数  批量的设置多个样式
height()  设置或者获取元素的高度 注意和css(‘height’)的区别
width()  设置或者获取元素的宽度  注意和css(‘width’)的区别

offset()  获取元素在当前视窗的相对偏移  返回的是个对象 包括top和left两个属性
position()   获取元素相对于最近的一个position样式属性设置为relative和absolute的祖父节点的相对的偏移  返回的也是个对象                 包括top和left两个属性
scrollTop()  获取元素的滚动条距顶端的距离
scrollLeft ()   获取元素的滚动条距左边的距离

jQuery中的事件
注意jQuery(document).ready()和window.onload的区别
事件绑定  bind(type,[,data],fn) 第一个为事件类型 包括             blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,
mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等，
也可以是自定义事件名称 第二个为可选的参数 第三个为绑定的处理函数

简写绑定操作
jQuery(‘p’).click(fn),jQuery(‘mouseover’).click(fn)
合成事件
主要有两个  
jQuery(‘p’).toggle(fn1,fn2)  单击的时候分别执行fn1和fn2两个函数
hover(fn1,fn2)   鼠标移上去和移走的时候分别执行fn1和fn2两个函数
事件冒泡
如果想阻止冒泡的话可以用event.stopPropagation()
阻止事件的默认行为 可以采用event.preventDefault()
如果上面两个都想阻止 可以直接在fn中return false
事件对象的属性
event.type:获取事件的类型 如click  dbclick
event.preventDefault():阻止事件的默认行为
event.stopPropagation():阻止事件的冒泡
event.target()   获取触发事件的元素
event.relatedTarget()   获取相关元素
event.pageX()  获取光标相对于页面的x坐标
event.pageY()   获取光标相对于页面的y坐标
event.which()   在鼠标单击事件中获取到鼠标的左 中 右键
event.metaKey()   键盘事件中获取ctrl键
event.originalEvent()   指向原始的事件对象

移除事件
移除某个元素的单击事件  jQuery(‘p’).unbind(‘click’)
移除某个元素的所有的事件 jQuery(‘p’).unbind()
假如某个元素的单击事件绑定了多个函数 可用jQuery(‘p’).unbind(‘click’,fn1)来
解除fn1的事件处理程序 

模拟操作
常用模拟:  不一定要单击才会触发  可以用trigger()方法模拟操作 
                jQuery(‘#btn’).trigger(‘click’)

触发自定义事件  
jQuery(‘#btn’).bind(‘myClick’,fn1)  可以通过jQuery(‘#btn’).trigger(‘myClick’)触发
传递数据  trigger(type,[,data])
trigger()方法会执行浏览器的默认行为 如果不想执行浏览器的默认行为 可用jQuery(‘input’).triggerHander(‘focus’)
可以一次绑定多个事件类型
jQuery(‘div’).bind(‘mouseover  mouseout’,fn1)
添加事件的命名空间 便于管理
jQuery(‘div’).bind(‘click.plugin’,fn1)
jQuery(‘div’).bind(‘mouseover.plugin’,fn2)
jQuery(‘div’).bind(‘dbclick’,fn3)
在执行jQuery(‘div’).unbind(‘.plugin’)的时候 dbclick事件依然会触发
相同事件名称 不同命名空间的执行方法

jQuery(‘div’).bind(‘click’,fn1)
     jQuery(‘div’).bind(‘click.plugin’,fn2)
     jQuery(‘#btn’).click
     (
           function()
          
                jQuery(‘div’).trigger(‘click!’);  //注意click后面的感叹号
          
      )
当单击div元素的时候  fn1和fn2事件处理程序都会执行 当单击button元素的时候，
只会触发fn1的事件处理程序

jQuery中的动画

show()   显示元素
hide()    隐藏元素
show(‘slow’)    让元素在600毫秒内显示出来
show(‘fast’)   让元素在200毫秒内显示出来
show(‘normal’)   让元素在400毫秒内显示出来
show(1000)  让元素在1000毫秒内显示出来
hide()方法带参数时候与show()方法相似
fadeIn()   增加不透明度
fadeOut()   降低不透明度
slideUp()   从下向上隐藏元素  可以带参数
slideDown()  从上到下显示元素 可以带参数
自定义动画方法 animate()
jQuery(‘p’).animate(‘left’:’500px’,3000)  使得元素在3秒内向右移动500个像素
jQuery(‘p’).animate(‘left’:’+=500px’,3000)  在当前位置累加500个像素
jQuery(‘p’).animate(‘left’:’-=500px’,3000)   在当前位置累减500个像素

多重动画
同时执行多个动画:jQuery(‘p’).animate(‘left’:’500px’,’height’:’200px’,3000)
按顺序执行动画:
jQuery(‘p’).animate(‘left’:’500px’,3000).animate(‘height’:’200px’,3000)
fadeTo(3000,’0.2’)  在3秒内将元素的不透明度变为0.2
动画的回调函数
jQuery(‘p’).animate(‘top’:’200px’,’width’:’200px’,200,fn)  执行完动画后执行fn
停止动画
stop(false,false)
is(‘:animated’)  判断某元素是否处于动画状态
toggle()  用来代替show和hide方法 会改变高度 宽度和不透明度
slideToggle()  用来代替slideUp()和slideDown()  只改变高度

 

jQuery与Ajax应用
分三层jQuery.ajax()是第一层,jQuery(param).load() /jQuery.get()/jQuery.post()是第二层,
jQuery.getScript()/jQuery.getJSON()是第三层
load()方法
1.载入html文档
   load(url,[,data],[,callback]  url :请求地址
   data:发送至服务器端的key/value值
   callback:回调函数  无论成功还是失败都会调用回调函数
2.筛选载入的HTML文档
   jQuery(‘#resText’).load(‘test.html   .param’)
3.传递方式
   根据data自动指定 如果没有参数传递 采用get方式传递 反之  则自动转化为post方式

4.回调函数
function(responseText,txtStatus,XMLHttpRequest)

responseText :请求返回的内容
textStatus:请求状态 success/error/notmodified/timeout四种
XMLHttpRequest:XMLHttpRequest对象
jQuery.get()
全局函数
jQuery.get(url,[,data],[,callback],[,type])
url:请求的地址
data:发送至服务器端的key/value数据会作为QueryString附加到请求的URL中
callback:载入成功时的回调函数
type:服务器返回内容的格式 xml/html/json/script/text/_default

callback形式如下

function(data,textStatus)

        //data:返回的内容 可以是XML JSON或者html片段等

        //textStatus:请求状态 success/error/notmodified/timeout

数据格式:
html片段:
     实现起来只需要很少的工作量,但是这种固定的数据结构并不一定能够在其它的web程序中得到重用
XML文档:
     该数据可以利用强大的jQuery选择器的功能，这种数据的可移植性是其它的数据格式所无法比拟的,因此以这种格式提供的数据的重用性大大的提高,不过xml体积相对庞大,解析和操作他们的速度要慢一些

JSON格式

在不远的将来  新版的javascript中的XML将会和JSON一样容易解析,不过在它到来

之前,json依然有着很强的生命力

json的格式非常的严格,构建的json文件必须是完整无误的,任何的一个不匹配或者

缺少逗号,都会导致页面脚本的终止运行,甚至还会带来更加严重的负面影响

post()方法
它与get()方法的结构和使用方式都相同,不过重大区别如下
1.GET请求会将参数跟在URL后面进行传递,而POST请求则是作为HTTP消息的实体内容发送给web服务器,当然 在ajax请求中 这种区别对用户来说是不可见的 
2.GET请求对传输的数据大小有限制(通常不能大于2K),而使用POST方式传输的数据量比GET方式大的多(理论上不受限制)
3.GET方式请求的数据会被浏览器缓存起来,因此其它人便可以从浏览器的历史记录中读取到这些数据,例如帐号和密码等等,在某些情况下GET方式会带来严重的安全性问题,而POST方式相对来说就可以避免这些问题 

 

getScript()方法
动态加载script文件 可以用回调函数
getJSON()
动态加载JSON文件,处理JSON文件的时候可以利用each函数
jQuery.each()不同于jQuery对象的each()  它是一个全局函数,不操作jQuery对象
而是以一个数组或者对象作为第一个参数,以一个回调函数作为第二个参数,回调函数中有两个参数 第一个为索引 第二个为对应的变量或者内容
ajax()
只有一个参数 以key/value的形式存在
url:发送请求的地址
type:请求方式 POST或者GET 默认为GET 注意其它的HTTP请求方法
timeout:设置请求的超时时间(毫秒) 此设置将覆盖ajaxStart()等方法的全局设置
data:请求的数据 一般的JSON格式的数据
dataType:预期返回的数据类型
beforeSend:发送请求前可修改的XMLHttpRequest对象的函数  例如添加自定义的
HTTP头.在beforeSend()中如果返回false可以取消本次ajax请求
complate:请求完成后的回调函数(请求成功或者失败的时候均会调用)
                    function(XMLHttpRequest,textStatus)
                    

                    
success:请求成功时的回调函数(只有请求成功的时候才会回调)
                   function(data,textStatus)
                  
                  
error:请求失败时的回调函数(只有在请求失败的时候才会调用)
                  function(XMLHttpRequest,textStatus,errorThown)
                  
                  
global:默认为true,表示是否会触发全局的ajax事件,为false表示不会触发全局事件

序列化元素
serialize()  将DOM内容序列化为字符串
serializeArray()   将DOM内容序列化为JSON格式的数据
param()   用来对一个json对象进行序列化

Ajax全局函数
ajaxStart(callback) :  ajax开始请求的时候调用的函数
ajaxComplete(callback):  ajax请求完成时执行的函数
ajaxError(callback):   ajax请求错误的时候触发的函数 捕捉到的错误作为最后的一个参数传递
ajaxSend(callback):  ajax请求发送前要执行的函数
ajaxSuccess(callback):  ajax请求成功的时候执行的函数
ajaxStop(callback):  ajax请求停止的时候触发的函数

插件的使用和写法
livequery()的使用方法
ui插件的使用方法
cookie插件的使用方法
自定义jQuery插件的写法