More than 3 years have passed since last update.

javasript, jquery（ul,liタグ）

Last updated at 2021-01-11Posted at 2020-12-21

①html、 javasriptのツールの開発

　→オンラインツールを使えるため、ツールのダウンロードが不要です。
　　　https://jsfiddle.net/

②HTML分に以下のHTMLソースを追加してから、実行する


<html>

  <head>
    <title>Hoge</title>
  </head>

  <body id="main-id">

    <ul>
        <li>hoge1</li>
        <li>hoge2</li>
        <li>hoge3</li>
    </ul>

  </body>

</html>

イメージ

③HTMLのかわり、JQUERY(OOP)でページを表示する

　　①JQUERYを追加する
　　②HTMLのULが JQUERYのULに変換する
　　③HTMLのLIが JQUERYのLIに変換する　


//マインオブジェクト
var $main  = $("#main-id");

//ulオブジェクトに変換する
var $ul = $("<ul>"); 

//liオブジェクトに変換する
var $li1 = $("<li>").html("hoge1");
var $li2 = $("<li>").html("hoge2");
var $li3 = $("<li>").html("hoge3");

//親オブジェクトに子オブジェクトを追加
$ul.append($li1).append($li2).append($li3);
$main.append($ul);

イメージ

④実行した後、HTMLの表示の結果と同じ

⑤JQUERY(OOP)のclickのメソッド


//ulオブジェクトに変換する
var $ul = $("<ul>");
$ul.click(function() {
    //todo
});

//liオブジェクトに変換する
var $li1 = $("<li>").html("hoge1");
$li1.click(function() {
    //todo
});

var $li2 = $("<li>").html("hoge2");
$li2.click(function() {
    //todo
});

var $li3 = $("<li>").html("hoge3");
$li3.click(function() {
    //todo
});

以上

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up