jQuery基础知识
2016-07-11 17:52
585 查看
参考资料:慕课网jQuery基础课程:http://www.imooc.com/learn/11
#id选择器 : $(“#myId”)
元素(element)选择器 : $(“div”)
.类(class)选择器 : $(“.blue”)
*获取全部选择器,$(“*”) : \$(“div *”)
多个选择器之间可以用”,”隔开 : $(“div,#myId,.blue,p *”)
$(“parent > child”)父子选择器,大于号隔开参数,parent参数代表父元素,child参数代表子元素,不代表孙元素:\$(“div > span”)
$(“prev + next”)紧邻的下一个元素选择器,加号隔开参数,prev代表之前的元素,next代表紧邻的下一个元素,返回并且只返回紧邻的下一个元素:\$(“span + p”)
$(“prev ~ siblings”)后面同级的全部相邻的元素,”~”隔开参数:\$(“span ~ label”)
:first获取指定的一组元素中的第一个元素:$(“li:first”)
:last获取指定的一组元素中的最后一个元素:$(“li:last”)
:eq(index)从一组标签元素数组中选择任意的一个标签元素,从0开始,如果index的值为3,表示选择的是第4个元素:$(“li:eq(3)”)
:contains(text)选择包含指定字符串的全部元素,通常与其他元素结合使用,获取包含“text”字符串内容的全部元素对象:$(“span:contains(‘文本’)”)
:has(selector)获取选择器中包含指定元素名称的全部元素:$(“div:has(‘p’)”)
:hidden获取全部不可见的元素,包括type属性值为hidden的元素:$(“input:hidden”)
:visible与:hidden过滤选择器相反,获取全部可见的元素,只要元素的display属性值不设置为“none”就可以获取到:$(“p:visible”)
:first-child获取每一个标签自身的第一个元素的集合:$(“li:first-child”)
:last-child获取每一个标签自身的最后一个元素的集合:$(“li:last-child”)
[attribute!=value]获取与属性名和属性值不同的全部元素:$(“span[title!=’标题’]”)
[attribute*=value]获取属性值中包含指定内容的全部元素:$(“span[title*=标]”)
:text获取表单中全部单行的文本输入框元素:$(“form :text”)
:password获取表单中全部的密码输入文本框元素:$(“form :password”)
:radio获取表单中的全部单选按钮元素:$(“form :radio”)
:checkbox获取表单中的全部多选按钮元素:$(“form :checkbox”)
:submit获取表单中的提交按钮元素:$(“form :checkbox”)选取类型为 submit 的button和input元素,如果button元素没有定义类型,大多数浏览器会把该元素当作类型为 submit 的按钮
:image图像域选择器,当一个input元素的“type”属性值设为“image”时,该元素就是一个图像域,使用:image选择器可以快速获取该类全部元素:$(“form :image”)只能获得input标签type==image的元素,不能获得image标签
:button选择器能获取且只能获取“type”属性值为“button”的input和button这两类普通按钮元素:$(“form :button”)
:checked可以获取处于选中状态的全部元素:$(“form :checked”)
:selected选择器只能获取select下拉列表框中全部处于选中状态的option选项元素:$(“form :selected”)
empty()方法则只删除所选元素的子元素
参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称。
如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。
over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。
toggle()无参数方法 的功能为切换显示和隐藏
fun1,fun2就是多个函数的名称。
每次点击
参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
其中event参数为需要手动触发的事件名称。
参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
注意:从 jQuery 1.7 开始,不再建议使用 .live() 方法。1.9不支持.live()
参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名。
其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
其中speed参数为滑动时的速度,单位是毫秒,可选项参数callback为滑动成功后执行的回调函数名。
要注意的是:slideDown()仅适用于被隐藏的元素;slideup()则相反。
滑动与淡入淡出的区别:滑动改变元素的高度,淡入淡出改变元素的透明度。
其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
其中参数speed为淡入淡出的速度,callback参数为完成后执行的回调函数名。
其中speed参数为效果的速度,opacity参数为指定的不透明值,它的取值范围是0.0~1.0,可选项参数callback为效果完成后,回调的函数名
其中,params参数为制作动画效果的CSS属性名与值,speed参数为动画的效果的速度,单位为毫秒,可选项callback参数为动画完成时执行的回调函数名。
其中,两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。
其中参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执行。
延时是对动画队列的延时,会对下一个要进行的动画进行延时,而当前正在执行的动画不会受影响。
参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
1 基础选择器
$()获得()中指定的标签元素#id选择器 : $(“#myId”)
元素(element)选择器 : $(“div”)
.类(class)选择器 : $(“.blue”)
*获取全部选择器,$(“*”) : \$(“div *”)
多个选择器之间可以用”,”隔开 : $(“div,#myId,.blue,p *”)
2 层次选择器
$(“ance desc”)祖先后代选择器,空格隔开参数,ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)表示后代元素,即包括子元素、孙元素等等:\$(“div span”)$(“parent > child”)父子选择器,大于号隔开参数,parent参数代表父元素,child参数代表子元素,不代表孙元素:\$(“div > span”)
$(“prev + next”)紧邻的下一个元素选择器,加号隔开参数,prev代表之前的元素,next代表紧邻的下一个元素,返回并且只返回紧邻的下一个元素:\$(“span + p”)
$(“prev ~ siblings”)后面同级的全部相邻的元素,”~”隔开参数:\$(“span ~ label”)
3.1 过滤选择器
该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元素。:first获取指定的一组元素中的第一个元素:$(“li:first”)
:last获取指定的一组元素中的最后一个元素:$(“li:last”)
:eq(index)从一组标签元素数组中选择任意的一个标签元素,从0开始,如果index的值为3,表示选择的是第4个元素:$(“li:eq(3)”)
:contains(text)选择包含指定字符串的全部元素,通常与其他元素结合使用,获取包含“text”字符串内容的全部元素对象:$(“span:contains(‘文本’)”)
:has(selector)获取选择器中包含指定元素名称的全部元素:$(“div:has(‘p’)”)
:hidden获取全部不可见的元素,包括type属性值为hidden的元素:$(“input:hidden”)
:visible与:hidden过滤选择器相反,获取全部可见的元素,只要元素的display属性值不设置为“none”就可以获取到:$(“p:visible”)
:first-child获取每一个标签自身的第一个元素的集合:$(“li:first-child”)
:last-child获取每一个标签自身的最后一个元素的集合:$(“li:last-child”)
3.2 属性选择器
[attribute=value]获取与属性名和属性值完全相同的全部元素,其中[]是专用于属性选择器的括号符:$(“span[title=’标题’]”)[attribute!=value]获取与属性名和属性值不同的全部元素:$(“span[title!=’标题’]”)
[attribute*=value]获取属性值中包含指定内容的全部元素:$(“span[title*=标]”)
4 表单选择器
:input返回全部的表单元素,包括所有input标记的表单元素,还包括textarea、select 和 button标记的表单元素:$(“form :input”):text获取表单中全部单行的文本输入框元素:$(“form :text”)
:password获取表单中全部的密码输入文本框元素:$(“form :password”)
:radio获取表单中的全部单选按钮元素:$(“form :radio”)
:checkbox获取表单中的全部多选按钮元素:$(“form :checkbox”)
:submit获取表单中的提交按钮元素:$(“form :checkbox”)选取类型为 submit 的button和input元素,如果button元素没有定义类型,大多数浏览器会把该元素当作类型为 submit 的按钮
:image图像域选择器,当一个input元素的“type”属性值设为“image”时,该元素就是一个图像域,使用:image选择器可以快速获取该类全部元素:$(“form :image”)只能获得input标签type==image的元素,不能获得image标签
:button选择器能获取且只能获取“type”属性值为“button”的input和button这两类普通按钮元素:$(“form :button”)
:checked可以获取处于选中状态的全部元素:$(“form :checked”)
:selected选择器只能获取select下拉列表框中全部处于选中状态的option选项元素:$(“form :selected”)
5 操作DOM元素
remove()方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素empty()方法则只删除所选元素的子元素
6 事件与应用
6.1 页面加载时触发ready()事件
ready()事件类似于onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行。此外,下列写法是相等的:$(document).ready(function(){})等价于$(function(){});
6.2 使用bind()方法绑定元素的事件
bind()方法绑定元素的事件,需要知道被绑定的元素名,绑定的事件名称,事件中执行的函数内容$(selector).bind(event,[data] function)
参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
6.3 使用unbind()方法移除元素绑定的事件
unbind()方法可以移除元素已绑定的事件$(selector).unbind(event,fun)
其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称。
如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。
6.4 使用hover()方法切换事件
hover()方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切实效果,调用格式如下:$(selector).hover(over,out);
over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。
6.5 使用toggle()方法绑定多个函数
toggle()方法可以在元素的click事件中绑定两个或两个以上的函数,同时,它还可以实现元素的隐藏与显示的切换toggle()无参数方法 的功能为切换显示和隐藏
$(selector).toggle(fun1(),fun2(),funN(),...)
fun1,fun2就是多个函数的名称。
每次点击
<div>元素时,都依次执行toggle()方法绑定的函数,当执行到最后一个函数时,再次点击将又返回执行第一个函数
6.6 使用one()方法绑定元素的一次性事件
one()方法可以绑定元素任何有效的事件,但这种方法绑定的事件只会触发一次$(selector).one(event,[data],fun)
参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
6.7 调用trigger()方法手动触发指定的事件
trigger()方法可以直接手动触发元素指定的事件,这些事件可以是元素自带事件,也可以是自定义的事件,总之,该事件必须能执行$(selector).trigger(event)
其中event参数为需要手动触发的事件名称。
6.8 文本框的focus和blur事件
focus事件在元素获取焦点时触发,如点击文本框时,触发该事件;而blur事件则在元素丢失焦点时触发,如点击除文本框的任何元素,都会触发该事件6.9 下拉列表框的change事件
当一个元素的值发生变化时,将会触发change事件,例如在选择下拉列表框中的选项时,就会触change事件6.10 调用live()方法绑定元素的事件
与bind()方法相同,live()方法与可以绑定元素的可执行事件,除此相同功能之外,live()方法还可以绑定动态元素,即使用代码添加的元素事件,格式如下:$(selector).live(event,[data],fun)
参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
注意:从 jQuery 1.7 开始,不再建议使用 .live() 方法。1.9不支持.live()
7 动画特效
7.1 调用show()和hide()方法显示和隐藏元素
show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])
参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名。
7.2 调用toggle()方法实现动画切换效果
调用toggle()方法,如果元素处于显示状态,调用该方法则隐藏该元素,反之,则显示该元素,它的调用格式是:$(selector).toggle(speed,[callback])
其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
7.3 使用slideUp()和slideDown()方法的滑动效果
可以使用slideUp()和slideDown()方法在页面中滑动元素,前者用于向上滑动元素,后者用于向下滑动元素,它们的调用方法分别为:$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])
其中speed参数为滑动时的速度,单位是毫秒,可选项参数callback为滑动成功后执行的回调函数名。
要注意的是:slideDown()仅适用于被隐藏的元素;slideup()则相反。
滑动与淡入淡出的区别:滑动改变元素的高度,淡入淡出改变元素的透明度。
7.4 使用slideToggle()方法切换滑上滑下效果
使用slideToggle()方法可以切换slideUp()和slideDown(),即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,则元素自动向上滑动,格式为:$(selector).slideToggle(speed,[callback])
其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
7.5 使用fadeIn()与fadeOut()方法实现淡入淡出效果
fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果,前者淡入隐藏的元素,后者可以淡出可见的元素,它们的调用格式分别为:$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])
其中参数speed为淡入淡出的速度,callback参数为完成后执行的回调函数名。
7.6 使用fadeTo()方法设置淡入淡出效果的不透明度
调用fadeTo()方法,可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值,该方法的调用格式为:$(selector).fadeTo(speed,opacity,[callback])
其中speed参数为效果的速度,opacity参数为指定的不透明值,它的取值范围是0.0~1.0,可选项参数callback为效果完成后,回调的函数名
7.7 调用animate()方法制作简单的动画效果
调用animate()方法可以创建自定义动画效果,它的调用格式为:$(selector).animate({params},speed,[callback])
其中,params参数为制作动画效果的CSS属性名与值,speed参数为动画的效果的速度,单位为毫秒,可选项callback参数为动画完成时执行的回调函数名。
7.8 调用animate()方法制作移动位置的动画
调用animate()方法不仅可以制作简单渐渐变大的动画效果,而且还能制作移动位置的动画,在移动位置之前,必须将被移元素的“position”属性值设为“absolute”或“relative”,否则,该元素移动不了。7.9 调用stop()方法停止当前所有动画效果
stop()方法的功能是在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画,它的调用格式为:$(selector).stop([clearQueue],[goToEnd])
其中,两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。
7.10 调用delay()方法延时执行动画效果
delay()方法的功能是设置一个延时值来推迟动画效果的执行,它的调用格式为:$(selector).delay(duration)
其中参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执行。
延时是对动画队列的延时,会对下一个要进行的动画进行延时,而当前正在执行的动画不会受影响。
8 实现Ajax应用
8.1 使用load()方法异步请求数据
使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:load(url,[data],[callback])
参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- Mootools 1.2教程(2) DOM选择器
- 表格标签table深入了解
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- WEB标准网页布局中尽量不要使用的HTML标签
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码