Skip to content

Commit 9d45ae2

Browse files
jorydotcomajpiano
jorydotcom
authored andcommitted
Style Guide conformance for Using jQuery Core sections. Fixes jquery#188.
1 parent bb10b89 commit 9d45ae2

14 files changed

+250
-636
lines changed

page/using-jquery-core/attributes.md

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22
title : Attributes
33
level : beginner
44
---
5-
An element's attributes can contain useful information for your application, so
6-
it's important to be able to get and set them.
5+
An element's attributes can contain useful information for your application, so it's important to be able to get and set them.
76

8-
The `$.fn.attr` method acts as both a getter and a setter. As with the
9-
`$.fn.css` method, `$.fn.attr` as a setter can accept either a key and a value,
10-
or an object containing one or more key/value pairs.
7+
## `$.fn.attr`
8+
9+
The `$.fn.attr` method acts as both a getter and a setter. As a setter, `$.fn.attr` can accept either a key and a value, or an object containing one or more key/value pairs.
10+
11+
`$.fn.attr` as a setter:
1112

1213
```
1314
// Setting attributes
@@ -19,12 +20,9 @@ $("a").attr({
1920
});
2021
```
2122

22-
This time, we broke the object up into multiple lines. Remember, whitespace
23-
doesn"t matter in JavaScript, so you should feel free to use it liberally to
24-
make your code more legible! You can use a minification tool later to strip out
25-
unnecessary whitespace for production.
23+
`$.fn.attr` as a getter:
2624

2725
```
2826
// Getting attributes
2927
$("a").attr("href"); // returns the href for the first a element in the document
30-
```
28+
```

page/using-jquery-core/avoid-conflicts-other-libraries.md

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,9 @@ source: http://jqfundamentals.com/legacy
55
attribution:
66
- jQuery Fundamentals
77
---
8-
If you are using another JavaScript library that uses the `$` variable, you can
9-
run into conflicts with jQuery. In order to avoid these conflicts, you need to
10-
put jQuery in no-conflict mode immediately after it is loaded onto the page and
11-
before you attempt to use jQuery in your page.
8+
If you're using another JavaScript library that uses the `$` variable, you might run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.
129

13-
When you put jQuery into no-conflict mode, you have the option of assigning a
14-
variable name to replace `$`.
10+
You have the option of assigning a variable name to replace `$` in no-conflict mode:
1511

1612
```
1713
<!-- Putting jQuery into no-conflict mode -->
@@ -24,10 +20,7 @@ variable name to replace `$`.
2420
</script>
2521
```
2622

27-
You can continue to use the standard $ by wrapping your code in a
28-
self-executing anonymous function; this is a standard pattern for plugin
29-
authoring, where the author cannot know whether another library will have taken
30-
over the `$`.
23+
You can continue to use the standard `$` by wrapping your code in a self-executing anonymous function. This is a standard pattern for plugin authoring, where the author cannot know whether another library will have taken over the `$`. See the [Plugins](/plugins) section for more information about writing plugins.
3124

3225
```
3326
<!-- Using the $ inside an immediately-invoked function expression -->
@@ -43,4 +36,4 @@ jQuery.noConflict();
4336
4437
})( jQuery );
4538
</script>
46-
```
39+
```

page/using-jquery-core/css-styling-dimensions.md

Lines changed: 9 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,7 @@
22
title : CSS, Styling, & Dimensions
33
level: beginner
44
---
5-
## CSS, Styling, &amp; Dimensions
6-
7-
jQuery includes a handy way to get and set CSS properties of elements.
8-
9-
<div class="note">
10-
CSS properties that normally include a hyphen
11-
need to be camel cased in JavaScript. For example, the CSS property font-size
12-
is expressed as fontSize when used as a property name in JavaScript. This does
13-
not apply, however, when passing the name of a CSS property to the `$.fn.css`
14-
method as a string — in that case, either the camel cased or hyphenated form
15-
will work.
16-
</div>
5+
jQuery includes a handy way to get and set CSS properties of elements:
176

187
```
198
// Getting CSS properties
@@ -31,20 +20,15 @@ $("h1").css({
3120
}); // setting multiple properties
3221
```
3322

34-
Note the style of the argument we use on the second line — it is an object that
35-
contains multiple properties. This is a common way to pass multiple arguments
36-
to a function, and many jQuery setter methods accept objects to set mulitple
37-
values at once.
23+
Note the style of the argument on the second line &#8212; it is an object that contains multiple properties. This is a common way to pass multiple arguments to a function, and many jQuery setter methods accept objects to set mulitple values at once.
24+
25+
CSS properties that normally include a hyphen need to be camelCased in JavaScript. For example, the CSS property `font-size` is expressed as `fontSize` when used as a property name in JavaScript. However, this does not apply when passing the name of a CSS property to the `$.fn.css()` method as a string &#8212; in that case, either the camelCased or hyphenated form will work.
3826

39-
**Note:** while we do not recommend using `$.fn.css` as a setter in production-ready code (see below), when passing in an object to set CSS, CSS properties will be camelCased, instead of using a hypen.
27+
It's not recommended to use `$.fn.css()` as a setter in production-ready code, but when passing in an object to set CSS, CSS properties will be camelCased instead of using a hypen.
4028

41-
### Using CSS Classes for Styling
29+
## Using CSS Classes for Styling
4230

43-
As a getter, the `$.fn.css` method is valuable; however, it should generally be
44-
avoided as a setter in production-ready code, because you don't want
45-
presentational information in your JavaScript. Instead, write CSS rules for
46-
classes that describe the various visual states, and then simply change the
47-
class on the element you want to affect.
31+
As a getter, the `$.fn.css()` method is valuable. However, it should generally be avoided as a setter in production-ready code, because it's generally best to keep presentational information out of JavaScript code. Instead, write CSS rules for classes that describe the various visual states, and then change the class on the element.
4832

4933
```
5034
// Working with classes
@@ -59,13 +43,11 @@ if ( $h1.hasClass("big") ) { ... }
5943

6044
Classes can also be useful for storing state information about an element, such as indicating that an element is selected.
6145

62-
### Dimensions
46+
## Dimensions
6347

6448
jQuery offers a variety of methods for obtaining and modifying dimension and position information about an element.
6549

66-
The code in “Basic dimensions methods”, is just a very brief overview of the
67-
dimensions functionality in jQuery; for complete details about jQuery dimension
68-
methods, visit the [Dimensions documentation on api.jquery.com](http://api.jquery.com/category/dimensions/).
50+
The code below shows a brief overview of the dimensions functionality in jQuery. For complete details about jQuery dimension methods, visit the [dimensions documentation on api.jquery.com](http://api.jquery.com/category/dimensions/).
6951

7052
```
7153
// Basic dimensions methods

page/using-jquery-core/data-methods.md

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,17 @@ source: http://jqfundamentals.com/legacy
55
attribution:
66
- jQuery Fundamentals
77
---
8-
As your work with jQuery progresses, you'll find that there's often data about
9-
an element that you want to store with the element. In plain JavaScript, you
10-
might do this by adding a property to the DOM element, but you'd have to deal
11-
with memory leaks in some browsers. jQuery offers a straightforward way to
12-
store data related to an element, and it manages the memory issues for you.
8+
There's often data about an element you want to store with the element. In plain JavaScript, you might do this by adding a property to the DOM element, but you'd have to deal with memory leaks in some browsers. jQuery offers a straightforward way to store data related to an element, and it manages the memory issues for you.
139

1410
```
1511
// Storing and retrieving data related to an element
1612
$("#myDiv").data( "keyName", { foo: "bar" } );
1713
$("#myDiv").data("keyName"); // { foo: "bar" }
1814
```
1915

20-
You can store any kind of data on an element, and it's hard to overstate the
21-
importance of this when you get into complex application development. For the
22-
purposes of this class, we'll mostly use `$.fn.data` to store references to
23-
other elements.
16+
Any kind of data can be stored on an element. For the purposes of this article, `$.fn.data` will be used to store references to other elements.
2417

25-
For example, we may want to establish a relationship between a list item and a
26-
div that's inside of it. We could establish this relationship every single
27-
time we interact with the list item, but a better solution would be to
28-
establish the relationship once, and then store a pointer to the div on the
29-
list item using `$.fn.data`:
18+
For example, you may want to establish a relationship between a list item and a `<div>` that's inside of it. This relationship could be established every single time the list item is touched, but a better solution would be to establish the relationship once, then store a pointer to the `<div>` on the list item using `$.fn.data`:
3019

3120
```
3221
// Storing a relationship between elements using $.fn.data

page/using-jquery-core/document-ready.md

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
title : $( document ).ready()
33
level: beginner
44
---
5-
You cannot safely manipulate a page until the document is “ready.”
6-
jQuery detects this state of readiness for you; code included inside
7-
`$( document ).ready()` will only run once the page DOM (Document Object Model) is ready for JavaScript code to execute
8-
whereas `$( window ).load(function() {})` will run once the entire page (images or iframe) not just the DOM is ready.
5+
A page can't be manipulated safely until the document is “ready.” jQuery detects this state of readiness for you. Code included inside `$( document ).ready()` will only run once the page DOM (Document Object Model) is ready for JavaScript code to execute. Code included inside `$( window ).load(function( {})` will run once the entire page (images or iframes), not just the DOM, is ready.
96

107
```
118
// A $( document ).ready() block
@@ -16,9 +13,7 @@ $( document ).ready(function() {
1613
});
1714
```
1815

19-
There is a shorthand for `$( document ).ready()` that you will sometimes see; however,
20-
I recommend against using it if you are writing code that people who aren't experienced
21-
with jQuery may see.
16+
Experienced developers sometimes use shorthand for `$( document ).ready()`. If you are writing code that people who aren't experienced with jQuery may see, it's best to use the long form.
2217

2318
```
2419
// Shorthand for $( document ).ready()
@@ -47,7 +42,7 @@ $( document ).ready( readyFn );
4742
$( window ).load( readyFn );
4843
```
4944

50-
Let's take a look at how both the events act. The below example tries to load some website url in an iframe and checks for both the events.
45+
The below example shows `$( document ).ready()` and `$( window ).load()` in action. The code tries to load a website url in an iframe and checks for both events:
5146
```
5247
<html>
5348
<head>

page/using-jquery-core/exercises.md

Lines changed: 0 additions & 54 deletions
This file was deleted.

0 commit comments

Comments
 (0)