jQuery常用属性函数
1、.attr()
功能:
获取或设置备选元素的属性值。
用法:
- 获取属性值 :$(selector).attr(attributeName)
- 设置属性值:$(selector).attr(attributeName, value)
- 设置多个属性值:$(selector).attr({attributeName1: value1, attributeName2: value2, ...})
示例:
// 获取 id 属性值
var id = $("#myElement").attr("id");
// 设置 id 和 class 属性值
$("#myElement").attr({
"id": "newId",
"class": "newClass"
});
2、.removeAttr()
功能:
从被选元素中移出一个或多个属性。
用法
$(selector).removeAttr(attributeName)
示例
// 移除 id 属性
$("#myElement").removeAttr("id");
3、.prop()
功能:
获取或设置被选元素的属性值,特别适用于某些具有布尔值的属性,如 checked
、selected
和 disabled
。
用法:
- 获取属性值:
$(selector).prop(propertyName)
- 设置属性值:
$(selector).prop(propertyName, value)
示例:
// 检查复选框是否被选中
var isChecked = $("#myCheckbox").prop("checked");
// 选中复选框
$("#myCheckbox").prop("checked", true);
注意:对于大多数属性,.attr()
和 .prop()
可以互换使用,但 .prop()
更适合处理那些表示 DOM 元素状态的属性,如 checked
、selected
和 disabled
。
4、.data()
功能:
在指定的元素上存储和检索数据,这些数据是私有的,不会影响元素的 DOM 结构。
用法:
- 获取数据:
$(selector).data(key)
或$(selector).data()
(无参数时获取所有存储的数据) - 存储数据:
$(selector).data(key, value)
- 移除数据:
$(selector).removeData(key)
(或.removeData()
来移除所有存储的数据)
示例:
// 存储数据
$("#myElement").data("myKey", "myValue");
// 检索数据
var value = $("#myElement").data("myKey");
// 移除数据
$("#myElement").removeData("myKey");
5、.val()
功能:
获取或设置表单元素(如 input、select 和 textarea)的值。
用法:
- 获取值:
$(selector).val()
- 设置值:
$(selector).val(value)
示例:
// 获取文本框的值
var text = $("#myTextbox").val();
// 设置文本框的值
$("#myTextbox").val("新的文本");
6、.css()
功能:
获取或设置被选元素的样式属性。
用法:
- 获取样式值:
$(selector).css(propertyName)
- 设置样式值:
$(selector).css(propertyName, value)
- 设置多个样式值:
$(selector).css({propertyName1: value1, propertyName2: value2, ...})
示例:
// 获取元素的背景色
var bgColor = $("#myElement").css("background-color");
// 设置元素的背景色和字体大小
$("#myElement").css({
"background-color": "yellow",
"font-size": "20px"
});
1. 元素选择
介绍:
元素选择是jQuery的基础功能之一,它允许开发者根据csS选择器、元素类型、属性等来选取页面上的元素。
- 基本选择器:如
$('p')
选择所有<p>
元素。 - 层次选择器:如
$('ancestor descendant')
选择给定祖先元素的所有后代元素。
$('#parent > .child') // 选择ID为parent的元素下的所有类名为child的直接子元素
$('#ancestor .descendant') // 选择ID为ancestor的元素下的所有类名为descendant的后代元素
- 过滤选择器:如
$(':first')
选择第一个元素,$(':last')
选择最后一个元素,$(':even')
选择索引为偶数的元素等。
示例:
//基本选择器
$('p') // 选择所有<p>元素
//ID选择器
$('#myId') // 选择ID为myId的元素
//类选择器
$('.myClass') // 选择所有类名为myClass的元素
//属性选择器
$('input[type="checkbox"]') // 选择所有type属性为checkbox的input元素
//复合选择器
$('div.myClass, p') // 选择所有类名为myClass的div元素以及所有<p>元素
2. DOM操作
创建元素
$('<p>这是一个新段落。</p>') // 创建一个新的<p>元素
添加内容
.append()
:向被选元素的内部结尾处插入内容。
.prepend()
:向被选元素的内部开头处插入内容。
$('body').append('<p>追加到body末尾</p>') // 将新元素追加到body元素的末尾
$('#myDiv').prepend('<p>追加到myDiv开头</p>') // 将新元素追加到ID为myDiv的元素的开头
.after()
:在被选元素之后插入内容。
.before()
:在被选元素之前插入内容。
删除内容:
.remove()
:移除被选元素及其内容。
$('#myElement').remove() // 删除ID为myElement的元素
.empty()
:移除被选元素的所有子节点。
删除元素
$('#myElement').remove() // 删除ID为myElement的元素
修改元素
$('#myElement').html('<b>新的HTML内容</b>') // 修改元素的HTML内容
$('#myElement').text('新的文本内容') // 修改元素的文本内容
属性操作
$('#myImage').attr('src', 'new-image.jpg') // 修改ID为myImage的元素的src属性
复制和替换:
.clone()
:复制被选元素。
.replaceWith()
:用指定的内容替换被选元素。
包裹元素:
.wrap()
:用其他元素包裹被选元素。
.wrapAll()
:用其他元素包裹所有被选元素。
.wrapInner()
:用其他元素包裹被选元素的内部内容。
3. 事件处理
绑定事件:
.click()
:点击事件。
$('#myButton').click(function() {
alert('按钮被点击了!');
});
.mouseover()
、.mouseout()
:鼠标进入和离开事件。
$('#myElement').mouseover(function() {
$(this).css('background-color', 'yellow');
}).mouseout(function() {
$(this).css('background-color', '');
});
.keydown()
、.keyup()
:键盘按键按下和释放事件。
$('input[type="text"]').keypress(function(event) {
if (event.which == 13) { // 回车键的键码是13
alert('你按下了回车键!');
}
});
.submit()
:表单提交事件。
事件委托:
.on()
:为被选元素绑定一个或多个事件的事件处理函数。
.off()
:移除通过.on()
绑定的事件处理函数。
触发事件:
.trigger()
:触发被选元素上指定的事件。
$('#myInput').trigger('focus') // 触发ID为myInput的元素的focus事件
事件冒泡与阻止
$('div').click(function(event) {
event.stopPropagation(); // 阻止事件冒泡
});
4. 动画效果
隐藏和显示:
.hide()
:隐藏被选元素。
.show()
:显示被选元素。
$('#myElement').hide('slow') // 慢慢隐藏元素
$('#myElement').show('fast') // 快速显示元素
.toggle()
:切换被选元素的隐藏和显示状态。
滑动效果:
.slideDown()
:通过滑动效果显示被选元素。
.slideUp()
:通过滑动效果隐藏被选元素。
$('#myElement').slideDown('normal') // 滑动显示元素,速度正常
$('#myElement').slideUp('slow') // 滑动隐藏元素,速度较慢 fast速度较快
.slideToggle()
:通过滑动效果切换被选元素的隐藏和显示状态。
淡入淡出:
.fadeIn()
:通过淡入效果显示被选元素。
.fadeOut()
:通过淡出效果隐藏被选元素。
.fadeToggle()
:通过淡入淡出效果切换被选元素的隐藏和显示状态。
$('#myElement').fadeIn('slow') // 淡入效果,速度较慢
$('#myElement').fadeOut('fast') // 淡出效果,速度较快
自定义动画:
.animate()
:创建自定义动画。
$('#myElement').animate({
left: '250px',
opacity: 0.5,
height: '150px',
width: '150px'
}, 2000); // 自定义动画,2秒内改变元素的left、opacity、height和width属性
5. 辅助函数
.each()
:遍历jQuery对象中的元素,并对每个匹配的元素执行一次提供的函数。
.size()
(注意:在jQuery 3.0中已被.length
替代):返回被jQuery选择器匹配的元素的数量。
.index()
:返回指定元素相对于其兄弟元素的索引位置。
.data()
(已在前面介绍):在指定的元素上存储和检索数据。