Home
Search results “Jquery getting style value”
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: 107334 kudvenkat
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 ========================================================
Passing data to event handler in jQuery
 
06:16
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/passing-data-to-event-handler-in-jquery.html In this video we will discuss how to pass data to the event handler function in jQuery The following example, 1. Binds the click event handler to the button using on function 2. We are passing 3 arguments to the on() function a) The name of the event b) JSON object that contains data that we want to pass to the event handler c) Event handler method name 3. In the event handler method (sayHello), we access the data using event object's data property. 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 () { $('#btnClickMe').on('click', { firstName: 'John', lastName: 'Doe' }, sayHello); $('#btnClickMe').on('click', { firstName: 'Mary' }, sayHello); $('#btnClickMe').on('click', sayHello); function sayHello(event) { if (event.data == null) { alert('No name provided'); } else { alert('Hello ' + event.data.firstName + (event.data.lastName != null ? ' ' + event.data.lastName : '')); } } }); </script> </head> <body style="font-family:Arial"> <input id="btnClickMe" type="button" value="Click Me" /> </body> </html> Output : Hello John Doe Hello Mary No name provided
Views: 40765 kudvenkat
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: 1368 LearnEveryone
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: 163867 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: 90725 kudvenkat
jQuery DOM manipulation methods
 
16:55
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-dom-manipulation-methods.html In this video we will discuss 1. What are jQuery DOM manipulation methods 2. How to set attribute values using jQuery attr() method 3. How to retrieve attribute values using jQuery attr() method 4. How to set multiple attribute values using jQuery attr() method 5. How to remove an attribute using jQuery removeAttr() method What are jQuery DOM manipulation methods jQuery DOM manipulation methods manipulate the DOM in some manner. The complete list of jQuery DOM manipulation methods can be found at the following link. http://api.jquery.com/category/manipulation/ jQuery attr method is used to set or retrieve attribute values of html elements. Retrieves the title attribute value of the first matching element $('div').attr('title') Example : In this example we have 2 DIV elements. Since attr() function retrieves only the attribute value of first matching element, we only get the title attribute value of the first DIV element. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { alert($('div').attr('title')); }); </script> </head> <body style="font-family:Arial"> <div id="div1" title="My DIV1"> DIV 1 </div> <div id="div2" title="My DIV2"> DIV 2 </div> </body> </html> To retrieve the title attribute value of all the matching elements, jQuery each() method can be used. <script type="text/javascript"> $(document).ready(function () { $('div').each(function () { alert($(this).attr('title')); }); }); </script> Sets the title attribute value of all the matching elements to "new div title" $('div').attr('title', 'new div title'); Example : If you want to set the same value for the title attribute of all the elements, then there is no need to loop thru each element. All the div elements in this case will have 'new div title' as the title attribute value. <script type="text/javascript"> $(document).ready(function () { // set the same title attribute value for all the DIV elements $('div').attr('title', 'new div title'); // Retrieve and alert the title attribute value of all DIV elements $('div').each(function () { alert($(this).attr('title')); }); }); </script> If you want to set a different value for the title attribute, then you may need to loop thru each element. <script type="text/javascript"> $(document).ready(function () { // sets a different title attribute value for each DIV element $('div').each(function (i) { $(this).attr('title', 'div ' + (i + 1) + ' title'); }); // Retrieve and alert the title attribute value of all DIV elements $('div').each(function () { alert($(this).attr('title')); }); }); </script> How to set multiple attribute values : Using a JSON object to set multiple attribute values <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var config = { 'title': 'New Div Title', 'style': 'border:3px solid red;', 'name': 'My Div' }; $('div').attr(config); var result = ''; $('div').each(function () { result += 'title = ' + $(this).attr('title') + '<br/>'; result += 'style = ' + $(this).attr('style') + '<br/>'; result += 'name = ' + $(this).attr('name') + '<br/><br/>'; }); $('#resultSpan').html(result); }); </script> </head> <body style="font-family:Arial"> <div id="div1" title="My DIV1"> DIV 1 </div> <br /> <div id="div2" title="My DIV2"> DIV 2 </div> <br /> <span id="resultSpan"> </span> </body> </html> Instead of creating a separate JSON object (config) and then passing it to attr() method, you can create the JSON object inline. $('div').attr({ 'title': 'New Div Title', 'style': 'border:3px solid red;', 'name': 'My Div' });
Views: 71716 kudvenkat
jQuery get selected checkbox text
 
09:04
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-get-selected-checkbox-text.html In this video we will discuss how to get the checked checkbox text along with the value. This is continuation to Part 12, please watch Part 12 from jQuery tutorial before proceeding. Here is what we want to do. As we check the checkboxes, we want to display the count of checkboxes checked and their text and values. 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 () { $('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 + " checkbox checked<br/>"; result.each(function () { var selectedValue = $(this).val(); resultString += selectedValue + " - " + $('label[for="option-' + selectedValue + '"]').text() + "<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="js" /> <label for="option-js">JavaScript</label> <input type="checkbox" name="skills" value="jq" /> <label for="option-jq">jQuery</label> <input type="checkbox" name="skills" value="cs" /> <label for="option-cs">C#</label> <input type="checkbox" name="skills" value="vb" /> <label for="option-vb">VB</label> <br /><br /> Preferred Cities : <input type="checkbox" name="cities" value="ny" /> <label for="option-ny">New York</label> <input type="checkbox" name="cities" value="nd" /> <label for="option-nd">New Delhi</label> <input type="checkbox" name="cities" value="ln" /> <label for="option-ln">London</label> <br /><br /> Selected Skills:<br /> <div id="divskills"></div> <br /> Selected Cities:<br /> <div id="divcities"></div> </body> </html>
Views: 76856 kudvenkat
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: 79054 kudvenkat
jQuery checked selector
 
10:35
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-checked-selector.html In this video we will discuss the jQuery :checked selector. The :checked selector selects all checked checkboxes or radio buttons. Let us understand this with an example. Selects all checked radio button elements $('input[type="radio"]:checked') Example : When you click the submit button without selecting any radio button, "No radio button checked" message should be displayed. When you click the submit button after a radio button is checked, then a message stating "Male is checked" or "Female is checked" should be displayed. 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 () { $('#btnSubmit').click(function () { var result = $('input[type="radio"]:checked'); if (result.length > 0) { $('#divResult').html(result.val() + " is checked"); } else { $('#divResult').html("No radio button checked"); } }); }); </script> </head> <body style="font-family:Arial"> Gender : <input type="radio" name="gender" value="Male">Male <input type="radio" name="gender" value="Female">Female <br /><br /> <input id="btnSubmit" type="submit" value="submit" /> <br /><br /> <div id="divResult"> </div> </body> </html> Selects all checked checkbox elements $('input[type="checkbox"]:checked') Example : When you click the submit button without checking any checkbox, "No checkbox checked" message should be displayed. When you click the submit button after checking a checkbox, then a message stating the number of checkboxes checked and their values should be displayed. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnSubmit').click(function () { var result = $('input[type="checkbox"]:checked'); if (result.length > 0) { var resultString = result.length + " checkboxe(s) checked<br/>"; result.each(function () { resultString += $(this).val() + "<br/>"; }); $('#divResult').html(resultString); } else { $('#divResult').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 /> <input id="btnSubmit" type="submit" value="submit" /> <br /><br /> <div id="divResult"> </div> </body> </html>
Views: 104414 kudvenkat
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: 82353 kudvenkat
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: 110949 kudvenkat
how to use element or tag  selector in jquery - jquery tutorial
 
04:53
jQuery selectors are one of the most important parts of the jQuery library. jQuery Selectors. jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more jquery element selector jquery select element by id, jquery select element by class, jquery selector examples, jquery select by name attribute, jquery get input value by name, get element by name javascript, jquery multiple attribute selector, jquery attribute value, jquery find element with data attribute, jquery select button by name, jquery get element tag name, jquery selector child, jquery select element, jquery selector id, jquery multiple class selector, javascript selectors, jquery selector name, jquery selector attribute, jquery select dropdown,
Views: 123 Soft-All
jQuery Basics: POST/GET Data (HTTP Request)
 
14:03
Want more? Explore the library at https://www.codecourse.com/lessons Official site https://www.codecourse.com Twitter https://twitter.com/teamcodecourse
Views: 134300 Codecourse
The jQuery Hide, Show, and Toggle Functions
 
09:50
The jQuery functions hide, show, and toggle are very useful in any app that uses jQuery. In this video, I show you how they work and how you can use the duration and callback function for each. Web Development Courses: https://prettyprinted.com Get the jQuery cheat sheet here: https://prettyprinted.com/p/jquerycheatsheet Get the code here: https://prettyprinted.com/blog/1184061/the-jquery-hide-show-toggle-functions Subscribe: http://www.youtube.com/channel/UC-QDfvrRIDB6F0bIO4I4HkQ?sub_confirmation= Twitter: https://twitter.com/pretty_printed Facebook: https://www.facebook.com/prettyprintedtutorials/ Github: https://github.com/prettyprinted Instagram: https://www.instagram.com/pretty_printed Google Plus: https://plus.google.com/+PrettyPrintedTutorials
Views: 11756 Pretty Printed
Data Table Using jQuery and Bootstrap
 
12:52
How to make data table using jquery and bootstrap, search table, sort table, table pagination, sum table, number page/row table
Views: 208780 Code Tube
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: 101383 kudvenkat
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: 15261 TVAC Studio
jQuery append elements
 
08:18
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-append-elements.html In this video we will discuss how to append and prepend elements To append elements we have append() appendTo() To prepend elements we have prepend() prependTo() Since these methods modify DOM, they belong to DOM manipulation category. jquery append example : The following example appends the specified HTML to all div elements <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('div').append('<b> Tutorial</b>'); }); </script> </head> <body style="font-family:Arial"> <div id="div1">jQuery</div> <div id="div2">C#</div> <div id="div3">ASP.NET</div> </body> </html> jquery appendto example : The above example can be rewritten using appendTo as shown below. $('<b> Tutorial</b>').appendTo('div'); What is the difference between append and appendTo Both these methods perform the same task. The only difference is in the syntax. With append method we first specify the target elements and then the content that we want to append, where as we do the opposite with appendTo method. jquery prepend example : The following example prepends the specified HTML to all div elements <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('div').prepend('<b>Tutorial </b>'); }); </script> </head> <body style="font-family:Arial"> <div id="div1">jQuery</div> <div id="div2">C#</div> <div id="div3">ASP.NET</div> </body> </html> jquery prependTo example : The above example can be rewritten using prependTo as shown below. $('<b>Tutorial </b>').prependTo('div'); What is the difference between prepend and prependTo Both these methods perform the same task. The only difference is in the syntax. With prepend method we first specify the target elements and then the content that we want to prepend, where as we do the opposite with prependTo method. jQuery append existing element example : These methods (append, appendTo, prepend, prependTo) can also select an element on the page and insert it into another <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('div').append($('#mySpan')); }); </script> </head> <body style="font-family:Arial"> <span id="mySpan"> Programming</span> <div id="div1">jQuery</div> <div id="div2">C#</div> <div id="div3">ASP.NET</div> </body> </html> Difference between prepend and append prepend method, inserts the specified content to the beginning of each element in the set of matched elements, where as append method inserts the specified content to the end of each element in the set of matched elements.
Views: 56331 kudvenkat
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: 377 Yusuf Shakeel
Get The Total Sum Of Table Row Column Cells Value Using jQuery 3.3.1
 
06:19
#sumofrows #totalvalueofcells #jquerytutorials count total sum of table cell rows and get total into column using jQuery
How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot | Java Techie
 
26:54
This Spring Boot Thymeleaf Ajax Example will shows you how to create a simple web application based on Spring Boot and Thymeleaf template + jQuery.ajax. Here, we are using jQuery.ajax function to send a request to Spring REST API and return a JSON response #JavaTechie #SpringBoot #Ajax #JQuery GitHub: https://github.com/Java-Techie-jt/spring-boot-ajax Blogs: https://javagyanmantra.wixsite.com/website Facebook Group : https://www.facebook.com/groups/919464521471923 Like & Subscribe
Views: 5257 Java Techie
jquery ui progress bar
 
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-ui-progress-bar.html In this video we will discuss jQuery progressbar widget. 2 simple steps to get the jQuery progressbar Step 1 : Include a div element with an id on the page <div id="progressbar"></div> Step 2 : Find the div element in the DOM and call progressbar() function $('#progressbar').progressbar(); There are 2 types of progressbars 1. Determinate progress bar - Use when the actual status can be accurately calculated 2. Indeterminate progress bar - Use to provide user feedback when the actual status cannot be calculated To get a determinate progress bar, set the value option of the progressbar() function to an integer value between 0 and the max. $('#progressbar').progressbar({ value : 65 }); To get an indeterminate progress bar, set the value option of the progressbar() function to false (boolean) $('#progressbar').progressbar({ value : false }); Get value for jQuery progressbar from a select element HTML Select Percentage : <select id="ddlPercentage"> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option> </select> <input type="button" id="btn" value="Set Value" /> <br /><br /> <div id="progressbar"></div> jQuery $(document).ready(function () { var progressbarDiv = $('#progressbar'); progressbarDiv.progressbar(); $('#btn').click(function () { progressbarDiv.progressbar({ value: parseInt($('#ddlPercentage').val()) }); }); }); Display jQuery progress bar value HTML Select Percentage : <select id="ddlPercentage"> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option> </select> <input type="button" id="btn" value="Set Value" /> <br /> <br /> <div id="progressbar" style="position:relative"> <span style="position:absolute; left:50%; top:20%" id="progressBar-label"> </span> </div> jQuery $(document).ready(function () { var progressbarDiv = $('#progressbar'); progressbarDiv.progressbar(); $('#btn').click(function () { progressbarDiv.progressbar({ value: parseInt($('#ddlPercentage').val()), change: function () { $('#progressBar-label').text(progressbarDiv.progressbar('value') + '%'); } }); }); });
Views: 20561 kudvenkat
jquery: Get value from input in modal Bootstrap 4.0
 
10:03
Topic: jquery: Get value from input in modal Bootstrap 4.0 Subscribe Us: https://goo.gl/TBOEWO ------------------------------------------------------------------------------------------------------------ We want to create more videos tutorial for help people that want to learn more about mobile development web development and new technology. ikhmer4ever.com try to gather more about new technique about programming, mobile app design, app development, UI and UX Design, and also the real app in the world that currently use and making for production and help people too. Thanks Finally Please Subscribe Our Channels for more knowledge. Find us on: Facebook Page: https://goo.gl/W8Vjnu Youtube Channel:https://goo.gl/TBOEWO Website:http://www.ikhmer4ever.com Twitter: https://twitter.com/ikhmer4ver Free Android Training here: - http://bit.ly/2ctZrZM - https://www.youtube.com/watch?v=HvgzzuYV4WA&list=PLcwcuvlq19zzoMZL1C4UGmiF3EANHqHR0 Free iOS Training here: - http://bit.ly/2ctG5GX - https://www.youtube.com/watch?v=MG3y42E3ipQ&list=PLcwcuvlq19zwZhw-PNP8QrDWhKC9-UWIY More video mobile app training: 1. iOS From Scratch With Swift4: Navigation Controllers in Xcode 9 https://youtu.be/MONVvSUHJXQ 2. UILabel | How to use UILabel in iOS Development | Xcode 9 | Swift4 https://youtu.be/KU-TqHs8wW0 3. Passing values from one view controller to another in Swift4 and Xcode9 https://youtu.be/I9BCx8f0zq8 4. Pass Data between ViewController in Swift4 https://youtu.be/xq-8wnF-k8g 5. How to build a simple iOS application with Xcode for beginner https://youtu.be/rcmZ_yBbQe0 6. How to make colorful in Photoshop | photoshop cc 2017 tutorials for beginners https://youtu.be/-P4L-gNmQKY 7. How to make text outer glow in Photoshop cc 2017 https://youtu.be/xM6EvjEKesw 8. How to make colorful in Photoshop https://youtu.be/-P4L-gNmQKY 9. C style for statement has been removed in Swift 3 | Xcode 9 https://youtu.be/Mn23bxxrBuU 10. Project Management: How to use trello to manage your project task | Cost Time Result. https://youtu.be/jX8OBO0zgH8 More: get value from modal bootstrap, get value from modal dialog jquery, pass value to modal dialog, pass value from modal dialog to parent window, how do i pass values from form to jquery modal dialog, bootstrap get value of input text, how to get id in modal bootstrap, jquery dialog get input value, get value from modal dialog jquery, pass value to modal dialog, bootstrap modal, pass value from modal dialog to parent window, bootstrap get value of input text, bootstrap modal on show, bootstrap modal tutorial, how do i pass values from form to jquery modal dialog
Views: 6652 iKhmer4ever Studio
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: 57676 kudvenkat
How to Get Selected Radio Button Value in jQuery In Tamil
 
06:43
Click Event in JQuery dblClick Event in JQuery Mouse Events in JQuery Hover Event in JQuery FadeIn Event in Jquery FadeOut Event in Jquery FadeToggle Effect in Jquery FadeTo Effect in Jquery Animate Effect in Jquery Animate Using Relative Values in Jquery Animate Using Continuous Values in Jquery Callback Function in Jquery Without Callback Function in Jquery How to Use Chaining in Jquery Get Methods in Jquery Set Methods in Jquery Append Method in Jquery Selectors in Jquery Filters in Jquery Hierarchy Filters in Jquery Filter Using Attributes in Jquery Use Traversing Methods in Jquery Use Before and After Methods in Jquery Use Remove Method in Jquery Use Empty Method in Jquery Remove Classes Using Jquery Add Classes Using Jquery Toggle Between Classes in Jquery Using selectors and filters to extract information Creating, inserting, and manipulating webpage content Understanding jQuery statement chaining Using CSS to position content Building event handlers Showing, hiding, and fading page elements with jQuery Creating custom animations Accessing external data with AJAX jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn in Tamil Complete Jquery in Tamil Tutor Joes Jquery Tamil Tutorial google image search style gallery jquery google images effect google image search style gallery google image likeness search Using selectors and filters to extract information Creating, inserting, and manipulating webpage content Understanding jQuery statement chaining Using CSS to position content Building event handlers Showing, hiding, and fading page elements with jQuery Creating custom animations Accessing external data with AJAX jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn in Tamil Complete Jquery in Tamil Tutor Joes Jquery Tamil Tutorial google image search style gallery jquery google images effect google image search style gallery google image likeness search How to Remove Table Row tr in jQuery on Button Click in Tamil How to Add Table Row tr in jQuery on Button Click In Tamil How To Read The Value Of HTML Table by Jquery in Tamil Check for file extension before uploading By Jquery In Tamil How to Get Selected Radio Button Value in 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: 1682 Tutor Joe's Stanley
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: 142313 kudvenkat
jquery how to pick value form form fields part 6 | Jquery basic to advance
 
10:15
jquery how to pick value form form fields part 6 | Jquery basic to advance In this video lecture we are going to learn how to take value from form fields using jquery To get the textbox value, you can use the jQuery val() function. For example, $('input:textbox').val() – Get textbox value. For more Learning subscribe to our YouTube channel and hit the bill icon to receive our Latest Updates. ***___Coding Soft Tech___***
Views: 33 Coding Soft Tech
jQuery get selected checkbox text
 
11:04
jQuery get selected checkbox text In this video we will discuss how to get the checked checkbox text along with the value. Here is what we want to do. As we check the checkboxes, we want to display the count of checkboxes checked and their text and values. Note: Angle tags removed because it's not accepting while upload this content. 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 + " checkbox checked br/ "; result.each(function () { var selectedValue = $(this).val(); resultString += selectedValue + " - " + $('label[for="option-' + selectedValue + '"]').text() + " 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="js" / label for="option-js" JavaScript /label input type="checkbox" name="skills" value="jq" / label for="option-jq" jQuery /label input type="checkbox" name="skills" value="cs" / label for="option-cs" C# /label input type="checkbox" name="skills" value="vb" / label for="option-vb" VB /label br / br / Preferred Cities : input type="checkbox" name="cities" value="ny" / label for="option-ny" New York /label input type="checkbox" name="cities" value="nd" / label for="option-nd" New Delhi /label input type="checkbox" name="cities" value="ln" / label for="option-ln" London /label br / br / Selected Skills: br / div id="divskills" /div br / Selected Cities: br / div id="divcities" /div /body /html
Views: 296 JQuery
Javascript Siblings - Add Remove Class - Set Active DIV [ With Source Code ]
 
08:03
Javascript Set Active DIV Source Code: https://1bestcsharp.blogspot.com/2017/07/javascript-add-active-class-to-div.html Javascript Tutorials For Beginners ➜ http://bit.ly/2k7NMWq Javascript Course ➜ http://bit.ly/2IvBCFC visit our blog https://1bestcsharp.blogspot.com/ subscribe: http://goo.gl/nRjPKk In This Javascript Tutorial we will see How To Add A Class To an HTML DIV element And Delete the class From The Other DIV Elements Siblings On DIV Element Click And Make It Active Using JS In Netbeans Editor . Javascript Tutorials : How to get value of selected radio button https://www.youtube.com/watch?v=uzwUBDQfpkU How to append Value to an array https://www.youtube.com/watch?v=KVdY8n6lCy4 javascript images slider 1 https://www.youtube.com/watch?v=QkcemPr4xaU Convert String To Number https://www.youtube.com/watch?v=JMfZG7o_QtE JavaScript Show And Hide Input Password Text https://www.youtube.com/watch?v=Cmo9sjx5eFE change div class name in js https://www.youtube.com/watch?v=X_SDJxKI6HE using checkbox with js https://www.youtube.com/watch?v=yFYEHSh2iTQ get And Set Value To An Input https://www.youtube.com/watch?v=AfRHl3soLDg calculate two numbers https://www.youtube.com/watch?v=oDUjP4N_MtQ Search Element In Array https://www.youtube.com/watch?v=LIsjSMr9bJU Add Search Remove Array Element https://www.youtube.com/watch?v=ppLbuVWf6zM Add HTML Table Row https://www.youtube.com/watch?v=FVSfp8yT8lA Get Mouse Position https://www.youtube.com/watch?v=LVi5DN2vtdo Show Text Letter By Letter https://www.youtube.com/watch?v=dbdYazO4IZ4
Views: 12109 1BestCsharp blog
jQuery 8 SET TEXT HTML VALUE ATTRIBUTE CALLBACK IN HINDI
 
33:06
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 8 SET TEXT HTML VALUE ATTRIBUTE CALLBACK IN HINDI
Views: 3308 LearnEveryone
jQuery Get Methods Tutorial in Hindi / Urdu
 
10:51
In this tutorial you will learn jquery get methods tutorial in Hindi, Urdu.You can learn how to get inner html of dom in jquery, how to get attributes value of html tag in jquery with attr method and hot to get form tags value with val method. jQuery Tutorial Playlist https://www.youtube.com/playlist?list=PL0b6OzIxLPbzSyiC0PFaqeabe1aGhfrbW Follow us on Facebook https://www.facebook.com/yahooobaba/ Follow us on Twitter https://twitter.com/YahoooBaba #jquery #webdevelopment #webdesign #javascript
Views: 324 Yahoo Baba
jQuery: 12 - Getting element attribute values
 
04:18
If you want the value of an attribute, you can use the jQuery attr() function. The attr() function takes the name of an attribute on your page, such as attr(‘src’), and gives you the value of that attribute, that is, the information on the right side of the equal sign. I'm Junaid, partial blogger and SEO speaker along with programmer :) Creating tutorials is fun, and I'm on the way don't forget to join me on other social media. Website: http://wikia.pk https://www.facebook.com/JunaidShahidOfficial https://plus.google.com/+JunaidShahid1 https://twitter.com/MrJunaidShahid Blog: https://junaidshahid.com Keyword Rank Videos: http://bit.ly/2rRpphr How Do You Do Blogging Series: http://bit.ly/2s4iAsR JavaScript Tutorials http://bit.ly/2zMEplJ CSS Tutorials http://bit.ly/2iwx5GO HTML Tutorials http://bit.ly/2gEkv7E
Views: 23 Meray Tutorials
jQuery input vs input
 
06: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/03/jquery-input-vs-input.html In this video we will discuss the difference between $(input) and $(:input) selectors $(:input) selects all input, textarea, select and button elements where as $(input) just selects elements with an input tag. The following is the HTML used in the examples. Replace < with LESSTHAN symbol and > with GREATERTHAN Symbol. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> </head> <body style="font-family:Arial"> First Name : <input type="text" value="John" /> <br /><br /> Last Name : <input type="text" value="Major" /> <br /><br /> Gender : <input type="radio" name="gender" checked="checked" value="Male">Male <input type="radio" name="gender" value="Female">Female <br /><br /> Skills : <input type="checkbox" name="skills" checked="checked" value="JavaScript" />JavaScript <input type="checkbox" name="skills" checked="checked" value="jQuery" />jQuery <input type="checkbox" name="skills" value="C#" />C# <br /><br /> Country: <select> <option selected="selected" value="USA">USA</option> <option value="India">India</option> <option value="UK">UK</option> </select> <br /><br /> Summary : <br /> <textarea>I am a Senior Dot Net Developer with 10 years experience</textarea> <br /><br /> <input type="submit" value="submit" /> </body> </html> Now we want to get the text value from all the textboxes. On this page we have 2 textboxes 1. First Name 2. Last Name jQuery code to get textbox value using $(input) <script type="text/javascript"> $(document).ready(function () { $('input[type="text"]').each(function () { alert($(this).val()); }); }); </script> jQuery code to get textbox value using $(:input) <script type="text/javascript"> $(document).ready(function () { $(':input[type="text"]').each(function () { alert($(this).val()); }); }); </script> Which one is better for performance $('input[type="text"]') or $(':input[type="text"]') $('input[type="text"]') is better for performance over $(':input[type="text"]'). This is because $(':input[type="text"]') needs to scan all input elements, textarea, select etc, where as $('input[type="text"]') scans only input elements. So if you want to find elements with an input tag, it is always better to use $('input[type="text"]') over $(':input[type="text"]')
Views: 92008 kudvenkat
jQuery add event handler to dynamically created element
 
09:15
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-event-handler-to-dynamically.html In this video we will discuss, how to add event handlers to dynamically created elements. Let us understand this with an example. The following example, allows us to dynamically create new list item (li), attach a click event handler and add it to the unordered list (ul). This happens when you click "Add a New List Item" button. The problem with this approach is that we are binding a click event handler to every list item. This means if you have 500 list items, then there will be 500 event handlers in the memory and this may negatively affect the performance of your application. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('li').on('click', function () { $(this).fadeOut(500); }); $('#btnAdd').on('click', function () { var newListItem = $('<li>New List Item</li>').on('click', function () { $(this).fadeOut(500); }); $('ul').append(newListItem); }); }); </script> </head> <body style="font-family:Arial"> <input id="btnAdd" type="button" value="Add a New List Item" /> <ul> <li>List Item</li> <li>List Item</li> </ul> </body> </html> A better way of doing the same from a performance standpoint is shown below. In this example, the click event handler is attached to the listitem (li) parent element (ul). Even if you have 500 list items, there is only one click event handler in memory. So how does this work 1. When you click on a list item (li), the event gets bubbled up to its parent (ul) as the list item (li) does not have an event handler 2. The bubbled event is handled by the the parent (ul) element, as it has a click event handler. 3. When a new list item is added dynamicaly, you don't have to add the click event handler to it. Since the newly created list item (li) is added to the same parent element (ul), the click event of this list item also gets bubbled upto the same parent and will be handled by it. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('ul').on('click', 'li', function () { $(this).fadeOut(500); }); $('#btnAdd').on('click', function () { $('ul').append('<li>New List Item</li>'); }); }); </script> </head> <body style="font-family:Arial"> <input id="btnAdd" type="button" value="Add a New List Item" /> <ul> <li>List Item</li> <li>List Item</li> </ul> </body> </html>
Views: 67488 kudvenkat
[ jQuery In Arabic ] #14 - Html - Css Get / Set
 
12:06
شرح كيفية الحصول على خواص ال Css للعنصر و كيفية تغييرها بال jQuery
Views: 15066 Elzero Web School
How to change style sheet dynamically using Jquery in Tamil
 
03:58
Click Event in JQuery dblClick Event in JQuery Mouse Events in JQuery Hover Event in JQuery FadeIn Event in Jquery FadeOut Event in Jquery FadeToggle Effect in Jquery FadeTo Effect in Jquery Animate Effect in Jquery Animate Using Relative Values in Jquery Animate Using Continuous Values in Jquery Callback Function in Jquery Without Callback Function in Jquery How to Use Chaining in Jquery Get Methods in Jquery Set Methods in Jquery Append Method in Jquery Selectors in Jquery Filters in Jquery Hierarchy Filters in Jquery Filter Using Attributes in Jquery Use Traversing Methods in Jquery Use Before and After Methods in Jquery Use Remove Method in Jquery Use Empty Method in Jquery Remove Classes Using Jquery Add Classes Using Jquery Toggle Between Classes in Jquery Using selectors and filters to extract information Creating, inserting, and manipulating webpage content Understanding jQuery statement chaining Using CSS to position content Building event handlers Showing, hiding, and fading page elements with jQuery Creating custom animations Accessing external data with AJAX jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn in Tamil Complete Jquery in Tamil Tutor Joes Jquery Tamil Tutorial google image search style gallery jquery google images effect google image search style gallery google image likeness search Using selectors and filters to extract information Creating, inserting, and manipulating webpage content Understanding jQuery statement chaining Using CSS to position content Building event handlers Showing, hiding, and fading page elements with jQuery Creating custom animations Accessing external data with AJAX jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn in Tamil Complete Jquery in Tamil Tutor Joes Jquery Tamil Tutorial google image search style gallery jquery google images effect google image search style gallery google image likeness search How to Remove Table Row tr in jQuery on Button Click in Tamil How to Add Table Row tr in jQuery on Button Click In Tamil How To Read The Value Of HTML Table by Jquery in Tamil Check for file extension before uploading By Jquery In Tamil How to Get Selected Radio Button Value in jQuery In Tamil Show Password Using jQuery on Checkbox Click Event In Tamil Inserting Data Into MySql Database Using Jquery Post and PHP Event In Tamil How to change style sheet dynamically 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: 926 Tutor Joe's Stanley
Jquery,Jquery get value and get attribute,jquery tutorail,jquery beginners
 
08:17
jquery tutorail, ,jquery beginners Jquery get value and get attribute
Views: 19 Pok Saroon
JQuery - Attributes
 
03:13
JQuery - Attributes Watch more videos at https://www.tutorialspoint.com/videotutorials/index.htm Lecture By: Mr. Pratik Singh, Tutorials Point India Private Limited
Set DIV to 100% Height of Its Parent Using jQuery
 
15:40
In this tutorial, you'll learn how get your DIVs to be 100% of the height of their container using jQuery. Here's the link for the AJAX and PHP course: http://johnmorrisonline.com/go?id=ajaxphp&utm_campaign=ytWc2I-JU50Ls Get the source code in the Code Snippets section here: http://www.johnmorrisonline.com/web-developer-resources/ Training Center: http://www.johnmorrisonline.com/training Subscribe on YouTube: http://youtube.com/johnmorrisonline Subscribe on SoundCloud: http://soundcloud.com/johnmorrisonline Subscribe on iTunes: http://goo.gl/RggnXW -~-~~-~~~-~~-~- Please watch: "Ryan Carson: How to Get an IT Job WITHOUT a College Degree" https://www.youtube.com/watch?v=wxetW3hmPd0 -~-~~-~~~-~~-~- #php #webdev
Views: 5552 John Morris
JQuery animation : 8-  set & get position of element
 
02:15
Set & Get position of element jquery
Views: 1382 Tuto4free
jQuery Tutorial #3 - Writing Smarter, Better Code - jQuery Tutorial for Beginners
 
06:50
With jQuery is easy to make things happen, but easy doesn't always mean right! In this lesson, we're gonna make our 20 lines of code compact into 4 lines of code...and it will be better code This will involve selecting HTML elements by classname and getting a custom HTML5 attribute value with jQuery. Lesson #1: https://www.youtube.com/watch?v=hMxGhHNOkCU&list=UUVTlvUkGslCV_h-nSAId8Sw Lesson #2: https://www.youtube.com/watch?v=G-POtu9J-m4&list=UUVTlvUkGslCV_h-nSAId8Sw Lesson #4: https://www.youtube.com/watch?v=LYKRkHSLE2E -~-~~-~~~-~~-~- Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device" https://www.youtube.com/watch?v=fgOO9YUFlGI -~-~~-~~~-~~-~-
Views: 322272 LearnCode.academy
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: 6875 The Net Ninja
jquery animate function
 
12:26
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/jquery-animate-function.html jQuery animate function let's us animate CSS properties. The following example animates the div element, while changing the font-size property of the div element from its initial size to 50 pixels over a period of 2000 milli-seconds (2 seconds). <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#myButton').click(function () { $('#myDiv').animate({ 'font-size': '50' }, 2000); }); }); </script> </head> <body style="font-family:Arial"> <input type="button" id="myButton" value="Animate" /> <br /><br /> <div id="myDiv"> jQuery animate function </div> </body> </html> Syntax of jquery animate function .animate( properties [, duration ] [, easing ] [, complete ] ) Animate function has 4 parameters. Only the first parameter (properties) is the required parameter. Rest 3 are optional. properties - An object of CSS properties and values duration - The duration for animation in milliseconds. Default is 400. easing - Easing function to use for the transition. Default is swing. You could also use linear. complete - A function to call once the animation is complete What is jQuery easing Easing is a technique where the speed and/or direction of animation are changed while the animation is in progress. Easing can make the animation start off slow and gradually speed up, start up fast and gradually slow down, and a whole host of other effects. The difference between linear and swing easing is very subtle. The following page shows all the easings provided by jQuery UI https://jqueryui.com/easing The following example increases the height and width of the image to 400 pixels on mouseover. On mouseout the height and width are reduced to 100 pixels. <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#myImage').on({ mouseover: function () { $(this).animate({ 'height': 400, 'width': 400, }, 3000); }, mouseout: function () { $(this).animate({ 'height': 100, 'width': 100, }, 3000); } }); }); </script> </head> <body style="font-family:Arial"> <img id="myImage" height="100" width="100" src="/Images/Tulips.jpg" /> </body> </html> In the following example, several calls to animate() method are chained together. By default these calls are placed into a queue to be executed one after the other in series rather than executing all of them simultaneously in parallel. <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#myImage').click(function () { $(this) .animate({ 'left': '300' }) .animate({ 'top': '200' }) .animate({ 'left': '10' }) .animate({ 'top': '10' }); }); }); </script> </head> <body style="font-family:Arial"> <img id="myImage" height="100" width="100" style="position:absolute" src="/Images/Tulips.jpg" /> </body> </html> Please note: By default, all HTML elements have a static position, and cannot be moved. To modify the position , set the CSS position property of the element to fixed, absolute or relative.
Views: 42779 kudvenkat
JavaScript Template Literals: JSON to HTML
 
39:34
Follow along link: https://codepen.io/learnwebcode/pen/qVLOZJ Finished product: https://codepen.io/learnwebcode/pen/eyZMyp New WordPress Course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL Git a Web Developer Job Course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL HTML & CSS Course: https://www.udemy.com/web-design-for-beginners-real-world-coding-in-html-css/?couponCode=YOUTUBEDEAL WordPress for Beginners Course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode
Views: 58901 LearnWebCode
Javascript for beginners 20 - getElementById
 
06:00
FREE Educational tutorials http://villageparksource.com/village-park-university/ In this javascript video for beginners. We are learning about coding CSS (Cascading Style Sheet) without JQuery. We get to see the difference of coding CSS in Javascript with and without Jquery
Views: 4736 Village Park Source
How to Style and Customize HTML Select Box Created by Select Element using CSS
 
22:11
How to Style and Customize HTML5 Select Box Created by Select Element using CSS https://youtu.be/lRFsCYDk4Vw WHAT WILL YOU LEARN? Learn to style an HTML select box using CSS and replace the default arrow for the dropdown applied by the browser with your own custom arrow. You will learn to create cross-browser custom css3 select box dropdown using the HTML5 select tag. It means the select box arrows will be supported in all the major browsers including ie10 or above. Here you also will learn three different methods to create a custom select box dropdown without using any external javascript library or bootstrap. We will simply use few css3 advance properties to get the effect of the custom arrow in your select dropdown box or what you call HTML combo box. I will show you how easily you can hide the default arrow from selectbox and apply your own custom arrow. ===============DOWNLOAD SOURCE CODEs============== *Code to Follow Along: https://goo.gl/MTXSFT *Click on the Fork Button on Codepen After Opening the Link to Start following Finished Final Code: https://goo.gl/ERqNWJ ===================================================== =================Navigate to Specific part============= 1:30 - Applying common styles to all select elements 3:58 - #1 Background Image Technique to Style HTML5 Select Box 7:15 - #2 Using CSS3 Border to Create Downword Arrow 13:27 - #3 Using FontAwesome Glyphicon for the Arrow in our Selectbox Dropdown list ==================================================== HOW WE WILL CREATE OUR CUSTOM SELECTBOX USING CCS3? To create a select box we simply use the html5 document to create our markup for the select box. We will create three different select boxes using the "select" element and the "option" element for creating dropdown lists. To hide the default styling from the select element applied by the browser we will use the css3 appearance property and set its value to none. And then, we will use an another useful rule to hide the default arrows applied by Internet explorer 10; from the select box dropdown. THREE DIFFERENT METHODS THAT WE WILL BE USING Each select box will be using a different method for styling the dropdown arrow inside the combobox. - The first Method will show using an Image Background technique to create custom arrow for the CSS select box. - The second method will use the CSS border property to create a triangular shape that will be used to customize your select element's dropdown arrow. - Finally, the third method will use the fontawesome glyphicon to create our custom arrow for the selectbox dropdown. All, the method will have the cross-browser support for our custom css3 select box. Each method ensures that it works properly in the Internet explorer 10 or above and other older browser. PROVIDE YOUR FEEDBACK If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Useful Tutorials============= Creating Simple Horizontal Navigation Bar using Flexbox https://goo.gl/oR0lGf Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your webpage using javascript https://goo.gl/JJuclF ================CONTACT and RESOURCES============== Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 23063 smashtheshell
How to call wcf service using jquery
 
12:52
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/how-to-call-wcf-service-using-jquery.html In this video we will discuss, how to call wcf service using jquery ajax Step 1 : Create SQL Server table and insert employee data Create table tblEmployee ( Id int primary key identity, Name nvarchar(50), Gender nvarchar(10), Salary int ) GO Insert into tblEmployee values ('Mark', 'Male', 50000) Insert into tblEmployee values ('Sara', 'Female', 60000) Insert into tblEmployee values ('John', 'Male', 45000) Insert into tblEmployee values ('Pam', 'Female', 45000) GO Step 2 : Create a stored procedure to retrieve employee data by ID Create procedure spGetEmployeeById @Id int as Begin Select ID, Name, Gender, Salary from tblEmployee where ID = @Id End Step 3 : Create new asp.net web application project. Name it Demo. Step 4 : Include a connection string in the web.config file to your database. <add name="DBCS" connectionString="server=.;database=SampleDB;integrated security=SSPI" /> Step 5 : Add a class file to the project. Name it Employee.cs. Copy and paste the following code. namespace Demo { public class Employee { public int ID { get; set; } public string Name { get; set; } public string Gender { get; set; } public int Salary { get; set; } } } Step 6 : Add a new WCF Service (Ajax-enabled). Name it EmployeeService.svc. Copy and paste the following code. using System; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.ServiceModel; using System.ServiceModel.Activation; namespace Demo { [ServiceContract(Namespace = "")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class EmployeeService { [OperationContract] public Employee GetEmployeeById(int employeeId) { Employee employee = new Employee(); string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; using (SqlConnection con = new SqlConnection(cs)) { SqlCommand cmd = new SqlCommand("spGetEmployeeById", con); cmd.CommandType = CommandType.StoredProcedure; SqlParameter parameter = new SqlParameter(); parameter.ParameterName = "@Id"; parameter.Value = employeeId; cmd.Parameters.Add(parameter); con.Open(); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { employee.ID = Convert.ToInt32(rdr["Id"]); employee.Name = rdr["Name"].ToString(); employee.Gender = rdr["Gender"].ToString(); employee.Salary = Convert.ToInt32(rdr["Salary"]); } } return employee; } } } Step 7 : Add an HTML page to the ASP.NET project. Copy and paste the following HTML and jQuery code <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnGetEmployee').click(function () { var empId = $('#txtId').val(); $.ajax({ url: 'EmployeeService.svc/GetEmployeeById', method: 'post', contentType: "application/json;charset=utf-8", data: JSON.stringify({ employeeId: empId }), dataType: 'json', success: function (data) { $('#txtName').val(data.d.Name); $('#txtGender').val(data.d.Gender); $('#txtSalary').val(data.d.Salary); }, error: function (err) { alert(err); } }); }); }); </script> </head> <body style="font-family:Arial"> ID : <input id="txtId" type="text" style="width: 86px" /> <input type="button" id="btnGetEmployee" value="Get Employee" /> <br /><br /> <table border="1" style="border-collapse: collapse"> <tr> <td>Name</td> <td><input id="txtName" type="text" /></td> </tr> <tr> <td>Gender</td> <td><input id="txtGender" type="text" /></td> </tr> <tr> <td>Salary</td> <td><input id="txtSalary" type="text" /></td> </tr> </table> </body> </html>
Views: 35556 kudvenkat
Show Password Using jQuery on Checkbox Click Event In Tamil
 
03:54
Click Event in JQuery dblClick Event in JQuery Mouse Events in JQuery Hover Event in JQuery FadeIn Event in Jquery FadeOut Event in Jquery FadeToggle Effect in Jquery FadeTo Effect in Jquery Animate Effect in Jquery Animate Using Relative Values in Jquery Animate Using Continuous Values in Jquery Callback Function in Jquery Without Callback Function in Jquery How to Use Chaining in Jquery Get Methods in Jquery Set Methods in Jquery Append Method in Jquery Selectors in Jquery Filters in Jquery Hierarchy Filters in Jquery Filter Using Attributes in Jquery Use Traversing Methods in Jquery Use Before and After Methods in Jquery Use Remove Method in Jquery Use Empty Method in Jquery Remove Classes Using Jquery Add Classes Using Jquery Toggle Between Classes in Jquery Using selectors and filters to extract information Creating, inserting, and manipulating webpage content Understanding jQuery statement chaining Using CSS to position content Building event handlers Showing, hiding, and fading page elements with jQuery Creating custom animations Accessing external data with AJAX jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn in Tamil Complete Jquery in Tamil Tutor Joes Jquery Tamil Tutorial google image search style gallery jquery google images effect google image search style gallery google image likeness search Using selectors and filters to extract information Creating, inserting, and manipulating webpage content Understanding jQuery statement chaining Using CSS to position content Building event handlers Showing, hiding, and fading page elements with jQuery Creating custom animations Accessing external data with AJAX jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn in Tamil Complete Jquery in Tamil Tutor Joes Jquery Tamil Tutorial google image search style gallery jquery google images effect google image search style gallery google image likeness search How to Remove Table Row tr in jQuery on Button Click in Tamil How to Add Table Row tr in jQuery on Button Click In Tamil How To Read The Value Of HTML Table by Jquery in Tamil Check for file extension before uploading By Jquery In Tamil How to Get Selected Radio Button Value in jQuery In Tamil Show Password Using jQuery on Checkbox Click Event In Tamil Inserting Data Into MySql Database Using Jquery Post and PHP Event In Tamil How to change style sheet dynamically 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
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: 91280 kudvenkat

Minecraft seeds that work on pocket edition
Deepmind ai games free
Yellow feat hatsune miku minecraft
Todd king facebook games
Ark zero punctuation destiny