|
????????jQuery：是JavaScript的一个库(对JavaScript的相关操作进行了封装：遍历HTML文档、操作DOM、事件处理、Ajax)。
一 1、jQuery的使用方式
(1)引入jQuery库
<script src="jquery.js"></script>
(2)编写jQuery的入口函数
$(document).ready(function(){
js代码
})
可以简写：
$(function(){
js代码
})
强调：’$'代表jQuery
二、jQuery的选择器
(1)基本选择器
A、id选择器：#id
B、类选择器：.class
C、标签名选择器：
D、* ：匹配所有元素
(2)基本过滤选择器
A、Element:first ：选取第一个元素
B、Element:last : 选取最后一个元素
C、Element:not(selector)：去除所有与给定选择器匹配的元素
D、Element:even ：选取所有索引为偶数的元素，索引从0开始
E、Element:odd ：选取所有索引为奇数的元素，索引从0开始
F、Element:eq(index)：选取索引等于index的元素，索引从0开始
G、Element:gt(index)：选取索引大于index的元素，索引从0开始
H、Element:lt(index) ：选取索引小于index的元素，索引从0开始
I、:header ：选取索引的标题标签
(3)属性过滤选择器
A、Element[attribute]：选取拥有此属性的选择器
B、Element[attribute=value]：选取指定属性值为value的元素
C、Element[attribute!=value]：选取指定属性值不等于value的元素
D、Element[attribute^=value]：选取指定属性值以value开始的元素
E、Element[attribute$=value]：选取指定属性值以value结束的元素
F、Element[attribute*=value]：选取指定属性值中含有value的元素
(4)表单选择器
input：选择由input生成的表单控件
text：选择单行文本框
password: 选择密码框
radio： 单选按钮
checkbox：复选按钮
(5)子元素选择器
nth-child(index/even/odd) -->选取每个父元素下的索引值为偶(奇)数的子元素
first-child --> 选择每个父元素下的第一个子元素
last-child --> 选择每个父元素下的最后一个子元素
三、操作元素的属性
操作元素的自定义属性和固有属性。
(1)获取元素的属性值
$(selector).attr(属性名)
(2)设置元素的属性值
A、以对象的方式设置属性值：
$(selector).attr({'属性名':'属性值'})
B、以key-value的方式设置属性值
$(selector).attr('属性名','属性值')
C、以回调函数的方式设置属性值
$(selector).attr('属性名',function(){
return '值'
})
(3)删除元素的属性
$(selector).removeAttr('属性名')
四、操作样式
(1)获取样式属性的值
$(selector).css('样式属性名')
(2)设置样式属性的值
A、以传入对象的方式设置样式：
$(selector).css({'样式属性':'值'})
B、以给函数传值的方式设置样式
$(selector).css('样式属性名','属性值')
五、操作样式类
(1)添加样式类
$(selector).addClass(样式类名)
(2)删除样式类
$(selector).removeClass(样式类名)
(3)判断元素是否含有给定的样式类
$(selector).hasClass(样式类名)
(4)交替添加(删除)样式类
$(selector).toggleClass(样式类名)
六、获取或设置元素的高度和宽度
(1)宽度
$(selector).width() : 获取宽度
$(selector).width(value) ：设置宽度
(2)高度
$(selector).height() ：获取高度
$(selector).height(value) : 设置高度
七、操作HTML代码
作用类似于innerHTML
(1)获取html代码
$(selector).html()
(2)设置html代码
$(selector).html('html代码')
八、操作文本
作用类似于innerText
(1)获取标签的文本
$(selector).text()
(2)设置标签的文本
$(selector).text('文本')
九、操作值
(1)获取元素的value属性值
$(selector).val()
(2)设置元素的value属性值
$(selector).val(值)
十、操作元素的固有属性
(1)获取元素的固有属性值：
$(selector).prop('属性名')
(2)设置元素的固有属性值
$(selector).prop('属性名','属性值')
十一、data()方法
用来设置和获取元素上的值，但是不影响DOM结构。类似给元素绑定了一个变量，该变量是存放在内存中，在html中时看不到的。例如：
$('div').data('PI','3.1415')
console.log('data设置的值为：'+$('div').data('PI'))
十二、查找和筛选元素：
(1)eq(index)：获取索引为index的元素
(2)filter(expr)：筛选出与指定表达式expr相同的元素
(3)not(expr):筛选出与指定表达式expr不相同的元素
(4)find(expr)：查找与指定表达式相同的子元素
(5)next([expr]):返回与指定表达式相同的同辈元素
$('p').next() --> p标签的所有同辈标签
(6)parent([expr])：返回与表达式相匹配的的唯一的父元素
(7)sibings([expr])：返回与表达式匹配的所有同辈元素
十三、jQuery的事件处理
(1)页面载入事件：
JavaScript的页面载入事件：window.onload
jQuery的页面载入事件(入口函数)：$(function(){ js代码 })
(2)事件绑定：
$(selector).bind('事件类型',function(){
处理代码
})
或
$(selector).事件名(function(){
处理代码
})
(3)反绑定：取消元素上绑定的事件(即元素就监听不到相应的事件)
$(selector).unbind() --> 取消元素上绑定的所有事件
$(selector).unbind('事件名') --> 取消元素上绑定的指定事件
(4)一次性事件的绑定：即绑定的事件只能使用一次
$(selector).one('事件类型',function(){
处理代码
})
(5)模仿鼠标悬停事件：
$(selector).hover(over,out)
over：回调函数，表示鼠标悬停时调用的函数
out：回调函数，表示鼠标离开时调用的函数
十四、jQuery的事件对象
jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQuery格式化后的事件。 对象作为唯一参数传入
例如：
$(selector).bind('click',function(event){ -->'event'代表jQuery的事件对象
处理代码
})
(1)type：事件类型
(2)target：事件对象
(3)pageX、pageY：在鼠标事件中鼠标相对于页面原点的x、y坐标。
十五、jQuery的动画
(1)元素的隐藏与显示(滑动动画)
hide(speed,[callback])：隐藏
show(speed,[callback])：显示
toggle(speed,[callback]):交替(若元素隐藏则变为可见，若元素可见则变为隐藏)
‘speed’：表示速度，常用取值：‘slow’–>慢 ‘normal’–>普通 也可以是毫秒数
‘callback’：回调函数，动画运行时执行的函数，每个元素只执行一次
(2)收缩与展开
slideUp(speed,[callback]):向上收缩
slideDown(speed,[callback]):向下展开
slideToggle(speed,[callback])：交替收缩与展开
(3)淡入淡出：改变透明度实现
fadeIn(speed,[callback])：淡入
fadeOut(speed,[callback])：淡出
|