Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
I've had a lot of good experiences learning about web development on w3schools.com. It's hit or miss, I know, but the PHP and CSS sections specifically have proven very useful for reference.
Anyway, I was wondering if there was a similar site for jQuery. I'm interested in learning, but I need it to be online/searchable, so I can refer back to it easily when I need the information in the future.
Also, as a brief aside, is jQuery worth learning? Or should I look at different JavaScript libraries? I know Jeff uses jQuery on Stack Overflow and it seems to be working well.
Thanks!
Edit: jQuery's website has a pretty big list of tutorials, and a seemingly comprehensive documentation page. I haven't had time to go through it all yet, has anyone else had experience with it?
Edit 2: It seems Google is now hosting the jQuery libraries. That should give jQuery a pretty big advantage in terms of publicity.
Also, if everyone uses a single unified aQuery library hosted at the same place, it should get cached for most Internet users early on and therefore not impact the download footprint of your site should you decide to use it.
2 Months Later...
Edit 3: I started using jQuery on a project at work recently and it is great to work with! Just wanted to let everyone know that I have concluded it is ABSOLUTELY worth it to learn and use jQuery.
Also, I learned almost entirely from the Official jQuery documentation and tutorials. It's very straightforward.
10 Months Later...
jQuery is a part of just about every web app I've made since I initially wrote this post. It makes progressive enhancement a breeze, and helps make the code maintainable.
Also, all the jQuery plug-ins are an invaluable resource!
3 Years Later...
Still using jQuery just about every day. I now author jQuery plug-ins and consult full time. I'm primarily a Djangonaut but I've done several javascript only contracts with jQuery. It's a life saver.
From one jQuery user to another... You should look at templating with jQuery (or underscore -- see below).
Other things I've found valuable in addition to jQuery (with estimated portion of projects I use it on):
jQuery Form Plugin (95%)
jQuery Form Example Plugin (75%)
jQuery UI (70%)
Underscore.js (80%)
CoffeeScript (30%)
Backbone.js (10%)
Rick Strahl and Matt Berseth's blogs both tipped me into jQuery and man am I glad they did. jQuery completely changes a) your client programming perspective, b) the grief it causes it you, and c) how much fun it can be!
http://www.west-wind.com/weblog/
http://mattberseth.com/
I used the book jQuery in Action
http://www.amazon.com/jQuery-Action-Bear-Bibeault/dp/1933988355/ref=sr_1_1?ie=UTF8&s=books&qid=1219716122&sr=1-1 (I bought it used at Amazon for about $22). It has been a big help into bootstrapping me into jQuery. The documentation at jquery.com are also very helpful.
A place where jQuery falls a little flat is with its UI components. Those don't seem to be quite ready for primetime just yet.
It could be that Prototype or MooTools or ExtJS are as good as jQuery. But for me, jQuery seems to have a little more momentum behind it right now and that counts for something for me.
Check jQuery out. It is very cool!
A great resource for learning jQuery is: Learning jQuery. The author, Karl Swedberg, also co-wrote the book titled... ready? Yup, Learning jQuery. Remy Sharp also has great info geared towards the visual aspects of jQuery on his blog.
--SEAN O
I used Prototype for about six months before I decided to learn jQuery. To me, it was like a night and day difference. For example, in Prototype you will loop over a set of elements checking if one exists and then setting something in it, in jQuery you just say $('div.class').find('[name=thing]') or whatever and set it.
It's so much easier to use and feels a lot more powerful. The plugin support is also great. For almost any common js pattern, there's a plugin that does what you want. With prototype, you'll be googling for blogs that have the snippet of code you need.
It is very much worth it. jQuery really makes JavaScript fun again. It's as if all of JavaScript best practices were wrapped up into a single library.
I learned it through jQuery in Action (Manning), which I whipped through over a weekend. It's a little bit behind the current state of affairs, especially in regard to plug-ins, but it's a great introduction.
There are numerous JavaScript libraries that are worth at least a cursory review to see if they suit your particular need. First, come up with a short list of criteria to guide your selection and evaluation process.
Then, check out a high level framework comparison/reviews somewhere like Wikipedia, select a few that fit your criteria and interest you. Test them out to see how they work for you. Most, if not all, of these libraries have websites w/ reference documentation and user group type support.
To put some names out there, Prototype, script.aculo.us, Jquery, Dojo, YUI...those all seem to have active users and contributers, so they are probably worth reading up on to see if they meet your needs.
Jquery is good, but with a little extra effort, maybe you'll find that something else works better for you.
Good luck.
I found that these series of tutorials (“jQuery for Absolute Beginners” Video Series) by Jeffery Way are VERY HELPFUL.
It targets those developers who are new to jQuery. He shows how to create many cool stuff with jQuery, like animation, Creating and Removing Elements and more.
I learned a lot from it. He shows how it's easy to use jQuery.
Now I love it and I can read and understand any jQuery script even if it's complex.
Here is one example I like "Resizing Text"
1- jQuery:
<script language="javascript" type="text/javascript">
$(function() {
$('a').click(function() {
var originalSize = $('p').css('font-size'); // Get the font size.
var number = parseFloat(originalSize, 10); // That method will chop off any integer
// from the specifid varibale "originalSize".
var unitOfMassure = originalSize.slice(-2); // Store the unit of massure, Pixle or Inch.
$('p').css('font-size', number / 1.2 + unitOfMassure);
if (this.id == 'larger') {
$('p').css('font-size', number * 1.2 + unitOfMassure);
} // Figure out which element is triggered.
});
});
</script>
2- CSS Styling:
<style type="text/css" >
body{
margin-left:300px;text-align:center;
width:700px;
background-color:#666666;}
.box {
width:500px;
text-align:justify;
padding:5px;
font-family:verdana;
font-size:11px;
color:#0033FF;
background-color:#FFFFCC;}
</style>
2- HTML:
<div class="box">
Larger |
Smaller
<p>
In today’s video tutorial, I’ll show you how to resize text every
time an associated anchor tag is clicked. We’ll be examining
the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods.
</p>
</div>
I highly recommend these tutorials:
http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
There are a number of resources to learn jQuery (which is completely worth it IMHO). Start here http://docs.jquery.com/Main_Page to read the jQuery documentation. This is a great site for seeing visually what it has to offer:
http://visualjquery.com/1.1.2.html. Manning publications also has a great book which is highly recommended called jQuery in Action. As far as JavaScript libraries are concerned, this one and Prototype are probably the most popular if you're looking to compare jQuery to something else.
I started learning by looking at jQuery extensions to see how other developers work with the jQuery language. It not only helped me to learn jQuery syntax but also taught me how to develop my own extensions.
jQuery worths learning!!! I recommend reading "Learning jQuery" and "jQuery in Action". Both books are great with expalanation and examples. The next step is to actually use it to do something. You will find official http://docs.jquery.com docummentation very useful. I use it as a reference, google it all the time :)
Also "Learning jQuery" blog mensioned by Sean is also very useful. Also jQuery HowTo is also has a great collection of jQuery code snippets.
I haven't seen JQ-Fundamentals - by Rebecca Murphey mentioned anywhere here.
It is a very good book. It also explains the fundamentals of JavaScript required to understand the basics of JQuery.
Jquery.com is well organized and has many great examples. You don't need to buy a book. I found it easy to pickup on the fly by just referencing website's documentation. If you're someone who learns best by doing, I'd suggest this approach.
And yes, it's absolutely worth learning. It'll save you a lot of time and you'll actually look forward to doing JavaScript work!
I use Prototype, which I like. I'm afraid I don't know jQuery, so I can't compare them, but I think Prototype is worth checking out. Their API docs are generally pretty good, in my experience (which certainly helps with learnability).
Hey, I am biased in that I now work with these guys, but Carsonified offers some great resources for people learning and improving their jQuery skill set.
Just next Monday there is an online conference on jQuery featuring John Resig himself - http://carsonified.com/online-conferences/jquery/
Also, they now offer video tutorials via their membership scheme on the Think Vitamin blog,
I know there's a lot of free resource out there, I guess the difference here is the quality of the content you get. hope it's useful!
Below link my be helpful for you if you know SQL (Only css selectors).
http://karticles.com/2011/06/learning-jquery-with-sql-basic-selectors
http://karticles.com/2011/06/learning-jquery-with-sql-attribute-selectors
Related
I am looking for a correct method to create something very similar to this (just click Next on that page). I would love to receive any suggestions on how this has been made.
I believe that it's all about a DIV wrapping many ul's. When next is clicked, probably a jQuery code is showing an hidden DIV on the right, but wouldn't know how to position it. Everything clearly must be taken from a database.
Can anyone out there give me an advice? I hope this is not the kind of a thumbs-down question, as I tought this community would have been the best place to share this. Thanks a lot.
Take a look at some existing JavaScript MVC frameworks like Backbone.js, AngularJS, or Knockout, to understand some of the design patterns and philosophies behind these kinds of dynamic UIs.
They can be powerful for tools for a modern web app, especially when you have a lot of moving parts in your UI. They'll play well with your backend and datastore via AJAX, and you get nice features like "routing" which can help you do cool things with page flow, all the while keeping your JavaScript clean and concise.
i know the basics of js the language for several years, but never had a need to go deeper than say change a style of a paragraph or do a image rollover or validate a field.
am thinking going deeper with js.
can anyone recommend the top 3 library or framework that you cant live without?
Xah
Let's ask Stack Overflow Tag Trends:
Its really a personal choice, but:
JQuery
Node.js (Serverside JS)
SproutCore or Capuccino
You could take a look at this: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/?ca=dgr-dwexnbarbw
I am intrigued by IxEdit and its full-javascript approach that should allow to build nice web pages powered by JQuery effects.
I like also the opportunity to use it on many platforms.
But, is it worth a try ?
Is it complete ? Has it compatibility issues ? Are there better alternative tools ?
Don't rely on WYSIWYG editors--My guess is that this editor screws up performance like Frontpage, Dreamweaver -and the likes screws up HTML.
jQuery is pretty simple to understand, once you get hold of the concept of anonymous functions.. And with Stack Overflow at hand, you should be able to get where you want to go in no time.
Also: jQuery is the framework with the largest community and the framework with the largest plugin repository--need a gallery-thingie? No biggie, just browse the tons of plugins and find one that fits your needs.
Well, as JQuery isn't THAT complicated, I wouldn't pay for tools like that.
They also don't support any plugins I guess.
But it's free, so just try it...
I've just d/l IxEdit and am actually kind of excited about it.
It seems you do have to be careful about starting with a blank slate: I tried applying it to an existing page with a few jQ plugins and and it broke.
As for the WYSIWYG aspect of it, I think it would be great for beginners, as it generates the code on the fly, and you have to copy and paste the code into the page. This can give a noob the opportunity to see the code that's made and make sense of how it works.
My two cents.
I'd like to know what can be done in a browser UI (using a browser+CSS+javascript, not using Flash or Silverlight). For example, I think it's possible to:
Drag and drop
Arrange list items horizontally, and make them behave like menu items
Make things on page visible or invisible, depending on where the mouse is hovering
I admit this is a broad question, but that's what I'm looking for: an overview of available UI techniques (preferably with, also, at least a little clue or hyperlink as to how to implement each one).
Do you know of such a list or dictionary?
I'm especially interested in any techniques for interaction and user input (i.e. not simply page layout and navigation where the end-user is only consuming information).
Edit: people answered that I should look to see what functionality is implemented in various 'JavaScript UI toolkits'. FWIW, the following are my brief review/summary after looking at some of the suggestions.
http://demos.mootools.net/ -- implements a small (not wide) variety of UI features
http://ajaxian.com/by/topic/ui -- not an organized or coherent reference, more like a blog that reviews various things.
http://jqueryui.com/demos/ -- concise, organized introduction to a dozen interactions and/or widgets
http://plugins.jquery.com/ -- a library of a couple of thousand 'plug-ins' in 20 categories ... vaster and not so immediately understandable nor so consistently documented as the jqueryui demos
http://www.dojotoolkit.org/ -- takes a bit of navigating ... the easiest introduction to all functionality might be http://dojocampus.org/explorer/
http://script.aculo.us/ -- not very big
http://extjs.com/ -- quite a variety of powerful features, with a good set of demos at http://extjs.com/deploy/dev/examples/samples.html
http://mochikit.com/ -- this is another small library
http://developer.yahoo.com/yui/ -- includes about 20 widget classes, thorough documentation (each class description includes a link to demos), and special mention for having "Layout Manager" and "CSS Reset".
http://www.midorijs.com/ -- quite small and simple, no demos
To summarize, I think the best answers (i.e. the easiest-to-browse collections of the most functionality) are:
http://extjs.com/deploy/dev/examples/samples.html
http://dojocampus.org/explorer/
http://developer.yahoo.com/yui/examples/
A very great many things can be done in JS.
Try any of these javascript libraries:
http://www.dojotoolkit.org/
http://mootools.net/
http://jquery.com/
http://script.aculo.us/
http://extjs.com/
http://mochikit.com/
http://developer.yahoo.com/yui/
http://www.midorijs.com/
If you accept the HTML Canvas as valid HTML (Microsoft doesn't), you can do even more (requires Canvas support in your browser):
https://developer.mozilla.org/en/Canvas_tutorial
http://www.blobsallad.se/
http://www.benjoffe.com/code/demos/canvascape/ - 3rd person shooter
look at the documentation for things like mootools and jquery UI, there are plenty of examples of the crazy stuff that you can do in there.
Also check out ajaxians UI section
check out jquery UI http://jqueryui.com/ as well as plugins http://plugins.jquery.com/
this is just a simple example what you can achieve via Java Script
I think you could in principle do almost anything you can think of that involves the page changing how it looks in response to user action. I mean, js can do amazing visual effects, including pretty complex animation and vectors, and retrieve data from anywhere that allows it to using ajax, so put that way you can display anything you want how you want.
The question is how much resources these take client side. While pretty much anything is possible, not everything will necessarily be practical, and I doubt there's any reliable way to decide which things will be too resource-heavy to realistically implement on the client side.
Check out JQuery and JQueryUI
I was wondering if anyone happens to know of a jQuery (or pure javascript) mind map. I found this one a few times, but it uses MooTools, unfortunately.
I decided to port the one you found into a jQuery plugin, which can be found LINK REMOVED - SEE EDIT. It was written up in about 2 hours last night, so is probably riddled with bugs. If you find any bugs, feel free to email me at the email listed in my StackOverflow profile.
Edit: I've contacted the author of the original Mindmap, and my jQuery conversion has become the core of development. You can get it, as well as speed improvements and new functionality here, on the Github page.
I think you should try http://thejit.org/
I use it all the time and is perfect for my needs.
There's also arbor.js, much newer then the ones cited in other answers. It implements the force directed algorithm for layout, similar to js-mindmap that you cited, but with better performance since it uses webworkers. The actual rendering is left for you, so you can use jquery or whatever you prefer.
Also, if you decide to write your own implementation, a good visualization library is d3.js.
I wrote this one for a project, it's an enhanced jQuery plugin version of other js node maps I found online suitable for dynamic contents (i.e. also supports dynamic adding/removal of nodes, selection marks, customizable callbacks and styles).
Notice: IE wasn't in the compatibility targets since it's also officially being dropped