Jquery Programming Examples

Showing and Hiding Elements

jquery

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show();
            });

            $("#hide").click(function () {
               $(".mydiv").hide();
            });
				
         });
      </script>
		
      <style>
         .mydiv{ margin:10px;padding:12px; 
            border:2px solid #666; width:100px; height:100px;}
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hidse" type = "button" value = "Hide" />   
      <input id = "shosw" type = "button" value = "Show" />
   </body>
</html>

JQuery Test

jquery

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("button").click(function() {
        if ($(this).text() === "Hide") {
            $("p").hide();
            $(this).text("Show");
        } else {
            $("p").show();
            $(this).text("Hide");
        }
    })
});

</script>
</head>
<body>
    <button type="button">Hide</button>
    <br>
    <br>
    
    Name: <input type="text" name="firstname">
    <br>
    
    <p id="greet">Welcome!</p>
    <p id="greet with name">Hello</p>
</body>
</html>

Online jQuery Redux

jquery

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    
    const { createStore } = Redux ;
    
   $("em").addClass("selected");
   $("#myid").addClass("highlight");


const postReducer = (state = [], action) => {
    switch (action.type) {
        case 'ADD_POST':
            return state.concat([action.data])
        case 'DELETE_POST':
            return state.filter((post) => post.id !== action.id)
        case 'EDIT_POST':
            return state.map((post) => post.id === action.id ? { 
            ...post, editing: !post.editing } 
            : post)
        case 'UPDATE':
            return state.map((post) => {
                if (post.id === action.id) {
                    return {
                        ...post,
                        title: action.data.newTitle,
                        message: action.data.newMessage,
                        editing: !post.editing }
                } else return post ;
            })
        default:
            return state;
        }
}


 const title = 'titulo1';
 const message = 'mensaje1';
 const data = {
  id: new Date(),
  title: title,
  message: message,
  editing: false
 }
 $("#myid").text( data ) 
 
 const store = createStore(postReducer);
 
 let i = 0;
 
 store.subscribe ( () =>
       
        $("#myid").text( String(i) )  
 //alert('hi');
 )
 i = 1;
 
 const add = store.dispatch( { type: 'ADD_POST', data } );
 
 $("#myid").text( store.getState().title[0] ) 
 
  add()
 
 /*
 const func = store.subscribe ( () =>
 $("#myid").text( 'hi' ) 
 //alert('hi');
 )
 */
 //func();
 
 const f2 = (state = [], action) => {
     alert('hi peru')
     
 
 }

f2()
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>

akash1

jquery

<!DOCTYPE html>
<html>
<head>
<style>
.myclass * { 
    display: block;
    border: 2px solid blue;
    color: red;
    padding: 5px;
    margin:10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('ol','this').css({"color": "maroon", "border": "5px solid maroon"});
});
</script>
</head>

<body class="myclass">body
  <div style="width:500px;">div
    <ol>ol - This is the third ancestor 
    <ol>ol - This is the second ancestor
      <li>li - This is the direct parent element
        <span>demo</span>
        <span class="one">demo - using class selector with closest() method</span>
      </li>
    </ol>
    </ol>   
  </div>
</body>

test

jquery

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js"></script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

/* * jquery-countdown plugin * * Copyright (c) 2009 Martin Conte Mac Donell <[email protected]> * Dual licensed under the MIT and GPL licenses. * https://docs.jquery.com/License * */ // Draw digits in given container var createDigits = functio

jquery

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>

[jsTree] create node dynamic

jquery

<!DOCTYPE html>
<!--
[homepage]
  https://www.jstree.com/
[reference] 
  https://mkil.tistory.com/436?category=541779
-->
<html>
<head>
<title>jstree</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>

<script>
$(function() {
  var jsondata1;
  jsondata1 =
  [
    {
      "id": "1",
      "parent": "#",
      "text": "1 node"
    },
    {
      "id": "2",
      "parent": "#",
      "text": "2 node"
    },
    {
      "id": "3",
      "parent": "#",
      "text": "3 node"
    },
    {
      "id": "2-1",
      "parent": "2",
      "text": "2-1 node"
    },
    {
      "id": "2-2",
      "parent": "2",
      "text": "2-2 node"
    },
    {
      "id": "2-3",
      "parent": "2",
      "text": "2-3 node"
    },
    {
      "id": "2-2-1",
      "parent": "2-2",
      "text": "2-2-1 node"
    }
  ]
  
  $('#jstree1').jstree({ 
      //"plugins" : [ "wholerow", "checkbox", "changed" ],
    'core' : {
      "check_callback": true,
      'data' : jsondata1
    }
  });
  
  $('#jstree1')
    // listen for event
    .on('changed.jstree', function(e, data) {
      
      var i, j, r = [];
      //선택한 노드 배열
      for (i = 0, j = data.selected.length; i < j; i++) {
        r.push(data.instance.get_node(data.selected[i]).id);
      }
      
      //노드 opened
      var opened=$("#jstree1").jstree('get_node', r[0]).state.opened;  
      if (opened){
        //node close
        $('#jstree1').jstree("close_node","#" + r[0]);
      }
      else{
        //node open
        $('#jstree1').jstree("open_node","#" + r[0]);
      }
      
      var str;
      str = 'Selected : ' + r.join(', ');
      str = str + '<br>' + 'opened : ' + r[0] + '=' + opened;
      $('#divRst1').append(str);
  });

  $('#jstree1').on({
    //triggered after all nodes are finished loading
    'ready.jstree': function (e, data) {
      $('#divRst1').append('<br>' + 'ready.jstree');
    },
    //triggered when a node is created
    'create_node.jstree': function(e, data) {
      $('#divRst1').append('<br>' + 'create_node.jstree');
    }
  });
  
  $('#btnCreate').click(function() {
    //create_node ([par, node, pos, callback, is_loaded])
    // * "check_callback": true 로 되어 있어야 node create가 가능함.
    //par : the parent node (to create a root node use either "#" (string) or null)
    //node : the data for the new node (a valid JSON object, or a simple string with the name)
    //pos : the index at which to insert the node, "first" and "last" are also supported, default is "last"
    //callback : a function to be called once the node is created
    //is_loaded : internal argument indicating if the parent node was succesfully loaded
    $('#jstree1').jstree().create_node('#', {
      "id": "4",
      "text": "4 node"
    }, "last", function() {
      $('#divRst1').append('<br>' + "Parent created");
    });

    $('#jstree1').jstree().create_node('1', {
      "id": "c3",
      "text": "Child 3"
    }, "last", function() {
      $('#divRst1').append('<br>' + "Child created");
    });

    $('#jstree1').jstree('create_node', 'p3', {
      "id": "c4",
      "text": "Child 4"
    }, "last", function() {
      $('#divRst1').append('<br>' + "Child created");
    });
    
  });  
});

// When the document is ready
$(document).ready(function() {
  $('#divRst1').append('ready');
});
</script>

</head>
<body>
<div style="margin: 0px 0px 0px 0px; padding:10px 10px 10px 10px;border: 1px ridge #bcbcbc;background-color:skyblue">  
* jstree
<div id="jstree1"></div>
<div id="divRst1"></div>
<button id="btnCreate">create node</button>
</div>
</body>
</html>

[jsTree] ê¸°ë³¸ ìƒ˜í”Œ

jquery

<!DOCTYPE html>
<html>
<head>
<title>jstree</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<script>
$(function() {
  var jsondata1;
  var jsondata2;
  jsondata1 = [
         { "id" : "ajson1", "text" : "Simple root node"},
         { "id" : "ajson2", "text" : "Simple root node", 
                                "children":[{"id":"2-1", "text":"2-1 노드"}, 
                                          {"id":"2-2", "text":"2-2 노드", "state":{"opened":true, "selected":true}}, 
                                          {"id":"2-3", "text":"2-3 노드"}]},
         { "id" : "ajson3", "text" : "Simple root node",
                                "children":[{"id":"3-1", "text":"3-1 노드"}, 
                                          {"id":"3-2", "text":"3-2 노드"}, 
                                          {"id":"3-3", "text":"3-3 노드"}]}
  ]
  
  jsondata2 = [
         { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
         { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
         { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
         { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }
  ]

  $('#jstree1').jstree({ 
      "plugins" : [ "wholerow", "checkbox", "changed" ],
      'core' : {
      'data' : [
         { "id" : "ajson1", "text" : "Simple root node"},
         { "id" : "ajson2", "text" : "Simple root node", 
                                "children":[{"id":"2-1", "text":"2-1 노드"}, 
                                          {"id":"2-2", "text":"2-2 노드", "state":{"opened":true, "selected":true}}, 
                                          {"id":"2-3", "text":"2-3 노드"}]},
         { "id" : "ajson3", "text" : "Simple root node",
                                "children":[{"id":"3-1", "text":"3-1 노드"}, 
                                          {"id":"3-2", "text":"3-2 노드"}, 
                                          {"id":"3-3", "text":"3-3 노드"}]}
      ]
    }
  });

  $('#jstree2').jstree({ 
      "plugins" : [ "wholerow", "checkbox", "changed" ],
      'core' : {
      'data' : jsondata2
    }
  });
  
  $('#jstree2')
    // listen for event
    .on('changed.jstree', function(e, data) {
      var i, j, r = [];
      for (i = 0, j = data.selected.length; i < j; i++) {
        r.push(data.instance.get_node(data.selected[i]).id);
      }
      $('#event_result').html('Selected: ' + r.join(', '));
  });  
});

$(document).ready(function() {

    
});
</script>

</head>
<body>
jstree1  
<div id="jstree1"></div>
<p>
jstree2
<div id="jstree2"></div>
<div id="event_result"></div>
</body>
</html>

How to place two divs next to each other in HTML

jquery

<!DOCTYPE html>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div style="width: 100px; float:left; height:100px; background:gray; margin:10px">
First DIV
</div>
<div style="width: 100px; float:left; height:100px; background:yellow; margin:10px">
Second DIV
<p align="left">
</div>
</p>
</body>
</html>

show hide search

jquery

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
       //$('[data-slide="0"]').addClass('demo');
       $("#mytxt").on("blur", function(){
           $("p").each(function(){
               alert($(this).html().toLowerCase().indexOf($("#mytxt").val()));
               if($(this).html().toLowerCase().indexOf($("#mytxt").val())>=0)
               {
                   $(this).addClass('show');
               } else {
                   $(this).addClass('hide');
               }
               
           });
       });
    });
</script>
<style>
.demo {
    font-size: 150%;
    color: red;
}
.hide {
    
    display: none;
}

.show {
    display: block;
}
</style>
</head>
<body>
<input type="textbox" id="mytxt">
<p data-slide="0">Rocky</p>
<p data-slide="1">Amit</p>
<p data-slide="2">John</p>

</body>
</html>

Follow

Newsletter