Home
Search results “Jquery css style value”
jQuery video tutorial 10 - jQuery CSS Method
 
11:07
jQuery CSS() Method: The jQuery CSS() method is used to set one or more CSS style(s) to the selected HTML element(s). It is also used to get the value of a CSS style applied to the selected HTML element(s). Setting the single CSS style or property: Syntax: $(selector).css(“css-property”,”value”); It helps us to select any html element(s) targeted by the given selector and apply the given CSS property. Ex: $(“#firstp”).css(“background-color”,”red”); It selects any html element(s) whose id attribute value is set to firstp and applies the CSS property background color to red . Setting multiple CSS styles or properties: Syntax: $(selector).css({“css-property1”:”value1”,” css-property2”:”value2”,….}); It helps us to select any html element(s) targeted by the given selector and apply the given set of CSS properties. Ex: $(“#firstp”).css({“background-color”:”green”,”color”:”white”}); It selects any html element(s) whose id attribute value is set to firstp and applies the CSS properties background color green and text color white . Getting the value of a single CSS style or property: Syntax: $(selector).css(“css property”); It helps us to select any html element(s) targeted by the given selector and return the value of a given CSS property. Ex: alert($(“#firstp”).css(“background-color”)); It selects any html element(s) whose id attribute value is set to firstp and returns the value of background-color CSS property. The current implementation of the CSS() method in jQuery allows us to set multiple CSS properties to the selected HTML element(s), but only allows us to get one CSS property at a time. ======================================================== Follow the link for next video: https://youtu.be/HpRdrhCq158 Follow the link for previous video: https://youtu.be/UvMuWgBzIHc ========= For more benefits & Be up to date =================== Subscribe to the channel: https://www.youtube.com/chidrestechtu... Like the Facebook fan page: https://www.facebook.com/ManjunathChidre Visit to Chidre's Tech Tutorials website: http://www.chidrestechtutorials.com ========================================================
jQuery attribute selector
 
08:17
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-attribute-selector.html In this video we will discuss selecting elements 1. That have specified attribute 2. That have specified attribute values Syntax : $('[attribute]') $('[attribute="value"]') $('[title]') // Selects all elements that have title attribute $('div[title]') // Selects all div elements that have title attribute $('[title="divTitle"]') // Selects all elements that have title attribute value - divTitle $('div[title="divTitle"]') // Selects all div elements that have title attribute value - divTitle Selects all elements with title attribute and sets 5px solid red border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('[title]').css('border', '5px solid red'); }); [/script] [/head] [body] [div title="div1Title"] DIV 1 [/div] [br /] [div title="div2Title"] DIV 2 [/div] [p title="pTitle"] This is a paragraph [/p] [span title="div1Title"] SAPN 1 [/span] [br /][br /] [span] SPAN 2 [/span] [/body] [/html] Selects all div elements with title attribute and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('div[title]').css('border', '5px solid red'); }); [/script] Selects all elements with title attribute value - div1Title, and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('[title="div1Title"]').css('border', '5px solid red'); }); [/script] Selects all div elements with title attribute value - div1Title, and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('div[title="div1Title"]').css('border', '5px solid red'); }); [/script] Selects all div elements with both title and style attributes, and sets 5px solid black border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('div[title][style]').css('border', '5px solid black'); }); [/script] [/head] [body] [div title="divTitle" style="background-color:red"] Red DIV [/div] [br /] [div title="divTitle" style="background-color:green"] Green DIV [/div] [br /] [div title="divTitle"] Normal Div [/div] [br /] [div] Normal Div without any attributes [/div] [/body] [/html] Selects all div elements with title attribute value - divTitle, and style attribute value - background-color:red, and sets 5px solid black border [script type="text/javascript"] $(document).ready(function () { $('div[title="divTitle"][style="background-color:red"]').css('border', '5px solid black'); }); [/script] Selects all div elements with either title or style attributes, and sets 5px solid black border [script type="text/javascript"] $(document).ready(function () { $('div[title],[style]').css('border', '5px solid black'); }); [/script]
Views: 102448 kudvenkat
jQuery attribute value selector
 
08:48
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-attribute-value-selector.html In this video we will discuss Attribute Equals Selector [name="value"] Attribute Not Equal Selector [name!="value"] Attribute Contains Selector [name*="value"] Attribute Contains Word Selector [name~="value"] Attribute Contains Prefix Selector [name|="value"] Attribute Starts With Selector [name^="value"] Attribute Ends With Selector [name$="value"] This is continuation to Part 7, please watch Part 7 before proceeding. $('[title="div1Title"]') // Selects all elements that have title attribute value equal to div1Title $('[title!="div1Title"]') // Selects all elements that have title attribute value not equal to div1Title $('[title*="Title"]') // Selects all elements that have title attribute value containing the given substring - Title $('[title~="mySpan"]') // Selects all elements that have title attribute value containing the given word - mySpan, delimited by spaces $('[title|="myTitle"]') // Selects all elements that have title attribute value equal to myTitle or starting with myTitle followed by a hyphen (-) $('[title^="div"]') // Selects all elements that have title attribute value starting with div $('[title$="Heading"]') // Selects all elements that have title attribute value ending with Heading Selects all elements that have title attribute value equal to div1Title and sets 5px solid red border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('[title="div1Title"]').css('border', '5px solid red'); }); [/script] [/head] [body] [div title="div1Title"] DIV 1 [/div] [br /] [div title="div2Title"] DIV 2 [/div] [p title="myTitle-paragraph"] This is a paragraph [/p] [p title="myTitleHeading"] This is a paragraph [/p] [span title="div1Title"] SAPN 1 [/span] [br /][br /] [span title="mySpan Heading"] SPAN 2 [/span] [/body] [/html] Selects all div elements that have title attribute value not equal to div1Title and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('div[title!="div1Title"]').css('border', '5px solid red'); }); [/script] THIS IS $('div[title!="div1Title"]').css('border', '5px solid red'); EQUIVALENT TO $('div:not([title="div1Title"])').css('border', '5px solid red'); Selects all elements that have title attribute value containing the given substring - Title, and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('[title*="Title"]').css('border', '5px solid red'); }); [/script] Selects all elements that have title attribute value containing the given word - mySpan, delimited by spaces, and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('[title~="mySpan"]').css('border', '5px solid red'); }); [/script] Selects all elements that have title attribute value equal to myTitle or starting with myTitle followed by a hyphen (-) and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('[title|="myTitle"]').css('border', '5px solid red'); }); [/script] Selects all elements that have title attribute value starting with div and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('[title^="div"]').css('border', '5px solid red'); }); [/script] Selects all elements that have title attribute value ending with Heading and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('[title$="Heading"]').css('border', '5px solid red'); }); [/script]
Views: 86753 kudvenkat
jQuery tutorial in Hindi Part 3: jQuery CSS Tutorial in Hindi | jQuery Multiple CSS Methods
 
11:42
Welcome all, we will see the jQuery CSS Tutorial in Hindi and How to change CSS using jQuery. jQuery css() Method The css() method sets or returns one or more style properties for the selected elements. Set Multiple CSS Properties To set multiple CSS properties, use the following syntax: css({"propertyname":"value","propertyname":"value",...}); #jquerycss
Views: 2915 Thapa Technical
jQuery CSS - Custom File Input
 
12:52
This tutorial is about " How to create a custom file input using CSS and jQuery " + some added functionality after the user selects some file, hope you guys will like this tutorial. Check out t-vac products : https://gumroad.com/akshayejh
Views: 13921 TVAC Studio
The jQuery css Function
 
01:01
Using this function we can get the value of the CSS property we specify. Using this function it is also possible to set a value for a specific CSS property.
Views: 62 life michael
jQuery #id selector
 
10:53
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-id-selector.html In this video we will discuss 1. What are jQuery selectors 2. Different selectors in jQuery 3. #id selector in jquery What are jQuery selectors One of the most important concept in jQuery is selectors. jQuery selectors allow you to select and manipulate HTML elements. Different selectors in jQuery jQuery selectors allow you to select html elements in the DOM by 1. Element ID 2. Element Tag Name 3. Element Class Name 4. Element attribute 5. Element Attribute values and many more Id selector in jquery To find an HTML element by ID, use the jQuery #id selector Example : The following example finds button with ID button1 and attaches the click event handler. [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('#button1').click(function () { alert('jQuery Tuorial'); }); }); [/script] [/head] [body] [input id="button1" type="button" value="Click Me" /] [/body] [/html] Changes the background colour of the button to yellow $(document).ready(function () { $('#button1').css('background-color', 'yellow'); }); Important points to remember about jQuery #id selector 1. jQuery #id selector uses the JavaScript document.getElementById() function 2. jQuery #id selector is the most efficient among all jQuery selectors. If you know the id of an element that you want to find, then always use the #id selector. 3. HTML element IDs must be unique on the page. jQuery #id selector returns only the first element, if you have 2 or more elements with the same ID. [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('#button1').css('background-Color', 'yellow'); }); [/script] [/head] [body] [input id="button1" type="button" value="Click Me" /] [input id="button1" type="button" value="Click Button" /] [/body] [/html] 4. JavaScript's document.getElementById() function throws an error if the element with the given id is not found, where as jQuery #id selector will not throw an error. To check if an element is returned by the #id selector use length property. [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { if ($('#button1').length ] 0) { alert('Element found') } else { alert('Element not found') } }); [/script] [/head] [body] [input id="button1" type="button" value="Click Me" /] [/body] [/html] 5. JavaScript's document.getElementById() and jQuery(#id) selector are not the same. document.getElementById() returns a raw DOM object where as jQuery('#id') selector returns a jQuery object that wraps the DOM object and provides jQuery methods. This is the reason you are able to call jQuery methods like css(), click() on the object returned by jQuery. To get the underlying DOM object from a jQuery object write $('#id')[0] 6. document.getElementById() is faster than jQuery('#id') selector. Use document.getElementById() over jQuery('#id') selector unless you need the extra functionality provided by the jQuery object.
Views: 156032 kudvenkat
jQuery add or remove class
 
15:46
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-add-or-remove-class.html In this video we will discuss 1. How to check if an element has a css class 2. How to add or remove css classes 3. How to toggle css classes hasClass - Returns true if an element has the specified class otherwise false addClass - Adds one or more specified classes. To add multiple classes separate them with a space. removeClass - Removes one or multiple or all classes. To remove multiple classes separate them with a space. To remove all classes, don't specify any class name. toggleClass - Toggles one or more specified classes. If the element has the specified class then it is removed, if the class is not present then it is added. Replace < with LESSTHAN symbol and > with GREATERTHAN symbol <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <style> .boldClass { font-weight: bold; } .italicsClass { font-style: italic; } .colorClass { color: red; } </style> <script type="text/javascript"> $(document).ready(function () { $('#btn1').click(function () { $('p').addClass('colorClass'); }); $('#btn2').click(function () { $('p').removeClass('colorClass'); }); $('#btn3').click(function () { $('p').addClass('colorClass italicsClass'); }); $('#btn4').click(function () { $('p').removeClass('colorClass italicsClass'); }); $('#btn5').click(function () { $('p').addClass('colorClass italicsClass boldClass'); }); $('#btn6').click(function () { $('p').removeClass(); }); }); </script> </head> <body style="font-family:Arial"> <p>Pragim Technologies</p> <table> <tr> <td> <input id="btn1" style="width:250px" type="button" value="Add Color Class" /> </td> <td> <input id="btn2" style="width:250px" type="button" value="Remove Color Class" /> </td> </tr> <tr> <td> <input id="btn3" style="width:250px" type="button" value="Add Color and Italics Classes" /> </td> <td> <input id="btn4" style="width:250px" type="button" value="Remove Color and Italics Classes" /> </td> </tr> <tr> <td> <input id="btn5" style="width:250px" type="button" value="Add Color, Italics & Bold Classes" /> </td> <td> <input id="btn6" style="width:250px" type="button" value="Remove All Classes" /> </td> </tr> </table> </body> </html>
Views: 49202 kudvenkat
jQuery Tutorial for Beginners #13 - CSS with jQuery
 
06:41
Yo class, in this jQuery tutorial for beginners, we'll take a look at how we can manipulate the CSS of elements on a web page. We can use the CSS method to either check the value of a CSS property or set the value of a CSS property. We can also pass through an object to the CSS method in order to change multiple CSS properties at once. SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 6259 The Net Ninja
Animated Circular Progress Bar - jQuery Circular progress bar With Number Counter - Plugin Tutorials
 
08:53
Plugin Url : http://www.jqueryscript.net/loading/jQuery-Circular-Progress-Bar-With-Text-Counter.html Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Views: 44568 Online Tutorials
jQuery selected selector
 
07:41
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-selected-selector.html In this video we will discuss jQuery :selected selector. To select all checked checkboxes or radio buttons, we use :checked selector. To select all selected options of a select element use :selected selector. How to get selected option from single select dropdown in jquery : We want to get the selected option text and value Replace < with LESSTHAN symbol and > with GREATERTHAN symbol. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#selectCountries').change(function () { var selectedOption = $('#selectCountries option:selected'); $('#divResult').html('Value = ' + selectedOption.val() + ', Text = ' + selectedOption.text()); }); }); </script> </head> <body style="font-family:Arial"> Country: <select id="selectCountries"> <option selected="selected" value="USA">United States</option> <option value="IND">India</option> <option value="UK">United Kingdom</option> <option value="CA">Canada</option> <option value="AU">Australia</option> </select> <br /><br /> <div id="divResult"></div> </body> </html> How to get all selected options from multi select dropdown in jquery : We want to get all the selected options text and value. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#selectCountries').change(function () { var selectedOptions = $('#selectCountries option:selected'); if (selectedOptions.length > 0) { var resultString = ''; selectedOptions.each(function () { resultString += 'Value = ' + $(this).val() + ', Text = ' + $(this).text() + '<br/>'; }); $('#divResult').html(resultString); } }); }); </script> </head> <body style="font-family:Arial"> <select id="selectCountries" multiple="multiple"> <option selected="selected" value="USA">United States</option> <option value="IND">India</option> <option value="UK">United Kingdom</option> <option value="CA">Canada</option> <option value="AU">Australia</option> </select> <br /><br /> <div id="divResult"></div> </body> </html> Please note : Hold down the CTRL key, to select more than one item.
Views: 77831 kudvenkat
Move Placeholder To Top on Focus And While Typing - Pure CSS Tutorial - No Javascript
 
14:57
Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Views: 28577 Online Tutorials
Dropdown Button onClick with Html, CSS and Javascript - Simple jQuery Tutorial For Beginners
 
08:25
Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Skylike - Dawn Link: https://youtu.be/Jg9nDEtqWV0
Views: 13137 Online Tutorials
jQuery 7 GET TEXT HTML VALUE ATTRIBUTE IN HINDI
 
18:05
Buy HTML5,CSS3,jQuery,JavaScript books (affiliate): HTML 5 Black Book (Covers CSS3, JavaScript, XML, XHTML, AJAX, PHP, jQuery) https://amzn.to/2MMlVfi HTML & CSS: The Complete Reference https://amzn.to/2PXwgmu Web Design with HTML, CSS, JavaScript and jQuery https://amzn.to/2NdfGQY HTML and CSS: Design and Build Websites https://amzn.to/2NF75DP Learning PHP, MySQL & JavaScript with jQuery, CSS & HTML5 https://amzn.to/2CkbBXk HTML5 : Up And Running- Dive into the Future of Web Development https://amzn.to/2PZz0ji HTML 5 Foundations https://amzn.to/2PwXDmt HTML5 & CSS3 for the Real World https://amzn.to/2NgcuV6 Unraveling Html5, Css3, and Javascript https://amzn.to/2C9Nudw HTML5 and CSS3 Transition, Transformation, and Animation (Open Source) https://amzn.to/2Ckca3o Responsive Web Design with HTML5 and CSS3 https://amzn.to/2PXnAwt Single Page Web Applications: JavaScript end-to-end https://amzn.to/2N8W7JD ------------------------------------- jQuery 7 GET TEXT HTML VALUE ATTRIBUTE IN HINDI
Views: 1194 LearnEveryone
JQUERY Tutorial : jQuery attr changing attribute value
 
02:29
Learn attr changing attribute value with CodeSnipr. CodeSnipr will describe with simple English. CodeSnipr also starts video tutorial where beginner can easily understand about this article. Codesnipr also provide copy the code facility also. http://www.codesnipr.com/snippet/588/jQuery-attr-changing-attribu te-value
Views: 622 jqueryguru
JQuery Tutorial 20 - Select Element and change Style using css method
 
03:40
http://www.aspnettutorialonline.blogspot.com http://www.jqueryexamplecode.blogspot.com https://www.facebook.com/Aspnettutorialonline/ http://javainterviewquestionsbook.blogspot.com jquery tutorial step by step jquery tutorial free download jquery tutorial with examples jquery tutorial point jquery tutorial jquery tutorial for beginners with examples jquery tutorial for beginners with examples free download jquery tutorial with examples jquery tutorial for beginners with examples jquery tutorial for beginners with examples free download jquery tutorial for beginners with examples free download for java jquery tutorial for beginners with examples jquery tutorial for beginners with examples step by step jquery tutorial for beginners with examples asp.net pdf jquery tutorial for beginners with examples video free download jquery tutorial for beginners with examples pdf free download for php jquery examples with source code jquery examples with code and demo jquery examples pdf jquery examples with code jquery examples tutorial jquery examples w3schools jquery examples in php dollar jquery jquery learn jquery tutorial jquery function example jquery basics jquery tutorial for beginners learn jquery fast jquery eq jquery tutorial step by step pdf step by step guide to jquery jquery ajax step by step jquery mysql tutorial jquery smarty tutorial jquery codeigniter jquery beginner tutorial jquery examples ajax interview questions and answers types of jquery selectors jquery interview questions and answers for freshers pdf free download jquery interview questions and answers for experienced in java jquery interview questions and answers for experienced in php jquery interview questions and answers for freshers pdf jquery interview questions and answers for 2 years experienced jquery interview questions and answers for experienced
Views: 1166 Ranga Rajesh Kumar
jQuery Element Selector
 
11:54
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-element-selector.html In this video we will discuss jQuery Element Selector, i.e selecting elements by tag name. To select the elements by tag name use jQuery Element Selector Syntax : $(element) $('td') // Selects all td elements $('div a') // Select all anchor elements that are descendants of div element $('div, span, a') // Selects all div, span and anchor elements Alerts the total count of td elements on the page [script type="text/javascript"] $(document).ready(function () { alert($('td').length); }); [/script] Selects all the tr elements on the page and changes their background colour to red [script type="text/javascript"] $(document).ready(function () { $('tr').css('background-Color', 'red'); }); [/script] Alerts the HTML content of the table [script type="text/javascript"] $(document).ready(function () { alert($('table').html()); }); [/script] Alerts the HTML content of each table row [script type="text/javascript"] $(document).ready(function () { $('table tr').each(function () { alert($(this).html()); }); }); [/script] Select and changes the background colour of all the div, span and anchor elements [script type="text/javascript"] $(document).ready(function () { $('div, span, a').css('background-Color', 'yellow'); }); [/script] Select all anchor elements that are descendants of div element [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('div a').css('background-Color', 'yellow'); }); [/script] [/head] [body] [div] [a href="http://pragimtech.com"]PragimTech[/a] [/div] [br /] [a href="http://microsoft.com"]Microsoft[/a] [/body] [/html] Changes the background color of even rows to gray and odd rows to yellow in both the tables. [script type="text/javascript"] $(document).ready(function () { $('tr:even').css('background-Color', 'gray'); $('tr:odd').css('background-Color', 'yellow'); }); [/script] To change the background color of even rows to gray and odd rows to yellow just for one of the table, use #id selector along with element selector. [script type="text/javascript"] $(document).ready(function () { $('#table1 tr:even').css('background-Color', 'gray'); $('#table1 tr:odd').css('background-Color', 'yellow'); }); [/script]
Views: 135551 kudvenkat
jQuery video tutorial 15 - jQuery Combination selector
 
13:40
jQuery Combination selector To select HTML element(s) as specifically as possible, we use jQuery combination selector. Note: For more specific selection of HTML element(s), In CSS it is possible to combine selectors, which is called as CSS combination selector. To combine selectors; we place selectors one beside another without any separator. i.e. selector1selector2… Ex: tagselectorclassselector, tagselectoridselector, tagselectoridselectorattributeselector etc. Syntax of jQuery Combination selector: $(“CSS combination selector”).action(parameters); To the jQuery function, if we pass the CSS combination selector then it is called as jQuery combination selector. I.e. a jQuery function with CSS combination selector as a parameter is called as jQuery combination selector. EX: $(“selector1selector2…”).action(parameters); To the jQuery function, if we pass multiple selectors without any separator then it is called as jQuery combination selector Ex: $("h1.redBorder").css("border","2px bouble red"); It selects any h1 element on the page, whose class attribute value set to redBorder and applies the border of 2px double red $("p.redBorder").css("border","2px solid red"); It selects any p element on the page, whose class attribute value set to redBorder and applies the border of 2px solid red $("p.redBorder[align=right]").css("border","2px dotted red"); It selects any p element on the page, whose class attribute value set to redBorder, aligned right and applies the border of 2px dotted red ======================================================== Follow the link for next video: https://youtu.be/DU5bpUPZ5n8 Follow the link for previous video: https://youtu.be/NaA4H5TVdDk ========= For more benefits & Be up to date =================== Subscribe to the channel: https://www.youtube.com/chidrestechtu... Like the Facebook fan page: https://www.facebook.com/ManjunathChidre Visit to Chidre's Tech Tutorials website: http://www.chidrestechtutorials.com ========================================================
Jquery: How to view and modify css property of a div
 
08:01
This tutorial talks about getting and setting css property of a div using jquery. The tutorial changes the value of background-color. You can change any value of CSS property that you want
Views: 601 WebTecho Tutorials
How To Get HTML Input Values Using jQuery
 
24:16
This tutorial explains how to get input values from text box, radio buttons, and check boxes using jQuery (JavaScript library). Visit www.codersontheblock.com for more tutorials.
Views: 36231 Coders On The Block
jQuery - Styling DOM #06
 
23:34
In this video we will learn to style DOM using jQuery. Tutorial: https://goo.gl/i8Geb7 Subscribe: http://goo.gl/cFA9in Video: https://youtu.be/y5JeOthu6Jg jQuery - Selectors https://youtu.be/aLBzEb3kEpQ jQuery - Chaining Methods https://youtu.be/W2mUxZX7RYs YouTube Playlist: https://www.youtube.com/playlist?list=PLG6ePePp5vvbfbvBuv_Ny2QpkzI4Q4hMu GitHub repository: https://github.com/yusufshakeel/jquery-project HTML Playlist: https://www.youtube.com/watch?v=5gVxlxwBcCU&list=PLG6ePePp5vvYI1n1aFlELPfh9sfGcIHal CSS Playlist: https://www.youtube.com/watch?v=5ueRHotsM3A&list=PLG6ePePp5vvay3bbTde2X36BqUt7osZ3e JavaScript Playlist: https://www.youtube.com/watch?v=6jJHw9YJnQY&list=PLG6ePePp5vvZrPZCp85dssGxQ7QLfujt7 thanks for watching see you in the next video stay happy and keep smiling :-)
Views: 351 Yusuf Shakeel
Change Style Sheet Using Javascript Tutorial CSS Swap Stylesheet
 
04:46
Lesson Code: http://www.developphp.com/video/JavaScript/Change-Style-Sheet-Using-Tutorial-CSS-Swap-Stylesheet Learn to change the entire style of your web page with a click using JavaScript that is targeting the href attribute of your familiar link element using the setAttribute method of JavaScript. DEMO: http://www.adamkhoury.com/demo/js_swap_css_stylesheet/
Views: 42295 Adam Khoury
jQuery disabled selector
 
04:29
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-disabled-selector.html In this video we will discuss 1. jQuery disabled selector 2. jQuery enabled selector 3. Where you can find jquery selectors documentation Selects all disabled elements $(':disabled') Selects all disabled elements and sets a 3px solid red border [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $(':disabled').css('border', '3px solid red'); }); [/script] [/head] [body style="font-family:Arial"] [table] [tr] [td]First Name [/td] [td][input type="text" disabled="disabled" /][/td] [/tr] [tr] [td]Last Name [/td] [td][input type="text" disabled="disabled" /][/td] [/tr] [tr] [td]Email [/td] [td][input type="text" /][/td] [/tr] [tr] [td]Gender [/td] [td] [select id="selectGender" disabled="disabled"] [option value="Male"]Male[/option] [option value="Female"]Female[/option] [/select] [/td] [/tr] [tr] [td]Comments[/td] [td][textarea][/textarea][/td] [/tr] [tr] [td colspan="2"] [input type="submit" value="Submit" disabled="disabled"/] [/td] [/tr] [/table] [/body] [/html] Selects all input elements that are disabled and sets a 3px solid red border [script type="text/javascript"] $(document).ready(function () { $('input:disabled').css('border', '3px solid red'); }); [/script] Selects all input elements with type=text that are disabled and sets a 3px solid red border [script type="text/javascript"] $(document).ready(function () { $('input[type="text"]:disabled').css('border', '3px solid red'); }); [/script] Selects all enabled elements $(':enabled') Selects all enabled textarea elements and sets a 3px solid red border [script type="text/javascript"] $(document).ready(function () { $('textarea:enabled').css('border', '3px solid red'); }); [/script] Where can you find jquery selectors documentation https://api.jquery.com/category/selectors
Views: 54840 kudvenkat
Jquery DOM, Jquery text, html, value and attributes
 
16:59
Jquery DOM, Jquery text, html, and value. Get and set value in jquery, get attribute and set attribute in jquery.
Views: 126 Tech Altum
jquery attribute
 
05:49
Jquery attribute is used to fetch elemnets attribute or property using attr() and change it dynamically in script. This tutorial will show how to fetch attribute value of element using jquery.
Views: 301 Mitul tripathi
Append/Add and Remove HTML Elements: jQuery
 
05:59
http://technotip.com/2021/append-add-and-remove-html-xml-elements-jquery/ Video tutorial to illustrate adding or appending an html element or removing an html element from the web page using jQuery: DOM (Document Object Model) jQuery uses: .append(); and .remove(); functions to accomplish this task. We could use these methods to append string or any other html or XML element and also remove string and other html or XML elements from the document. jQuery Video Tutorial List: http://technotip.com/2514/jquery-tutorial-list/
Views: 35951 Satish B
What is $document ready function in jquery
 
10:24
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/what-is-documentreadyfunction-in-jquery.html In this video we will discuss 1. What is $(document).ready(function() in jquery and when to use it 2. Difference between $(window).load and $(document).ready $(document).ready is a jQuery event. It fires as soon as the DOM is loaded and ready to be manipulated by script. This is the earliest point in the page load process where the script can safely access elements in the page's html dom. This event is fired before all the images, css etc.. are fully loaded. The following example works, because the jquery code that adds the event handler to the button is inside the ready() function, which ensures that the DOM is fully loaded before this piece of code is executed, so the JavaScript can find the button element in the DOM and adds the click event hanlder. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('#button1').click(function () { alert('jQuery Tuorial'); }); }); [/script] [/head] [body] [input id="button1" type="button" value="Click Me" /] [/body] [/html] In the following example, we have removed the ready() method. When you click the button now, you don't get the alert. This is because the jQuery code is present before the button element, so by the time the jQuery code is executed the button element is not loaded into DOM. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $('#button1').click(function () { alert('jQuery Tuorial'); }); [/script] [/head] [body] [input id="button1" type="button" value="Click Me" /] [/body] [/html] To make this example work, you have 2 options 1. Place your jQuery code in $(document).ready function OR 2. Place your script at the bottom of the page just before the closing [/body] element $(window).load event fires when the DOM and all the content on the page (images, css etc) is fully loaded. Since the window load event waits for images, css etc to be fully loaded, this event fires after ready event. The following example proves the above point. When you run the page with the following script, notice that the alert in ready function is displayed before the alert in load function. [script type="text/javascript"] $(window).load(function () { alert('Window loaded'); }); $(document).ready(function () { alert('DOM Loaded and ready'); }); [/script] In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. So ready() is usually the best place to write your JavaScript code. However, in your application there could be scenarios where you should be using $(window).load over $(document).ready. For example, let's say we want to display the actual image dimensions (Height and Width). To get the actual image dimensions, we will have to wait until the image is fully loded, so the jQuery code to get the height and width should be in $(window).load event. Example : If you use $(document).ready() instead of $(window).load() the height and width will be displayed as 0. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(window).load(function (){ $('#div1').html("Height = " + $('#Image1').height() + "[br/]" + "Width = " + $('#Image1').width()) }); [/script] [/head] [body] [div id="div1"][/div] [img src="Chrysanthemum.jpg" id="Image1" /] [/body] [/html]
Views: 218320 kudvenkat
Custom Data Attributes HTML JavaScript CSS Tutorial
 
11:58
Source: http://www.developphp.com/video/JavaScript/Custom-Data-Attributes-HTML-JavaScript-CSS-Tutorial Learn to use custom data attributes. Custom data attributes allow authors to create custom data to apply to their HTML elements when no other attributes make sense to use to store extra data. They help extend the information that html elements can communicate to a program or script. Custom data attributes can be accessed through both JavaScript and CSS.
Views: 25470 Adam Khoury
jQuery case insensitive attribute selector
 
09:03
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-case-insensitive-attribute.html In this video we will discuss, how to write a jQuery case-insensitive attribute value selector. Let us understand this with an example. The following example, only selects DIV 1. This is because jQuery attribute value selector is case-sensitive. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('div[title="DivTitle"]').css('border', '3px solid red'); }); [/script] [/head] [body] [div title="DivTitle"] DIV 1 [/div] [br /] [div title="DIVTITLE"] DIV 2 [/div] [br /] [div title="divtitle"] DIV 3 [/div] [/body] [/html] Use the following code to make the jQuery attribute value selector case-insensitive [script type="text/javascript"] $(document).ready(function () { $('div[title]').filter(function () { return $(this).attr('title').toLowerCase() == 'divtitle'; }).css('border', '3px solid red'); }); [/script] The above script should select all the 3 divs. Now let us look at an example of making attribute contains selector [name*="value"], case-insensitive. The following example, selects only DIV 1 element. This is because the attribute contains selector is case-sensitive. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('div[title*="Div"]').css('border', '3px solid red'); }); [/script] [/head] [body] [div title="DivTitle1"] DIV 1 [/div] [br /] [div title="DIVTITLE2"] DIV 2 [/div] [br /] [div title="divtitle3"] DIV 3 [/div] [/body] [/html] To make attribute contains selector case-insensitive, use filter() method and regular expression as shown below. [script type="text/javascript"] $(document).ready(function () { $('div[title]').filter(function () { return (/Div/i).test($(this).attr('title')); }).css('border', '3px solid red'); }); [/script] OR [script type="text/javascript"] $(document).ready(function () { $('div[title]').filter(function () { return RegExp('Div','i').test($(this).attr('title')); }).css('border', '3px solid red'); }); [/script] The above script should select all the 3 divs. Visual Studio Keyboard Shortcuts Convert Selected Text to Upper Case - CTRL + SHIFT + U Convert Selected Text to Lower Case - CTRL + U
Views: 75716 kudvenkat
jQuery 9 - Selectors - Attribute value selector
 
17:05
jQuery Attribute Value selector: Attribute Equals Selector : [name = “value”]. Attribute Not Equal Selector : [name != “value”]. Attribute Contains Selector : [name *= “value”]. Attribute Contains Word Selector : [name ~= “value”]. Attribute Contains Prefix Selector : [name |= “value”]. Attribute Starts with Selector : [name ^= “value”]. Attribute Ends with Selector : [name $= “value”]. ankpro ankpro training Asp.net MVC C# C sharp Bangalore Rajajinagar Selenium Coded UI Mobile automation testing Mobile testing JQuery JavaScript .Net Components of the .Net framework Hello World Literal Keywords Variable Data types Operators Branching Loops Arrays ArrayList Strings String Builder Structures Enums Functions Classes Inheritance Polymorphism Properties Indexers Events Nested Classes Delegates Anonymous methods Labda expressions Abstract classes Exception Handling Linq Interfaces Extension methods Anonymous types Generics Collections Garbage Collection Reflection Attributes Input and output statements Type casting Partial Methods Partial Classes Boxing and Unboxing Var vs Dynamic vs Object using Static. Auto property initializer. Dictionary Initializer. nameof Expression. New way for Exception filters. await in catch and finally block. Null – Conditional Operator. Expression – Bodied Methods Easily format strings – String interpolation Parameterless constructors in structs. Creating a custom exceptions class.
Views: 174 Ankpro Training
jQuery video tutorial 14 - jQuery id selector
 
05:59
jQuery ID selector : To select html element(s) by their id attribute value, we use jQuery id selector Syntax of jQuery ID selector: $(“CSS ID selector”).action(parameters); To the jQuery function, if we pass the CSS ID selector then it is called as jQuery ID selector I.e. a jQuery function with CSS ID selector as a parameter is called as jQuery ID selector Ex: $("#firstp").css( {"border":"2px solid blue"} ); It selects any HTML element whose id attribute value is set to “firstp” and applies the border of 2px solid blue Note: in CSS hash(#) symbol indicates ID selector and id attribute value should be unique ======================================================== Follow the link for next video: https://youtu.be/l5Y8wADOXBY Follow the link for previous video: https://youtu.be/v5ZE2zi48sQ ========= For more benefits & Be up to date =================== Subscribe to the channel: https://www.youtube.com/chidrestechtu... Like the Facebook fan page: https://www.facebook.com/ManjunathChidre Visit to Chidre's Tech Tutorials website: http://www.chidrestechtutorials.com ========================================================
jquery autocomplete with id and value
 
17:29
#jquery autocomplete with id and value with ajax & without ajax important links https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css https://code.jquery.com/jquery-1.12.4.js https://code.jquery.com/ui/1.12.1/jquery-ui.js
Views: 7390 Rohan kumar
[ jQuery In Arabic ] #10 - Html - Get / Set Elements And Attributes
 
26:18
شرح جلب محتويات العناصر و إعادة تعيينها بواسطة ال jQuery
Views: 24915 Elzero Web School
jQuery class selector
 
10:57
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-class-selector.html In this video we will discuss jQuery class selector i.e selecting elements using their class name Syntax : $('.class') jQuery class selectors uses JavaScript's native getElementsByClassName() function if the browser supports it. $('.small') // Selects all elements with class small $('.small,.big') // Selects all elements with class small or big $('div.small,.big') // Selects div elements with class small and any element with class big Selects all elements with class "small" and sets 5px solid red border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('.small').css('border', '5px solid red'); }); [/script] [/head] [body] [span class="small"] Span 1 [/span] [br /][br /] [div class="small"] Div 1 [/div] [br /] [span class="big"] Span 2 [/span] [p class="big"]This is a paragraph[/p] [/body] [/html] Selects all elements with class "small" or "big" and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('.small, .big').css('border', '5px solid red'); }); [/script] Selects all elements with class "small" and all span elements with class "big" and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('.small, span.big').css('border', '5px solid red'); }); [/script] Selects all elements with class small that are nested in a an element with id=div2 and sets 5px solid red border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('#div2 .small').css('border', '5px solid red'); }); [/script] [/head] [body] [div id="div1" class="small"] DIV 1 [/div] [br /] [div id="div2"] Div 2 [br /] [div class="small"] DIV 3 [/div] [br /] [span class="small"] SPAN [/span] [/div] [/body] [/html] Selects all elements with class small and sets 5px solid red border. Notice div1 has 2 classes - small and big. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('.small').css('border', '5px solid red'); }); [/script] [/head] [body] [div class="small big"] DIV 1 [/div] [br /] [div class="small"] DIV 2 [/div] [/body] [/html] Selects all elements that has both the classes - small and big. There should be no space between the class names. [script type="text/javascript"] $(document).ready(function () { $('.small.big').css('border', '5px solid red'); }); [/script] If you have a space between the two class names then we are trying to find descendants, i.e. find elements with class big that are descendants of an element with class small. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('.small .big').css('border', '5px solid red'); }); [/script] [/head] [body] [div class="small big"] DIV 1 [/div] [br /] [div class="small"] DIV 2 [div class="big"] DIV 3 [/div] [/div] [/body] [/html] Another way to selects all elements that has both the classes - small and big is by using filter method. But this approach is slower because it will first create a list of objects with class "small" and then removes elements that does not have class "big" [script type="text/javascript"] $(document).ready(function () { $('.small').filter('.big').css('border', '5px solid red'); }); [/script]
Views: 105928 kudvenkat
jQuery Tutorial: Changing attribute values dynamically
 
03:03
http://www.frameworktv.com | LearnToProgram is now Framework. Visit and join for free daily videos teaching digital skills like coding and design. SUBSCRIBE TO THE FRAMEWORK CHANNEL http://www.youtube.com/subscription_center?add_user=UC4msOaZNMfPwMe_ztV5jFH SUBSCRIBE TO OUR EMAIL LIST (LEARN FOR FREE!) http://www.frameworktv.com/?src=YOUTUBE VISIT US ON FACEBOOK https://www.facebook.com/frameworkTechnicallySpeaking/ FOLLOW ON TWITTER https://twitter.com/fw_social INSTAGRAM https://www.instagram.com/frameworksocial/
#42 JQuery Animate Effect
 
07:54
Effects in jQuery are implemented using inbuilt methods. In this tutorial we will understand - hide, show, toggle, fadeIn, fadeOut, fadeToggle, slideUp, slideDown, slideToggle effects. The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. Some more inbuilt effects - https://www.w3schools.com/jquery/jquery_ref_effects.asp Video by - Tanmay Sakpal Simple Snippets Channel link - https://www.youtube.com/simplesnippets
Views: 2226 Telusko
jQuery method chaining
 
11:40
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-method-chaining.html In this video we will discuss 1. What is method chaining 2. How method chaining works 3. When will method chaining not work Let us understand this with an example. Consider the following HTML <ul> <li>US</li> <li>India</li> <li>UK</li> <li>Canada</li> <li>Australia</li> </ul> Our jQuery code should do the following 1. Change the color of all the list items to blue 2. All the list items should slide down (animation) 3. All the list items should slide up (animation) 4. Change the title attribute of all the list items to MY TITLE One way to do this is by using the following jQuery code. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('li').css('color','blue'); $('li').slideUp(1000); $('li').slideDown(1000); $('li').attr('title', 'MY TITLE'); }); </script> </head> <body style="font-family:Arial"> <ul> <li>US</li> <li>India</li> <li>UK</li> <li>Canada</li> <li>Australia</li> </ul> </body> </html> Instead the jQuery methods can be chained as shown below. <script type="text/javascript"> $(document).ready(function () { $('li').css('color', 'blue').slideUp(1000).slideDown(1000).attr('title', 'MY TITLE'); }); </script> How does method chaining work 1. $('li') returns a jquery collection object that contains all the elements that match the selector 2. On the collection object css() method is called. This method applies the color to all the elements in the collection and returns the collection again. 3. On the collection that is returned by the css() method, the slideUp() method is called. 4. This process continues until we reach the last method in the chain. When chaining methods like this, the line of code will become quite long and the readability will be lost. To improve the readability of the code you can format chained methods as shown below. <script type="text/javascript"> $(document).ready(function () { $('li') .css('color', 'blue') .slideUp(1000) .slideDown(1000) .attr('title', 'MY TITLE'); }); </script> When will method chaining not work Method chaining will not work if a method in the chain does not return an object. In the example below, text() method returns a string that contains the text of all the list items and not an object. Hence the chaining does not work in this case. <script type="text/javascript"> $(document).ready(function () { $('li') .text() .css('color', 'blue') .slideUp(1000) .slideDown(1000) .attr('title', 'MY TITLE'); }); </script> With the same example, method chaining works, if you use text() method to set the value for the list item. In this case, text() method sets a value for each list item in the jQuery collection object and returns that collection object. Hence the chaining works. <script type="text/javascript"> $(document).ready(function () { $('li') .text('MY VALUE') .css('color', 'blue') .slideUp(1000) .slideDown(1000) .attr('title', 'MY TITLE'); }); </script>
Views: 56432 kudvenkat
jQuery Tutorial | How To Clear Input Type Textbox And Textarea Value
 
07:35
jQuery video tutorials with real time example on how to clear html input form fields input text and textarea values with button click
jQuery each function
 
15:38
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-each-function.html In this video we will discuss 1. Use of jQuery each function 2. How to exit from each function in jQuery 3. Implicit iteration in jQuery 4. Performance considerations when using jquery each function jQuery each function is used to iterate over the items in a collection. For each item in the collection the anonymous function is called. The index of the element and the element itself are passed to the anonymous function. $('li').each(function (index, element) { alert(index + ' : ' + $(element).text()); }); To refer to the current element that we are iterating over you can also use this keyword. $('li').each(function (index) { alert(index + ' : ' + $(this).text()); }); If you don't care about the index and just need the text of the list item, then you can get rid of the index parameter $('li').each(function () { alert($(this).text()); }); Replace < with LESSTHAN symbol and > with GREATERTHAN symbol How to exit from each function in jQuery : To exit from each function, return false. <script type="text/javascript"> $(document).ready(function () { $('li').each(function () { if ($(this).text() == 'UK') { return false; } alert($(this).text()); }); }); </script> Implicit iteration in jQuery : The $('li') selector returns all list item elements. Notice that we are calling the css() jquery function on the jquery collection itself. In this case, css() method implicitly iterates over each element in the entire collection. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('li').css('color', 'red'); }); </script> </head> <body style="font-family:Arial"> <ul> <li>US</li> <li>India</li> <li>UK</li> <li>Canada</li> <li>Australia</li> </ul> </body> </html> There is no need to explicitly iterate over each element in the collection. Most jQuery methods implicitly iterate over the entire collection. <script type="text/javascript"> $(document).ready(function () { $('li').each(function () { $(this).css('color', 'red'); }); }); </script> Performance considerations when using jquery each function <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('li').each(function () { $('#divResult').html($('#divResult').html() + '<br/>' + $(this).text()) }); }); </script> </head> <body style="font-family:Arial"> <ul> <li>US</li> <li>India</li> <li>UK</li> <li>Canada</li> <li>Australia</li> </ul> <div id="divResult"></div> </body> </html> From a performance standpoint, there are 2 problems with the above code. 1. jQuery needs to search the DOM for div element with id = divResult, for each list item in the collection. Since there are 5 list items, jquery searches the DOM 5 times for the same div element with id = divResult. The performance of the above code can be improved by caching the divResult element. 2. The DOM element (div element with id = divResult) is being updated on each iteration. Again this is bad for performance. To improve the performance build a string variable with the required data on each iteration of the loop. Once the loop has completed, update the DOM element with the value that is present in the string varibale. This will ensure that the DOM element is updated only once and this is much better for performance. The following is much better from a performance standpoint. <script type="text/javascript"> $(document).ready(function () { var result = ''; $('li').each(function () { result += '<br/>' + $(this).text(); }); $('#divResult').html(result); }); </script>
Views: 86033 kudvenkat
jquery css select
 
00:11
jQuery css select, css filter
Views: 104 jQuery reference
Autocomplete textbox using jquery and asp net web service
 
13:58
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/06/autocomplete-textbox-using-jquery-and.html In this video we will discuss, how to implement autocomplete textbox using jquery and asp.net web service. Along the way, we also discuss the jquery autocomplete source option and minLength option. jquery autocomplete source option can be set to 1. Array : An array of strings: [ "Choice1", "Choice2" ] OR An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ] The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. 2. String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. Discussed in Part 71. 3. Callback function. This function has two parameters. request object and a response callback function. The term property of the request object contains the value the user typed in the autocomplete textbox and to the response callback function you will have to pass the data to suggest to the user. jquery autocomplete minLength option : The minimum number of characters a user must type before a search is performed. Steps to implement autocomplete textbox in an asp.net webforms application using jQuery and asp.net web service. Stored procedure to retrieve employee names Create proc spGetStudentNames @term nvarchar(50) as Begin Select Name from tblStudents where Name like @term + '%' End WebService (ASMX) to retrieve StudentNames using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Web.Services; namespace Demo { [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] [System.Web.Script.Services.ScriptService] public class StudentService : System.Web.Services.WebService { [WebMethod] public List<string> GetStudentNames(string term) { List<string> listStudentNames = new List<string>(); string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; using (SqlConnection con = new SqlConnection(cs)) { SqlCommand cmd = new SqlCommand("spGetStudentNames", con); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.Add(new SqlParameter() { ParameterName = "@term", Value = term }); con.Open(); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { listStudentNames.Add(rdr["Name"].ToString()); } } return listStudentNames; } } } Download jQuery UI from jqueryui.com. Copy and paste the following files in your project. a) jquery-ui.js b) jquery-ui.css c) images WebForm HTML & jQuery code. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="jquery-1.11.2.js"></script> <script src="jquery-ui.js"></script> <link href="jquery-ui.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function () { $('#txtName').autocomplete({ minLength: 2, source: function (request, response) { $.ajax({ url: 'StudentService.asmx/GetStudentNames', method: 'post', contentType: 'application/json;charset=utf-8', data: JSON.stringify({ term: request.term }), dataType: 'json', success: function (data) { response(data.d); }, error: function (err) { alert(err); } }); } }); }); </script> </head> <body> <form id="form1" runat="server"> Student Name : <asp:TextBox ID="txtName" runat="server"> </asp:TextBox> </form> </body> </html>
Views: 27643 kudvenkat
32 - ( jQuery Tutorial ) jQuery HTML / CSS : [ Get ] = text, html, val, attr
 
08:37
- شرح كيفيه عمل get لعناصر واكواد الـ html وكيفيه التحكم بالـ DoM من خلال اكود الـ jQuery - شرح الـ Method الاتيه : text و html و val و attr
jQuery attribute value selector in Hindi
 
08:26
In this video we will discuss Attribute Equals Selector [name="value"] Attribute Not Equal Selector [name!="value"] Attribute Contains Selector [name*="value"] Attribute Contains Word Selector [name~="value"] Attribute Contains Prefix Selector [name|="value"] Attribute Starts With Selector [name^="value"] Attribute Ends With Selector [name$="value"] $('[title="div1Title"]') // Selects all elements that have title attribute value equal to div1Title $('[title!="div1Title"]') // Selects all elements that have title attribute value not equal to div1Title $('[title*="Title"]') // Selects all elements that have title attribute value containing the given substring - Title $('[title~="mySpan"]') // Selects all elements that have title attribute value containing the given word - mySpan, delimited by spaces $('[title|="myTitle"]') // Selects all elements that have title attribute value equal to myTitle or starting with myTitle followed by a hyphen (-) $('[title^="div"]') // Selects all elements that have title attribute value starting with div $('[title$="Heading"]') // Selects all elements that have title attribute value ending with Heading
Views: 209 Seema Gupta
jquery droppable widget
 
10:37
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-droppable-widget.html In this video we will discuss jQuery droppable widget Let us understand jQuery droppable widget with an example. 1. From the first box, we want to be able to drag and drop countries on to Countries box, and cities on to Cities box 2. If I try to drop a country on to the City box, or a city on to the Country box, it should not be allowed and the element should revert to it's original position To achieve this we are going to make use of both draggable and droppable widgets <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="jquery-1.11.2.js"></script> <script src="jquery-ui.js"></script> <link href="jquery-ui.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function () { $('#source li').draggable({ helper: 'clone', revert: 'invalid' }); $('#divCountries').droppable({ accept: 'li[data-value="country"]', drop: function (event, ui) { $('#countries').append(ui.draggable); } }); $('#divCities').droppable({ accept: 'li[data-value="city"]', drop: function (event, ui) { $('#cities').append(ui.draggable); } }); }); </script> <style> .divClass { border: 3px solid black; font-size: 25px; background-color: lightgray; width: 250px; padding: 5px; display: inline-table; } li { font-size: 20px; } </style> </head> <body style="font-family: Arial"> <form id="form1" runat="server"> <div class="divClass"> Countries & Cities <ul id="source"> <li data-value="country">USA</li> <li data-value="country">India</li> <li data-value="country">UK</li> <li data-value="city">New York</li> <li data-value="city">Chennai</li> <li data-value="city">London</li> </ul> </div> <div class="divClass" id="divCountries"> Countries <ul id="countries"> </ul> </div> <div class="divClass" id="divCities"> Cities <ul id="cities"> </ul> </div> </form> </body> </html>
Views: 17261 kudvenkat
jQuery change event
 
11:11
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-change-event.html In this video we will discuss jQuery change event. change event is fired when an element value changes. All the following elements fire this event 1. input 2. textarea 3. select select, radio buttons and checkboxes fire the change event as soon as a selection is made, where as the other element types wait until they loose focus. For the HTML used in the demo, please refer to my blog using the link below http://csharp-video-tutorials.blogspot.com/2015/04/jquery-change-event.html As soon as the selection in the dropdownlist changes, we want to handle the change event and display the selected value in the div element with id="divResult". In the example below, we are using the id selector, so only the select element change event is handled. $(document).ready(function () { $('#ddlCity').change(function () { var selectedValue = $(this).val(); if (selectedValue == "Select") selectedValue = "Please select city"; $('#divResult').html(selectedValue); }); }); The following code handles the change event of all the input elements (textbox, radio button, checkbox). Notice that in this example we are using the jquery element selector. Change event of select and textarea is not handled. $(document).ready(function () { var result = ''; $('input').change(function () { if (result == '') { result += $(this).val(); } else { result += ', ' + $(this).val(); } $('#divResult').html(result); }); }); The following code handles the change event of all the elements on the page. Notice that in this example we are using the jquery class selector. $(document).ready(function () { var result = ''; $('.inputRequired').change(function () { if (result == '') { result += $(this).val(); } else { result += ', ' + $(this).val(); } $('#divResult').html(result); }); });
Views: 57994 kudvenkat
Simple CSS jQuery Search
 
06:29
Remove default value of a textfield when clicked inside and if left blank and unfocused, show default value again. *** https://www.facebook.com/pradyumn.shrivastava
Views: 1413 SourcewareInfo
Simple Image Slider Using jQuery and CSS in Tamil
 
04:24
jQuery Post Method with PHP and MySQL in Tamil Dependent select box Using jQuery with PHP and MySQL in Tamil Dependent select box Using jQuery with PHP and MySQL in Tamil jQuery JSON parse with PHP and MySQL in Tamil Auto refresh comment using jQuery with PHP and MySQL in Tamil in Tamil Show and Hide Password Text Field in jQuery in Tamil in Tamil Multiple Input Field Validation using jQuery With PHP and MySQL Learn Computer Technology By Tamil Data Table Plugin In jQuery in Website Tamil Live Search Using jQuery with PHP and MySQL in Tamil Digital Clock Using jQuery in Tamil Countdown Timer In jQuery in Tamil Multiple Checkbox Using jquery with PHP and MySQL in Tamil How to use Chosen Plugin in Tamil Limit Text by jQuery in Tamil Read Data From JSON File to HTML Table How To Get Radio Button Value Using jQuery in Tamil How to read Data from XML File to HTML List in Tamil How To Create Simple Accordion Using jQuery In Tamil Live Table Filter Using jQuery in Tamil For Free source code and Free Project Please visit : http://www.tutorjoes.com/ http://www.facebook.com/tutorjoes http://www.youtube.com/tutorjoes
Views: 1121 Tutor Joe's Stanley
How to Inject Custom HTML and CSS into an iFrame
 
14:22
Ever been to a site like JSBin, where you can write HTML, CSS, and JavaScript, and then see the results in a panel to the right? An iframe is how we can accomplish this task.
Views: 102247 Tuts+ Code
Select values of checkbox group with jquery
 
12:22
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/select-values-of-checkbox-group-with.html In this video we will discuss, how to select values of checked checkboxes that are in different groups using jQuery. Along the way, we will also discuss how to pass a variable to jquery selector. If you have just one group of checkboxes on your page, to get all the checked checkboxes you can use $('input[type="checkbox"]:checked'). However, if you have more than one checkbox group, then $('input[type="checkbox"]:checked') is going to select all checked checkboxes from both the checkbox groups. If you prefer to get checked checkboxes from a specific checkbox group, depending on which button you have clicked, you can use $('input[name="skills"]:checked') or $('input[name="cities"]:checked'). This will ensure that the checked checkboxes from only the skills or cities checkbox group are selected. Replace < with LESSTHAN symbol and > with GREATERTHAN symbol. At the moment to get the checked checkboxes values, we are using a button click event. You can also use the click event of the checkbox to do this. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('input[name="skills"]').click(function () { getSelectedCheckBoxes('skills'); }); $('input[name="cities"]').click(function () { getSelectedCheckBoxes('cities'); }); var getSelectedCheckBoxes = function (groupName) { var result = $('input[name="' + groupName + '"]:checked'); if (result.length > 0) { var resultString = result.length + " checkboxe(s) checked<br/>"; result.each(function () { resultString += $(this).val() + "<br/>"; }); $('#div' + groupName).html(resultString); } else { $('#div' + groupName).html("No checkbox checked"); } }; }); </script> </head> <body style="font-family:Arial"> Skills : <input type="checkbox" name="skills" value="JavaScript" />JavaScript <input type="checkbox" name="skills" value="jQuery" />jQuery <input type="checkbox" name="skills" value="C#" />C# <input type="checkbox" name="skills" value="VB" />VB <br /><br /> Preferred Cities : <input type="checkbox" name="cities" value="New York" />New York <input type="checkbox" name="cities" value="New Delhi" />New Delhi <input type="checkbox" name="cities" value="London" />London <br /><br /> Selected Skills:<br /> <div id="divskills"></div> <br /> Selected Cities:<br /> <div id="divcities"></div> </body> </html>
Views: 95525 kudvenkat
Increase decrease font size using jquery
 
07:58
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/05/increase-decrease-font-size-using-jquery.html In this video we will discuss how to increase, decrease and reset font size using jQuery Replace < with LESSTHAN symbol and > with GREATERTHAN symbol <html> <head> <style> .divClass { font-size: 16px; background-color: #E3E3E3; width: 500px; padding: 5px; } </style> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#linkIncrease').click(function () { modifyFontSize('increase'); }); $('#linkDecrease').click(function () { modifyFontSize('decrease'); }); $('#linkReset').click(function () { modifyFontSize('reset'); }) function modifyFontSize(flag) { var divElement = $('#divContent'); var currentFontSize = parseInt(divElement.css('font-size')); if (flag == 'increase') currentFontSize += 3; else if (flag == 'decrease') currentFontSize -= 3; else currentFontSize = 16; divElement.css('font-size', currentFontSize); } }); </script> </head> <body style="font-family:Arial"> Font-Size: <a id="linkIncrease" href="#">Increase</a> <a id="linkDecrease" href="#">Decrease</a> <a id="linkReset" href="#">Reset</a> <br /><br /> <div id="divContent" class="divClass"> <b>jQuery Tutorial</b> <ul> <li>What is jQuery</li> <li>What is $(document).ready(function() in jquery</li> <li>Benefits of using CDN</li> <li>#id selector</li> <li>Element Selector</li> <li>class selector</li> <li>attribute selector</li> <li>attribute value selectors</li> <li>case insensitive attribute selector</li> <li>jQuery input vs :input</li> </ul> </div> </body> </html>
Views: 23594 kudvenkat