Convert/Change JavaScript Document to Jquery

Converting "document.getElementById" into jQuery

The answer to your question (title) is to replace

document.getElementById('about').href = '#';

with

$('#about').attr('href','#');

I have no idea if this will actually help you solve your problem, though, since I really don't know what you are trying to do. Based on your comments and code sample, it appears that you are trying to do some sort of wizard, but I have no idea how it would actually work given what you've posted.

Update:

Maybe something like:

<a href="link.php?test=true" onclick="request(this)" target="_blank" class='request'></a>

<a id="step2" href="next.php">Step 2</a>

<script language="javascript">
$(function() {
var requests = 16;
$('#step2').click( function() {
alert('Not finished');
return false;
});
$('.request').click( function() {
var $this = $(this); // save jQuery reference to element clicked

// swap indicator image source
$this.find('img:first').attr('src','images/clear.gif');

// if the number of flipped indicators equals the number of requests
// remove the click handler from the step 2 link
// this removes the alert and allows the user to proceed
if ($('.request img[src="images/clear.gif"]').length == requests) {
$('#step2').unbind('click');
}

...do something with the href for this request via ajax???

// replace this handler with one that simply returns false
// and remove the href since we're done with this request
$(this).unbind('click').attr('href','#').click( function() { return false; } );

// stop the default action for the request
return false;
});
</script>

How can I convert a DOM element to a jQuery element?

var elm = document.createElement("div");
var jelm = $(elm);//convert to jQuery Element
var htmlElm = jelm[0];//convert to HTML Element

convert javascript change event to jquery

$('#thisfile').change(function(evt){
handleFileSelect(evt);
});

How to convert JavaScript to JQuery?

pure JS and Jquery can work together, your code always work with or without jquery, but if you want all codes in same format then.

function contantForm(){    let Username = $("#Username").val();      let Emailinput = $("#Email").val();     alert("Thank you " + Username)     $("#Username").val("");     $("#Email").val("");     $("#Phone").val(""); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Converting JavaScript 'this' to jQuery '$(this)'

Converting DOM element to jQuery object

To convert DOM element to jQuery object you do the following:

var jquery_object = jQuery(dom_element);

So, in your example it will be $(this) or $(event.target) - depending on whether you want current element or the element that actually fired the event (in your case they are the same, unless event will be fired by some descendant element).

Converting jQuery object to DOM element

To convert jQuery object to DOM element, you can simply treat jQuery object as array or use its get() method like that:

var dom_element = jquery_object[0];

or

var dom_element = jquery_object.get(0);

The above will return first object stored in the jQuery object - if there is only one, there should be no problems (if there are more, just change 0 into other index to get appropriate element, or just omit the argument for get() to retrieve all the elements as array).

Your code changed to use jQuery

Your code could look like this (if you insist on using hard-to-maintain event attributes):

<HTML>
<HEAD>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<SCRIPT type="text/javascript">
function test(target) { alert(target.get(0).nodeName); }
</SCRIPT>

</HEAD>
<BODY>

<DIV>
<ul>
<li onclick="test($(this))">This is fair</li>
<li onclick="test($(this))">No its not</li>
<li onclick="test($(this))">Why not</li>
<li onclick="test($(this))">Becoz...</li>
</ul> </DIV>

</BODY>

except in this case using jQuery is completely useless and you can just operate directly on DOM elements, converting them to jQuery when needed :)

Your solution changed to bind events outside <body>

Your code using jQuery for binding events in jQuery 1.7+ could look like this:

<HTML>
<HEAD>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<SCRIPT type="text/javascript">
$(function(){
$('li').on('click', function(event){
alert(event.target.nodeName);
});
});
</SCRIPT>

</HEAD>
<BODY>

<DIV>
<ul>
<li>This is fair</li>
<li>No its not</li>
<li>Why not</li>
<li>Becoz...</li>
</ul> </DIV>

</BODY>

See the above in action here: jsfiddle.net/tadeck/2PqPP/



Related Topics



Leave a reply



Submit