dir.by  
  Search  
Programming, development, testing
→
jQuery - JavaScript library for convenient work with HTML
→
jQuery where to download and how to connect?
  Looked at 21522 times       Comments 1  
 Last Comment: (24 November 2020 15:54) Спасибо. Вам оценка 5 read...       Write a comment...
  jQuery Download 
last updated: 23 November 2018
Download jQuery Files needed from the official website jquery.com/download
Version jQuery
Size
Where to download ?
jquery-3.3.1.min.js - it is a compressed library jQuery
(for use on the sites)
86 kb
https://code.jquery.com/jquery-3.3.1.min.js
jquery-3.3.1.js - it is a library with source code jQuery
271 kb
https://code.jquery.com/jquery-3.3.1.js
Connect jQuery
Description
How to connect ?
Connect Library jQuery to page HTML
1) Download jquery-3.3.1.min.js to your computer
2) Create a new file 1.html
3) Inside the file 1.html Connect jQuery
  Html  
<script src="./jquery-3.3.1.min.js"></script>


Note!
Put jquery-3.3.1.min.js file
and 1.html file
in the same directory
Connect Library jQuery in the app ASP.NET MVC
1) Download the library jQuery using the utility NuGet in the Visual Studio

2) Connect JQuery in the View
  cshtml  
<script src='@Url.Content("~/Scripts/jquery-3.3.1.min.js")'></script>

Learn more: jQuery in ASP.NET MVC...
Example (Connect Library jQuery to page HTML)
  Html     hide all the elements in 4 seconds <p>
<html>

<!-- heading -->
<head>
     <meta charset="utf-8">
     <title>Example</title>
</head>

<!-- page -->
<body>
     <!-- connect library jQuery -->
     <script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>
    
     <!-- html Elements -->
     <p style='color:green; font-size:26px;'>Hello!</p>
     <p style='color:orange; font-size:26px;'>World</p>
    
     <!-- the page has opened -->
     <script>
          $( document ).ready(function()
          {
               // hiding all the elements p in 4 seconds
               $("p").hide(4000);
          });
     </script>
    
</body>
</html>
Example we look, we test
New app
Read: create a new application with jQuery...
 
← Previous topic
What the JQuery ?
 
Next topic →
Create a new application with jQuery
 
Your feedback ... 1 Comments
guest
24 November 2020 15:54
Спасибо. Вам оценка 5
   
Your Name
Your comment (www links can only be added by a logged-in user)
  Объявления  
  Объявления  
 
• What the JQuery ?
• jQuery where to download and how to connect?
• Create a new application with jQuery
• Examples jQuery
• Event html the page has opened. jQuery Example: $(function () {...}); or $( document ).ready(function() { ... });
find one item by ID
• Find Item by ID in the jQuery. Example: $("#Name")
find many items in the list ID
Find Item by: tag, attribute, class
• Find the element (elements) by attribute name in the jQuery. HTML example: <div color='green'>Hello!</div> Example of jQuery: var elem = $("[color]");
• find the element by attribute and attribute value in the jQuery. Example: $("[my='123a']")
iterate through all the elements with the desired class
• Iterate through all items | each | in the jQuery. Example: $('.book').each(function(i, elem) { /*to do something*/ });
element (show/hide)
• Show/hide item in the jQuery. Example: $("#Name").show()
class (add/remove from an item)
• Add/Remove class in the jQuery. Example: $("#Name").addClass("my"); $("#Name").removeClass("my");
content of the element (change/take)
• Change the content of an element in the jQuery. Example: $("#Name").html("Good morning");
• Take content from an item in the jQuery. Example: $("#Name").html();
value for attribution (change/take)
• Change the value for the attribute in the jQuery. Example: $("#Name").attr("aaa", "Hello"); $("#Name").removeAttr("aaa");
• Take the value from the attribution in the jQuery. Example: $("#Name").attr("aaa");
value for the DOM object property (change/take)
• Change the property of a DOM object in the jQuery. Example: $("#Name").prop("eee", "Hello");
• Take a property of the DOM object in the jQuery. Example: $("#Name").prop("eee");
meaning checkbox (change/take)
• Change the value for checkbox in the jQuery. Example: $("#Name").prop('checked', true);
• Take value checkbox in the jQuery. Example: $("#Name").prop('checked');
CSS styles for an element
• Change the CSS style of an element in the jQuery. Example: $("#Name").css("color", "#cc0000");
• Take CSS style of the element in the jQuery. Example: var value1 = $("#Name").css("color");
Create an item
• insertAfter | Insert new content HTML after the desired element in the jQuery. Example: $("<font color='green'>my text</font>").insertAfter($("#div1"));
• append | Create an item HTML to the end of the block element in the jQuery. Example: $("body").append("<font color='green'>my text</font>")
value for an item (change/take)
• Change value for HTML element in the jQuery. Example: $("#Name").val("Hello");
• Take value you have an HTML element in the jQuery. Example: var value1 = $("#Name").val();
select an item from the list by index
• In the jQuery choose HTML option from HTML select. Select by index, value. Example: $("#myColors").prop('selectedIndex', 2);
• In the jQuery take value, index from active HTML option. Example1: var value = $("#myColors").val(); Example 2: var index = $("#myColors").prop('selectedIndex');
enable / disable
• Enable / disable for HTML element in the jQuery. Example of enable: $("#Book").removeAttr("disabled"); Disable example: $("#Book").attr("disabled", "disabled");
Send a request ajax
• Send ajax query | jQuery. Example: $.ajax({ type:"POST", url:"...", data:{...}}, success: function(msg) { ... } });
• Event when ajax query has been finished | jQuery. Example: $(document).ajaxStop(function () { ... });
Событие
handling the click event
• Event when we click the left mouse button on the element | click | jQuery | Example: $("#Name").click(function(event) { ... });
• Handle event click for all elements | jQuery. Example: $(document).on("click", function(event){ ... });
event handling submit
• Event when on your form press the button "submit" | jQuery. Example: $("#Your Form ID").submit( function() { ... } );
Additional topics, questions
• jQuery.fn and jQuery.prototype it's the same thing
WWW sites to explore JQuery
• Sites to explore JQuery
  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика