I've written this topic to help you all cleanse your code from jQuery, if you'd hate jQuery that much. I'll write lists of jQuery functions and converting it to original JavaScript the content of the topic was still coming soon because I'm a little busy managing stuff here and there. Be back in a hour, probably.
Like SystemFri 15 Oct 2021, 04:50
Auto Save MessagesFri 26 Feb 2021, 13:31
New tutorial questionMon 15 Feb 2021, 08:12
Support iOS Emojis (and other platforms)Sun 14 Feb 2021, 01:25
Does anybody have the original Avacweb Chat CSS?Tue 09 Feb 2021, 13:40
Page 1 of 1 •
jQuery? No more!
gill
Status : Syntax highlighter's colors are nice.
Posts : 78
Join date : 2014-04-05
Posts : 78
Join date : 2014-04-05
Sat 19 Sep 2015, 06:58
Ange Tuteur
Status : No status yet...
Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Sat 19 Sep 2015, 13:01
Anything jQuery can do, you can do natively because it's written in JavaScript. jQuery is just a library of methods or "JavaScript helpers" to make things easier. There's efficient was of using it and not so efficient ways. Y'know like querying the same tags over and over again without caching them to a variable, or using each() when you can use a for loop.
I think the only things I use it for often would be for the document ready execution. Even then, if you're just modifying a specific element you can poll for that element until it exists.
There's also the fade and slide methods, but now with CSS transitions you can pretty much make the same effects with 0% jQuery.
Also : http://needsmorejquery.com/
I think the only things I use it for often would be for the document ready execution. Even then, if you're just modifying a specific element you can poll for that element until it exists.
There's also the fade and slide methods, but now with CSS transitions you can pretty much make the same effects with 0% jQuery.
Also : http://needsmorejquery.com/
Mr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!
Posts : 1587
Join date : 2013-01-04
Posts : 1587
Join date : 2013-01-04
Sat 19 Sep 2015, 19:39
I am writing a weekly article that'll explain nearly every jQuery and how its basically done in jQuery but natively. It will progress every week.
Ange Tuteur
Status : No status yet...
Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Sun 20 Sep 2015, 15:02
That'll be interesting to read. ^^ Speaking of which I did see a site which offers some examples. It was this one : http://youmightnotneedjquery.com/ ( not so much explanation-wise )
jQuery is so big though, it'd take awhile to go over everything. Not to mention there's multiple ways to achieve the same result, browser incompatibilities, etc.. Although today, browsers aren't as bad, so you don't have to worry about that.
jQuery is so big though, it'd take awhile to go over everything. Not to mention there's multiple ways to achieve the same result, browser incompatibilities, etc.. Although today, browsers aren't as bad, so you don't have to worry about that.
Mr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!
Posts : 1587
Join date : 2013-01-04
Posts : 1587
Join date : 2013-01-04
Sun 20 Sep 2015, 16:13
Yeah we won't be really going to browser incompatibility especially with release of Microsoft Edge. And it gives them a rough idea, we won't be going over every single jQuery function since some are duplicates. Such as Ajax get post and load. Or show hide and toggle.
LGforum
Status : Working to restore AWC!
Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Sun 20 Sep 2015, 16:28
I think the way the new Avacweb JavaScript is built is a fine example of how you can give yourself all the necessary tools for the job very quickly without jquery. Depending on how you feel about it Mr.Easybb, I'd be happy enough sharing bits of the simple Avacweb framework for educational purposes. I mean I know I still have jquery here and there in it, but its included in our forum header anyway so sometimes I give in and use it at times.
Mr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!
Posts : 1587
Join date : 2013-01-04
Posts : 1587
Join date : 2013-01-04
Sun 20 Sep 2015, 17:21
Yeah if you want to share that is fine with me. My articles which you can see since you're still an admin is simple going through and showing how each function works and whats the Vanilla equivalent it's basically like the site ange tutuer showed except I go into detail about it.
Ch@lo Valdez
Status : :)
Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Sun 20 Sep 2015, 20:54
ok, i work in hospitals, i'm a doctor, codes is just for do better my forum,just for fun, it's a hobby, jQuery is more easy to learn than pure javascript or vanilla, in the last 3 years i made my own codes all i jquery, now i try to understand de pure form of javascript , i know, my english sucks, i think all you guys started use easy ways, i see old code in your olds boards using jquery, please be patient with us.
ok y use this line several timer in a global variable:
$("#profile-advanced-right").find(".module").eq(0).find("strong").eq(0).text();
how convert in pure javascript??
thanks
ok y use this line several timer in a global variable:
$("#profile-advanced-right").find(".module").eq(0).find("strong").eq(0).text();
how convert in pure javascript??
thanks
LGforum
Status : Working to restore AWC!
Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Sun 20 Sep 2015, 21:13
I agree to an extent @Ch@lo Valdez you are right that Jquery is easy to learn for beginners. However I think that's the very issue with it, it sends beginners down a bad path where they don't fully understand JavaScript itself, so they end up writing jQuery with very little understanding of it.
I know myself personally took the route to learning JavaScript properly and correctly and whilst learning, jquery certainly helped me with more advanced stuff at the time, but ultimately it became less and less convenient for me as I learnt more and more about JavaScript and I think that's possibly the perfect way.
I think the main problem is that beginners forget that jquery is JavaScript, so it surely makes sense to learn JavaScript first.
I know myself personally took the route to learning JavaScript properly and correctly and whilst learning, jquery certainly helped me with more advanced stuff at the time, but ultimately it became less and less convenient for me as I learnt more and more about JavaScript and I think that's possibly the perfect way.
I think the main problem is that beginners forget that jquery is JavaScript, so it surely makes sense to learn JavaScript first.
Mr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!
Posts : 1587
Join date : 2013-01-04
Posts : 1587
Join date : 2013-01-04
Sun 20 Sep 2015, 21:48
Ch@lo that code is converted to
Of course we'd check if the elements exist and everything. And I agree I started with jQuery as well and LG taught me better lol.
- Code:
[panda=js]var ele = document.getElementById("profile-advanced-right");
var mod = ele.getElementsByClassName("module")[0];
var strong = mod.getElementsByTagName("strong")[0];
var text = strong.innerText;
// or
var text = document.querySelector("#profile-advanced-right .module strong").innerText;
Of course we'd check if the elements exist and everything. And I agree I started with jQuery as well and LG taught me better lol.
Ch@lo Valdez
Status : :)
Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Sun 20 Sep 2015, 21:56
- Code:
[panda=js]
var ele = document.getElementById("profile-advanced-right");
var mod = ele.getElementsByClassName("module")[0];
var strong = mod.getElementsByTagName("strong")[0];
var text = strong.innerText;
// or
var text = document.querySelector("#profile-advanced-right .module strong").innerText;
LGforum
Status : Working to restore AWC!
Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Sun 20 Sep 2015, 22:11
In this instance, neither are better on their own. It depends on the situation; if you are going to be manipulating any of the other elements any further then the first option is better since you have everything you need in variables already. For a short and concise way of simply grabbing the text then the second is better. It's all relative really.
I want to share here am absolutely tiny function I use on a Avacweb and other places which prevents me having to do any of the above.
Here's how I'd do it:
[ic]_.getby('strong', _.getby('.module', _.getby('#profile-advanced-right')[0])[0].innerText[/ic]
It may look a little confusing for this specific example, but ultimately the _.getby function has been a favourite of mine for a while.
[ic] _.getby('.classname') _.getby('#id') _.getby('tagname')[/ic]
I want to share here am absolutely tiny function I use on a Avacweb and other places which prevents me having to do any of the above.
- Code:
[panda=js]_.getby = function(selector, context) {
context = context || document;
switch(selector.charAt(0)) {
case '#' :
return context.getElementById( selector.substr(1) );
case '.' :
return context.getElementsByClassName( selector.substr(1) );
default :
return context.getElementsByTagName( selector );
}
};
Here's how I'd do it:
[ic]_.getby('strong', _.getby('.module', _.getby('#profile-advanced-right')[0])[0].innerText[/ic]
It may look a little confusing for this specific example, but ultimately the _.getby function has been a favourite of mine for a while.
[ic] _.getby('.classname') _.getby('#id') _.getby('tagname')[/ic]
Mr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!
Posts : 1587
Join date : 2013-01-04
Posts : 1587
Join date : 2013-01-04
Mon 21 Sep 2015, 00:50
Always check if the element exist though or else your whole site could crash of course. I use simple functions such as
Btw my last post was while i was at the balloon festival on my phone lol. So if anything is wrong please don't whip me You can do test to see which is faster for anything at http://jsperf.com it's what I use to show people who love jQuery the difference it makes not using a library that clogged. Some of the clogged functions to me are
get, post, and load. These are all $.ajax functions.
hide, show, toggle. These are all display functions.
You can easily create a simple display function like so
Though the problem with this function to jQuery users is you can put a NodeList in there, it has to be one element.Also the repaints and redraw factor which I go on a rant here. http://www.avacweb.com/t2481-simple-javascript-questions
Once you start learning vanilla javascript you start seeing why we use it more and more.
- Code:
[panda=js]function byID(ele,context) {
context = context || document;
return context.getElementById(ele);
}
Btw my last post was while i was at the balloon festival on my phone lol. So if anything is wrong please don't whip me You can do test to see which is faster for anything at http://jsperf.com it's what I use to show people who love jQuery the difference it makes not using a library that clogged. Some of the clogged functions to me are
get, post, and load. These are all $.ajax functions.
hide, show, toggle. These are all display functions.
You can easily create a simple display function like so
- Code:
[panda=js]function Display(ele,sty) {
if(!ele)
return false;
ele.style.display = sty;
}
Though the problem with this function to jQuery users is you can put a NodeList in there, it has to be one element.Also the repaints and redraw factor which I go on a rant here. http://www.avacweb.com/t2481-simple-javascript-questions
Once you start learning vanilla javascript you start seeing why we use it more and more.
Ch@lo Valdez
Status : :)
Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Mon 21 Sep 2015, 14:02
ok how do this in vanilla?
.html(insert here new span???? )
- Code:
[panda=js]$("#profile-advanced-right").find(".h3").find("em").html('<span><img src="https://cdn2.iconfinder.com/data/icons/crystalproject/16x16/actions/signal-1.png" style="border-radius:0;border:none;margin-bottom:-1px;height:12px"/></span>');
- Code:
[panda=js]document.getElementById("profile-advanced-right").getElementsByClassName("h3")[0].getElementsByTagName("em")[0]
.html(insert here new span???? )
Ange Tuteur
Status : No status yet...
Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Mon 21 Sep 2015, 16:33
It would look something like this :
Get the element by id, check the existence, find the children you want, and set the innerHTML. You can add more "ifs" here if you want, but if you know the elements will always be there you don't need to. It's good practice to check though, because the DOM is unpredictable.
FYI You can use innerHTML to set or return the HTML content of an element.
But yeah, I think that many start with it because it's easier to understand for beginners ( and maybe some other reasons ). That is, they can use CSS selector style ways to manipulate elements and so on. I actually didn't get into native JavaScript until early last summer, thanks to that I have a better understanding now.
- Code:
[panda=js]$(function() {
// start up variables
var right = document.getElementById('profile-advanced-right'), em;
// check exisitence
if (right) {
em = right.getElementsByClassName('h3')[0].getElementsByTagName('em')[0]; // get children
// check and set content
if (em) em.innerHTML = '<span><img src="https://cdn2.iconfinder.com/data/icons/crystalproject/16x16/actions/signal-1.png" style="border-radius:0;border:none;margin-bottom:-1px;height:12px"/></span>';
}
});
Get the element by id, check the existence, find the children you want, and set the innerHTML. You can add more "ifs" here if you want, but if you know the elements will always be there you don't need to. It's good practice to check though, because the DOM is unpredictable.
FYI You can use innerHTML to set or return the HTML content of an element.
Same here, when I look back on some of my first scripts they're HORRID.Mr.Easybb wrote:And I agree I started with jQuery as well and LG taught me better lol.
But yeah, I think that many start with it because it's easier to understand for beginners ( and maybe some other reasons ). That is, they can use CSS selector style ways to manipulate elements and so on. I actually didn't get into native JavaScript until early last summer, thanks to that I have a better understanding now.
Mr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!
Posts : 1587
Join date : 2013-01-04
Posts : 1587
Join date : 2013-01-04
Mon 21 Sep 2015, 17:43
jQuery made an uproar because of it's easy CSS selection methods, as well as it's cross browser compatibility. It is nice except to me they went just a little bit overboard on it. If you look into how they return the elements in an array format when it's truly an object, that was smart just because developers are used to seeing that. Also like I said they clogged it with silly functions that are repetitive when we can use one function and do the same thing.
How does jQuery return an array like object? Easy take a look
So that just gets something like
But we want to return an array and have chainable events
Now when we work with this code
Looks like an array but it's not it's object still and we added a display function too.
Hope you get that, I'm just showing why it made such a huge uproar coming out.
How does jQuery return an array like object? Easy take a look
- Code:
[panda=js](function() {
//first create a lowercase function that returns a new function
function jquery(ele,context) {
context = context || document;
return new JQuery(ele,context);
}
//create our instance of jQuery in caps because that's js conventions when we use this which is not the window
function JQuery(ele,context) {
var targ = context.querySelectorAll(ele);
var len = targ.length;
if( len ) {
this.length = len;
while(len--){
this[len] = targ[len];
}
}
return this;
}
//make jQuery accessible in the global window object
window.jQuery = window.$ = jquery;
})();
So that just gets something like
- Code:
[panda=js]var a = $("#logo");
console.log(a);
//returns
/*
{
0: div#logo,
length: 1
}
*/
But we want to return an array and have chainable events
- Code:
[panda=js](function() {
//first create a lowercase function that returns a new function
function jquery(ele,context) {
context = context || document;
return new JQuery(ele,context);
}
//create our instance of jQuery in caps because that's js conventions when we use this which is not the window
function JQuery(ele,context) {
var targ = context.querySelectorAll(ele);
var len = targ.length;
if( len ) {
this.length = len;
while(len--){
this[len] = targ[len];
}
}
return this;
}
//make chainable events and return an array like object
jquery.fn = JQuery.prototype = {
splice: [].splice,
display:function(st){
var len = this.length;
while(len--){
this[len].style.display = st;
}
return this;
}
};
//make jQuery accessible in the global window object
window.jQuery = window.$ = jquery;
})();
Now when we work with this code
- Code:
[panda=js]var a = $("logo");
console.log(a);
//returns
/*
[ div#logo ]
*/
Looks like an array but it's not it's object still and we added a display function too.
- Code:
[panda=js]a.display("none");
// div#logo now has a style.display === none
Hope you get that, I'm just showing why it made such a huge uproar coming out.
Ch@lo Valdez
Status : :)
Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Mon 21 Sep 2015, 22:13
today i learn something new, thank you guys
Dom
Status : No status yet...
Posts : 513
Join date : 2011-12-24
Location : USA
Posts : 513
Join date : 2011-12-24
Location : USA
Wed 23 Sep 2015, 22:49
Back when I wrote FMChat, I admit that a good amount of it was written in jQuery, for the sake of cross-browser compatibility. I can't tell you the number of times someone would ask on the support forum why it isn't working on Internet Explorer 8. The first thing I would reply with would have been "upgrade your browser" or "use chrome/firefox." So, to prevent those things from happening, I just started changing newer methods to jQuery and the problems just went away.
And lastly, @Ch@alo Valdez, I assume (EspaƱol/Castellano) is your first language since your location is Mexico City, right? Your English is understandable and fine. Just some small problems like grammar lol. I actually learned Spanish not too long ago from native Spaniards and Hispanics, and I find it funny that my Hispanic friends hate when I speak in Castellano, so I change it up depending on who I am with haha.
And lastly, @Ch@alo Valdez, I assume (EspaƱol/Castellano) is your first language since your location is Mexico City, right? Your English is understandable and fine. Just some small problems like grammar lol. I actually learned Spanish not too long ago from native Spaniards and Hispanics, and I find it funny that my Hispanic friends hate when I speak in Castellano, so I change it up depending on who I am with haha.
Ch@lo Valdez
Status : :)
Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Thu 24 Sep 2015, 00:32
hahaha yes @Dom my first language is spanish, i read more fast in english because all my university books are in english, but is more technical and easy
Ch@lo Valdez
Status : :)
Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Tue 20 Oct 2015, 18:19
how do this in javascript
thanks
- Code:
[panda=js]
$('.postprofile').find('.f_a2').find('p:nth-last-of-type(2)').each(function () {
$(this).closest('.post').find('.version').addClass($(this).text().toLowerCase()).show();
});
thanks
Guest
Wed 04 May 2016, 20:37
I moved this topic to 'General Discussions'. It's more a discussion about when to use JS or jQuery as a library and JSON as data. Also, in this topic there's talk about non-FM related board versions and various coding examples that don't meet the requirements of existing in any of the support forums on AvacWeb but General Discussions. It's more of a thoughts sharing topic.
Sponsored content
|
|