Using jQuery to manipulate HTML tags

How to use jQuery to operate label elements

In web development, jQuery can be used to easily operate label elements to achieve dynamic effects and interactive functions. This article will introduce in detail how to use jQuery to operate label elements and provide specific code examples.

1. Introduce the jQuery library

Before you start operating tag elements, you first need to introduce the jQuery library into the HTML file. You can introduce the latest version of jQuery through a CDN link, or you can download jQuery files locally.

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

2. Commonly used label element operation methods

1. Select elements

Using the jQuery selector can easily select label elements on the page. Commonly used selectors include:

• Tag selector: $("tagName")
• Class selector: $(".className" )
• ID selector:$("#idName")

// 选择class为example的元素
$(".example").css("color", "red");

// 选择id为test的元素
$("#test").hide();

2. Hide and show elements

Use jQuery to easily hide or show elements on your page.

// 隐藏id为test的元素
$("#test").hide();

// 显示class为example的元素
$(".example").show();

3. Add and remove class names

By adding and removing class names, you can achieve the effect of dynamically changing element styles.

// 添加class为newClass的类名
$("#test").addClass("newClass");

// 移除class为oldClass的类名
$(".example").removeClass("oldClass");

4. Change the content of the element

You can use the text() and html() methods to change the text content of the element or HTML content.

// 修改id为test的元素文本内容
$("#test").text("新内容");

// 修改class为example的元素HTML内容
$(".example").html("<p>新内容</p>");

5. Getting and setting attribute values

Use the attr() method to get or set the attribute value of an element.

// 获取id为test的元素src属性值
var src = $("#test").attr("src");

// 设置class为example的元素href属性值
$(".example").attr("href", "https://www.example.com");

6. Binding events

Interactive functions can be realized by binding events, such as click events, mouse hover events, etc.

// 绑定点击事件
$("#btn").click(function() {
    alert("按钮被点击了");
});

// 绑定鼠标悬停事件
$("#hover").hover(function() {
    alert("鼠标悬停在元素上");
});

3. Comprehensive example

The following is a comprehensive example of using jQuery to operate label elements, realizing the function of switching the display and hiding of images by clicking a button.

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#showBtn").click(function(){
        $("#image").toggle();
    });
});
</script>


    
    显示/隐藏图片

The above is a detailed introduction and code example on how to use jQuery to operate label elements. By mastering these basic operation methods, you can realize web page effects and interactive functions more flexibly.

The above is the detailed content of Using jQuery to manipulate HTML tags. For more information, please follow other related articles on the PHP Chinese website!