Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Web Development Articles
Page 701 of 801
Refresh page after clearing all form fields in jQuery?
To refresh page, use the location.reload() in JavaScript. The sample JavaScript code is as follows −Example Document UserName: Password: Refresh Page $('#RefreshPage').click(function() { location.reload(); }); To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.OutputThis will produce the following output −After filling the form, the snapshot is as follows −When you click the button “Refresh Page”, the page will refresh and the following output is visible −
Read MorePlace an H1 element and its text at a particular index in jQuery
To set an element and it’s text, use the text() method in jQuery. With that, use the :nth-child selector to place it at a particular position. Following is the code −Example Document JavaScript MySQL MongoDB Java C# $('h1:nth-child(4)').text("Python"); To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.OutputThis will produce the following output −
Read MorejQuery .val change doesn't change input value?
For this, you need to use attr(). The attr() method can be used to either fetch the value of an attribute from the first element in the matched set or set attribute values onto all matched elements.Following is the JavaScript code −Example Document $('#myURL').attr('value', 'http://www.facebook.com'); To run the above program, just save the file name anyName.html(index.html) and right click on the file and select the option open with live server in VSCode Editor.OutputLook at the above sample output the URL has been changed from ...
Read MoreAdding options to a using jQuery?
To add options to a , you need to use append(). Following is the JavaScript code −Example Document Book TV var mySelection = new Option("Mobile", "Samsung Mobile"); $(mySelection).html("Samsung Mobile"); $("#selectCategory").append(mySelection); To run the above program, save the file name anyName.html(index.html) and right-click on the file and select the option open with live server in VS Code editor.Output
Read MoreHow to create a responsive website with Bootstrap 4?
To create a responsive website with Bootstrap 4, the code is as follows −Example Bootstrap 4 Website Example body{ height: 100vh; } Website ⇅ Logo Link Link Link Headline 1 Published in January Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perferendis hic quas praesentium quod totam atque dignissimos nobis numquam consequuntur? Headline 2 Published in march Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam doloribus incidunt voluptatum labore dolorem voluptate iure dicta, dolorum quis maiores. Copyright © Website OutputThe above code will produce the following output −On resizing the screen −
Read MorejQuery Misc param() Method
The param() method in jQuery is used to create a serialized representation of an array or object.SyntaxThe syntax is as follows −$.param(obj, val)Above, obj is the object to serialize, whereas Val specifies whether or not to use the traditional style of param serialization.ExampleLet us now see an example to implement the jQuery param() method− $(document).ready(function(){ ob = new Object(); ob.stdid = "S01"; ob.roll = 3; $("button").click(function(){ $("p").text($.param(ob)); }); }); Student Details Serialized Representation OutputThis will produce the following output−Click on the button to get serialized representation−
Read MorejQuery dequeue() with Examples
The dequeue() method in jQuery is used to remove the next function from the queue and then execute the function.SyntaxThe syntax is as follows −$(selector).dequeue(queue)Above, the queue is the name of the queue.ExampleLet us now see an example to implement the jQuery dequeue() method − $(document).ready(function(){ $("button").click(function(){ var div = $("div"); div.animate({height: 250}, "slow"); div.animate({left: "+=200", top: "+=100" }, "slow"); div.queue(function(){ div.dequeue(); }); ...
Read MorejQuery hide() with Examples
The hide() method in jQuery is used to hide selected elements.SyntaxThe syntax is as follows −$(selector).hide(speed, easing, callback)Above, the parameter speed is the speed of the hide effect, whereas easing is the speed of the element in different points of the animation. The callback function is a function that executes after hide() method completes.ExampleLet us now see an example to implement the jQuery hide() method − $(document).ready(function(){ $(".btnhide").click(function(){ $("p").hide(); }); $(".btnshow").click(function(){ $("p").show(); }); }); ...
Read MorejQuery data() with Examples
The data() method in jQuery is used to attach data to or gets data from selected elements.SyntaxThe syntax is as follows −$(selector).data(name) $(selector).data(name, value)Above, the name is the name of data to retrieve for the 1st syntax.For the 2nd syntax, the name is the name of data to set, whereas value is the value of data to set.ExampleLet us now see an example to implement the jQuery data() method − $(document).ready(function(){ $(".button1").click(function(){ $("div").data("student", "Jack Sparrow"); alert("Student Name = " +$("div").data("student")); }); ...
Read MorejQuery Traversing Siblings
With jQuery, you can easily find siblings of an element using the following methods: next(), nextAll(), prev(), prevAll(), siblings(), etc. Let us see some of them traverse siblings−next() methodThe next() method is used to return the next sibling element of the selected element. Let us see an example−Example div { width:600px; } .demo * { display: block; border: 2px solid orange; color: blue; padding: 10px; margin: 10px; } $(document).ready(function(){ $("h3").next().css({"color": "gray", "border": "3px dashed blue"}); }); parent sibling sibling ...
Read More