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

一、JQuery基础选择器

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

2、$()中的()不一定是指定元素，也可能是函数。

3、“*”号选择器，它的功能是获取页面中的全部元素：$(“*”)。 由于使用*选择器获取的是全部元素，因此，有些浏览器将会比较缓慢，这个选择器也需要谨慎使用。

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

 

5、层次选择器

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

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

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

④、获取prev 元素后面全部相邻的元素

 

二、过滤性选择器

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

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]，它可以获取属性值中包含指定内容的全部元素（模糊查询的功能）

三、表单选择器

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

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

②:checked可以获取处于选中状态的全部元素。.

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

 

四、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()方法则只删除所选元素的子元素。

 

五、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()方法还可以绑定动态元素，即使用代码添加的元素事件

 

六、动画特效

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

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

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

3、使用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属性名与值

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

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

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

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

$(selector).delay(duration)

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

 

七、Ajax应用

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

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

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

2、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])

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

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

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

$(selector).serialize()

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

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

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

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

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

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

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

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