作者:张榕臻
撰写时间:2021/10/26
jQuery特点:易上手,涉及网络开发的方方面面,提供各种方法和具有多种变化。
一、选择器
代码 | 含义 |
---|---|
$(document) | 选择整个文档对象 |
$('#myID') | ID选择器,选择ID为myID的网页元素 |
$('div.myClass') | 类选择器,选择Class为myClass的div元素 |
$('input[name=first]') | name选择器,选择name等于first的input元素 |
$('a:first') | 选择网页中的第一个a元素 |
$('tr:odd') | 选择表格的奇数行 |
$('#myForm:input') | 选择表单中的input元素 |
$('div:visible') | 选择可见的div元素 |
$('div:gt(2)') | 选择所有的div元素,除了前三个 |
$(‘div:animated') | 选择当前处于动画状态的div元素 |
$('div').has('p') | 选择包含p元素的div元素 |
$('div').not('.myClass') | 选择class不等于myClass的div元素 |
$('div').filter('.myClass') | 选择class等于myClass的div元素 |
$('div').first() | 选择第1个div元素 |
$('div').eq(5) | 选择第6个div元素 |
$('div').next('p') | 选择div元素后面的第1个p元素 |
$('div').parent() | 选择div元素的父元素 |
$('div').closest('form') | 选择离div最近的那个form父元素 |
$('div').children() | 选择div的所有子元素 |
$('div').siblings() | 选择div的同级元素 |
jQuery链式操作:选中网页元素以后,可以对他进行一系列操作,并且所有操作可以连在一起,以链条的形式写出来。
例:$('div').find('h3').eq(2).html('Hello')
分解:$('div')//选中div元素.find("h3")//选中其中的h3元素.eq(2)//选择第三个h3元素.html('Hello')将它的内容改为Hello
总结:链式操作看起来方便快捷,对使用者的考验也不小,所以不建议刚入门的学者使用
二、取值赋值
代码 | 含义 |
---|---|
$('h1').html() | 括号内没有参数,表示取出h1的值 |
$('h1').html('Hello') | 有参数Hello,表示对h1进行赋值 |
.html() | 取出或设置html的内容 |
.text() | 取出或设置text内容 |
.attr() | 取出或设置某个属性的值 |
.width() | 取出或设置某个元素的宽度 |
.height() | 取出或设置某个元素的高度 |
.val() | 取出某个表单元素的值 |
总结:当括号内没有参数时,则表示取出内容,当括号内赋值时表示设置内容。如果结果集包含多个元素,那么赋值的时候,将对其中所有的元素赋值;取值的时候,则是只取出第一个元素的值
三、移动
代码 | 含义 |
---|---|
.insertAfter() | 在现存元素的外部,从后面插入元素(返回第一个元素) |
.after() | 在现存元素的外部,从后面插入元素(返回第二个元素) |
.insertBefore() | 在现存元素的外部,从前面插入元素(返回第一个元素) |
.before() | 在现存元素的外部,从前面插入元素(返回第二个元素) |
.appendTo() | 在现存元素的内部,从后面插入元素(返回第一个元素) |
.append() | 在现存元素的内部,从后面插入元素(返回第二个元素) |
.prependTo | 在现存元素的内部,从前面插入元素(返回第一个元素) |
.prepend() | 在现存元素的内部,从前面插入元素(返回第二个元素) |
四、复制、删除和创建
复制元素使用:.clone()
删除元素使用:.remove()和.detach()两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。
清空元素内容(但是不是删除该元素)使用.empty()
五、工具方法
常用的工具方法有:
代码 | 含义 |
---|---|
$.trim() | 去除字符串两端的空格 |
$.each() | 遍历一个数组或对象 |
$.inArray() | 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1 |
$.grep() | 返回素组中符合某个种标准的元素 |
$.extend() | 将多个对象,合并到第一个对象 |
$.makeArray() | 将对象转化为数组 |
$..type() | 判断对象的类别(函数对象、日期对象、数组对象、正则对象) |
$.isArray() | 判断某个参数是否为数组 |
$.isEmptyObject() | 判断某个对象是否为空(不含有任何属性) |
$.isFnction() | 判断某个参数是否为函数 |
$isPlainObject() | 判断某个参数是否为用“{}”或“new Object”建立的对象 |
$.support() | 判断浏览器是否支持某个特性 |
六、事件操作
把时间啊你直接绑定在网页元素之上
例:$('p').click(function(){
allert('Hello');
})
目前JQ主要支持以下事件
代码 | 含义 |
---|---|
.blur() | 表单元素失去焦点 |
.change() | 表单元素的值发生变化 |
.click() | 鼠标单击 |
.dblclick() | 鼠标双击 |
.focus() | 表单元素获得焦点 |
.focusin() | 子元素获得焦点 |
.focusout() | 子元素失去焦点 |
.hover() | 同时为mouseenter和mouseleave事件指定处理函数 |
.keydown() | 按下键盘(长时间按键,只返回一个事件) |
.keypress() | 按下键盘(长时间按键,将返回多个事件) |
.keyup() | 松开键盘 |
.load() | 元素加载完毕 |
.mousedown() | 按下鼠标 |
.mouseenter() | 鼠标进入(进入子元素不触发) |
.mouseleave() | 鼠标离开(离开子元素不触发) |
.mousemove() | 鼠标在元素内部移动 |
.moseout() | 鼠标离开(离开子元素也触发) |
.moseover() | 鼠标进入(进入子元素也触发) |
.mouseup() | 松开鼠标 |
.ready() | DOM加载完成 |
.resize() | 浏览器窗口大小发生改变 |
.scroll() | 滚动条的位置发生变化 |
.select() | 用户选中文本框种的内容 |
.submit() | 用户提交表单 |
.toggle() | 根据鼠标点击的次数,依次运行多个函数 |
.unload() | 用户离开页面 |
以上的事件都在jQuery内部,都是.bind()的便捷方式,使用.bind()可以更灵活的控制事件,比如多个事件绑定在同一个函数内。
$('input').bind(
'click change',//同时绑定click和change事件
function(){
alert('Hello');
})
所有的事件处理对象都可以接受一个事件对象作为参数,这个事件对象有一些比较有用的属性和方法
代码 | 含义 |
---|---|
event.pageX | 事件发生时,鼠标距离网页左上角的水平距离 |
event.pageY | 事件发生时,鼠标距离网页左上角的垂直距离 |
event.type | 事件类型(例如click) |
event.which | 按下了那一个键 |
event.data | 在事件对象上绑定数据,然后传入事件处理函数 |
event.target | 事件针对的网页元素 |
event.preventDefault() | 阻止事件的默认行为(例如点击链接,会自动打开新页面) |
event.stopPropagation() | 停止事件向上层元素冒泡 |
如果this在函数内,则代表通过$符号选中的元素,如果在函数外全局变量内则代表window。
七、特殊效果
常用的特殊效果有以下几种
代码 | 含义 |
---|---|
.fadeIn() | 淡入 |
.fadeOut() | 淡出 |
.fadeTo() | 调整透明度 |
.hide() | 隐藏元素 |
.show() | 显示元素 |
.slideDown() | 向下展开 |
.slideUp() | 向上卷起 |
.slideToggle() | 依次展开或卷起某个元素 |
.toggle() | 依次展示或隐藏某个元素 |
除了.show()和.hide()所有其他特效的默认执行事件都是400ms(毫秒),但是我们可以改变这个设置。更复杂的特效可以使用.animate()自定义。
.stop()和.delay()用来停止或延缓特效的执行
$.fx.off如果设置为true,则关闭所有网页特效