jQuery的操作及事件处理

Posted 2021-09-15 遥岑.

目录

• jQuery的操作
• • 操作元素的属性
  • 操作样式
  • 操作样式类
  • 获取和设置元素的宽度和高度
  • 操作HTML代码
  • 操作文本
  • 操作值
  • 操作元素的固有属性
  • data( )方法
  • 查找和筛选元素
• jQuery的事件处理
• jQuery的事件对象
• jQuery的动画

jQuery的操作

操作元素的属性

• 获取元素的属性值

$(selector).attr('属性名')

• 设置元素的属性值

以对象的方式设置属性值：
$(selector).attr({'属性名':'属性值'})
	   
以key-value的方式设置属性值：
$(selector).attr('属性名','属性值')
			
以回调函数的方式设置属性值
$(selector).attr('属性名',function(){
	 return '值'
})

• 删除元素的属性

$(selector).removeAttr('属性名')

操作样式

• 获取样式属性的值

$(selector).css('样式属性名')

• 设置样式属性的值

以传入对象的方式设置样式：
$(selector).css({'样式属性':'值'})	

以给函数传值的方式设置样式
$(selector).css('样式属性名','属性值')

操作样式类

• 添加样式类

$(selector).addClass('样式类名')

• 删除样式类

$(selector).removeClass('样式类名')

• 判断元素是否含有给定的样式类

$(selector).hasClass('样式类名')

• 交替添加（删除）样式类

$(selector).toggleClass('样式类名')

获取和设置元素的宽度和高度

• 宽度

$(selector).width()  获取宽度
$(selector).width(value)  设置宽度

• 高度

$(selector).height() 获取高度
$(selector).height(value) 设置高度

操作html代码

作用类似于innerHTML。

• 获取html代码

$(selector).html() 

• 设置html代码

$(selector).html('html代码')

操作文本

作用类似于innerText。

• 获取标签的文本

$(selector).text()

• 设置标签的文本

$(selector).text('文本')

操作值

• 获取元素的value属性值

$(selector).val()

• 操作元素的value属性值

$(selector).val(值)

操作元素的固有属性

• 获取元素的固有属性值

$(selector).prop('属性名')

• 设置元素的固有属性值

$(selector).prop('属性名','属性值')

data( )方法

data( )方法：用来设置和获取元素上的值，但是不影响DOM结构。类似给元素绑定了一个变量，该变量是存放在内存中，在html中是看不到的。

例：
$('div').data('PI','3.1415')
console.log('data设置的值为：'+$('div').data('PI'))

查找和筛选元素

eq(index)：获取索引为index的元素
	   
filter(expr)：筛选出与指定表达式expr相同的元素
	   
not(expr):筛选出与指定表达式expr不相同的元素
	   
find(expr)：查找与指定表达式相同的子元素
	   
next([expr]):返回与指定表达式相同的同辈元素
  $('p').next() --> p标签的所有同辈标签
		   
parent([expr])：返回与表达式相匹配的的唯一的父元素
	   
sibings([expr])：返回与表达式匹配的所有同辈元素

jQuery的事件处理

• 页面载入事件

javascript的页面载入事件：window.onload
		  
jQuery的页面载入事件(入口函数)：$(function(){ js代码 })

• 事件绑定

$(selector).bind('事件类型',function() {
     处理代码
})

$(selector).事件名(function() {
     处理代码
})

• 反绑定
  取消元素上绑定的事件，即元素就监听不到相应的事件。

$(selector).unbind() 取消元素上绑定的所有事件
$(selector).unbind('事件名')  取消元素上绑定的特定事件

• 一次性事件的绑定
  绑定的事件只能使用一次

$(selector).one('事件类型',function() {
      处理代码
})

• 模仿鼠标悬停事件

$(selector).hover(over,out)
over：回调函数，表示鼠标悬停时调用的函数
out：回调函数，表示鼠标离开时调用的函数

jQuery的事件对象

jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQuery格式化后的事件对象作为唯一参数传入。

$(selector).bind('click',function(event) {
     处理代码
})
//event代表jQuery的事件对象

• event.type：事件类型
• event.target：事件对象
• event.pageX、event.pageY：在鼠标事件中鼠标相对于页面原点的x、y坐标

jQuery的动画

• 元素的隐藏与显示(滑动动画)

hide(speed,[callback]):隐藏
show(speed,[callback]):显示
toggle(speed,[callback]):交替(若元素隐藏则变为可见，若元素可见则变为隐藏)

speed：表示速度，常用取值（slow–>慢 normal–>普通 fast–>快速），也可以是毫秒数
callback：回调函数，动画运行时执行的函数，每个元素只执行一次

• 收缩与展开

slideUp(speed,[callback]):向上收缩		
slideDown(speed,[callback]):向下展开		
slideToggle(speed,[callback])：交替收缩与展开

• 淡入淡出（改变透明度实现）

fadeIn(speed,[callback])：淡入		
fadeOut(speed,[callback])：淡出