jQuery - add, delete, switch styles and get settings styles and datastores

jQuery attribute and style add style. addClass()

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left,.right {width: 300px;height: 120px;}
        .left div,
        .right div {width: 100px;height: 90px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;}
        .newClass{background: blue;}
        .imoocClass{background: red;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>.addClss()Method</h2>
    <div class="left">
        <div class="vegeta">
            <p>newClass</p>
        </div>
        <div class="vegeta">
            <p>newClass</p>
        </div>
    </div>
    <div class="right">
        <div class="aa bb imooc">
            <article>
                <p>imoocClass</p>
            </article>
        </div>
        <div class="bb cc imooc ">
            <article>
                <p>imoocClass</p>
            </article>
        </div>
    </div>

    <script type="text/javascript"> 
        //Add a new style and background color to div element under class=left
        $('.left div').addClass('newClass')
    </script>

    <script type="text/javascript"> 
    
        //Through the classname (fuction) method
        //This function returns one or more style names to be added separated by spaces.
        //Receive the index parameter to indicate the index position of the element in the matching set and the html parameter to indicate the original html content on the element

        //Find all the div s, set the color through addClass, and judge according to the returned className,
        $("div").addClass(function(index,className) {

            //Find the element with imooc in the class name
            if(-1 !== className.indexOf('imooc')){
                //this points to the current element in the matching element collection
                $(this).addClass('imoocClass')
            }
        });
    </script>



</body>

</html>

Remove style for jQuery's properties and styles. removeClass()

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left,.right {width: 300px;height: 120px;}
        .left div,.right div {width: 100px;height: 90px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;}
        .newClass{background: #bbffaa;}
        .imoocClass{background: red;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>.removeClass()Method</h2>
    <div class="left">
        <div class="vegeta newClass">
            <p>newClass</p>
        </div>
        <div class="vegeta newClass">
            <p>newClass</p>
        </div>
    </div>
    <div class="right">
        <div class="aa bb imoocClass">
            <article>
                <p>imoocClass</p>
            </article>
        </div>
        <div>
            <article>
                <p>imoocClass</p>
            </article>
        </div>
    </div>

    <script type="text/javascript"> 
        //Delete newClass style for div element under class=left
        $('.left div').removeClass('newClass')
 
        //The. removeClass() method allows us to specify a function as an argument to return the style to be deleted
        $('.right > div:first').removeClass(function(index,className){
            
            //className = aa bb imoocClass
            //Assign the div's className to the next sibling, div, as its class
            $(this).next().addClass(className)

            //Delete your own imoocClass
            return 'imoocClass'
        })
    </script>
</body>
</html>

jQuery property and style switch style. toggleClass()

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>Interlacing</title>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
        .h {background: red;}
        .c {color: blue;}
    </style>
</head>
<body>
    <h4>.toggleClass(className)and.toggleClass(className,switch)</h4>
    <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
        <tr>
            <td>Mogao jQuery Introduction</td>
            <td>Mogao jQuery Introduction</td>
        </tr>
        <tr>
            <td>Mogao jQuery Introduction</td>
            <td>Mogao jQuery Introduction</td>
        </tr>
        <tr>
            <td>Mogao jQuery Introduction</td>
            <td>Mogao jQuery Introduction</td>
        </tr>
        <tr>
            <td>Mogao jQuery Introduction</td>
            <td>Mogao jQuery Introduction</td>
        </tr>
        <tr>
            <td>Mogao jQuery Introduction</td>
            <td>Mogao jQuery Introduction</td>
        </tr>
    </table>
    </div>
    <script type="text/javascript">
        //Add a class="c" style to all tr elements
        $("#table tr").toggleClass("c");

        //Switch the style of class="c" for all even tr elements
        //All odd styles are reserved, even ones are deleted
        $("#table tr:odd").toggleClass("c");

        //The second parameter determines whether the style class should be added or deleted
        //true, then the style class will be added;
        //false, then the style class will be removed
        //All odd tr elements should keep the class="c" style
        $("#table tr:even").toggleClass("c", true); / / this operation has not changed because the style already exists
    </script>
</body>

</html>

 

Style operation of jQuery's properties and styles. css()

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h3>Obtain css attribute</h3>
    <div class="first" style="background-color: pink;">get colors</div>

    <p></p>
    <div class="second">Get text size</div>
    <p></p>
    <div class="third">Get width and height dimensions</div>
    <p></p>

    <script type="text/javascript">
        //background-color:blue; => rgb(0, 0, 255)
        //Color will be transformed into a unified rgb logo
        $('p:eq(0)').text( $('.first').css("background-color") )
        
        //Font size will be converted to the traditional px size EM = > px
        $('p:eq(1)').text( $('.first').css("font-size") )

        //Get the size and pass in an array of CSS properties
        //{width: "60px", height: "60px"}   
        var value = $('.first').css(['width','height']);
        //Because what we get is an object, we get the corresponding value
        $('p:eq(2)').text( 'widht:' + value.width +  ' height:' +value.height )
    </script>

    <h3>Set up css attribute</h3>
    <div class="fourth">Set color set text size</div>
    <div class="fifth">Set color set text size</div>
    <div class="sixth">Set new value through callback</div>
    <div class="seventh">How many styles are set at the same time</div>

    <script type="text/javascript">
        //Multiple ways to set colors
        $('.fourth').css("background-color","red")
        $('.fifth').css("backgroundColor","yellow")

        //Multiple ways to set font size
        $('.fourth').css("font-size","20px")
        $('.fifth').css("fontSize","1em")

        //Gets the width of the specified element and returns the width value in the callback
        //Reset the new width by processing the value
        $('.sixth').css("width",function(index,value){
            //value with unit, decompose first
            value = value.split('px');
            //Return a new value, add 50px to the original value
            return (Number(value[0]) + 50) + value[1];
        })

        //Merge settings, set multiple styles through object transfer
        $('.seventh').css({
            'font-size'        :"20px",
            "background-color" :"pink",
            "border"           :"1px dashed blue"
        })
    </script>
</body>
</html>

The difference between. css() and. addClass() of jQuery attributes and styles

The style attribute set through the. css method takes precedence over the. addClass method

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left,.right {width: 300px;height: 120px;}
        .left div,.right div {width: 200px;height: 90px;padding: 5px;margin: 5px;float: left;}
        a{font-size: 14px;display:block;}
        .newClass{background: yellow;}
        .addBorder{border: 1px solid red;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>.addClass()And.css()Method difference</h2>
    <div class="left">
        <div class="vegeta">
            <a>css Priority over addClass</a>
            <a>1: For the first time addClss Background color</a>
            <a>2: The second time css Modify background color</a>
        </div>
    </div>
    <script type="text/javascript"> 
        //Add borders to all div s
        $('div').addClass('addBorder')
    </script>

    <script type="text/javascript"> 
        //Add a new style and background color to div element under class=left
        $('.vegeta').addClass('newClass')
    </script>

    <script type="text/javascript"> 
        //Set the background color by overriding addClass with css
        $('.vegeta').css({
            'background':'pink'
        })
    </script>
</body>
</html>

Data storage of attributes and style elements of jQuery

html5 dataset is a new HTML5 standard, which allows you to embed data - * like attributes in common element tags to access some simple data. It is unlimited in number, can also be dynamically modified by JavaScript, and supports CSS selectors for styling. This makes the data attribute particularly flexible and powerful.

Storage interface provided by Query

jQuery.data( element, key, value )   //Static interface, storing data
jQuery.data( element, key )  //Static interface, taking data   
.data( key, value ) //Instance interface, storing data
.data( key ) //Instance interface, storing data
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left,.right {width: 300px;height: 120px;}
        .left div,.right div {width: 100px;height: 90px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;}
        .left div {background: #bbffaa;}
        .right div {background: yellow;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>jQuery.data()Static method</h2>
    <div class="left">
        <div class="aaron">
            <p>Click to see the results</p>
            <p>jQuery.data</p>
        </div>
        <div><span></span></div>
    </div>

    <h2>.data()Example method</h2>
    <div class="right">
        <div class="aaron">
            <p>Click to see the results</p>
            <p>.data</p>
        </div>
        <div><span></span></div>
    </div>

    <script type="text/javascript">
        $('.left').click(function() {
            var ele = $(this);
            //Set data by $. Data
            $.data(ele, "a", "data test")
            $.data(ele, "b", {
                name : "MOE network"
            })
            //Fetching data by $. Data
            var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
            ele.find('span').append(reset)
        })
    </script>

    <script type="text/javascript">
        $('.right').click(function() {
            var ele = $(this);
            //Set data by. Data
            ele.data("a", "data test")
            ele.data("b", {
                name: "MOE network"
            })
            //Take out the data through. data()
            var reset = ele.data("a") + "</br>" + ele.data("b").name
            ele.find('span').append(reset)
        })
    </script>
</body>
</html>

Tags: JQuery Javascript Attribute html5

Posted on Thu, 13 Feb 2020 17:31:48 -0500 by CBG