[jQuery]: DOM content, attribute and style related operations

Posted by English Fire on Tue, 03 Mar 2020 07:26:36 +0100

Article directory

1, Content operations


Similar to the inter HTML attribute in JS, it is used to read or set the HTML content of an element.

	//Get the HTML content of p element: < span > City</span>
	//Set the HTML content of the P element: at this time: < p > < strong > City < / strong ></p>


Similar to the innerText attribute in JS, it is used to read or set the text content in an element.

    //Get the text content of p element: City
	//Set the text content of the P element to: < p > < span > New City < / span ></p>
	$("p").text("New city")


Similar to the value attribute in JS, it is used to set and get the value attribute value of an element.

	<input type="text" value="Please enter your name">

	//Get the value value of the input element: Please enter your name
	//Set the value of the input element to: < input type = "text" value = "please input" >
    $("input").val("Please input")

It should be noted that val() can also be used to select options of drop-down box, multi selection box and radio selection box. The following pull-down box is an example:

<select id="single_select">
    <option >1</option>
	<option >2</option>
	<option >3</option>
<select id="multiple_select" multiple>
    <option >1</option>
	<option >2</option>
	<option >3</option>
//Select 2
//Select 2 and 3 at the same time

2, Attribute operation

1. Get and set properties

<div id="city" title="this is city">city</div>
$("#city").attr("title")	//Get the value of the title attribute of the element: this is a city

$("#city").attr("title","new city");	//Set the value of the title property to new city
$("#city").attr({						//Format multiple sets of property values

2. Delete attribute

$("ාcity").removeAttr("title"); / / delete the title attribute, which is: < div id = "city" > City < / div >

3, Style operation

1. Append style

Define the specified class style in advance, and use the addClass operation.

        background: #00ffFF;

2. Style

You can also define the class style in advance and use attr() to set the properties.


3. Remove style

Use removeClass to remove the class style, or use removeAttr to remove the class attribute.

$("ාcity").removeClass("myClass"); / / remove the class with the specified value of myClass
 $("ාcity").removeAttr("class"); / / remove the class attribute

removeClass(): all class attributes are deleted without parameters in parentheses.

removeClass ("myClass yourClass"): when multiple attribute values are specified, they are separated by spaces.

4. Switch styles

Use the toggleClass method for style switching.

        <meta charset="UTF-8">
        <script src="../jquery-1.4.2.min.js"></script>
            $(function () {
                $("input").click(function () {
                    //If the element has a class with a value of myClass, remove the class, if not, add
            .myClass {
                background: #00ffFF;
        <div id="city" title="this is city" class="myClass">city</div>
        <input type="button" value="Click to switch styles">

5. Determine if there is a style

$("ාcity").hasClass("myClass") / / returns true if myClass is included

4, Style operation CSS supplement

Use CSS DOM to manipulate styles by setting or reading style properties.

1. Style

$("city").css("background","red") / / set "background" to red
        "fontSize":"50px"	//font-size --> fontSize

2. Get style

$("ාcity").css("width") / / get the value of width
74 original articles published, 56 praised, 3086 visited
Private letter follow

Topics: Attribute JQuery