mirror of
https://github.com/m-lamonaca/dev-notes.git
synced 2025-06-08 18:57:12 +00:00
remove mkdocs specific syntax
This commit is contained in:
parent
8d08c1964f
commit
8026e1465b
77 changed files with 1128 additions and 1128 deletions
|
@ -4,7 +4,7 @@
|
|||
|
||||
### Download and link the file
|
||||
|
||||
```html linenums="1"
|
||||
```html
|
||||
<head>
|
||||
<script src="jquery-x.x.x.min.js"></script>
|
||||
</head>
|
||||
|
@ -12,7 +12,7 @@
|
|||
|
||||
### Use a CDN
|
||||
|
||||
```html linenums="1"
|
||||
```html
|
||||
<head>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
|
||||
</head>
|
||||
|
@ -34,7 +34,7 @@ CDNs serve a large fraction of the Internet content today, including web objects
|
|||
|
||||
### [Finding DOM elements](https://api.jquery.com/category/selectors/)
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
$('tag');
|
||||
$("#id");
|
||||
$(".class");
|
||||
|
@ -42,11 +42,11 @@ $(".class");
|
|||
|
||||
### Manipulating DOM elements
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
$("p").addClass("special");
|
||||
```
|
||||
|
||||
```html linenums="1"
|
||||
```html
|
||||
<!-- before -->
|
||||
<p>Welcome to jQuery<p>
|
||||
|
||||
|
@ -56,11 +56,11 @@ $("p").addClass("special");
|
|||
|
||||
### Reading Elements
|
||||
|
||||
```html linenums="1"
|
||||
```html
|
||||
<a id="yahoo" href="http://www.yahoo.com" style="font-size:20px;">Yahoo!</a>
|
||||
```
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
// find it & store it
|
||||
var link = $('a#yahoo');
|
||||
|
||||
|
@ -72,14 +72,14 @@ link.css('font-size'); // '20px
|
|||
|
||||
### Modifying Elements
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
// jQuery
|
||||
$('a').html('Yahoo!');
|
||||
$('a').attr('href', 'http://www.yahoo.com');
|
||||
$('a').css({'color': 'purple'});
|
||||
```
|
||||
|
||||
```html linenums="1"
|
||||
```html
|
||||
<!-- before -->
|
||||
<a href="http://www.google.com">Google</a>
|
||||
|
||||
|
@ -89,7 +89,7 @@ $('a').css({'color': 'purple'});
|
|||
|
||||
### Create, Store, Manipulate and inject
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
let paragraph = $('<p class="intro">Welcome<p>'); // create and store element
|
||||
|
||||
paragraph.css('property', 'value'); // manipulate element
|
||||
|
@ -99,7 +99,7 @@ $("body").append(paragraph); // inject in DOM
|
|||
|
||||
### Regular DOM Nodes to jQuery Objects
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
var paragraphs = $('p'); // an array
|
||||
var aParagraph = paragraphs[0]; // a regular DOM node
|
||||
var $aParagraph = $(paragraphs[0]); // a jQuery Object
|
||||
|
@ -114,7 +114,7 @@ for(var i = 0; i < paragraphs.length; i++) {
|
|||
|
||||
## [Events](https://api.jquery.com/category/events/)
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
var onButtonClick = function() {
|
||||
console.log('clicked!');
|
||||
}
|
||||
|
@ -133,7 +133,7 @@ $('button').click(onButtonClick);
|
|||
|
||||
### Preventing Default Event
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
$('selector').on('event', function(event) {
|
||||
event.preventDefault();
|
||||
// custom logic
|
||||
|
@ -144,13 +144,13 @@ $('selector').on('event', function(event) {
|
|||
|
||||
In the HTML, add a `<script>` ag that hotlinks to the CDN or source file:
|
||||
|
||||
```html linenums="1"
|
||||
```html
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"><script>
|
||||
```
|
||||
|
||||
In the JavaScript call the jQuery plugin on the DOM:
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
$("form").validate();
|
||||
```
|
||||
|
||||
|
@ -160,7 +160,7 @@ $("form").validate();
|
|||
|
||||
### Patters & Anti-Patterns
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
// Pattern: name variables with $var
|
||||
$myVar =$('#myNode');
|
||||
|
||||
|
@ -179,7 +179,7 @@ $(document).on('click', 'p', function(argument){
|
|||
|
||||
### Chaining
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
banner.css('color', 'red');
|
||||
banner.html('Welcome!');
|
||||
banner.show();
|
||||
|
@ -197,7 +197,7 @@ banner.css('color', 'red')
|
|||
|
||||
DOM manipulation and event binding doesn't work if the `<script>` is in the `<head>`
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
$(document).ready(function() {
|
||||
// the DOM is fully loaded
|
||||
});
|
||||
|
@ -209,7 +209,7 @@ $(window).on('load', function(){
|
|||
|
||||
## AJAX (jQuery `1.5`+)
|
||||
|
||||
```js linenums="1"
|
||||
```js
|
||||
$.ajax({
|
||||
method: 'POST',
|
||||
url: 'some.php',
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue