Raw javascript instead of jquery (example follows)
this is my first question here. I have the following jquery code:
$(document).ready(function(){
$("a").click(function(){
$(this).parent("li").css({textDecoration: "line-through"});
return false;
});
});
that works ju开发者_如何学编程st fine. It strikes through the parent li of any clicked anchor (there are many anchors and lists in the html, not just one). But i want just this functionality, nothing else. Isn't this an overkill to include the whole jquery library?
Unfortunateley i don't know raw javascript very well, can someone convert this for me? I would be grateful.
EDIT: Wow i am amazed at speed and the quality of the answers! So first of all a big THANKS to all of you! I will either go for jonathon's (edit2: roland's) solution or just include jquery after all. Thanks again!
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?
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>
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.
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
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?
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.
加载中,请稍侯......
精彩评论