Skip to content

Commit d16f72f

Browse files
committed
Add rest of using-jquery-core section
1 parent 3f60ffb commit d16f72f

File tree

4 files changed

+122
-0
lines changed

4 files changed

+122
-0
lines changed
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
chapter : jquery-core
3+
section : 6
4+
title : Avoiding Conflicts with Other Libraries
5+
attribution: jQuery Fundamentals
6+
---
7+
## Avoiding Conflicts with Other Libraries
8+
9+
If you are using another JavaScript library that uses the `$` variable, you can run into conflicts with jQuery.
10+
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.
11+
12+
When you put jQuery into no-conflict mode, you have the option of assigning a variable name to replace `$`.
13+
14+
<div class="example" markdown="1">
15+
Putting jQuery into no-conflict mode
16+
17+
&lt;script src="prototype.js">&lt;/script>
18+
&lt;script src="jquery.js">&lt;/script>
19+
&lt;script>var $j = jQuery.noConflict();&lt;/script>
20+
</div>
21+
22+
You can continue to use the standard $ by wrapping your code in a self-executing anonymous function;
23+
this is a standard pattern for plugin authoring, where the author cannot know whether another library will have taken over the `$`.
24+
25+
<div class="example" markdown="1">
26+
Using the $ inside a self-executing anonymous function
27+
28+
&lt;script src="prototype.js">&lt;/script>
29+
&lt;script src="jquery.js">&lt;/script>
30+
&lt;script>
31+
jQuery.noConflict();
32+
33+
(function($) {
34+
// your code here, using the $
35+
})(jQuery);
36+
&lt;/script>
37+
</div>
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
chapter : jquery-core
3+
section : 3
4+
title : Checking types
5+
attribution: jQuery Fundamentals
6+
---
7+
## Checking types
8+
9+
As mentioned in the "JavaScript basics" section, jQuery offers a few basic utility methods for determining the type of a specific value.
10+
11+
<div class="example" markdown="1">
12+
Checking the type of an arbitrary value
13+
14+
var myValue = [1, 2, 3];
15+
16+
// Using JavaScript's typeof operator to test for primative types
17+
typeof myValue == 'string'; // false
18+
typeof myValue == 'number'; // false
19+
typeof myValue == 'undefined'; // false
20+
typeof myValue == 'boolean'; // false
21+
22+
// Using strict equality operator to check for null
23+
myValue === null; // false
24+
25+
// Using jQuery's methods to check for non-primative types
26+
jQuery.isFunction(myValue); // false
27+
jQuery.isPlainObject(myValue); // false
28+
jQuery.isArray(myValue); // true
29+
</div>
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
chapter : jquery-core
3+
section : 4
4+
title : Data Methods
5+
attribution: jQuery Fundamentals
6+
---
7+
## Data Methods
8+
9+
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.
10+
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.
11+
jQuery offers a straightforward way to store data related to an element, and it manages the memory issues for you.
12+
13+
<div class="example" markdown="1">
14+
Storing and retrieving data related to an element
15+
16+
$('#myDiv').data('keyName', { foo : 'bar' });
17+
$('#myDiv').data('keyName'); // { foo : 'bar' }
18+
</div>
19+
20+
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.
21+
For the purposes of this class, we'll mostly use `$.fn.data` to store references to other elements.
22+
23+
For example, we may want to establish a relationship between a list item and a div that's inside of it.
24+
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`:
25+
26+
<div class="example" markdown="1">
27+
Storing a relationship between elements using `$.fn.data`
28+
29+
$('#myList li').each(function() {
30+
var $li = $(this), $div = $li.find('div.content');
31+
$li.data('contentDiv', $div);
32+
});
33+
34+
// later, we don't have to find the div again;
35+
// we can just read it from the list item's data
36+
var $firstLi = $('#myList li:first');
37+
$firstLi.data('contentDiv').html('new content');
38+
</div>
39+
40+
In addition to passing `$.fn.data` a single key-value pair to store data, you can also pass an object containing one or more pairs.
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
chapter : jquery-core
3+
section : 5
4+
title : Feature &amp; Browser Detection
5+
attribution: jQuery Fundamentals
6+
---
7+
## Feature &amp; Browser Detection
8+
9+
Although jQuery eliminates most JavaScript browser quirks, there are still occasions when your code needs to know about the browser environment.
10+
11+
jQuery offers the `$.support` object, as well as the deprecated $.browser object, for this purpose.
12+
For complete documentation on these objects, visit [http://api.jquery.com/jQuery.support/](http://api.jquery.com/jQuery.support/ "$.support documentation on api.jquery.com") and [http://api.jquery.com/jQuery.browser/](http://api.jquery.com/jQuery.browser/ "$.browser support on api.jquery.com").
13+
14+
The `$.support` object is dedicated to determining what features a browser supports; it is recommended as a more “future-proof” method of customizing your JavaScript for different browser environments.
15+
16+
The `$.browser` object was deprecated in favor of the `$.support` object, but it will not be removed from jQuery anytime soon. It provides direct detection of the browser brand and version.

0 commit comments

Comments
 (0)