第五课 元素属性与效果1

在前端开发中，元素属性与效果的处理是基础且重要的技能。本课主要涉及四个方面的内容：元素属性、class类操作、HTML操作以及普通显示隐藏效果。以下是对这些知识点的详细说明： 一、元素属性 1. 获取或设置元素属性值：通过jQuery中的`.attr()`方法，可以获取或修改元素的任意属性。例如`$(".dataTitle").attr("title")`用来获取具有"dataTitle"类的元素的"title"属性值，`$("imageWrap").attr("src","./img1.jpg")`则用于将所有"imageWrap"类的图片元素的源地址设为"img1.jpg"。同时设置多个属性，可以使用对象形式，如`$(".imageWrap").attr({ src: "./img1.jpg", alt: "imageWrap" })`。 2. 删除元素属性：使用`.removeAttr()`方法，例如`$(".dataTitle").removeAttr("title")`将移除"dataTitle"类元素的"title"属性。 3. 表单元素属性值的处理：对于表单元素，使用`.prop()`方法，如`$("input[type='radio']").prop("checked")`检查单选按钮是否被选中，设置多个属性值同样使用对象形式，如`$("input[type='text']").prop({disabled:true,readonly:"readonly"})`。 注意，`.attr()`和`.prop()`的区别在于，`.attr()`适用于所有自定义属性，返回HTML对象，而`.prop()`主要用于表单元素的属性操作，返回DOM对象。 二、class类操作 1. 添加class类名：`.addClass()`方法允许向一个或多个元素添加指定的class，如`$("div").addClass("className1")`，或`$("div,h3").addClass("className1 className2")`，可同时添加多个类。 2. 删除class类名：`.removeClass()`方法可以删除元素的全部或指定class。无参数时，删除所有class；传入参数，则删除指定的class，如`$("div").removeClass("className1")`。 3. 切换class：`.toggleClass()`方法根据条件添加或移除class。默认情况下，如果没有类则添加，有类则移除。如果提供第二个参数（布尔值），则根据该值决定是否添加类，如`$(".btn").click(function(){$(this).toggleClass("className1",num == 2);})`。 三、HTML操作 1. HTML字符串内容：`.html()`方法用于获取或设置元素的HTML内容。如`$('.dataWrap').html('<span>数据内容</span>')`，会完全替换原有内容。 2. 文本内容：`.text()`方法仅处理文本，不处理HTML结构。例如`$('.dataWrap').text('数据内容')`。 3. 表单元素值：`.val()`方法用于获取或设置表单元素的值，如`$("input").val("表单元素的 value 值")`。 四、普通显示隐藏效果 1. 显示元素：`.show()`方法用于显示隐藏的元素，可以设置动画效果，如`$("div").show(2000,"swing",function(){console.log("显示");})`。 2. 隐藏元素：`.hide()`方法与.show()类似，用于隐藏元素。 3. 切换显示隐藏：`.toggle()`方法根据当前状态切换元素的显示和隐藏状态，常与点击事件结合使用。 以上就是关于元素属性与效果的一些核心知识点，熟练掌握这些将有助于前端开发者更好地控制页面元素的呈现和交互。在实际应用中，这些方法常常结合使用，以实现丰富的网页动态效果。持续学习和实践，是提升前端技能的关键。