JQuery - Style (attributes and styles of jQuery)

Keywords: JQuery Javascript Attribute

Attributes and Styles of jQuery

attr() and. removeAttr()

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    attr() and. removeAttr ()</title> attributes and styles of <title> jQuery
    <style>
        input {
            display    : block;
            margin     : 10px;
            padding    : 10px;
            background : #bbffaa;
            border     : 1px solid #ccc;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2> attr () and. removeAttr ()</h2>
<h3>.attr</h3>
<p>

    1. attr() method is used in jQuery to obtain and set element attributes.
    attr() has four expressions:
    1, attr (attribute name): Get the value of the attribute;
    2, attr (attribute name, attribute value): set the value of the attribute;
    3, attr (attribute name, function name): set the function value of the attribute;
    4, attr (attribute name 1: attribute value 1, attribute name 2: attribute value 2);
    2. removeAttr() deletion method
    RemoveAttr: Remove attributes for all elements in the set of matching elements;
    3. Distinguishing attribute s from properties
    Attribute: Attributes, properties of dom nodes, such as id, class, title, align, etc.
    2, Property: Attribute is the dom element as an object, and its additional content, such as tagName, nodeName, T-pot, etc.
    3. Get Attribute with attr and Property with prop.

</p>
<form>
    <input type="text" value="set value"/>
    <input type="text" value="get value"/>
    <input type="text" value="callback splicing value"/>
    <input type="text" value="delete value"/>
</form>

<script type="text/javascript">
    // Find the first input and set the value of the attribute value by attr
    $('input:first').attr('value','.attr( attributeName, value )')
</script>

<script type="text/javascript">
    // Find the second input and get the value of the attribute value through attr
    $('input:eq(1)').attr('value')
</script>

<script type="text/javascript">
    // Find the third input and use a function to set properties
    // You can return the final required attribute values based on other attribute values on that element
    // For example, we can associate new values with existing values:
    $('input:eq(2)').attr('value',function(i, val){
        return'Set'+ val by function
    })
</script>

<script type="text/javascript">
    // Find the fourth input and delete the attributes by using removeAttr
    $('input:eq(3)').removeAttr('value')
</script>


</body>

</html>

html() and. text()

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery Attributes and Styles of ___________ html()and.text()</title>
    <link rel="stylesheet" href="choose.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>

<h3>.html()and.text()</h3>

.html() and .text()
1，.html()Read the modified element html Structure;
2，.text()Read the text content of the modified element;
3，.html()Method content uses DOM Of innerHTML()Property to handle.
This operation is for the whole HTML Content, not just text content;
4，.text()The result returns a string containing the merged text of all matching elements.


<div class="left first-div">
    <div class="div">
        <a>:first-child</a>
        <a>The second element</a>
        <a>:last-child</a>
    </div>
    <div class="div">
        <a>:first-child</a>
        <a>The second element</a>
        <a>:last-child</a>
    </div>
</div>

<h4>Display through html Content captured by the method</h4>
<p></p>

<h4>Display through text Content captured by the method</h4>
<p></p>


<script type="text/javascript">
    //Display the content captured by the html method
    //. html() is the entire html document structure
    $('p:first').html( $(".first-div").html() )
</script>


<script type="text/javascript">
    //Display the content captured by the text method
    //. text() is a collection of text content
    $('p:last').text( $(".first-div").text() )
</script>


<script type="text/javascript">
    //Replace text content with. text() method
    $(".left a:first").text('Replace the first a Element content')
</script>


<script type="text/javascript">
    //Replace html structure with. html() method
    $(".left div:first").html('Whole div Subnodes have been replaced')
</script>


<script type="text/javascript">
    //Through the callback of. text(), get the original content, modify it, and reassign it.
    $(".left a:first").text(function(idnex,text){
        return 'Add new text content' + text
    })
</script>



</body>

</html>

.val()

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    Attributes and Styles of <title>jQuery.val()</title>
    <style>
        p {
            color: red;
            margin: 4px;
        }

        b {
            color: blue;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h3>.val()</h3>
1. val() method: used to process the values of form elements, such as input, select, textarea;
It can only be used on form elements.
2. text() method: used to read the pure text content of elements, including descendant elements;
Can't be used on form elements;
3. html() and. val() methods: if used on multiple elements, only the first element is read;
4. text() method: If used on multiple elements, the text content of all selected elements will be read;
<br>

<select id="single">
    <option selected="selected">radio front end </option>
    < option > radio back end </option >
</select>
<select id="multiple" multiple="multiple">
    <option selected="selected">multiple-choice above </option>
    < option > multi-choice middle </option >
    <option selected="selected"> Multiple choices below </option>
</select>
<input type="text" value="click a button" />
<p id="p1"></p>
<p id="p2"></p>


<script type="text/javascript">
    // Single select, return the first
    $("#p1").text( $("#single").val() )
</script>

<script type="text/javascript">
    // Multiple selects are selected and returned ["above", "below"]
    $("#p2").text( $("#multiple").val() )
</script>


<script type="text/javascript">
    // Select a form and modify the value
    $("input [type='text']). val ('modify the content of the form')
</script>


</body>

</html>

Additional Style. addClass()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="3-4.css" type="text/css">
    <title>jQuery Additional Styles for Attributes and Styles of __________.addClass()</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
1，.addClass(className)Method action: add one or more dynamically for each matching element class Class name;
2，Be careful:.addClass(className)Method does not replace a style class name.
    It simply adds a class name to the element.

<h2>.addClss()Method</h2>
<div class="left">
    <div class="xiao">
        <p>newClass</p>
    </div>
    <div class="xiao">
        <p>newClass</p>
    </div>
</div>
<div class="right">
    <div class="aa bb boke">
        <article>
            <p>bokeClass</p>
        </article>
    </div>
    <div class="bb cc boke">
        <article>
            <p>bokeClass</p>
        </article>
    </div>
</div>

<script type="text/javascript">
    $('.left div').addClass('newClass');
</script>

<script type="text/javascript">
    $('div').addClass(function (index, className) {
        if(-1!==className.indexOf('boke')){
            $(this).addClass('bokeClass');
        }
    });
</script>

</body>
</html>

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="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>.removeClass()Method</h2>

1，removeClass([className]): Each matching element removes one or more class names separated by spaces.
2，removeClass(function(index,class)): A function that returns one or more class names to be removed;

<div class="left">
    <div class="aaron newClass">
        <p>newClass</p>
    </div>
    <div class="aaron 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 the new Class style from the div element under class=left
    $('.left div').removeClass('newClass')
</script>


<script type="text/javascript">
    //The. removeClass() method allows us to specify a function as a parameter to return the style to be deleted
    $('.right > div:first').removeClass(function(index,className){

        //className = aa bb imoocClass
        //Assign div's className to the next sibling element div as its class
        $(this).next().addClass(className)

        //Delete your own imoocClass
        return 'imoocClass'
    })


</script>



</body>

</html>

toggleClass()

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery Switching styles.toggleClass()</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
        body,
        table,
        td
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }

        .h {
            background: #f3f3f3;
            color: #000;
        }

        .c {
            background: #ebebeb;
            color: #000;
        }
    </style>
</head>

<body>
<h2>Interlacing</h2>
<h4>.toggleClass(className)and.toggleClass(className,switch)</h4>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
    <tr>
        <td>jQuery Get into the bowl!</td>
        <td>jQuery Get into the bowl!</td>
    </tr>
    <tr>
        <td>jQuery Get into the bowl!</td>
        <td>jQuery Get into the bowl!</td>
    </tr>
    <tr>
        <td>jQuery Get into the bowl!</td>
        <td>jQuery Get into the bowl!</td>
    </tr>
    <tr>
        <td>jQuery Get into the bowl!</td>
        <td>jQuery Get into the bowl!</td>
    </tr>
    <tr>
        <td>jQuery Get into the bowl!</td>
        <td>jQuery Get into the bowl!</td>
    </tr>
</table>
<script type="text/javascript">
    //Add a class="c" style to all tr elements
    $("#table tr").toggleClass("c");
</script>
<script type="text/javascript">
    //Switch the class="c" style for all even tr elements
    //All cardinal styles are preserved, even numbers are deleted
    $("#table tr:odd").toggleClass("c");
</script>
<script type="text/javascript">
    //The second parameter determines whether the style class should be added or deleted
    //true, then this style class will be added;
    //false, then the style class will be removed
    //All odd tr elements should retain the class="c" style
    $("#table tr:even").toggleClass("c", true); //This operation remains unchanged because the style already exists.
</script>
</body>

</html>

Style operation. css()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="3-7.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <title>jQuery Style operation.css()</title>
</head>
<body>

<h3>Obtain css attribute</h3>
<div class="first">get colors</div>
<p></p>
<div class="second">Get text size</div>
<p></p>
<div class="third">Acquire width and height dimensions</div>
<p></p>

<script type="text/javascript">
    //background-color:blue; => rgb(0, 0, 255)
    //All colors are converted to a uniform rgb label
    $('p:eq(0)').text( $('.first').css('background-color'))

</script>

<script type="text/javascript">
    //Font sizes are converted to the same px size EM => px
    $('p:eq(1)').text( $('.first').css('font-size') )
</script>

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

</br></br></br>
<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 values by callback</div>
<div class="seventh">How many styles are set at the same time</div>

<script type="text/javascript">
    //Various Writing Styles to Set Colors
    $('.fourth').css('background-color','red');
    $('.fifth').css('backgroundColor','yellow');
</script>

<script type="text/javascript">
    //Setting Font Size in Various Writing Styles
    $('.fourth').css('font-size','15px');
    $('.fifth').css('font-size','0.9em');
</script>


<script type="text/javascript">
    //Gets the width of the specified element and returns the width value in the callback
    //By processing this value, reset the new width
    $('.sixth').css('width',function(index,value){
        value = value.split('px');
        return (Number(value[0])+50)+value[1];
    })
</script>

<script type="text/javascript">
    //Merge settings to set multiple styles through object passing
    $('.seventh').css({
        'font-size':'15px',
        'background-color':'green',
        'border':'1px solid gray'
    })
</script>


</body>

</html>

Data Storage of Elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Data Storage of Elements</title>
    <style type="text/css">
        .left,.right {
            width: 300px;
            height: 120px;
        }
        .left div,.right div {
            width: 100px;
            height: 90px;
            padding: 5px;
            margin: 5px;
            float: left;
            border: 1px solid #cccccc;
        }
        .left div {
            background: #bbffdd;
        }
        .right div {
            background: #ddffbb;
        }

    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>jQuery.data()Static method</h2>
<div class="left">
    <div class="inner">
        <p>click</p>
        <p>jQuery.data</p>
    </div>
    <div><span></span></div>
</div>
<h2>.data()Example method</h2>
<div class="right">
    <div class="inner">
        <p>click</p>
        <p>.data</p>
    </div>
    <div><span></span></div>
</div>

<script type="text/javascript">
    $('.left').click(function () {
        var ele = $(this);
        //Setting data by $. data
        $.data(ele,"a","data test");
        $.data(ele,"b",{name:"Small"});
        //Get the data through $. 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);
        //Setting data by. data
        ele.data("a","data test");
        ele.data("b",{name:"Small"});
        //Extract data by. data
        var reset = ele.data("a") + "<br>" + ele.data("b").name;
        ele.find('span').append(reset);

    });
</script>


</body>
</html>

Posted by eezmo on Mon, 08 Apr 2019 18:45:31 -0700

Hot Keywords

©2024 Programmer Group