Article directory
1, Content operations
1,html()
Similar to the inter HTML attribute in JS, it is used to read or set the HTML content of an element.
<p><span>City</span></p> //Get the HTML content of p element: < span > City</span> $("p").html() //Set the HTML content of the P element: at this time: < p > < strong > City < / strong ></p> $("p").html("<strong>City</strong>")
2,text()
Similar to the innerText attribute in JS, it is used to read or set the text content in an element.
<p><span>City</span></p> //Get the text content of p element: City $("p").text() //Set the text content of the P element to: < p > < span > New City < / span ></p> $("p").text("New city")
3,val()
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 $("input").val() //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> <select id="multiple_select" multiple> <option >1</option> <option >2</option> <option >3</option> </select> //Select 2 $("#single_select").val("2"); //Select 2 and 3 at the same time $("#multiple_select").val(["1","2"]);
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 "title":"newCity", "name":"city" })
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.
<style> .myClass{ background: #00ffFF; } </style> $("#city").addClass("myClass");
2. Style
You can also define the class style in advance and use attr() to set the properties.
$("#city").attr("class","myClass");
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.
<head> <meta charset="UTF-8"> <title>Title</title> <script src="../jquery-1.4.2.min.js"></script> <script> $(function () { $("input").click(function () { //If the element has a class with a value of myClass, remove the class, if not, add $("#city").toggleClass("myClass"); }) }) </script> <style> .myClass { background: #00ffFF; } </style> </head> <body> <div id="city" title="this is city" class="myClass">city</div> <input type="button" value="Click to switch styles"> </body>
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
$("#city").css( { "background":"red", "width":"500px", "fontSize":"50px" //font-size --> fontSize });
2. Get style
$("ාcity").css("width") / / get the value of width
