jQuery常用属性函数

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()（已在前面介绍）：在指定的元素上存储和检索数据。