ĐÀO TẠO DOANH NGHIỆP : SỞ KHOA HỌC CÔNG NGHỆ TỈNH ĐỒNG NAI

ENTERPRISE TRAINING: DONG NAI DEPARTMENT OF SCIENCE AND TECHNOLOGY.

HÌNH ẢNH TẬP HUẤN LỚP SHAREPOINT WORKFLOW VÀ KIẾN TRÚC SHAREPOINT

PHOTOS OF SHAREPOINT WORKFLOW AND ARCHITECTURE CLASS.

HÌNH ẢNH TẬP HUẤN LỚP SHAREPOINT WORKFLOW VÀ KIẾN TRÚC SHAREPOINT

PHOTOS OF SHAREPOINT WORKFLOW AND ARCHITECTURE CLASS.

Sunday, September 28, 2014

STEP BY STEP TO LEARN JQUERY ATTRIBUTES

We have 2 parts:

Part 1STEP BY STEP TO LEARN JQUERY SELECTOR
Part 2STEP BY STEP TO LEARN JQUERY ATTRIBUTES
- Part 3: THE NEXT TIME I WILL POST MORE ....

JQUERY ATTRIBUTES

Create new Project ASP.NET Web Form Application is JQuery.Attributes
After create new project, we have jQuery available in this

JQUERY ATTRIBUTES ATTR

Attr – attr

Creating Attr_Attr.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="\scripts\jquery-1.8.2.js"></script>
    <title>microsofttechnology.net - JQuery - ATTRIBUTES Attr - Attr</title>
    <script>
        $(document).ready(function () {
            var title = $("em").attr("title");
            $("div").text(title);
        });
    </script>
    <style>
        em {
            colorblue;
            font-weight;
            bold;
        }
        div {
            colorred;
        }
    </style>
</head>
<body>
    <p>
        Once there was a <em title="huge, gigantic">large</em> dinosaur...
    </p>
    The title of the emphasis is:<div></div>
</body>
</html>
F5 to run

JQUERY ATTRIBUTES CLASS

Class - addClass

Creating Class_AddClass.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="\scripts\jquery-1.8.2.js"></script>
    <title>microsofttechnology.net - JQuery - ATTRIBUTES Class - AddClass</title>
    <script>
        $(document).ready(function () {
            $("p:last").addClass("selected");
        });
    </script>
    <style>
        p {
            margin8px;
            font-size16px;
        }

        .selected {
            colorred;
        }

        .highlight {
            backgroundyellow;
        }
    </style>
</head>
<body>
    <p>Hello</p>
    <p>and</p>
    <p>Goodbye</p>
</body>
</html>

F5 to run

Class – removeClass

Creating Class_RemoveClass.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="\scripts\jquery-1.8.2.js"></script>
    <title>microsofttechnology.net - JQuery - ATTRIBUTES Class - RemoveClass</title>
    <script>
        $(document).ready(function () {
            $("p:even").removeClass("blue");
        });
    </script>
    <style>
        p {
            margin4px;
            font-size16px;
            font-weightbolder;
        }

        .blue {
            colorblue;
        }

        .under {
            text-decorationunderline;
        }

        .highlight {
            backgroundyellow;
        }
    </style>
</head>
<body>
    <p class="blue under">Hello</p>
    <p class="blue under highlight">and</p>
    <p class="blue under">then</p>
    <p class="blue under">Goodbye</p>
</body>
</html>

F5 to run

JQUERY ATTRIBUTES HTML

HTML – html()

Creating HTML_Html.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="\scripts\jquery-1.8.2.js"></script>
    <title>microsofttechnology.net - JQuery - ATTRIBUTES HTML - Html</title>
    <script>
        $(document).ready(function () {

            $("p").click(function () {
                var htmlStr = $(this).html();
                $(this).text(htmlStr);
            });

        });
    </script>
    <style>
        p {
            margin8px;
            font-size20px;
            colorblue;
            cursorpointer;
        }

        b {
            text-decorationunderline;
        }

        button {
            cursorpointer;
        }
    </style>
</head>
<body>
    <p>
        <b>Click</b> to change the <span id="tag">html</span>
    </p>
    <p>
        to a <span id="text">text</span> node.
    </p>
    <p>
        This <button name="nada">button</button> does nothing.
    </p>
</body>
</html>

F5 to run

HTML – html(val)

Creating HTML _Html(val).html and add code
F5 to run

JQUERY ATTRIBUTES TEXT

Text – text()

Creating Text_Text().html and add code
F5 to run

Text – text(val)

Creating Text_Text(val)..html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="\scripts\jquery-1.8.2.js"></script>
    <title>microsofttechnology.net - JQuery - ATTRIBUTES HTML - Html(val)</title>
    <script>
        $(document).ready(function () {
            $("div").html("<b>Welcome !</b> to microsofttechnology.net...");
        });
    </script>
    <style>
        div {
            colorblue;
            font-size18px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

F5 to run

JQUERY ATTRIBUTES VALUE

Val – val()

Creating Val_Val().html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="\scripts\jquery-1.8.2.js"></script>
    <title>microsofttechnology.net - JQuery - ATTRIBUTES VAL - val()</title>
    <script>
        $(document).ready(function () {

            function displayValsSinggle() {
                var singleValues = $("#single").val();
                var multipleValues = $("#multiple").val() || [];
                $("#pSingle").html("<b>Single:</b> " +
                            singleValues);
            }

            function displayValsMulti() {            
                var multipleValues = $("#multiple").val() || [];
                $("#pMulti").html("<b>Multiple:</b> " + multipleValues.join(", "));
            }

            $("select").change(displayValsSinggle);
            $("select").change(displayValsMulti);
            displayValsSinggle();
            displayValsMulti();
        });
    </script>
    <style>
        p {
            colorred;
            margin4px;
        }

        b {
            colorblue;
        }
    </style>
</head>
<body>
    <p id="pSingle"></p>
    <select id="single">
        <option>Single</option>
        <option>Single2</option>
    </select>
    <br /><br /><br />
    <p id="pMulti"></p>
    <select id="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select>
</body>
</html>

F5 to run

Val – val(val)

Creating Val_Val(val)..html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="\scripts\jquery-1.8.2.js"></script>
    <title>microsofttechnology.net - JQuery - ATTRIBUTES VAL - val(val)</title>
    <script>
        $(document).ready(function () {

            $("button").click(function () {
                var text = $(this).text();
                $("input").val(text);
            });

        });
    </script>
    <style>
        button {
            margin4px;
            cursorpointer;
        }

        input {
            margin4px;
            colorblue;
        }
    </style>
</head>
<body>
    <div>
        <button>Feed</button>
        <button>the</button>
        <button>Input</button>
    </div>
    <input type="text" value="click a button" />
</body>
</html>

F5 to run