Skip to content

Commit 810becf

Browse files
Markus Amalthea Magnusonajpiano
Markus Amalthea Magnuson
authored and
ajpiano
committed
Style/typography fixes and code style adherence in the jQuery Core section. Fixes jquery#339.
1 parent 340ea70 commit 810becf

25 files changed

+629
-669
lines changed

‎page/using-jquery-core/attributes.md

+7-8
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,26 @@
22
title : Attributes
33
level : beginner
44
---
5+
56
An element's attributes can contain useful information for your application, so it's important to be able to get and set them.
67

7-
## `.attr()`
8+
## The `.attr()` method
89

910
The `.attr()` method acts as both a getter and a setter. As a setter, `.attr()` can accept either a key and a value, or an object containing one or more key/value pairs.
1011

1112
`.attr()` as a setter:
1213

1314
```
14-
// Setting attributes
15-
$("a").attr( "href", "allMyHrefsAreTheSameNow.html" );
15+
$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );
1616
17-
$("a").attr({
18-
title: "all titles are the same too!",
19-
href: "somethingNew.html"
17+
$( "a" ).attr({
18+
title: "all titles are the same too!",
19+
href: "somethingNew.html"
2020
});
2121
```
2222

2323
`.attr()` as a getter:
2424

2525
```
26-
// Getting attributes
27-
$("a").attr("href"); // returns the href for the first a element in the document
26+
$( "a" ).attr( "href" ); // Returns the href for the first a element in the document
2827
```

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

+67-95
Original file line numberDiff line numberDiff line change
@@ -7,164 +7,136 @@ attribution:
77
- jQuery Fundamentals
88
---
99

10-
The jQuery library and virtually all of its plugins are contained within the
11-
`jQuery` namespace. As a general rule, global objects are stored inside the
12-
jQuery namespace as well, so you shouldn't get a clash between jQuery and any
13-
other library (like prototype.js, MooTools, or YUI).
10+
The jQuery library and virtually all of its plugins are contained within the `jQuery` namespace. As a general rule, global objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library (like prototype.js, MooTools, or YUI).
1411

15-
That said, there is one caveat: *by default, jQuery uses `$` as a shortcut for
16-
`jQuery`.* Thus, if you are using another JavaScript library that uses the `$`
17-
variable, you can run into conflicts with jQuery. In order to avoid these
18-
conflicts, you need to put jQuery in no-conflict mode immediately after it is
19-
loaded onto the page and before you attempt to use jQuery in your page.
12+
That said, there is one caveat: *by default, jQuery uses `$` as a shortcut for `jQuery`.* Thus, if you are using another JavaScript library that uses the `$` variable, you can 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.
2013

21-
##Putting jQuery into No-Conflict Mode
14+
## Putting jQuery Into No-Conflict Mode
2215

23-
When you put jQuery into no-conflict mode, you have the option of assigning a
24-
new variable name to replace the `$` alias.
16+
When you put jQuery into no-conflict mode, you have the option of assigning a new variable name to replace the `$` alias.
2517

2618
```
27-
<!-- Putting jQuery into no-conflict mode -->
19+
<!-- Putting jQuery into no-conflict mode. -->
2820
<script src="prototype.js"></script>
2921
<script src="jquery.js"></script>
3022
<script>
31-
// $j is now an alias to the jQuery function;
32-
// creating the new alias is optional
33-
var $j = jQuery.noConflict();
34-
$j(document).ready(function(){
35-
$j("div").hide();
36-
});
37-
38-
// The $ variable now has the prototype meaning,
39-
// which is a shortcut for document.getElementById.
40-
// mainDiv below is a DOM element, not a jQuery object
41-
window.onload = function(){
42-
var mainDiv = $('main');
43-
}
23+
24+
var $j = jQuery.noConflict();
25+
// $j is now an alias to the jQuery function; creating the new alias is optional.
26+
27+
$j(document).ready(function() {
28+
$j( "div" ).hide();
29+
});
30+
31+
// The $ variable now has the prototype meaning, which is a shortcut for
32+
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
33+
window.onload = function() {
34+
var mainDiv = $( "main" );
35+
}
36+
4437
</script>
4538
```
4639

47-
In the code above, the `$` will revert back to its meaning in original library.
48-
You'll still be able to use the full function name `jQuery` as well as the new
49-
alias `$j` in the rest of your application. The new alias can be named anything
50-
you'd like: `jq`, `$J`, `awesomeQuery`, etc.
40+
In the code above, the `$` will revert back to its meaning in original library. You'll still be able to use the full function name `jQuery` as well as the new alias `$j` in the rest of your application. The new alias can be named anything you'd like: `jq`, `$J`, `awesomeQuery`, etc.
5141

52-
Finally, if you don't want to define another alternative to the full `jQuery`
53-
function name (you really like to use `$` and don't care about using the other
54-
library's `$` method), then there's still another approach you might try:
55-
simply add the `$` as an argument passed to your `jQuery(document).ready()`
56-
function. This is most frequently used in the case where you still want the
57-
benefits of really concise jQuery code, but don't want to cause conflicts with
58-
other libraries.
42+
Finally, if you don't want to define another alternative to the full `jQuery` function name (you really like to use `$` and don't care about using the other library's `$` method), then there's still another approach you might try: simply add the `$` as an argument passed to your `jQuery( document ).ready()` function. This is most frequently used in the case where you still want the benefits of really concise jQuery code, but don't want to cause conflicts with other libraries.
5943

6044
```
61-
<!-- Another way to put jQuery into no-conflict mode -->
45+
<!-- Another way to put jQuery into no-conflict mode. -->
6246
<script src="prototype.js"></script>
6347
<script src="jquery.js"></script>
6448
<script>
6549
66-
jQuery.noConflict();
67-
jQuery(document).ready(function($){
68-
// You can use the locally-scoped $ in here as an alias to jQuery
69-
$("div").hide();
70-
});
50+
jQuery.noConflict();
7151
72-
// The $ variable in the global scope has the prototype.js meaning
73-
window.onload = function(){
74-
var mainDiv = $('main');
75-
}
52+
jQuery( document ).ready(function( $ ) {
53+
// You can use the locally-scoped $ in here as an alias to jQuery.
54+
$( "div" ).hide();
55+
});
7656
77-
</script>
57+
// The $ variable in the global scope has the prototype.js meaning.
58+
window.onload = function(){
59+
var mainDiv = $( "main" );
60+
}
7861
62+
</script>
7963
```
8064

81-
This is probably the ideal solution for most of your code, considering that
82-
there'll be less code that you'll have to change in order to achieve complete
83-
compatibility.
65+
This is probably the ideal solution for most of your code, considering that there'll be less code that you'll have to change in order to achieve complete compatibility.
8466

85-
##Including jQuery Before Other Libraries
67+
## Including jQuery Before Other Libraries
8668

87-
The code snippets above rely on jQuery being loaded after prototype.js is
88-
loaded. If you include jQuery before other libraries, you may use `jQuery` when
89-
you do some work with jQuery, but the `$` will have the meaning defined in the
90-
other library. There is no need to relinquish the `$` alias by calling
91-
`jQuery.noConflict()`.
69+
The code snippets above rely on jQuery being loaded after prototype.js is loaded. If you include jQuery before other libraries, you may use `jQuery` when you do some work with jQuery, but the `$` will have the meaning defined in the other library. There is no need to relinquish the `$` alias by calling `jQuery.noConflict()`.
9270

9371
```
94-
<!-- Loading jQuery before other libraries -->
72+
<!-- Loading jQuery before other libraries. -->
9573
<script src="jquery.js"></script>
9674
<script src="prototype.js"></script>
9775
<script>
9876
99-
// Use full jQuery function name to reference jQuery
100-
jQuery(document).ready(function(){
101-
jQuery("div").hide();
102-
});
77+
// Use full jQuery function name to reference jQuery.
78+
jQuery( document ).ready(function() {
79+
jQuery( "div" ).hide();
80+
});
10381
104-
// Use the $ variable as defined in prototype.js
105-
window.onload = function() {
106-
var mainDiv = $('main');
107-
};
82+
// Use the $ variable as defined in prototype.js
83+
window.onload = function() {
84+
var mainDiv = $( "main" );
85+
};
10886
10987
</script>
11088
```
11189

112-
##Summary of Ways to Reference the jQuery Function
90+
## Summary of Ways to Reference the jQuery Function
11391

114-
Here's a recap of ways you can reference the jQuery function when the presence
115-
of another library creates a conflict over the use of the `$` variable:
92+
Here's a recap of ways you can reference the jQuery function when the presence of another library creates a conflict over the use of the `$` variable:
11693

117-
###Create a New Alias
94+
### Create a New Alias
11895

119-
The `jQuery.noConflict()` method returns a reference to the jQuery function, so
120-
you can capture it in whatever variable you'd like:
96+
The `jQuery.noConflict()` method returns a reference to the jQuery function, so you can capture it in whatever variable you'd like:
12197

12298
```
12399
<script src="prototype.js"></script>
124100
<script src="jquery.js"></script>
125101
<script>
126102
127-
// Give $ back to prototype.js; create new alias to jQuery
128-
var $jq = jQuery.noConflict();
103+
// Give $ back to prototype.js; create new alias to jQuery.
104+
var $jq = jQuery.noConflict();
129105
130106
</script>
131107
```
132108

133-
###Use an Immediately Invoked Function Expression
109+
### Use an Immediately Invoked Function Expression
134110

135-
You can continue to use the standard `$` by wrapping your code in an
136-
immediately invoked function expression; this is also a standard pattern for
137-
jQuery plugin authoring, where the author cannot know whether another library
138-
will have taken over the `$`. See the [Plugins](/plugins) section for more
139-
information about writing plugins.
111+
You can continue to use the standard `$` by wrapping your code in an immediately invoked function expression; this is also a standard pattern for jQuery 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.
140112

141113
```
142-
<!-- Using the $ inside an immediately-invoked function expression -->
114+
<!-- Using the $ inside an immediately-invoked function expression. -->
143115
<script src="prototype.js"></script>
144116
<script src="jquery.js"></script>
145117
<script>
146-
jQuery.noConflict();
147118
148-
(function($) {
149-
// your jQuery code here, using the $
150-
})(jQuery);
119+
jQuery.noConflict();
120+
121+
(function( $ ) {
122+
// Your jQuery code here, using the $
123+
})( jQuery );
124+
151125
</script>
152126
```
153127

154-
Note that if you use this technique, you will not be able to use prototype.js
155-
methods inside the immediately invoked function that expect `$` to be
156-
prototype.js's `$`.
128+
Note that if you use this technique, you will not be able to use prototype.js methods inside the immediately invoked function that expect `$` to be prototype.js's `$`.
157129

158-
###Use the Argument That's Passed to the `jQuery(document).ready()` Function
130+
### Use the Argument That's Passed to the `jQuery( document ).ready()` Function
159131

160132
```
161133
<script src="jquery.js"></script>
162134
<script src="prototype.js"></script>
163135
<script>
164136
165-
jQuery(document).ready(function($){
166-
// your jQuery code here, using $ to refer to jQuery
167-
});
137+
jQuery(document).ready(function( $ ) {
138+
// Your jQuery code here, using $ to refer to jQuery.
139+
});
168140
169141
</script>
170142
```
@@ -176,9 +148,9 @@ Or using the more concise syntax for the DOM ready function:
176148
<script src="prototype.js"></script>
177149
<script>
178150
179-
jQuery(function($){
180-
// your jQuery code here, using the $
181-
});
151+
jQuery(function($){
152+
// Your jQuery code here, using the $
153+
});
182154
183155
</script>
184156
```

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

+36-31
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,32 @@
22
title : CSS, Styling, & Dimensions
33
level: beginner
44
---
5+
56
jQuery includes a handy way to get and set CSS properties of elements:
67

78
```
8-
// Getting CSS properties
9-
$("h1").css("fontSize"); // returns a string such as "19px"
10-
$("h1").css("font-size"); // also works
9+
// Getting CSS properties.
10+
11+
$( "h1" ).css( "fontSize" ); // Returns a string such as "19px".
12+
13+
$( "h1" ).css( "font-size" ); // Also works.
1114
```
1215

1316
```
14-
// Setting CSS properties
15-
$("h1").css( "fontSize", "100px" ); // setting an individual property
17+
// Setting CSS properties.
1618
17-
// setting multiple properties
18-
$("h1").css({
19-
fontSize: "100px",
20-
color: "red"
19+
$( "h1" ).css( "fontSize", "100px" ); // Setting an individual property.
20+
21+
// Setting multiple properties.
22+
$( "h1" ).css({
23+
fontSize: "100px",
24+
color: "red"
2125
});
2226
```
2327

24-
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 multiple values at once.
28+
Note the style of the argument on the second line – 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 multiple values at once.
2529

26-
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 `.css()` method as a string &#8212; in that case, either the camelCased or hyphenated form will work.
30+
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 `.css()` method as a string – in that case, either the camelCased or hyphenated form will work.
2731

2832
It's not recommended to use `.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 hyphen.
2933

@@ -32,14 +36,17 @@ It's not recommended to use `.css()` as a setter in production-ready code, but w
3236
As a getter, the `.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.
3337

3438
```
35-
// Working with classes
36-
var $h1 = $("h1");
39+
// Working with classes.
40+
41+
var $h1 = $( "h1" );
3742
38-
$h1.addClass("big");
39-
$h1.removeClass("big");
40-
$h1.toggleClass("big");
43+
$h1.addClass( "big" );
44+
$h1.removeClass( "big" );
45+
$h1.toggleClass( "big" );
4146
42-
if ( $h1.hasClass("big") ) { ... }
47+
if ( $h1.hasClass( "big" ) ) {
48+
...
49+
}
4350
```
4451

4552
Classes can also be useful for storing state information about an element, such as indicating that an element is selected.
@@ -51,24 +58,22 @@ jQuery offers a variety of methods for obtaining and modifying dimension and pos
5158
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/).
5259

5360
```
54-
// Basic dimensions methods
55-
56-
// sets the width of all H1 elements
57-
$("h1").width("50px");
58-
// gets the width of the first H1
59-
$("h1").width();
61+
// Basic dimensions methods.
6062
63+
// Sets the width of all <h1> elements.
64+
$( "h1" ).width( "50px" );
6165
62-
// sets the height of all H1 elements
63-
$("h1").height("50px");
66+
// Gets the width of the first <h1> element.
67+
$( "h1" ).width();
6468
65-
// gets the height of the first H1
66-
$("h1").height();
69+
// Sets the height of all <h1> elements.
70+
$( "h1" ).height( "50px" );
6771
72+
// Gets the height of the first <h1> element.
73+
$( "h1" ).height();
6874
69-
// returns an object containing position
70-
// information for the first H1 relative to
71-
// its "offset (positioned) parent"
72-
$("h1").position();
7375
76+
// Returns an object containing position information for
77+
// the first <h1> relative to its "offset (positioned) parent".
78+
$( "h1" ).position();
7479
```

0 commit comments

Comments
 (0)