jQuery基本API小结(上)--选择器-DOM操做-动画-Ajax

1、JQuery基础选择器

一、基本选择器（CSS选择器）

二、$()中的()不必定是指定元素，也多是函数。

三、“*”号选择器，它的功能是获取页面中的所有元素：$(“*”)。 因为使用*选择器获取的是所有元素，所以，有些浏览器将会比较缓慢，这个选择器也须要谨慎使用。

四、sele1,sele2,seleN选择器，同时选中多个元素。

 

五、层次选择器

①、$("ance desc")其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素

②、$(“parent > child”) child参数获取的元素都是parent选择器的子元素（子辈），它们之间经过“>”符号来表示一种层次关系。

③、$(“prev + next”) 查找与“prev”元素紧邻的下一个“next”元素

④、获取prev 元素后面所有相邻的元素

 

2、过滤性选择器

该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,一般用于查找集合元素中的某一位置的单个元素。

1：注意：过滤器先后没有空格，其实：前空格无关紧要，后面必须不能有空格

①    $(“xxxxxx:first”)获取到xxxxxx过滤器过滤出的结果后的第一个元素。

②    $(“xxxxxx:eq(index)”)每个过滤器都会返回一组结果，eq(index)的做用就是经过索引获取其中的某一个元素，索引从0开始

③    :contains(text) 选择包含指定字符串的所有元素，排除html元素

④    :has(selector) 获取选择器中包含指定元素名称的所有元素，其中selector参数就是包含的元素名称，是被包含元素

⑤    :hidden过滤选择器的功能是获取所有不可见的元素

⑥    :visible过滤选择器获取的是所有可见的元素

⑦    :first-child子元素过滤选择器则能够获取每一个父元素中返回的首个子元素，它是一个集合，经常使用多个集合数据的选择处理。

⑧    :last-child子元素过滤选择器的功能是获取每一个父元素中返回的最后一个子元素，它也是一个集合

2：属性选择器:注意中括号前不能有空格

①   $(“xxxxxx[attribute=value]”)属性选择器的功能是获取与属性名和属性值彻底相同的所有元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。

②   [attribute!=value]属性选择器的功能是获取不包含属性名，或者与属性名和属性值不相同的所有元素

③   [attribute*=value]，它能够获取属性值中包含指定内容的所有元素（模糊查询的功能）

3、表单选择器

一、checked选择器与元素之间没有空格

①:input返回所有的表单元素，不只包括全部<input>标记的表单元素，并且还包括<textarea>、<select> 和 <button>标记的表单元素，所以，它选择的表单元素是最广的

②:checked能够获取处于选中状态的所有元素。.

③:selected选择器只能获取<select>下拉列表框中所有处于选中状态的<option>选项元素

 

4、jQuery操做DOM

简单：attr()、html()、text()、addClass()、css()、removeAttr(name)、removeClass(class)

①selector.append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，能够是字符、HTML元素标记，还能够是一个返回字符串内容的函数。

②$(content).appendTo(selector) 参数content表示须要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。

③$(selector).before(content)和$(selector).after(content) 能够在元素的先后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容

④$(selector).clone()方法能够生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性

⑤$(selector).replaceWith(content)和$(content).replaceAll(selector)

⑥$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)前者用于包裹元素自己，后者则用于包裹元素中的内容

⑦$(selector).each(function(index)) 参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。

⑧remove()方法删除所选元素自己和子元素，该方法能够经过添加过滤参数指定须要删除的某些元素，而empty()方法则只删除所选元素的子元素。

 

5、jQuery 事件与应用

①ready()：ready()事件相似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，然后者必须在页面所有元素加载成功才触发，ready()能够写多个，按顺序执行。此外，下列写法是相等的：$(document).ready(function(){})等价于$(function(){});

②$(selector).bind(event,[data] function) 参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。

③$(selector).hover(over，out); hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果

④$(selector).toggle(fun1(),fun2(),funN(),...)toggle()方法能够在元素的click事件中绑定两个或两个以上的函数，同时，它还能够实现元素的隐藏与显示的切换，每次触发事件时只执行一个函数（依次循环执行）

⑤$(selector).unbind(event,fun) 其中参数event表示须要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调用的函数名称。如是方法中没有任何参数，则表示移除所有已绑定的事件。

⑥$(selector).one(event,[data],fun) one()方法能够绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次。参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。

⑦$(selector).trigger(event) trigger()方法能够直接手动触发元素指定的事件，这些事件能够是元素自带事件，也能够是自定义的事件

⑧focus和blur focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。

⑨change 当一个元素的值发生变化时，将会触发change事件，例如在选择下拉列表框中的选项时，就会触change事件。

⑩$(selector).live(event,[data],fun) 与bind()方法相同，live()方法与能够绑定元素的可执行事件，除此相同功能以外，live()方法还能够绑定动态元素，即便用代码添加的元素事件

 

6、动画特效

一、show()和hide()方法用于显示或隐藏页面中的元素

$(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) 参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动做执行完成后调用的函数名。

二、$(selector).toggle(speed,[callback]) 其中speed参数为动画效果时的速度值，能够为数字，单位为毫秒，也但是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。

三、使用slideUp()和slideDown()方法在页面中滑动元素，前者用于向上滑动元素，后者用于向下滑动元素

$(selector).slideUp(speed,[callback]) $(selector).slideDown(speed,[callback])

其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。要注意的是：slideDown()仅适用于被隐藏的元素；slideup()则相反。

4、使用slideToggle()方法能够切换slideUp()和slideDown()，即调用该方法时，若是元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动

$(selector).slideToggle(speed,[callback])

5、fadeIn()和fadeOut()方法能够实现元素的淡入淡出效果，前者淡入隐藏的元素，后者能够淡出可见的元素，

$(selector).fadeIn(speed,[callback])

$(selector).fadeOut(speed,[callback])

6、fadeTo()方法，能够将所选择元素的不透明度以淡入淡出的效果调整为指定的值

$(selector).fadeTo(speed,opacity,[callback])

7、调用animate()方法能够建立自定义动画效果

$(selector).animate({params},speed,[callback]) 其中，params参数为制做动画效果的CSS属性名与值

八、stop()方法的功能是在动画完成以前，中止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画

$(selector).stop([clearQueue],[goToEnd])

两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否中止正在执行的动画，后者表示是否完成正在执行的动画

九、delay()方法的功能是设置一个延时值来推迟动画效果的执行

$(selector).delay(duration)

其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行。

 

7、Ajax应用

一、load()方法经过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中

load(url,[data],[callback])

参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

二、getJSON()方法能够经过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

3、getScript()方法异步请求并执行服务器中的JavaScript格式的文件

jQuery.getScript(url,[callback])或$.getScript(url,[callback])

4、get()方法时，采用GET方式向服务器请求数据，并经过方法中回调函数的参数返回请求的数据。

$.get(url,[callback])

五、get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据以后，进行处理，并将处理结果返回页面

$.post(url,[data],[callback])

六、serialize()方法能够将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求

$(selector).serialize()

7、ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不只能够获取服务器返回的数据，还能向服务器发送请求并传递数值

jQuery.ajax([settings])或$.ajax([settings])

其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。

八、ajaxSetup()方法能够设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不须要再添加这些选项值

jQuery.ajaxSetup([options])或$.ajaxSetup([options])

可选项options参数为一个对象，经过该对象设置Ajax请求时的全局选项值。

九、ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())