You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: page/using-jquery-core/attributes.md
+8-10Lines changed: 8 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -2,12 +2,13 @@
2
2
title : Attributes
3
3
level : beginner
4
4
---
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.
7
6
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:
11
12
12
13
```
13
14
// Setting attributes
@@ -19,12 +20,9 @@ $("a").attr({
19
20
});
20
21
```
21
22
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:
26
24
27
25
```
28
26
// Getting attributes
29
27
$("a").attr("href"); // returns the href for the first a element in the document
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.
12
9
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:
15
11
16
12
```
17
13
<!-- Putting jQuery into no-conflict mode -->
@@ -24,10 +20,7 @@ variable name to replace `$`.
24
20
</script>
25
21
```
26
22
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.
31
24
32
25
```
33
26
<!-- Using the $ inside an immediately-invoked function expression -->
Copy file name to clipboardExpand all lines: page/using-jquery-core/css-styling-dimensions.md
+9-27Lines changed: 9 additions & 27 deletions
Original file line number
Diff line number
Diff line change
@@ -2,18 +2,7 @@
2
2
title : CSS, Styling, & Dimensions
3
3
level: beginner
4
4
---
5
-
## CSS, Styling, & Dimensions
6
-
7
-
jQuery includes a handy way to get and set CSS properties of elements.
8
-
9
-
<divclass="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:
17
6
18
7
```
19
8
// Getting CSS properties
@@ -31,20 +20,15 @@ $("h1").css({
31
20
}); // setting multiple properties
32
21
```
33
22
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 — 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 — in that case, either the camelCased or hyphenated form will work.
38
26
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.
40
28
41
-
###Using CSS Classes for Styling
29
+
## Using CSS Classes for Styling
42
30
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.
Classes can also be useful for storing state information about an element, such as indicating that an element is selected.
61
45
62
-
###Dimensions
46
+
## Dimensions
63
47
64
48
jQuery offers a variety of methods for obtaining and modifying dimension and position information about an element.
65
49
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/).
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.
13
9
14
10
```
15
11
// Storing and retrieving data related to an element
16
12
$("#myDiv").data( "keyName", { foo: "bar" } );
17
13
$("#myDiv").data("keyName"); // { foo: "bar" }
18
14
```
19
15
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.
24
17
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`:
30
19
31
20
```
32
21
// Storing a relationship between elements using $.fn.data
Copy file name to clipboardExpand all lines: page/using-jquery-core/document-ready.md
+3-8Lines changed: 3 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -2,10 +2,7 @@
2
2
title : $( document ).ready()
3
3
level: beginner
4
4
---
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.
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.
22
17
23
18
```
24
19
// Shorthand for $( document ).ready()
@@ -47,7 +42,7 @@ $( document ).ready( readyFn );
47
42
$( window ).load( readyFn );
48
43
```
49
44
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:
0 commit comments