$
函数配合 CSS 选择器可以选取你想要操作的元素,如果你想选择一个具有 id
myDiv
的元素,你可以这样写:,“`javascript,var element = $("#myDiv");,“`,3、
获取元素的 HTML 内容,使用
.html()
方法可以获取匹配元素的 HTML 内容,这将返回一个字符串,包含元素的内部 HTML。,“`javascript,var htmlContent = $("#myDiv").html();,console.log(htmlContent); // 输出 标签内的内容,“`,4、
获取元素的文本内容,如果你只想获取元素的文本内容而不包括 HTML 标签,可以使用
.text()
方法。,“`javascript,var textContent = $("#myDiv").text();,console.log(textContent); // 输出文本内容,不包括 标签,“`,5、
获取属性值,如果你想获取某个特定属性的值,
href
属性,你可以使用
.attr()
方法。,“`javascript,var hrefValue = $("#myLink").attr("href");,console.log(hrefValue); // 输出 #myLink 元素的 href 属性值,“`,6、
设置元素的 HTML 内容,除了获取,你也可以使用
.html()
方法来设置元素的 HTML 内容。,“`javascript,$("#myDiv").html("这是 新的 HTML 内容
");,“`,7、 设置元素的文本内容,类似地,你可以使用.text()
方法来设置元素的文本内容。,“`javascript,$("#myDiv").text("这是新的文本内容");,“`,8、
设置属性值,使用
.attr()
方法也可以设置属性值。,“`javascript,$("#myLink").attr("href", "https://www.example.com");,“`,9、
注意事项,确保在 DOM 完全加载后再执行 jQuery 代码,否则可能无法正确获取元素,可以将代码放在
$(document).ready()
函数中,或直接将脚本放在 HTML 文件的底部。,当使用
.html()
或
.text()
方法时,如果元素不存在,这些方法会返回
undefined
,在操作前检查元素是否存在是一个好习惯。,以上便是使用 jQuery 获取和设置 HTML 内容的基本方法,通过熟练掌握这些方法,你可以轻松地操作网页上的任何元素及其内容。,
