jQuery

17K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Share tech news, updates, or what's on your mind.

Sign up to Post

I have an MVC C# Web application. I need a way to check a cookie name ="User_Role", if it = "UR500" then hide a menu object which is included in the layout.cshtml. Where would I place this script?
1
I have an MVC C# web application. I am trying to force a user choose from a drop down; in turn that selection is then used as a parameter to in another dropdown. I have a series of these activities. My first drop down does exactly correct, user chooses a selection, the selection is captured and the controller returns the new list and the user is asked to choose from the second list. My problem is that I cant seem to get the third drop down to get the last selection. I can see the controller is returning the data correctly, but I have something not quite right in the code. Maybe I have a variable or something that is keeping previous values. See my code snips below:

       window.onload = function () {
            document.getElementById("add_Date_Worked").setAttribute("readonly", "readonly");
            document.getElementById("add_Client_ID").onchange = function () {
                if (this.selectedIndex !== 0) {
                    document.getElementById("add_Product_ID").removeAttribute("disabled");

                    /* Client ID Drop Down Parameter Selection Start */
                    $.getJSON("../Home/GetFilteredProducts", { id: jQuery("#add_Client_ID").val() },
                        function (data) {
                            var select = $("#add_Product_ID");
                            select.empty();
                            select.append($('<option/>', {
                                value: 0,
                                text: "Select 

Open in new window

1
I use HTML5 and JS.
I use Bootstrap modal for pop-up.
The modal works on clicks,

How can I show it when page loads. ( without clicking )
this is the script that I use
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
</script>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Open in new window

1
Is Jquery outdated? what's the new technology that has replaced JQuery? Is it Bootstrap, Angular or React?

FYI, I don't have enough knowledge on Bootstrap, Angular or Reactjs hence am trying to determine what is the latest that I should be using on newer web applications.

Thanks for the info.
1
When I run the html file, it is fine  for the ADD and Remove, But when I run the asp page, the image won't be added. per the code:
 <table>
  <tr>
    <td> 
     
          
   <div class="p">
          <div class="thumbnail">
            <div class="thumbnail-img-<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
        <a href="product.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
          <div class="img-p">
            <img class="thumbnail-img-<%# DataBinder.Eval(Container.DataItem, "idProduct") %>" src="<%=LINK_IMAGES%>small/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg">            
          </div>
        </a>
        
        <p><button class="btn add-remove-btn btn-primary" data-identitfier='4'>Add to List</button>
              </p>
      </div>
    </td>
  </tr>   
    
	
    </table>
    

Open in new window

1
I have an MVC C# Web Application and am using jQuery Bootgrid. The bootgrid is populating fine, the issue is there is a toggle button on the upper right of the grid that allows the user to select which columns in the grid are to be present. This feature is turned on with the following code "columnSelection: true". The issue is the button is not allowing the user to select the fields as it should. I have attached screen shots of how the button is supposed to function. When running through google dev, an error is thrown saying that it cannot find popper.js:1 Failed to load resource; however I have a reference to it (See Script Links below). Maybe it is the order of which I am loading. I have no idea at this point. Thanks.

Grid Snippet ---------------------------------------
    <script>
        var grid = $("#grid-data").bootgrid({
            ajax: false,
            caseSensitive: false,
            columnSelection: true,
            formatters: {
                "commands": function (column, row) {
                    return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.product_id + "," + row.client_id + "," + row.product_name + "," + row.description + "," + row.active + "\"><span class=\"fas fa-pencil-alt\"></span></button> " +
                        "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.product_id + "\"><span class=\"fas fa-trash-alt\"></span></button>";
  …
1
Hi,
 We have SQL database and we created the page and display sql data with Datatable plug in (datatable.js). We also added export to excel button to export data from gridview. We have some performance issue to export all data. is it possible to export what we are displaying on page? Or do we have any other method to export to excel  directly from SQL by client side code?
0
In the compare products, I want to "The remove x "  to show  when images are added. Below is the coding. How to fix it? Thank you!
 <script type="text/javascript">
            function removeParent() {
                this.parentNode.remove();
            }
            var buttons = document.getElementsByClassName('remove');
            Array.prototype.forEach.call(buttons, function(d, i) {
                d.addEventListener('click', removeParent);
            });
        </script>



<div id="compare-box">
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
         <button class="remove">X</button>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
         <button class="remove">X</button>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
         <button class="remove">X</button>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
         <button class="remove">X</button>
      </div>
    </div>
    <div id="compare-box-row" class="col-xs-9">

    </div>
  </div>

Open in new window

1
Hi,

I have this nav looking like this:
 <ul class="top-nav">
             <!-- Actions -->
            <li class="top-nav__item">
                <div class="top-nav__item--icon">
                    <i class="fas fa-toolbox"></i>
                </div>
               
                <div class="top-nav__item--link">
                    <a href="#">Actions</a>
                </div>

                <ul class="top-nav__sub">
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--icon">
                                <i class="fas fa-toolbox"></i>
                        </div>
                        <div class="top-nav__sub-item--link">
                            <a href="#">Print</a>
                        </div>
                    </li>
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--link">
                            <a href="#">E-mail</a>
                        </div>
                    </li>
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--link">
                            <a href="#">Download</a>
                        </div>
                    </li>
                </ul>    
            </li>

            <!-- Fast links -->
            <li class="top-nav__item">
                <div class="top-nav__item--icon">
                    <i class="fas fa-toolbox"></i>
                </div>

Open in new window

1
Hello everybody,

I'm trying to figure out why something has stopped working after I changed from a MySQL DB to a MS-SQL DB. Everything else seems to work fine and it makes no sense, but this just stopped working. In the site, I have a modal that is shown when the user need to add a new tag name. Then it records the tag using AJAX and reloads the page to show the newly added tag name into the list. Here's what I've got:

Modal that is shown:
<div class="modal" id="modal-tag">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Add new Tag</h4>
			</div>
			<div class="modal-body">
				<form id="form-new-tag">
					<fieldset>
						<div class="form-group row">
							<div class="col-md-12">
								<label for="tagNameInput">Tag name:</label><br>
								<input type="text" class="form-control" id="tagNameInput" name="tagNameInput" placeholder="" data-required="false" maxlength="30" />
							</div>
						</div>
						<button id="submittagbutton" name="submit" type="button" class="btn btn-sm btn-primary m-r-5">Save</button>
						<a href="javascript:;" class="btn btn-white" data-dismiss="modal">Cancel</a>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
</div>

Open in new window

Ajax script:
<script>
	
	var division = <?php echo $userData['division']; ?>;
	var uid = <?php echo $userData['user_id']; ?>;
	
	$(document).ready(function() {
		
		$('#submittagbutton').click(function() {
			var newtag = $('#tagNameInput').val();
			if (newtag == "") { 
				return false;
			}
			
			var dataString = 'newtag='+ newtag +'&division='+ division +'&uid='+ uid;
			
			$.ajax({
				type: 'POST',
				url: 'joblog_addtag.php',
				data: dataString,
				success: function(d) {
					if (d.status == 'ok') {
						$('#modal-tag').modal('hide');
						location.reload();
					}
				},
				error: function() {
					alert("Error ! In fetching data.");
				}
			});
		});
	});
	
</script>

Open in new window

PHP page that is called by ajax:
require_once 'functions.php';
sec_session_start();

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

	header('Content-Type: application/json');
	if (v3AddNewTag($_POST['newtag'], $_POST['division'], $_POST['uid'])) {

		echo json_encode(array('status' => 'ok'));

	} else {

		return false;

	}

} else {

	header('HTTP/1.0 403 Forbidden');
	die('You are not allowed to access this script.');

}

Open in new window

And the PHP function is called:
function v3AddNewTag($tagText, $division, $uid) {

	$sql
	=
	"
	INSERT INTO dbo.v3_joblog_tags (tag, tag_division, tag_active, tag_created_by)
	VALUES (:tag, :tag_division, :tag_created_by, :tag_created_by)
	"
	;
	
	try
	{
		$tag = latinChars($tagText);
		$tag_active= 1;
		
		$core = Core::getInstance();
		$stmt = $core->dbh->prepare($sql);
		$stmt->bindParam(':tag', $tag, PDO::PARAM_STR);
		$stmt->bindParam(':tag_division', $division, PDO::PARAM_INT);
		$stmt->bindParam(':tag_active', $tag_active, PDO::PARAM_INT);
		$stmt->bindParam(':tag_created_by', $uid, PDO::PARAM_INT);
		
		if ($stmt->execute())
		{
			
			return true;
			
		} else { echo 'Couldn\'t connect to DB'; }

	} catch(PDOException $e) { echo $sql . "<br>" . $e->getMessage(); }

}

Open in new window

Now, if I take the v3AddNewTag function and run it alone in a test page with hand-made data, it works so I know the INSERT query works. I've also tested the data sent to AJAX using alerts and it also works. What can be the problem?

Thanks a lot in advance and happy holidays!
0
Hello Experts!

Please what is wrong with my code? No return data in table but when I checked header (developer tool), I got something (attached).
I think the problem is from select option values and how they are being passed through AJAX. I said this because when I used hard-coded value  (1 or 0) in my PHP script and request AJAX call when page loads NOT onchange, the table populated correctly.

The HTML select:
<select name="user_status" id="user_status">
    <option value="">--User Status--</option>
    <option value="1">Active Users</option>
    <option value="0">Inactive Users</option>
</select>

Open in new window

AJAX:
var myTable = 
    $('#lockUsersTable').DataTable({
    "pageLength": 25,
    select: {style: 'multi'},
    columns: [
        { data: 'count' },
        { data: 'initials' },
        { data: 'username' },
        { data: 'user_type' },
        { data: 'status', orderable: false },
        { data: 'lock', orderable: false }
    ]
});

$('#user_status').on('change', function() {
    $('#tableResponse').html('<i class="ace-icon fa fa-spinner fa-spin blue bigger-115"></i> Please wait...');

    $.ajax({
        method : 'post',
        url : '../../lockUsers_Data',
        data : { userStatus : $('#user_status').val() },
        dataType : 'json',
    }).done(function(data) {
        myTable.clear().draw();
        myTable.rows.add(data).draw();

        var statusVal = $('#user_status').val();

        if ( myTable.data().any() ) {
   

Open in new window

1
Hi,
   I would like to have some help to for HTML/ CSS or any jquery plug in  to create some custom paging.  Here is some code i am working on it. I need to add some style to create fancy paging.

paging.PNG
Here is the code.
if(lastRow < count)
 	 {
		 
          var a=(count % lastRow) + 1;
		   html +="<div class='Paging'>";
		    html +="Previous 1 ";
		 
          for(var i=2;i<a;i++)
          {
	  // Dynami paging code		  
            html+= "<a href='" + next + "'>i </a>";
			
          }  
            html += "</div>";		  
 	 }
     else
	{
        console.log("S");
        html +="<div class='Paging'>";
        html += "<a href='1'></a>";
        html += "</div>";

	}
  }  
    
    return html;
}

Open in new window

0
Hello Experts!

I need help on the following:

Currently, I'm using onblur to do client-side validation on DataTable inputs using this:
$("body").on('blur', 'input[name^="cass"]', function() {
	checkCA(10);
});

$("body").on('blur', 'input[name^="exam"]', function() {
	checkExam(70);
});

function checkCA(max) {
	var currentInput = $(event.target);

	if ( currentInput.val() > max) {

		toastr.error('CA Scores cannot be greater than '+max);
		urrentInput.addClass('invalid');
		} else {
		currentInput.removeClass('invalid');
		}
};

function checkExam(max) {
	var currentInput = $(event.target);

	if ( currentInput.val() > max) {

		toastr.error('Exam Scores cannot be greater than '+max);
		currentInput.addClass('invalid');
		} else {
		currentInput.removeClass('invalid');
		}
};

Open in new window

Now, I want to check Zeros but not onblur. User may not click on a particular input so onblur will not work. I want the border highlighted after the submit button is clicked so as to draw user's attention to the Zero value.

Actually, Zeros are allowed but I still want to show them. If they left it on purpose, it's okay. But what if it was a mistake? That's why I want it highlighted. After all, all inputs will still be available after submit.

Thank you
1
I am trying to use toolbar.js in my asp webforms application, however, I noticed the links do not seem to work.

I have tried looking through the js file but am unable to find anything wrong. Has anyone used this or is able to see why the onlclick does not fire. I placed the normal href as a separate line which works fine.

Any help is appreciated.

Thanks
Toolbar-Test.zip
1
The link https://www.experts-exchange.com/questions/29128544/Add-Items-in-the-product-category-page.html is the question I posted a few days ago. It has been perfectly resolved.
Now based on this, I have the  following questions.

1. Add & Remove List button in Modal Window Page per the attached picture.
2. Page A is the category page.
3.  When user clicks the Add to List, the image will be added to My List. My list will be on the Page A and it is hidden till user clicks Add to List button and my list area will be expanded and show the images.

How to add the my list images to Page A from Modal Window?
How to expand the images once the user clicks the button
Sine in Page A, there is an area to  compare images at the bottom, and if add my list at the top of the page, is it possible?

Please give an example!

Thank you!
add-to-list.jpg
0
Hi there,

I currently have a WordPress website,  which is using the WP-Job Manager plugin on the home page.

Everything is working as it should,  but not just learned that we cannot hire out of California.   I've taken out all the jobs we have for that, but we also have a sticky job which always appears at the top of the listings, regardless of what city, state, zip code is entered.
the sticky job location is just USA, and uses google api, so it will appear top of any location entered.

I just cannot hide it for California.

I was wondering if anything had similar problems or different solutions.   Maybe, if California was typed, a Javascript alert box appears, saying we don
t hire from California?  

Just at a loss as for how to fix this.  Any ideas?

<< Website >>
0
Hello Experts!

I need help on the following.

I have a html Table ( with Child rows that show extra / detailed information ). See attached. There's a form in this Child Row where System Admin can send message to individual user. Because the table is populated via while loop, the Send button only recognizes the first row resulting in server to send back empty input error.

I want the AJAX to recognize the Send button just for the selected user.

array_button.pngXHR_Header.png
As you can see above, though I selected the user 3 (row 3), the onclick event picks inputs from row 1.

The form part of the Table:
<form method="post" id="msgForm" action="">
  <div class="form-group">
    <input type="hidden" name="to_user_id" id="to_user_id" value="<?= $user->UserId; ?>">
    <input type="hidden" name="to_initials" id="to_initials" value="<?= $user->Initials; ?>">
    <input type="hidden" name="from_user_id" id="from_user_id" value="<?= $session_Id; ?>">
    <input type="hidden" name="from_initials" id="from_initials" value="<?= $session_initials; ?>">
    <textarea class="width-100" name="msg_content" id="msg_content" resize="none" placeholder="Type message here…"></textarea>
  </div>

  <div class="hr hr-dotted"></div>

  <div class="clearfix">
    <label class="pull-left">
      <input type="checkbox" class="ace" />
      <span class="lbl"> Send me a copy</span>
    </label>
    <button class="pull-right btn btn-sm btn-primary btn-white 

Open in new window

1
I am using jquery datatable, with a checkbox to select 1 for each row.

as the person clicks through the checkboxes I need to calculate how much money the items will cost based on which boxes are checked.

Right now, it's only calculating the visible rows.

Is there any API that I can use to get which checkboxes are clicked off?

if I try to use something like oTable.rows().every( ), it is displaying the text as it was when the table was written before it gets checked.
0
Hello Experts!

I need help on the following.

I have a DataTable populated via AJAX. There are four columns (CA1, CA2, CA3 and Exam) which need to be automatically calculated to give the Fifth Column (Total) as the user inputs values into each of the four textboxes.

CA1 is named cass1[]
CA2 is named cass2[]
CA3 is named cass3[]
Exam is named exam[]

As in attached: sum.png
Please help me look into this. I've searched with no luck.

I saw this but don't know how to manipulate it to suit my need.
$("table input").on('change blur input', function () {
    var row = $(this).closest('tr'),
        quantity = row.find('.quantity').val(),
        price = parseFloat(row.find('.price').text());

    row.find('.total').text(quantity * price);

    var sum = 0;
    $('.total').each(function () {
        sum += parseFloat($(this).text()) || 0;
    });

    $('.sum').text(sum);
});

Open in new window


Thank you in advance
1
Hello Experts!

I need help on the following:

I have a DataTable that is populated via AJAX. The're are four columns with text inputs for scores. So, each row has some associated text inputs to it (CA1, CA2, CA3 and Exam). The maximum scores for these inputs are 10, 10, 10 and 70 respectively.

I've already put in place a server-side validation that checks all these values. Now, I want a client side validation. Something like onblur or onkeyup for each input. I want an alert to trigger and inform the user of wrong input and focus / and add error class (border-color: red) on such input box immediately not until the submit button is clicked.

I believe it's easy for guru but I'm still learning. Thanks to Experts on EE.

On a single column input, I tried this but no luck.
<script>
function checkValue() {
  var value = document.getElementsByName('cass1[]');
     for (i=0; i<value.length; i++)
	 {
	    if (value[i].value > 10)
               {
	          alert('The value is gtreater than 10');		
	          return false;
	       }
         }
}
</script>

{
    orderable: false,
    "className": "table-readonly",
    render: function (data, type, row) {
    return '<input type="hidden" name="id[]" value="' + row.Enroll_ID + '"><input class="form-control input-sm" type="text" maxlength="2" name="cass1[' + row.Enroll_ID + ']" onkeyup="checkValue()" value="' + row.CA1 + '" ' + getReadonly() + '>';
	}
}

Open in new window

Here is my code:

Open in new window

1
Have a jpg image that needs to be:
  • Opened and displayed
  • Resizeable using its lower-right corner
  • Draggable around the screen
  • Closeable
When first opened, it needs to be resized to fit inside whichever parent element is holding it ... a <div> maybe?
There should be no scrollbars.  Whatever size the parent is dragged to then that is the size of the jpg (but it remains the same ratio).
I thought this would be simple, but nothing I tried so far has worked.  Tried <img>.  Tried background-image.  I must be missing something.
Tools we use here are HTML5, CSS3, jQuery, and JavaScript.
Chrome is the web browser used internally.
0
Hello Experts!

I need help on the following.

My DataTable has a column with checkbox (meaning that each row has a checkbox associated with it). I have disabled the Submit button. I want it enabled only when at least 1 row is selected. I am able to toggle between enable/disable when I select/deselect a checkbox. But in a situation where more than 1 checkboxes are already selected and some are subsequently deselected, I still want it enabled as long as 1 row is checked.

If the above is unnecessary, would you rather show me how to check for empty array[ ] using JavaScript/jQuery at client side?

Here is my code:
name of the checkbox:
name="studentSelect[' + row.Student_ID + ']"

Open in new window

id of the Submit button:
add_enrollment

Open in new window

Currently, I use this to enable it:
myTable.on( 'select', function ( e, dt, type, index ) {
	if ( type === 'row' ) {
	   $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', true);
	   $('#add_enrollment').removeAttr('disabled');
	}
});

Open in new window

And this to disable it:
//select/deselect all rows according to table header checkbox
$('#enrollmentTable > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
	var th_checked = this.checked;//checkbox inside "TH" table header
	$('#enrollmentTable').find('tbody > tr').each(function(){
	var row = this;
	if(th_checked){
	     myTable.row(row).select();
	}
	else  {
	    myTable.row(row).deselect();
	    $('#add_enrollment').attr('disabled','true');
	}
});
});

Open in new window

0
ASP.NET - I am looking for recommendations on a good popup window control which can use something like CSS, jquery, or javascript.

I don't have a problem with using codecanyon, but it's so hard to find what is good versus bad out there.

So please recommend something, free or for reasonable purchase, that works well.

I am not interested in using Telerik or AjaxControl Toolkit.

Thanks!
1
I have a couple of accordions on a page that are not functioning properly. When I click the button to expand the items it only displays the first item in the <ul> , which element object should I use to display the entire <ul>? I also need the entire first <ul> to be displayed upon page load. Here is a code snippet.
<div class="column  column__primary">			
			
			<section class="module  videos">
				<header class="module-name">
					<h1>Videos</h1>
					<ul class="sort-options">
						<li class="sort-options--selected"><a href="#" class="sort--newest">Newest</a></li>
						<li><a href="#" class="sort--oldest">Oldest</a></li>
						<li><a href="#" class="sort--alphabetical">ABC</a></li>
					</ul>
				</header>
				<div class="video-list  accordion" id="accordion">
					<ul class="accordion__group">
						<a class="accordion__category"><h3>Category 1 subheader</h3></a>
						<li class="video-list__item">
							<a href="#">
								<h2>An enormous help</h2>
								<div class="video-preview-image">
									<img src="images/bcn/video-thumbnails/haddad-04.jpg" alt="" />
									<p>Play</p>
								</div>
							</a>
						</li>
						<li class="video-list__item">
							<a href="#">
								<h2>Would recommend</h2>
								<div class="video-preview-image">
									<img src="images/bcn/video-thumbnails/haddad-05.jpg" alt="" />
									<p>Play</p>
								</div>
							</a>
						</li>
						<li class="video-list__item">
							<a href="#">
								<h2>An enormous 

Open in new window

1
This issue is about disabling the "Submit button" or form submission subsequent to an original submission while it's running the request of the database, but re-enabling after the results are displayed. The issue is that the report doesn't really show that anything is going on during a date range selection, and the users click submit multiple times, hence, resubmitting the request and spiking the DB server CPU and potentially freezing the app.

I have several custom report pages in WordPress ( I did not design them and the developer is long gone). When they are called, by default they show results for "today". At the top of the page, there is a date picker that the user can choose to pull a report (displayed on screen) within the date range selected. The date picker has a submit button that jQuery catches and runs the same page code in the themes Functions file, but with the selected date range instead of "today", and then re-displays the results on the original page.

I need to be able to disable the date pickers submission if there is one already in the works and only re-enable once the page has displayed the previous request results.
I will include as much of the current code as possible so you have something to see.

***EDIT***
Upon further investigation, the "Submit" link/button has a class of disable that prevents the form from being submitted without dates entered in the date picker range.
It is removed by jQuery when both fields have a date …
1

jQuery

17K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Related Topics