-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 -->

-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

-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

-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`:

-`$( 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: