ansaurus

Question

Raw javascript instead of jquery (example follows)

Answer 1

+6 A:

Isn't this an overkill to include the whole jquery library?

You tell me. You could serve the library hosted by Google, which may be already cached in the client-side.

In my opinion, being consistent is the key. If you are used to jQuery, then why not continue to use it? Your code will be easier to maintain.

You might find one of my earlier questions interesting: When is it acceptable to use jQuery?

Josh Stodola 2010-02-09 21:06:06

+1 for mentioning the use of CDNs

Pharabus 2010-02-09 21:07:07

Answer 2

+1 A:

IF you do it through raw javascript you are going to need to add a onclick event to each anchor and an id to each li

<ul>   
    <li id='distinctID'><a href="javascript:strikeThrough('distinctId')">Click Me</a></li>
</ul>

that's your html change

function strikeThrough(id){
    var li = document.getElementById(id)
    li.style. textDecoration = "line-through"
}

thats your javascript function

I would recommend that you just include JQuery so that you don't have to add a ton of ids to you mark up

RHicke 2010-02-09 21:06:29

No, you don't need inline event handler attributes, you can write `element.onclick= function` from JavaScript and this is almost always the best thing to do. Certainly don't (ever) use `javascript:` pseudo-URLs.

bobince 2010-02-09 21:33:04

Answer 3

+1 A:

If you're never going to do more with your website, maybe it's overkill. Doing the equivalent of what that short blurb does in a cross-browser manner is a headache. That's the value of using jQuery: writing something once and having it usually work without too much hassle. If you think the extra 20KB of bandwidth for visitors to your page is an undue burden, then start reading up on event handlers, DOM, and CSS manipulation.

You say you don't know JS well...did you inherit this jQuery usage from someone else or did you copy it from an example somewhere?

Jonathon 2010-02-09 21:07:52

Answer 4

+4 A:

The following will achieve it in a browser independent manner.

<html>

  <body onload="loaded()">
      ...content goes here....
      <script>
          function linkClickHandler(){
              var parentNode = this.parentNode;
              if(parentNode.tagName.toLowerCase()==="li"){
                  parentNode.style.textDecoration = "line-through";
              }
              return false;
          }

          function loaded(){
              for (var i=0, links = document.links, numLinks = links.length; i<numLinks; i++){
                  links[i].onclick = linkClickHandler;
              }
          }
      </script>
  </body>
</html>

Roland Bouman 2010-02-09 21:07:55

Ain't the jQuery $(document).ready() method is different than window.onload() ?

Dor 2010-02-09 21:11:47

Dor: perhaps. I think that for what the OP is trying to achieve, this old skool solution works just fine.

Roland Bouman 2010-02-09 21:15:38

The jQuery `ready` event is quite complex: it uses the `DOMContentLoaded` event where available (reliable), a ghastly property-reading-poller hack on IE (not reliable), and everywhere else falls back to `onload` (reliable, but later to fire). If you want to run on content-loaded, the only 100% reliable method (whether jQuery or raw JavaScript) is to put the trigger `<script>` element at the end of the document.

bobince 2010-02-09 21:26:39

Many thanks for your effort. Unfortunately it doesnt seem to work although it doesnt give any errors in the console either. Maybe it's me doing something wrong?

fractalbit 2010-02-09 21:28:32

@bobince: thanks, I never analyzed it, and your explanation is insightful. Just one question regarding the location of the "trigger" `<script>` element. By "at the end of the document" do you mean right before the `</body>` endtag? Or completely at the bottom, beyond the closing `</html>`? Just curious...

Roland Bouman 2010-02-09 21:30:40

Nits: should be `onclick= ...` not `click`; tagname comparison should do a case folding (eg. `parentNode.tagName.toLowerCase()==='li'`).

bobince 2010-02-09 21:31:06

@Roland: Yes, just before `</body>` is generally best. To be outside the body would be invalid, though browsers would tend to allow it.

bobince 2010-02-09 21:31:54

@bobince: thanks! and thanks! fixing the nits you pointed out...that's what I get for not testing :(

Roland Bouman 2010-02-09 21:33:01

Yes, now it works! Many thanks to all of you!

fractalbit 2010-02-09 21:38:31

Answer 5

+1 A:

Converting a seems simple function from jquery code to a raw javascript code sometimes will catch you with a cross browser bug, a bloat functions, and a possibilities that your needs will grow in the future.

Using jQuery for such a functions is not overkill, trust me. You will never now what else of jQuery neat feature that you might need in the future. jQuery is small enough in minified form, wouldn't make any differences for a page load.

Donny Kurnia 2010-02-09 21:09:45

Answer 6

+2 A:

Non-jQuery approach:

    [...your html...]

    <script type="text/javascript">
        var anchors    = document.getElementsByTagName("a");
        var numAnchors = anchors.length;
        for(var i = 0; i < numAnchors; i++) {
            var anchor = anchors[i];
            anchor.onclick = function() {           
                var parentEl = this.parentNode;
                if(parentEl.tagName.toLowerCase() == "li"){
                    parentEl.style.textDecoration = "line-through";
                }
                return false;   
            }
        }
    </script>
</body>

You don't even need a onload handler for the page load when you add it to the very bottom of your document.

Alex 2010-02-09 21:48:12

ansaurus

tags:

views:

answers:

Raw javascript instead of jquery (example follows)

related questions