get, set

02 Sep 2019 in Programming on jQuery

jQuery

Get / Set

1) input, select, etc = val()
2) att(“attribute name”) > GET
att(“attribute name”,”value”) > SET
3) print html tag (applied) > html()
4) print text (html not applied) > text()

//get
<script>
$(function(){
    $("#txt1").val();
  });
</script>
<body>
  <input type="text" id="txt1" value="text1" />
</body>

//set 
<script>
$(function(){
    $("#txt1").val("text2");
  });
</script>
<body>
  <input type="text" id="txt1" value="text1" />
</body>

// get attribute value
<script>
$(function(){
    $("#div1").attr("style");
    $("#div2").attr("class");
  });
</script>
<body>
  <div id="div1" style="display: block;">
    Test1
  </div>
  <div id="div2" class="testDiv">
    Test2
  </div>
</body>

// set attribute value
<script>
$(function(){
    $("#div1").attr("style","color:red;");
    $("#div2").attr("style","color:blue;");
  });     
</script>
<body>
  <div id="div1" style="display: block;">
    Test1
  </div>
  <div id="div2" class="testDiv">
    Test2
  </div>
</body>

// get html
<script>
$(function(){
    $("#node1").html();
  });
</script>
<body>
  <div id="node1">
    <table>
      <tr>
        <td>
          <h2>table</h2>
        </td>
      </tr>
    </table>
  </div>
</body>

// set html
<script>
$(function(){
    $("#node2").html("<h1>test</h1><h2>test</h2>");
  });
</script>
<body>
  <div id="node2">
   </div>
</body>

// set text (not applied HTML)
<script>
$(function(){
    $("#node2").text("<h1>test</h1><h2>test</h2>");
  });
</script>
<body>
  <div id="node2">
   </div>
</body>

Before / After / Prepend / Append

//before
<script>
$(function(){
    let html = '<div><h1>inserted layout</h1></div>';
    $("#layer2").before(html);
  });
</script>
<body>
  <div id="layer1">
    <h2>first layout</h2>
  </div>
  <div id="layer2">
    <h2>second layout</h2>
  </div>
  <div id="layer3">
    <h2>third layout</h2>
  </div>
</body>

//after
<script>
$(function(){
    let html = '<div><h1>inserted layout</h1></div>';
    $("#layer2").after(html);
  });
</script>
<body>
  <div id="layer1">
    <h2>first layout</h2>
  </div>
  <div id="layer2">
    <h2>second layout</h2>
  </div>
  <div id="layer3">
    <h2>third layout</h2>
  </div>
</body>

//Prepend
<script>
$(function(){
    let html = '<h1>inserted layout</h1>';
    $("#layer2").prepend(html); //first son of the node
  });
</script>
<body>
  <div id="layer1">
    <h2>first layout</h2>
  </div>
  <div id="layer2">
    // here
    <h2>second layout1</h2>
    <h2>second layout2</h2>
    <h2>second layout3</h2>
    <h2>second layout4</h2>
  </div>
  <div id="layer3">
    <h2>third layout</h2>
  </div>
</body>

//Append
<script>
$(function(){
    let html = '<h1>inserted layout</h1>';
    $("#layer2").prepend(html); //last son of the node
  });
</script>
<body>
  <div id="layer1">
    <h2>first layout</h2>
  </div>
  <div id="layer2">
    <h2>second layout1</h2>
    <h2>second layout2</h2>
    <h2>second layout3</h2>
    <h2>second layout4</h2>
    // here
  </div>
  <div id="layer3">
    <h2>third layout</h2>
  </div>
</body>

event

02 Sep 2019 in Programming on jQuery

jQuery

event

<script>
$(function(){
  // Click, dblclick, keypress, on)

  // Q1. print select value + text value when user click the search button
  $("#searchButton").click(function(){
    var searchKey = $("#searchKey").val();
    var searchValue = $("#searchValue").val();
    console.log("searchKey",searchKey);
    console.log("searchValue",searchValue);
  })
  
  // Q2. print select, text value when we enter searchValue tag
  $("#searchValue").keypress(function(event){
    if(event.keyCode == 13){ // enter = keycode 13
      var searchKey = $("#searchKey").val();
      var searchValue = $("#searchValue").val();
      console.log("searchKey",searchKey);
      console.log("searchValue",searchValue);
    })
  }
});
</script>
<body>
  <div>
    <select id="searchKey">
      <option value="first">first value</option>
      <option value="second">second value</option>
      <option value="third">third value</option>
    </select>
    <input type="button" id="searchValue" />
    <input type="button" id="searchButton" value="Click" />
  </div>
</body>

<script>
$(function(){
  
  // Q3. text Tag will be added on the div "addLayer" when you click the button
  $("#addButton").click(function(function){
    var textTag = "<input type='text' value='temp value'/>";
    $("#addLayer").append(textTag);
  })
});
</script>

<body>
  <div>
    <input type="button" id="addButton" value="add"/>
  </div>
  <div id="addLayer"></div>
</body>

Plus, use before + after function

<script>
$(function(){
  var textTag = "<input type='text' value='temp value'/>";
  $("#beforeAddButton").click(function(function){
    $("#addLayer").before(textTag);
  });
  $("#afterAddButton").click(function(function){
    $("#addLayer").after(textTag);
  });
});
</script>

<body>
  <div>
    <input type="button" id="beforeAddButton" value="beforeAdd"/>
    <input type="button" id="afterAddButton" value="afterAdd"/>
  </div>
  <div id="addLayer">
    <h2>this is line</h2>
  </div>
</body>

on (dynamic event)

<script>
$(function(){
  $("#addBtn").click(function()){
    var tag = '<input type="button class="alertbutton" value="Click" />';
    $("#addLayer").append(tag);
  });
  $(document).on("click",".alertButton,function(){
    alert("Click!!");
  })
});
</script>

<body>
  <input type="button" id="addBtn" value="add"/>
  <div id="addLayer">
    <input type="button" id="alertButton" value="click"/>
  </div>
</body>

each

02 Sep 2019 in Programming on jQuery

jQuery

each loop

<script>
$(function(){
      $("div").each(function(index){
        let txt = $("div").eq(index).find("input[type=text]").val();
        console.log(txt); // first value, second value, third value, fourth Value
      });
      //OR
      $("div").each(function(index){
        let txt = $(this).find("input[type=text]").val();
        // $("div").eq(index) = $(this)
        console.log(txt); // first value, second value, third value, fourth Value
      });    
  });
</script>
<body>
  <div>
    <input type="text" value="first value"/>
  </div>
  <div>
    <input type="text" value="second value"/>
  </div>
  <div>
    <input type="text" value="third value"/>
  </div>
  <div>
    <input type="text" value="fourth value"/>
  </div>
</body>

return

<script>
$(function(){
      $("div").each(function(index){
          if(index == 1){
            return false;
          }
      });
  });
</script>
<body>
  <div>
    <input type="text" value="first value"/>
  </div>
  <div>
    <input type="text" value="second value"/>
  </div>
  <div>
    <input type="text" value="third value"/>
  </div>
  <div>
    <input type="text" value="fourth value"/>
  </div>
</body>

jQuery

jQuery

jQuery

Pagination