首页 前端知识 jQuery常用属性函数

jQuery常用属性函数

2024-06-24 23:06:12 前端知识 前端哥 1004 908 我要收藏

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()

功能:

获取或设置被选元素的属性值,特别适用于某些具有布尔值的属性,如 checkedselected 和 disabled

用法:

  • 获取属性值$(selector).prop(propertyName)
  • 设置属性值$(selector).prop(propertyName, value)

示例:

// 检查复选框是否被选中  
var isChecked = $("#myCheckbox").prop("checked");  
  
// 选中复选框  
$("#myCheckbox").prop("checked", true);

注意:对于大多数属性,.attr() 和 .prop() 可以互换使用,但 .prop() 更适合处理那些表示 DOM 元素状态的属性,如 checkedselected 和 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()(已在前面介绍):在指定的元素上存储和检索数据。

						
转载请注明出处或者链接地址:https://www.qianduange.cn//article/13493.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!