Permalink
Browse files

Style/typography Fixes and code style adherence in the jQuery Core se…

…ction. Fixes #339.
  • Loading branch information...
alimony authored and ajpiano committed May 17, 2013
1 parent 340ea70 commit 810becfd472426351dabbc8cd3436cfd64a58723
Showing with 629 additions and 669 deletions.
  1. +7 −8 page/using-jquery-core/attributes.md
  2. +67 −95 page/using-jquery-core/avoid-conflicts-other-libraries.md
  3. +36 −31 page/using-jquery-core/css-styling-dimensions.md
  4. +13 −11 page/using-jquery-core/data-methods.md
  5. +25 −23 page/using-jquery-core/document-ready.md
  6. +10 −23 page/using-jquery-core/dollar-object-vs-function.md
  7. +3 −3 page/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button.md
  8. +8 −6 page/using-jquery-core/faq/how-do-i-determine-the-state-of-a-toggled-element.md
  9. +3 −3 page/using-jquery-core/faq/how-do-i-disable-enable-a-form-element.md
  10. +9 −9 page/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option.md
  11. +4 −4 page/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object.md
  12. +6 −6 page/using-jquery-core/faq/how-do-i-replace-text-from-the-3rd-element-of-a-list-of-10-items.md
  13. +8 −8 ...g-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md
  14. +6 −6 page/using-jquery-core/faq/how-do-i-select-an-item-using-class-or-id.md
  15. +5 −5 page/using-jquery-core/faq/how-do-i-select-elements-when-i-already-have-a-dom-element.md
  16. +5 −5 page/using-jquery-core/faq/how-do-i-test-whether-an-element-exists.md
  17. +16 −16 page/using-jquery-core/faq/how-do-i-test-whether-an-element-has-a-particular-class.md
  18. +65 −65 page/using-jquery-core/iterating.md
  19. +64 −49 page/using-jquery-core/jquery-object.md
  20. +58 −63 page/using-jquery-core/manipulating-elements.md
  21. +89 −115 page/using-jquery-core/selecting-elements.md
  22. +38 −31 page/using-jquery-core/traversing.md
  23. +38 −36 page/using-jquery-core/understanding-index.md
  24. +23 −22 page/using-jquery-core/utility-methods.md
  25. +23 −26 page/using-jquery-core/working-with-selections.md
@@ -2,27 +2,26 @@
title : Attributes
level : beginner
---
+
An element's attributes can contain useful information for your application, so it's important to be able to get and set them.
-## `.attr()`
+## The `.attr()` method
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.
`.attr()` as a setter:
```
-// Setting attributes
-$("a").attr( "href", "allMyHrefsAreTheSameNow.html" );
+$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );
-$("a").attr({
- title: "all titles are the same too!",
- href: "somethingNew.html"
+$( "a" ).attr({
+ title: "all titles are the same too!",
+ href: "somethingNew.html"
});
```
`.attr()` as a getter:
```
-// Getting attributes
-$("a").attr("href"); // returns the href for the first a element in the document
+$( "a" ).attr( "href" ); // Returns the href for the first a element in the document
```
@@ -7,164 +7,136 @@ attribution:
- jQuery Fundamentals
---
-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).
+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).
-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.
+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.
-##Putting jQuery into No-Conflict Mode
+## Putting jQuery Into No-Conflict Mode
-When you put jQuery into no-conflict mode, you have the option of assigning a
-new variable name to replace the `$` alias.
+When you put jQuery into no-conflict mode, you have the option of assigning a new variable name to replace the `$` alias.
```
-<!-- Putting jQuery into no-conflict mode -->
+<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
- // $j is now an alias to the jQuery function;
- // creating the new alias is optional
- var $j = jQuery.noConflict();
- $j(document).ready(function(){
- $j("div").hide();
- });
-
- // The $ variable now has the prototype meaning,
- // which is a shortcut for document.getElementById.
- // mainDiv below is a DOM element, not a jQuery object
- window.onload = function(){
- var mainDiv = $('main');
- }
+
+var $j = jQuery.noConflict();
+// $j is now an alias to the jQuery function; creating the new alias is optional.
+
+$j(document).ready(function() {
+ $j( "div" ).hide();
+});
+
+// The $ variable now has the prototype meaning, which is a shortcut for
+// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
+window.onload = function() {
+ var mainDiv = $( "main" );
+}
+
</script>
```
-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.
+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.
-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.
+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.
```
-<!-- Another way to put jQuery into no-conflict mode -->
+<!-- Another way to put jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
- jQuery.noConflict();
- jQuery(document).ready(function($){
- // You can use the locally-scoped $ in here as an alias to jQuery
- $("div").hide();
- });
+jQuery.noConflict();
- // The $ variable in the global scope has the prototype.js meaning
- window.onload = function(){
- var mainDiv = $('main');
- }
+jQuery( document ).ready(function( $ ) {
+ // You can use the locally-scoped $ in here as an alias to jQuery.
+ $( "div" ).hide();
+});
-</script>
+// The $ variable in the global scope has the prototype.js meaning.
+window.onload = function(){
+ var mainDiv = $( "main" );
+}
+</script>
```
-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.
+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.
-##Including jQuery Before Other Libraries
+## Including jQuery Before Other Libraries
-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()`.
+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()`.
```
-<!-- Loading jQuery before other libraries -->
+<!-- Loading jQuery before other libraries. -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
- // Use full jQuery function name to reference jQuery
- jQuery(document).ready(function(){
- jQuery("div").hide();
- });
+// Use full jQuery function name to reference jQuery.
+jQuery( document ).ready(function() {
+ jQuery( "div" ).hide();
+});
- // Use the $ variable as defined in prototype.js
- window.onload = function() {
- var mainDiv = $('main');
- };
+// Use the $ variable as defined in prototype.js
+window.onload = function() {
+ var mainDiv = $( "main" );
+};
</script>
```
-##Summary of Ways to Reference the jQuery Function
+## Summary of Ways to Reference the jQuery Function
-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:
+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:
-###Create a New Alias
+### Create a New Alias
-The `jQuery.noConflict()` method returns a reference to the jQuery function, so
-you can capture it in whatever variable you'd like:
+The `jQuery.noConflict()` method returns a reference to the jQuery function, so you can capture it in whatever variable you'd like:
```
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
- // Give $ back to prototype.js; create new alias to jQuery
- var $jq = jQuery.noConflict();
+// Give $ back to prototype.js; create new alias to jQuery.
+var $jq = jQuery.noConflict();
</script>
```
-###Use an Immediately Invoked Function Expression
+### Use an Immediately Invoked Function Expression
-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.
+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.
```
-<!-- Using the $ inside an immediately-invoked function expression -->
+<!-- Using the $ inside an immediately-invoked function expression. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
- jQuery.noConflict();
- (function($) {
- // your jQuery code here, using the $
- })(jQuery);
+jQuery.noConflict();
+
+(function( $ ) {
+ // Your jQuery code here, using the $
+})( jQuery );
+
</script>
```
-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 `$`.
+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 `$`.
-###Use the Argument That's Passed to the `jQuery(document).ready()` Function
+### Use the Argument That's Passed to the `jQuery( document ).ready()` Function
```
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
- jQuery(document).ready(function($){
- // your jQuery code here, using $ to refer to jQuery
- });
+jQuery(document).ready(function( $ ) {
+ // Your jQuery code here, using $ to refer to jQuery.
+});
</script>
```
@@ -176,9 +148,9 @@ Or using the more concise syntax for the DOM ready function:
<script src="prototype.js"></script>
<script>
- jQuery(function($){
- // your jQuery code here, using the $
- });
+jQuery(function($){
+ // Your jQuery code here, using the $
+});
</script>
```
@@ -2,28 +2,32 @@
title : CSS, Styling, & Dimensions
level: beginner
---
+
jQuery includes a handy way to get and set CSS properties of elements:
```
-// Getting CSS properties
-$("h1").css("fontSize"); // returns a string such as "19px"
-$("h1").css("font-size"); // also works
+// Getting CSS properties.
+
+$( "h1" ).css( "fontSize" ); // Returns a string such as "19px".
+
+$( "h1" ).css( "font-size" ); // Also works.
```
```
-// Setting CSS properties
-$("h1").css( "fontSize", "100px" ); // setting an individual property
+// Setting CSS properties.
-// setting multiple properties
-$("h1").css({
- fontSize: "100px",
- color: "red"
+$( "h1" ).css( "fontSize", "100px" ); // Setting an individual property.
+
+// Setting multiple properties.
+$( "h1" ).css({
+ fontSize: "100px",
+ color: "red"
});
```
-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.
+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.
-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.
+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.
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.
@@ -32,14 +36,17 @@ It's not recommended to use `.css()` as a setter in production-ready code, but w
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.
```
-// Working with classes
-var $h1 = $("h1");
+// Working with classes.
+
+var $h1 = $( "h1" );
-$h1.addClass("big");
-$h1.removeClass("big");
-$h1.toggleClass("big");
+$h1.addClass( "big" );
+$h1.removeClass( "big" );
+$h1.toggleClass( "big" );
-if ( $h1.hasClass("big") ) { ... }
+if ( $h1.hasClass( "big" ) ) {
+ ...
+}
```
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
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/).
```
-// Basic dimensions methods
-
-// sets the width of all H1 elements
-$("h1").width("50px");
-// gets the width of the first H1
-$("h1").width();
+// Basic dimensions methods.
+// Sets the width of all <h1> elements.
+$( "h1" ).width( "50px" );
-// sets the height of all H1 elements
-$("h1").height("50px");
+// Gets the width of the first <h1> element.
+$( "h1" ).width();
-// gets the height of the first H1
-$("h1").height();
+// Sets the height of all <h1> elements.
+$( "h1" ).height( "50px" );
+// Gets the height of the first <h1> element.
+$( "h1" ).height();
-// returns an object containing position
-// information for the first H1 relative to
-// its "offset (positioned) parent"
-$("h1").position();
+// Returns an object containing position information for
+// the first <h1> relative to its "offset (positioned) parent".
+$( "h1" ).position();
```
Oops, something went wrong.

0 comments on commit 810becf

Please sign in to comment.