JQuery tutorial, frequently used tags, javascript most used syntex, JQuery basics for professionals Part 1

Explained Jquery code with short and easy examples those are frequently used by professionals, instead to tutorial or training sites I have selected bunch of code that we need to use on daily basis, well about these tags and code; documentation is available on Jquery.com but that’s too large and wide, what I am talking here is most or frequently used tags in JQuery.

How should include references,

There are online CDN (JQuery, Microsoft, Google etc..) you can go for CND or your local file path, Should always add JQuery plugin first then your JS file references.

·       <script src=" //code.jquery.com/jquery-1.8.3.min.js"></script>

·       <script src="/myJSCode/jqueryValidation.min.js"></script>

Or we can use our downloaded JQuery as below,

·       <script src="/Fld/CS/JS/jquery-1.8.3.min.js" type="text/javascript"></script>

for production use minified js files *.min.js

How to start

That’s simple but always we should check all should working fine and basic things are ready to start like below,

<script src="/myfiles/JS/sp/jquery-1.8.3.min.js" type="text/javascript"></script>

<script src="/myfiles/JS/sp/LoginPage.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

        $(document).ready(function() {

        alert(“fine”);

        myFun();// function from LoginPage.min.js

        });

</script>

Always add JQuery plugin first then include you file that have you Functions.

JQuery Selectors 

There are so many selectors are there but of them these are used widely,

1)     $(“#HtmlElementID”); - Get element whose ID is known HtmlElementID if more then on element has same id it will select all elements we can index to select desired one or do iteration.

2)     $(“.ClassName”); - Get element whose applied class name is ClassName.

3)     $(“div[id=’divID’]”); its is conditional selection, give div element whose id is divID.

Instead of ID we can also do this comparison with Title, class name, src, name or any attribute if element

4)     $(“div[id*=’divID’]”);  this will give div element whose id contains divID.

5)     $(“div[id$=’divID’]”);  this will give div element whose id ends with divID.

6)     $(“div[id!=’divID’]”);  this will give div element whose id not equal divID.

7)     $(“div[id^=’divID’]”);  this will give div element whose id begins with divID.

8)     $(“span[id=’MySpan’] div img”);  this will give select all img elements inside span whose id is MySpan and look for div element then inside div img element.

9)     $(“span[id=’MySpan’] first:div “);  that will get first div tag inside span.

10)  $(“span[id=’MySpan’] div “).last();  that will get last div tag inside span.

For more selectors you can visit here.

Page Scroll bar add, remove and hide

Hide vertical scroll $("#MyContainer").css("overflow-x","hidden");          

Hide horizontal scroll $("#MyContainer").css("overflow-y","hidden");     

How to add scroll bar set height, width and so do overflow:scroll;

How to add scroll bar set height width and do overflow:auto; // that’s my favorite 

Blog Part 1 (Basics, Selectors and scroll bar)
Blog Part 2 (Get and set values of different elements)
Blog Part 3 (JavaScript windows code and Cookies) 

--

Regards,

Praveen Pandit

MCTS; MCPD

Keep Learning !!