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.

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
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src="jquery-1.11.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('div').append('&lt;b&gt; Tutorial&lt;/b&gt;');
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-family:Arial"&gt;
&lt;div id="div1"&gt;jQuery&lt;/div&gt;
&lt;div id="div2"&gt;C#&lt;/div&gt;
&lt;div id="div3"&gt;ASP.NET&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
jquery appendto example : The above example can be rewritten using appendTo as shown below.
$('&lt;b&gt; Tutorial&lt;/b&gt;').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
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src="jquery-1.11.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('div').prepend('&lt;b&gt;Tutorial &lt;/b&gt;');
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-family:Arial"&gt;
&lt;div id="div1"&gt;jQuery&lt;/div&gt;
&lt;div id="div2"&gt;C#&lt;/div&gt;
&lt;div id="div3"&gt;ASP.NET&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
jquery prependTo example : The above example can be rewritten using prependTo as shown below.
$('&lt;b&gt;Tutorial &lt;/b&gt;').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
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src="jquery-1.11.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('div').append($('#mySpan'));
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-family:Arial"&gt;
&lt;span id="mySpan"&gt; Programming&lt;/span&gt;
&lt;div id="div1"&gt;jQuery&lt;/div&gt;
&lt;div id="div2"&gt;C#&lt;/div&gt;
&lt;div id="div3"&gt;ASP.NET&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
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.

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.
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src="jquery-1.11.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('li').on('click', function () {
$(this).fadeOut(500);
});
$('#btnAdd').on('click', function () {
var newListItem = $('&lt;li&gt;New List Item&lt;/li&gt;').on('click', function () {
$(this).fadeOut(500);
});
$('ul').append(newListItem);
});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-family:Arial"&gt;
&lt;input id="btnAdd" type="button" value="Add a New List Item" /&gt;
&lt;ul&gt;
&lt;li&gt;List Item&lt;/li&gt;
&lt;li&gt;List Item&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
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.
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src="jquery-1.11.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('ul').on('click', 'li', function () {
$(this).fadeOut(500);
});
$('#btnAdd').on('click', function () {
$('ul').append('&lt;li&gt;New List Item&lt;/li&gt;');
});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-family:Arial"&gt;
&lt;input id="btnAdd" type="button" value="Add a New List Item" /&gt;
&lt;ul&gt;
&lt;li&gt;List Item&lt;/li&gt;
&lt;li&gt;List Item&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

Welcome all, we will see the jQuery CSS Tutorial in Hindi and How to change CSS using jQuery. jQuery css() Method
The css() method sets or returns one or more style properties for the selected elements.
Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
#jquerycss

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
========================================================

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-floating-div.html
In this video we will discuss, how to create floating div using jQuery.
We want the div element in the sidebar to be floating and always visible as we scroll down the page.
Example : In this example we are using position() and scrollTop() functions. The object returned by position() function has top and left properties, which can be used to know the current top and left positions (coordinates). We are using this function to find the top position of the div element that we want to keep floating as we scroll down. To get the current vertical position of the scroll bar, we are using scrollTop() function.
As we scroll and when the current vertical position of the scroll bar becomes GREATER THAN the top position of the div element, then we want the div element to start floating. To do this set position style to fixed. A fixed position element is positioned relative to the browser window. So as you scroll down it will be floating in the browser window.
If the current vertical position of the scroll bar becomes LESS THAN the top position of the div element, then we don't want the div element to float, so we set position style to relative. A relative position element is positioned relative to itself. So if you set position to relative and top to 0, it will continue to stay where it is without floating.
&lt;html&gt;
&lt;head&gt;
&lt;script src="jquery-1.11.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
var floatingDiv = $("#divfloating");
var floatingDivPosition = floatingDiv.position();
$(window).scroll(function () {
var scrollPosition = $(window).scrollTop();
if (scrollPosition &gt;= floatingDivPosition.top) {
floatingDiv.css({
'position': 'fixed',
'top' : 3
});
} else {
floatingDiv.css({
'position': 'relative',
'top' : 0
});
}
});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-family:Arial;"&gt;
&lt;table align="center" border="1" style="border-collapse:collapse"&gt;
&lt;tr&gt;
&lt;td style="width:500px"&gt;
Main Page Content
&lt;/td&gt;
&lt;td style="width:150px; vertical-align:top"&gt;
Side panel content
&lt;br /&gt;&lt;br /&gt;
&lt;div id="divfloating" style="background-color:silver; width:150px; height:150px"&gt;
Floating Div - Keeps floating as you scroll down the page
&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

In this tutorial I show you to select elements on your web page by ID and by Class. .
Follow me on Facebook:
www.facebook.com/quentin.watt
Follow me on Twitter:
www.twitter.com/QuentinWatt
Don't forget to subscribe:
www.youtube.com/QuentinWatt
Donate on PayPal:
https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DM496T7CTUYAS Donate on PayPal:
https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DM496T7CTUYAS

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-image-gallery.html
In this video we will discuss how to create an image gallery with thumbnails using jQuery. We discussed how to do exactly the same thing using raw JavaScript in Part 41 of JavaScript tutorial.
When you click on the image thumnail, the respective image should be displayed in the main section of the page.
For the purpose of this demo we will be using the images that can be found on any windows machine at the following path.
C:\Users\Public\Pictures\Sample Pictures
Step 1 : Open Visual Studio and create a new empty asp.net web application project. Name it Demo.
Step 2 : Right click on the Project Name in Solution Explorer in Visual Studio and create a new folder with name = Images.
Step 3 : Copy images from C:\Users\Public\Pictures\Sample Pictures to Images folder in your project.
Step 4 : Right click on the Project Name in Solution Explorer in Visual Studio and add a new HTML Page. It should automatically add HTMLPage1.htm.
Step 5 : Add a reference to the download jQuery file. I am using jquery-1.11.2.js version for this demo.
Step 6 : Copy and paste the following HTML and jQuery code in HTMLPage1.htm page.
Replace &lt; with LESSTHAN symbol and &gt; with GREATERTHAN symbol
&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
.imgStyle {
width: 100px;
height: 100px;
border: 3px solid grey;
}
&lt;/style&gt;
&lt;script src="jquery-1.11.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('#divId img').on({
mouseover: function () {
$(this).css({
'cursor': 'hand',
'border-Color': 'red'
});
},
mouseout: function () {
$(this).css({
'cursor': 'default',
'border-Color': 'grey'
});
},
click: function () {
var imageURL = $(this).attr('src');
$('#mainImage').fadeOut(500, function () {
$(this).attr('src', imageURL);
}).fadeIn(500);
}
});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img id="mainImage" style="border:3px solid grey"
src="/Images/Hydrangeas.jpg" height="500" width="540" /&gt;
&lt;br /&gt;
&lt;div id="divId"&gt;
&lt;img class="imgStyle" src="/Images/Hydrangeas.jpg" /&gt;
&lt;img class="imgStyle" src="/Images/Jellyfish.jpg" /&gt;
&lt;img class="imgStyle" src="/Images/Koala.jpg" /&gt;
&lt;img class="imgStyle" src="/Images/Penguins.jpg" /&gt;
&lt;img class="imgStyle" src="/Images/Tulips.jpg" /&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
In our next video, we will discuss how to make this image gallery a bit more efficient using the concept of event bubbling.

When using jQuery's .css() method, you may run into confusing scenarios where your rendered styles do not match what you are expecting.
This video uses a simple example of how jQuery's .css() method writes inline styles in an HTML div element. Do to the specificity of an inline style, the outer styles will be overridden.
Furthermore, this video will show you how you can easily remove the inline style by passing an empty string to the .css() method.

Please visit http://www.technomark.in/Change-The-ID-Of-An-Element-Using-Jquery.aspx for more information.
Change ID of Form Element Using Jquery, Change ID of Form Element Using JavaScript, Change ID of Form Element, Change ID of Element Using Jquery, Change ID of Element, Remove ID of Element Using jQuery, Replace ID of Form Element Using Jquery, Replace ID of Form Element, Replace ID of Element Using Jquery, jQuery, From element, HTML, PHP

jQuery ID selector :
To select html element(s) by their id attribute value, we use jQuery id selector
Syntax of jQuery ID selector:
$(“CSS ID selector”).action(parameters);
To the jQuery function, if we pass the CSS ID selector then it is called as jQuery ID selector
I.e. a jQuery function with CSS ID selector as a parameter is called as jQuery ID selector
Ex:
$("#firstp").css( {"border":"2px solid blue"} );
It selects any HTML element whose id attribute value is set to “firstp” and applies the border of 2px solid blue
Note: in CSS hash(#) symbol indicates ID selector and id attribute value should be unique
========================================================
Follow the link for next video: https://youtu.be/l5Y8wADOXBY
Follow the link for previous video: https://youtu.be/v5ZE2zi48sQ
========= For more benefits & Be up to date ===================
Subscribe to the channel:
https://www.youtube.com/chidrestechtu...
Like the Facebook fan page:
https://www.facebook.com/ManjunathChidre
Visit to Chidre's Tech Tutorials website:
http://www.chidrestechtutorials.com
========================================================

Learn how to use jQuery to modify CSS and classes with the css, addClass, removeClass, and toggleClass methods.
💻 Code: https://codepen.io/beaucarnes/pen/pryoXJ
🐦 Beau Carnes on Twitter: https://twitter.com/carnesbeau
-
Learn to code for free and get a developer job: https://www.freecodecamp.com
Read hundreds of articles on technology: https://medium.freecodecamp.com
And subscribe for new programming videos every day: https://youtube.com/subscription_center?add_user=freecodecamp

Source: http://www.developphp.com/video/JavaScript/Custom-Data-Attributes-HTML-JavaScript-CSS-Tutorial
Learn to use custom data attributes. Custom data attributes allow authors to create custom data to apply to their HTML elements when no other attributes make sense to use to store extra data. They help extend the information that html elements can communicate to a program or script. Custom data attributes can be accessed through both JavaScript and CSS.

Smooth scrolling not only looks cool but, for one-page sites, it can also help make for a better user experience. In this video, I take a look at how you can add smooth scrolling to your site with just a few lines of jQuery.
Not only do I look at smooth scrolling though, but the demo site I'm using it based on Bootstrap, which has a nice 'active' link class which highlights one of the links in the navigation.
I look at how, with a few more lines of jQuery, we can have that active link class switch between links in the navigation as we scroll down the page, once again helping with the user experience!
And sure, you could find some scripts out there that do it for you, but being able to write your own jQuery can be really useful. You're writing the exact code that you need in your one case and not something which is bloated and heavy for no reason.
My goal with this video isn't just for you to be able to copy my code, but to understand a bit more of how jQuery is working and to be able to write a bit of your own scripts going forward.
Find the codepen here: http://codepen.io/kevinpowell/pen/dWzGox
--
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

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 &lt; with LESSTHAN symbol and &gt; with GREATERTHAN symbol
How to exit from each function in jQuery : To exit from each function, return false.
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('li').each(function () {
if ($(this).text() == 'UK') {
return false;
}
alert($(this).text());
});
});
&lt;/script&gt;
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.
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src="jquery-1.11.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('li').css('color', 'red');
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-family:Arial"&gt;
&lt;ul&gt;
&lt;li&gt;US&lt;/li&gt;
&lt;li&gt;India&lt;/li&gt;
&lt;li&gt;UK&lt;/li&gt;
&lt;li&gt;Canada&lt;/li&gt;
&lt;li&gt;Australia&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
There is no need to explicitly iterate over each element in the collection. Most jQuery methods implicitly iterate over the entire collection.
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('li').each(function () {
$(this).css('color', 'red');
});
});
&lt;/script&gt;
Performance considerations when using jquery each function
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src="jquery-1.11.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('li').each(function () {
$('#divResult').html($('#divResult').html() + '&lt;br/&gt;' + $(this).text())
});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-family:Arial"&gt;
&lt;ul&gt;
&lt;li&gt;US&lt;/li&gt;
&lt;li&gt;India&lt;/li&gt;
&lt;li&gt;UK&lt;/li&gt;
&lt;li&gt;Canada&lt;/li&gt;
&lt;li&gt;Australia&lt;/li&gt;
&lt;/ul&gt;
&lt;div id="divResult"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
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.
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
var result = '';
$('li').each(function () {
result += '&lt;br/&gt;' + $(this).text();
});
$('#divResult').html(result);
});
&lt;/script&gt;

Explain jQuery Document Object Model and its relationship to HTML element, css, id and class selectors - using non technical language. I explain that selecting parts of your web page is like selecting a graphic in a drawing program, but instead of using the mouse, we use Document Object Model aka D.O.M.

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-show-hide-password.html
In this video we will discuss how to toggle password visibility using show / hide password checkbox.
Here is what we want to achieve
1. When Show password checkbox IS NOT CHECKED, the password should be masked
2. When Show password checkbox IS CHECKED, the password should be in clear text and visible to the user
One of the simplest ways of achieving this is by changing the type attribute of the password field depending on the checked status of Show password checkbox
1. If the Show password checkbox is CHECKED change the type to text
2. If the Show password checkbox is NOT CHECKED change the type to password
Replace &lt; with LESSTHAN symbol and &gt; with GREATERTHAN symbol
The following is the HTML and jQuery code
&lt;html&gt;
&lt;head&gt;
&lt;script src="jquery-1.11.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('#cbShowPassword').click(function () {
$('#txtPassword').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-family:Arial"&gt;
Password :
&lt;input type="password" id="txtPassword" /&gt;
&lt;input type="checkbox" id="cbShowPassword" /&gt;Show password
&lt;/body&gt;
&lt;/html&gt;
The problem with the above approach is that it does not work in IE 8 and earlier versions. This is because with IE8 and earlier versions the type attribute of input elements cannot be changed once set. The following code works in all browsers including IE8 and earlier versions.
When Show password checkbox is clicked
1. Retrieve the value the from the password textbox and store it in a variable for later use.
2. Delete the password input filed.
3. If the "Show password" checkbox is CHECKED, then add a new input filed of type text, else add a new input filed of password. In both the cases set the value attribute of the input element = the variable created in Step 1.
&lt;html&gt;
&lt;head&gt;
&lt;script src="jquery-1.11.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('#cbShowPassword').click(function () {
var currentPassowrdFiled = $('#txtPassword');
var currentPassword = currentPassowrdFiled.val();
currentPassowrdFiled.remove();
if ($(this).is(':checked')) {
$(this).before('&lt;input type="text" id="txtPassword" value="' + currentPassword + '"&gt;');
}
else {
$(this).before('&lt;input type="password" id="txtPassword" value="' + currentPassword + '"&gt;');
}
});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-family:Arial"&gt;
Password :
&lt;input type="password" id="txtPassword" /&gt;
&lt;input type="checkbox" id="cbShowPassword" /&gt;Show password
&lt;/body&gt;
&lt;/html&gt;

HTML5, CSS3, and jQuery with Adobe Dreamweaver CS5.5: Learn by Video
.
1. Introduction to HTML5, CSS3, and jQuery
2. Using the Right Tools in Dreamweaver CS5.5
3. Practical HTML5
4. Everyday CSS Selectors
5. CSS3 Effects Without Images
6. CSS3 Backgrounds
7. CSS Media Queries for Phones, Tablets, and Desktops
8. Advanced CSS Selectors
9. Introduction to jQuery
9.1 JavaScript Refresher
9.2 jQuery Basics
10. Enhancing Forms with jQuery
.
.
..
With HTML5 and CSS3 bursting onto the scene far more quickly than anticipated and the rapid spread of web-enabled smartphones and tablets, designing and building a website has suddenly become more complex. Fortunately, JavaScript libraries like jQuery reconcile browser incompatibilities and make light work of adding dynamic features, and Dreamweaver CS5.5 has risen to the challenge by providing the tools you need to build modern websites with HTML5, CSS3, and jQuery. In this course, experienced author and trainer David Powers explains which parts of HTML5 and CSS3 you can use now and how to convert existing pages to HTML5 or build new ones from scratch. You'll learn how to adapt a website that was originally designed for desktop computers so that it works properly on mobile phones and tablets and how to use CSS media queries to apply different styles depending on screen width, viewing the changes in real time in Dreamweaver&acute;s Live view. You'll also learn the basics of jQuery and how to use it to enhance forms, how to create CSS3 effects without images, how to choose the right CSS selector, and much more.
HTML5 (Programming Language),JQuery (Software),Cascading Style Sheets (Programming Language),JavaScript,Dreamweaver,Adobe Dreamweaver (Software),CS5,html5 template,html5 tutorial,html5 video tutorial,html5 video tutorials,html5 editor,html5 and css3,html5 css3 tutorial,html5 css3 examples,html5 demos,w3c html5 validator,html5 vs flash,Marketing,jquery slider,jquery plugins,jquery modal,ui jquery,tooltip jquer,jquery horizontal menu,jquery slide show,accordion jquery,jquery animation

Access the entire course and source code on Zenva Academy https://academy.zenva.com/product/programming-for-entrepreneurs-jquery/?zva_src=youtube
jQuery is the world’s most used JavaScript library to create rich web applications that just feel natural to use. In this comprehensive course you’ll learn how to use jQuery to work with the DOM, use events, effects and animations, AJAX, JSON and to create interactive AJAX forms.
This course is 100% jQuery 2.x compliant!
This course is taught by Pablo Farias Navarro, founder of ZENVA and web application developer. Pablo has been using jQuery since 2007. More than 20,000 students are learning how to code with our courses, in particular our Programming for Entrepreneurs course series. This course builds on our previous HTML and JavaScript free courses and takes you to the next step, which is to make your website or HTML5 interactive and dynamic.
Some of the things you will learn in this course:
When to use jQuery 1.x or 2.x.
CSS selectors and DOM traversing functions in depth to find any element you want.
DOM manipulation to add or remove custom HTML content anywhere, whenever you decide.
Working with events to create interactive sites.
Listen to changes in select dropdowns and checkboxes.
jQuery animations and effects. Slide, fade, show, hide.
AJAX to load dynamic HTML from the server.
Working with JSON from the server.
Interactive forms that display extra fields according to the values of other fields.
AJAX form submission the easy way.
Dealing with cache issues in AJAX requests.
Learn jQuery in a 2.x compliant manner.
Homepage: http://zenva.com
YouTube: http://youtube.com/fariazz2
GameDev Academy: http://gamedevacademy.org
HTML5 Hive: http://html5hive.org
De Idea A App: http://deideaaapp.org
Facebook: http://facebook.com/ZenvaDev
Twitter: @ZenvaTweets
Medium: https://medium.com/@zenva

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/jquery-tabs-in-aspnet.html
In this video we will discuss how to use jQuery tabs in an ASP.NET web forms application.
jQuery tabs widget is a single content area with multiple panels, each associated with a header in a list. This is similar to Accordion widget, which we discussed in Part 74 and 75.
a) Tabs must be in either an ordered or unordered list
b) Each tab "title" must be inside of a list item and wrapped by an anchor element with an href attribute
c) Each tab panel may be any valid element but it must have an id which corresponds to the hash in the anchor of the associated tab.
Steps to retrieve data from a database table and present it using jQuery accordian in an asp.net webforms application. We will use the country webservice that we worked with in the previous video session.
We want to retrieve data from the following database table tblEmployee and display it using jQuery tabs widget in an asp.net web forms application
Add a WebForm to the project. Copy and paste the following code. Notice that we are using 2 repeater controls to produce the HTML that the jQuery tabs widget expects.
&lt;%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %&gt;
&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head runat="server"&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src="jquery-1.11.2.js"&gt;&lt;/script&gt;
&lt;script src="jquery-ui.js"&gt;&lt;/script&gt;
&lt;link href="jquery-ui.css" rel="stylesheet" /&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('#tabs').tabs({
collapsible: true,
active: 1,
event: 'mouseover'
});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id="form1" runat="server"&gt;
&lt;div id="tabs" style="width: 600px"&gt;
&lt;ul&gt;
&lt;asp:Repeater ID="Repeater1" runat="server"&gt;
&lt;ItemTemplate&gt;
&lt;li&gt;
&lt;a href="#C_&lt;%#Eval("ID")%&gt;"&gt;&lt;%#Eval("Name") %&gt; &lt;/a&gt;
&lt;/li&gt;
&lt;/ItemTemplate&gt;
&lt;/asp:Repeater&gt;
&lt;/ul&gt;
&lt;asp:Repeater ID="Repeater2" runat="server"&gt;
&lt;ItemTemplate&gt;
&lt;div id="C_&lt;%#Eval("ID")%&gt;"&gt;
&lt;%#Eval("CountryDescription")%&gt;
&lt;/div&gt;
&lt;/ItemTemplate&gt;
&lt;/asp:Repeater&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy and paste the following code in the code-behind file
using System;
namespace Demo
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Services.CountryServiceSoapClient client = new Services.CountryServiceSoapClient();
Services.Country[] countries = client.GetCountries();
Repeater1.DataSource = countries;
Repeater1.DataBind();
Repeater2.DataSource = countries;
Repeater2.DataBind();
}
}
}
jQuery Tabs Widget Options
collapsible - By default, atleast one panel need to be active. If you want to collapse all the panels, including the one that is active, set this option to true.
active - This option can be set to a boolean value or integer. Setting active to false will collapse all panels. This requires the collapsible option to be true. An Integer value will make the corresponding panel active. Panels use zero-based index.
event - The type of event that the tabs should react to in order to activate the tab. The default is "click". To activate on hover, use "mouseover".

Learn how to easily select HTML elements using jQuery. You will also see the difference between traditional JavaScript and jQuery code.
(jQuery version 1.9.1 was used in this video)
Procure Eminence Official Website: http://www.ProcureEminence.com/

In a shop: - Give me a roll of toilet paper. - What color would you like? - White please, I will color it myself… ​ - Hi, John! I have heard that you died three times already! - Hmm, but you’re no better – you haven’t come to any of my funerals. ​ Could you fax over a copy? No, I can‘t fax because of where I live. Where do you live? The 21st century. ​ Get a life - I’ve heard they’re cheap now on eBay Thanks to Blaine Zernechel.
April fool’s day If there are hopeless fools, then there should also be fools, which give hope.
As experience shows, its easier to fool somebody on a regular day, rather than on April 1st.
Question: can a joke, played on April 1st, become a present for the New Year? Answer: yes, as theres exactly 9 months period.
Valentines Day The best thing of being my own date for Valentines Day is knowing Im guaranteed to score.
Christmas gift Dear Santa, Please do not leave my gift under the Christmas tree. Drive it straight into the garage.
Christmas tree - I left my girlfriend a Christmas gift under the Christmas tree. - Is she happy? -Not yet, still looking for it. The forest is large, lots of trees.

Funny relationship jokes - wonderful wife Single guys often dream of having a wise, beautiful and caring wife. But married guys think about it even more often.​
Adult jokes - in a bus Conversation in a bus: - You know, yesterday in a bus your wife told me such a great joke that I almost fell out of the bed.
Profession jokes - executioner An interview with an executioner: - So, how long have you been working in this job? - Well, around 10 years… - And how are you doing there? - Well. no one complained so far.
Daily life jokes - Boy, do you pray before you eat? - No, why should I - my mom is a good cook.​
Jokes about dating - magazine The announcement in a magazine: in the next issue we will be writing about to make your boyfriend a little nervous with the help of a marker and a pregnancy test. ​ ​ Daily life situations - in the cafe - Waiter, there’s a bee in my soup! - Yes sir, the fly has a day-off​
Profession joke - A priest A priest tells the prayers: - We have one good news and one – bad ones. The good thing is that we have money for the repair of the church. The bad one – the money are still in your pockets.