<commit_before>/*======== Introduction ========*/

What is JQuery: "jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript."

Services: DOM Traversal and Manipulation
Event Handlind
AJAX

Visit: https://jquery.com/
Docs: http://api.jquery.com/
Source (<NAME>): https://www.youtube.com/watch?v=BWXggB-T1jQ&t=622s

/*======== Getting Started ========*/

go to: https://developers.google.com/speed/libraries/
and choose the version you want or use 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Optional jquery UI:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Paste scripts at bottom of body and links at bottom of head

$ - command that references the JQuery library
$("document") - pass in the target for the JQuery operator
$("document").ready() - call methods of the passed object

Example: 
$("document").ready(function() {
	
});

This line of code is executed after the window is loaded. All scripts should be executed here.

$("#table p").css("color", "purple") - set CSS by tag within #table: p { color: purple }
$("#table p").css({
	"border-color": "black",
	"border-width": "1px",
	"border-style": "solid",
}) 
- set CSS for multiple attributes with brackets and colons

/*======== Targeting ========*/

$("#idname") - target element with id
$(".classname") - target elements with class
$("a") - target elements by tag (ex: 'a')
$("#tableData a") - target elements by tag within element with id
$("em + a") - target element with tag ('a') following element with tag ('em')
$("p > em") - target child elements (ex: 'em' of 'p')
$("#oListIndent li:nth-child(3)") - target 3rd 'li' child element within #element
See video for more.

/*======== Common Methods ========*/

$("p:has(i)").hide(); - hide all 'p' that have nested 'i' tags
alert($("#element").html());
$("p:has(i)").html("<i>changing this text</i> here").show(); - change html
$("p:has(i)").append(" add to end.");
$("p:has(i)").prepend("Add to beginning");
$("p:has(i)").prepend("Add to beginning");
$("p:has(i)").before("<p id='after_p'>A new p element</p>"); - add html element before
$("p:has(i)").after("<p id='after_p'>A new p element</p>"); - add html element after

/*======== Event Handling ========*/
$("#after_p").click(function() {
	$(this).remove(); - remove the element that was clicked
});
$("#before_p").click(function() {
	$(this).replaceWith('<p>I\'m the new paragraph</p>');
});


<commit_msg>added jquery.txt in assets/item-desc for reference<commit_after>/*======== Introduction ========*/

What is JQuery: "jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript."

Services: DOM Traversal and Manipulation
Event Handlind
AJAX

Visit: https://jquery.com/
Docs: http://api.jquery.com/
Source (<NAME>): https://www.youtube.com/watch?v=BWXggB-T1jQ&t=622s
Cheat Sheet: http://www.newthinktank.com/2015/10/learn-jquery-one-video/

/*======== Getting Started ========*/

go to: https://developers.google.com/speed/libraries/
and choose the version you want or use 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Paste scripts at bottom of body and links at bottom of head

$ - command that references the JQuery library
$("document") - pass in the target for the JQuery operator
$("document").ready() - call methods of the passed object

Example: 
$("document").ready(function() {
	
});

This line of code is executed after the window is loaded. All scripts should be executed here.

$("#table p").css("color", "purple") - set CSS by tag within #table: p { color: purple }
$("#table p").css({
	"border-color": "black",
	"border-width": "1px",
	"border-style": "solid",
}) 
- set CSS for multiple attributes with brackets and colons

/*======== Targeting ========*/

$("#idname") - target element with id
$(".classname") - target elements with class
$("a") - target elements by tag (ex: 'a')
$("#tableData a") - target elements by tag within element with id
$("em + a") - target element with tag ('a') following element with tag ('em')
$("p > em") - target child elements (ex: 'em' of 'p')
$("#oListIndent li:nth-child(3)") - target 3rd 'li' child element within #element
See video for more.

/*======== Common Methods ========*/

$("p:has(i)").hide(); - hide all 'p' that have nested 'i' tags
alert($("#element").html());
$("p:has(i)").html("<i>changing this text</i> here").show(); - change html
$("p").addClass("new-class");
$("p").attr("font-size");

$("p").text();
$("p").val();
$("p").append(" add to end.");
$("p").prepend("Add to beginning");
$("p").prepend("Add to beginning");
$("p").before("<p id='after_p'>A new p element</p>"); - add html element before
$("p").after("<p id='after_p'>A new p element</p>"); - add html element after

/*======== Event Handling ========*/

$("#after_p").click(function() {
	$(this).remove(); - remove the element that was clicked
});
$("#before_p").click(function() {
	$(this).replaceWith('<p>I\'m the new paragraph</p>');
});

.highlight { background-color: yellow }
$("p").click(function() {
	$(this).toggleClass('highlight');
});

$("#img").mouseover(function() {
	$(#img).attr("src", "flipped-img.png");
}); - mouse enters element area

$("#img").mouseout(function() {
	$(#img).attr("src", "normal-img.png");
}); - mouse leaves element area

$("h2").hover(function() {
	$(h2).css("color", "green");
}, function() {
	$(h2).css("color", "black");	
}); - hover handles both over and out - here using two functions

$("document").dblclick(function(e) {
	alert(e.pageX);
	alert(e.pageY);
});

$("document").mousemove(function(e) {
	alert(e.screenX);
	alert(e.screenY);
});

$("document").keypress(function(e) {
	alert(String.fromCharCode(e.which));
});

$("#inputForm").blur(function() {
});
$("#inputForm").changed(function() {
});
$("#inputForm").focus(function() {
});
$("#inputForm").select(function() {
});
See video for more.

/*======== Animations ========*/

$("p").click(function() {
	$(this).hide();
});

$("p").click(function() {
	$(this).hide();
});

$("p").click(function() {
	$(this).fadeOut(2000);
});

$("p").click(function() {
	$(this).fadeToggle(2000);
});

$("p").click(function() {
	$(this).fadeTo('slow', 50);
});

$("p").click(function() {
	$(this).slideUp(1000);
});

$("p").click(function() {
	$(this).css("position", "relative"); - in order to move position must be relative or absolute

	$(this).animate({
		left: 300,
		opacity: .5,
		'font-size': "22px",
		width: 300
	}, 2000, "easeInQuad", function() { alert("all done") });
});

// The easing method functions are "swing or "linear"
    // You also have the JQuery UI animations : easeInQuad,
    // easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic,
    // easeInOutCubic, easeInQuart, easeOutQuart,
    // easeInOutQuart, easeInQuint, easeOutQuint,
    // easeInOutQuint, easeInExpo, easeOutExpo,
    // easeInOutExpo, easeInSine, easeOutSine, easeInOutSine,
    // easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic,
    // easeOutElastic, easeInOutElastic, easeInBack,
    // easeOutBack, easeInOutBack, easeInBounce,
    // easeOutBounce, easeInOutBounce

// It is common to use stop to prevent multiple
  // animations on the same object like this
  // $("#p_one").stop().animate( ...

/*======== Introduction ========*/

What is JQueryUI: "jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice."

Services: DOM Traversal and Manipulation
Event Handlind
AJAX

Visit: https://jqueryui.com/
Docs: http://api.jqueryui.com/
Source (<NAME>): https://www.youtube.com/watch?v=BWXggB-T1jQ&t=622s
Cheat Sheet: http://www.newthinktank.com/2015/10/learn-jquery-one-video/

/*======== Getting Started ========*/

go to: https://developers.google.com/speed/libraries/
and choose the version you want or use 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

select and download a theme at: http://jqueryui.com/themeroller/

move and link to jquery-ui.min.css and jquery-ui.min.js

$("#shMenu").menu({
    position: {
      // Popup menu comes on the right by default
      my: "center top", - my is a reference to the menu items itself
      at: "center bottom" - at is a reference to the menu dropdown
    },
 
  });
{'fraction_non_alphanumeric': 0.20213224208485892, 'fraction_numerical': 0.008830497523153133, 'mean_word_length': 4.594578313253012, 'pattern_counts': {'":': 6, '<': 32, '<?xml version=': 0, '>': 34, 'https://': 15, 'lorem ipsum': 0, 'www.': 5, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '163451', 'n_tokens_mistral': 3091, 'n_tokens_neox': 2976, 'n_words': 897}