Permalink
Browse files

Style Guide conformance for Using jQuery Core sections. Fixes #188.

  • Loading branch information...
1 parent bb10b89 commit 9d45ae2363ad239ea3d4012c4dd8fcf450b15e11 @jorydotcom jorydotcom committed with ajpiano Nov 15, 2012
@@ -2,12 +2,13 @@
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.
+An element's attributes can contain useful information for your application, so it's important to be able to get and set them.
-The `$.fn.attr` method acts as both a getter and a setter. As with the
-`$.fn.css` method, `$.fn.attr` as a setter can accept either a key and a value,
-or an object containing one or more key/value pairs.
+## `$.fn.attr`
+
+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.
+
+`$.fn.attr` as a setter:
```
// Setting attributes
@@ -19,12 +20,9 @@ $("a").attr({
});
```
-This time, we broke the object up into multiple lines. Remember, whitespace
-doesn"t matter in JavaScript, so you should feel free to use it liberally to
-make your code more legible! You can use a minification tool later to strip out
-unnecessary whitespace for production.
+`$.fn.attr` as a getter:
```
// Getting attributes
$("a").attr("href"); // returns the href for the first a element in the document
-```
+```
@@ -5,13 +5,9 @@ source: http://jqfundamentals.com/legacy
attribution:
- jQuery Fundamentals
---
-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.
+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.
-When you put jQuery into no-conflict mode, you have the option of assigning a
-variable name to replace `$`.
+You have the option of assigning a variable name to replace `$` in no-conflict mode:
```
<!-- Putting jQuery into no-conflict mode -->
@@ -24,10 +20,7 @@ variable name to replace `$`.
</script>
```
-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 `$`.
+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.
```
<!-- Using the $ inside an immediately-invoked function expression -->
@@ -43,4 +36,4 @@ jQuery.noConflict();
})( jQuery );
</script>
-```
+```
@@ -2,18 +2,7 @@
title : CSS, Styling, & Dimensions
level: beginner
---
-## CSS, Styling, &amp; Dimensions
-
-jQuery includes a handy way to get and set CSS properties of elements.
-
-<div class="note">
-CSS properties that normally include a hyphen
-need to be camel cased in JavaScript. For example, the CSS property font-size
-is expressed as fontSize when used as a property name in JavaScript. This does
-not apply, however, when passing the name of a CSS property to the `$.fn.css`
-method as a string — in that case, either the camel cased or hyphenated form
-will work.
-</div>
+jQuery includes a handy way to get and set CSS properties of elements:
```
// Getting CSS properties
@@ -31,20 +20,15 @@ $("h1").css({
}); // setting multiple properties
```
-Note the style of the argument we use 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 mulitple
-values at once.
+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.
+
+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.
-**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.
+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.
-### Using CSS Classes for Styling
+## Using CSS Classes for Styling
-As a getter, the `$.fn.css` method is valuable; however, it should generally be
-avoided as a setter in production-ready code, because you don't want
-presentational information in your JavaScript. Instead, write CSS rules for
-classes that describe the various visual states, and then simply change the
-class on the element you want to affect.
+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.
```
// Working with classes
@@ -59,13 +43,11 @@ if ( $h1.hasClass("big") ) { ... }
Classes can also be useful for storing state information about an element, such as indicating that an element is selected.
-### Dimensions
+## Dimensions
jQuery offers a variety of methods for obtaining and modifying dimension and position information about an element.
-The code in “Basic dimensions methods”, is just a very 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/).
+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
@@ -5,28 +5,17 @@ source: http://jqfundamentals.com/legacy
attribution:
- jQuery Fundamentals
---
-As your work with jQuery progresses, you'll find that there's often data about
-an element that 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.
+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.
```
// Storing and retrieving data related to an element
$("#myDiv").data( "keyName", { foo: "bar" } );
$("#myDiv").data("keyName"); // { foo: "bar" }
```
-You can store any kind of data on an element, and it's hard to overstate the
-importance of this when you get into complex application development. For the
-purposes of this class, we'll mostly use `$.fn.data` to store references to
-other elements.
+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.
-For example, we may want to establish a relationship between a list item and a
-div that's inside of it. We could establish this relationship every single
-time we interact with the list item, but a better solution would be to
-establish the relationship once, and then store a pointer to the div on the
-list item using `$.fn.data`:
+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`:
```
// Storing a relationship between elements using $.fn.data
@@ -2,10 +2,7 @@
title : $( document ).ready()
level: beginner
---
-You cannot safely manipulate a page 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
-whereas `$( window ).load(function() {})` will run once the entire page (images or iframe) not just the DOM is ready.
+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.
```
// A $( document ).ready() block
@@ -16,9 +13,7 @@ $( document ).ready(function() {
});
```
-There is a shorthand for `$( document ).ready()` that you will sometimes see; however,
-I recommend against using it if you are writing code that people who aren't experienced
-with jQuery may see.
+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.
```
// Shorthand for $( document ).ready()
@@ -47,7 +42,7 @@ $( document ).ready( readyFn );
$( window ).load( readyFn );
```
-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.
+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:
```
<html>
<head>
@@ -1,54 +0,0 @@
----
-title : Exercises
-source: http://jqfundamentals.com/legacy
-attribution:
- - jQuery Fundamentals
----
-## Exercises
-
-### Selecting
-
-Open the file `/exercises/index.html` in your browser.
-Use the file `/exercises/js/sandbox.js` or work in Firebug to accomplish the following:
-
-1. Select all of the div elements that have a class of "module".
-
-2. Come up with three selectors that you could use to get the third item in the #myList unordered list. Which is the best to use? Why?
-
-3. Select the label for the search input using an attribute selector.
-
-4. Figure out how many elements on the page are hidden (hint: .length).
-
-5. Figure out how many image elements on the page have an alt attribute.
-
-6. Select all of the odd table rows in the table body.
-
-### Traversing
-
-Open the file `/exercises/index.html` in your browser. Use the file `/exercises/js/sandbox.js` or work in Firebug to accomplish the following:
-
-1. Select all of the image elements on the page; log each image's alt attribute.
-
-2. Select the search input text box, then traverse up to the form and add a class to the form.
-
-3. Select the list item inside `#myList` that has a class of "current" and remove that class from it; add a class of "current" to the next list item.
-
-4. Select the select element inside `#specials`; traverse your way to the submit button.
-
-5. Select the first list item in the #slideshow element; add the class "current" to it, and then add a class of "disabled" to its sibling elements.
-
-### Manipulating
-
-Open the file `/exercises/index.html` in your browser. Use the file `/exercises/js/sandbox.js` or work in Firebug to accomplish the following:
-
-1. Add five new list items to the end of the unordered list `#myList`. Hint:
-
- for (var i = 0; i&lt;5; i++) { ... }
-
-2. Remove the odd list items
-
-3. Add another h2 and another paragraph to the last div.module
-
-4. Add another option to the select element; give the option the value "Wednesday"
-
-5. Add a new div.module to the page after the last one; put a copy of one of the existing images inside of it.
Oops, something went wrong.

0 comments on commit 9d45ae2

Please sign in to comment.