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
Front End Technology Articles
Page 592 of 652
jQuery 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 MoreHTML DOM TouchEvent targetTouches Property
The HTML DOM TouchEvent targetTouches property returns a TouchList object corresponding to a list of all contact points triggered on a touch surface.NOTE: If a touch is triggered on the specified node or any of its child nodes then the following touches will only count if they are also triggered on the same node.Following is the syntax −Returning TouchList objectevent.targetTouchesNote: We ran Touch event examples on Online HTML Editors accessed on Mobile or systems with touch access. This is done so that we can perform touch operations like touch the screen for 2 seconds.Let us see an example of TouchEvent ...
Read MoreMake a group of buttons span the entire width of the screen with Bootstrap
To make a group of buttons span entire width of the screen, use the .btn-group-justified.You can try to run the following code to implement the .btn-group-justified class −Example Bootstrap Example The following are the car brands: BMW Audi Jeep Datsun Toyota The following are FMCG: ITC Limited Colgate-Palmolive Nestle Britannia Industries Limited
Read MoreCreate a button look like a link with Bootstrap
Use the .btn-link class in Bootstrap to create a button look like a link.You can try to run the following code to implement a .btn-link classExample Bootstrap Example The following are FMCG companies: ITC Limited Colgate-Palmolive Nestle Britannia Industries Limited
Read MoreSet a container that spans the full width of the screen with Bootstrap
Use the .container-fluid class in Bootstrap to set a container that spans the full width of the screen.You can try to run the following code to implement the container-fluid classExample Bootstrap Example Container fluid Normal width Width is 75% Width is 50% Width is 25%
Read MoreHow to validate email using jQuery?
To validate email using jQuery, use the regex pattern. You can try to run the following code to learn how to validate email using jQuery −Example $(document).ready(function() { $('.error').hide(); $('#submit').click(function(){ var name = $('#name').val(); var email = $('#email').val(); if(name== ''){ $('#name').next().show(); return false; } if(email== ''){ $('#email').next().show(); ...
Read MoreHow to iterate over arrays and objects in jQuery?
To iterate over arrays and objects in jQuery, use the jQuery forEach() loop. You can try to run the following code to learn how to iterate over arrays and objects −Example $(document).ready(function(){ $("#button1").click(function(){ var arr = [{subject: "Maths", id:3}, {subject: "History", id:7}]; arr.forEach(function(el, index) { alert(el.id+" "+el.subject); }); }); }); Result
Read MoreWhere do we use $.extend() method in jQuery?
The jQuery.extend() method is used to merge contents of two or more objects together. The object is merged into the first object. You can try to run the following code to learn how to use extend() method −Example $(document).ready(function() { $("#button1").click(function() { var obj1 = { maths: 60, history: {pages: 150,price: 400,lessons: 30}, science: 120 }; var obj2 = { history: { price: 150, lessons: 24 }, economics: 250 }; $.extend(true, obj1, obj2); $("#demo").append(JSON.stringify(obj1)); }); }); Result
Read MoreWhat is the difference between jQuery.animate() and jQuery.hide()?
jQuery animate() The animate( ) method performs a custom animation of a set of CSS properties. Here is the description of all the parameters used by this method − params − A map of CSS properties that the animation will move toward. duration − This is optional parameter representing how long the animation will run. easing − This is optional parameter representing which easing function to use for the transition. callback − This is optional parameter representing a function to call once the animation is complete. You can try to run the following code to learn how to ...
Read More