Jquery

Learn Jquery with in 15 hrs

ChandradevLeave a comment

I have written the series of article on Jquery for beginner. You can learn very quickly with in few hours of time from the given below list of articles.

1. what is the Jquery (Part 1)

2. Different ways to write Jquery function (Part 2)

3. What is the Selector in Jquery ? (Part 3)

4. What is the Jquery Event ? (Part 4)

5. Effect methods in Jquery Library (Part 5)

6. what is the chaining in Jquery ?(Part 6)

7. How to read and write Value in Jquery (Part 7)

8. CSS manipulation in Jquery (part 8)

9. Add and remove element in Jquery (Part 9)

10. Jquery traversing (Part 10.0)

11. First and last Method of Jquery Traversing (Part 11)

12. each,eq and not method of Jquery Traversing (Part 12)

13. Parent,Parents and ParentUntil Method of Jquery Traversing (Part 13)

14. Filter and Find method in Jquery Traversing (Part 14

15. Ajax in Jquery (Part 15)

16. Jquery Ajax in Asp.net MVC (Part 16)

17. What is the use of . noConflict() Method In Jquery ?

18. How to implement jquery accordion in asp.net MVC

I hope it will help to beginner who are interested to learn the Jquery.

Advertisement

Jquery traversing (Part 10.0)

Chandradev1 Comment

Traversing is one of the important concept in Jquery Library. Using traversing methods
We can move UP ,down and sideways in the family tree or DOM tree from the selected element.

Traversing methods are used to filter out element from a document based on given condition.

There are so many methods in Jquery library for traversing. For example

1.Add
2. Add(Selector)
3. addBack()
4. andSelf()
5. children()
6. closest()
7. contents()
8. each()
9. end()
10. eq()
11. filter()
12. find()
13. first()
14. has()
15. is()
16. last()
17. map()
18. next()
19. nextAll()
20. nextUntil()
21. not()
22. offsetParent()
23. parent()
24.parents()
25. parentsUntil()
26. prev()
27. prevAll()
28. prevUntil()
29. siblings()
30.slice()

I feel very boring to read and write the long article so to make short article i will include only few methods in this post.

1. Add()
>> This method is used to add the elements on whole document or inside the context element.

add

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("h5").add("p").css("background-color", "green");
        });
    </script>
</head>
<body>
    
    <fieldset>
        <legend>
            This is the sample code for add() Method in Jquery
        </legend>
    
    <h5>This is the Header</h5>
    <p>First</p>
    <p> Middle</p>
    <p><strong> last</strong></p>
   </fieldset>
</body>
</html>

Note: In the above code we are selecting all the header(h5) and paragraph(p) and adding the green background color.

2. Add(Selector)
>> This method is used to adds more element match by the given selector in the set of given element

add_selector


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .Text_Silver {
            background-color:silver;
        }
        .Text_Blue {
            background-color:blue;
        }
        .Text_Green {
            background-color:green;
        }

        .Text_black {
            background-color:black;
        }
    </style>
    <script>
        $(function () {
            $(".Text_Silver").add(".Text_black").add(".Text_Blue").css("background-color", "red");
        });
    </script>
</head>
<body>
    <fieldset>
       <legend>This is the sample code for add(selector) method in Jquery.</legend>
    
    <h5 class="Text_Silver">This is the Header</h5>
    <p class="Text_Blue ">First</p>
    <p class="Text_Green"> Middle</p>
    <p class="Text_black"><strong> last</strong></p>
    </fieldset>

</body>
</html>

Note: In the above code, we are selecting the css class with Text_Silver ,Text_black, Text_Blue in Dom element and filling the red color as background.

Summary:

Here we have learnt some of the basic methods of Jquery traversing. In next post i will be coming back with other methods of Jquery traversing.

How to implement jquery accordion in asp.net MVC

Chandradev2 Comments

AccordianJqery

It is very straight forward to implement jquery accordion in asp.net MVC. If we have to implement any jquery UI widgets in asp.net mvc  there will be no need to do any extra work. This is the cool features of asp.net MVC.

Lets check with one simple  asp.net MVC 4  application.

Step1: Create one blank asp.net mvc  application.

Step2: Download the Jquery and Jquery UI libray fron Nuget Package Manager in the application.

Step 3: Create the Home controller  like this


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication8.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

    }
}

Step 4: Create the Index view and implement Jquery and style sheet like this Code snippet


@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.2.min.js"></script>
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<link href="~/Content/themes/base/accordion.css" rel="stylesheet" />
<link href="~/Content/demos.css" rel="stylesheet" />

<script type="text/javascript">
    $(function () {
        $("#accordion").accordion();
    });
</script>

<div class="demo">
<div id="accordion">
  <h3>This is the Title1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>This is the Title2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  
</div>

</div>

Summary: Here i donot have done any exatra work to implement this functionality so asp.net MVC is very user friedly with Jquery UI Library. This is one of the good features of asp.net MVC.