Develop Reference

Unable to select <a> based on its text and then add an attribute named "target" to it using jQuery

I have the following link inside my web page:
Attachments and Documents
Now I want to select this link based on its text "Attachments and Documents", and set a target attribute for it.
So I tried the following:
var tgb = $('a:contains("Attachments and Documents")')[0];
tgb.attr('target', '_blank');
But I got the following exception :
TypeError: tgb.attr is not a function

As soon as you use index ([0]), tab is no more a jQuery object. To get the jQuery function attr() you have to wrap tgb with $:
var tgb = $('a:contains("Attachments and Documents")')[0];
$(tgb).attr('target', '_blank');
// to demonstrate result
console.log(tgb)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Attachments and Documents

attr() is a jQuery function. You need to target your variable using jQuery methods
$(tgb)
Hope this helps :)
var tgb = $('a:contains("Attachments and Documents")')[0];
$(tgb).attr('target', '_blank');
console.log(tgb);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Attachments and Documents

var tgb = $('a:contains("Attachments and Documents")');
tgb.attr('target', '_blank');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Attachments and Documents
The issue with your logic was the [0] that you were putting on the tgb. [0] on a jQuery object breaks the element out of the jQuery object and returns the native Element. There are various reasons why you would want to do this, such as if you wanted to access element properties and you don't want to go through the jQuery prop() or attr() method.
However in your case, you are trying to use the attr() method off of tgb. However, attr() is a jQuery method. Since you broke the element out of the jQuery object, this will not work.
Rather than turning the tgb back into a jQuery object, simply take off the [0]. This fixes your issue, and removes the need to create another jQuery object which, give the snippet you provided, is unnecessary work.
Optionally, if you do want it to be a native Element you could just set the attribute directly.
var tgb = $(...)[0];
tgb.setAttribute('href', newValue);
//or
tgb.href = newValue;

Use a jQuery Selector as a Variable

I am creating a variable that stores an elements ID in the variable. I could write it like this:
var webappData = document.getElementById('web-app-data');
If I wanted to do the same using jQuery I think I would write it like this:
var webappData = $('#web-app-data');
However, when I try that it doesn't work. (Script throws an error because the variable isn't selecting the div with that Id.)
How would I use jQuery to select an element and store it in a variable?

document.getElementById('web-app-data') isn't the same as $('#web-app-data'). The later returns jQuery object, which is kind of an array of HTMLElement objects (only one in your case).
If you want to get HTMLElement, use $('#web-app-data')[0]. Check:
document.getElementById('web-app-data') === $('#web-app-data')[0]; // true

It's ok.. Maybe something else is wrong in your code..
Example:
<div id="web-app-data">
Hello
</div>
<script type='text/javascript'>
var webappData = $('#web-app-data');
alert(webappData.text()); // Hello
</script>
Fiddle

Above code should work just fine. Your problem might be, that jQuery doesn't find any corresponding elements from the DOM since the element has been removed or hasn't been loaded there yet. If you try to
console.log($('#web-app-data'));
that variable, you can check if jQuery actually found anything. jQuery object should have lenght of (atleast) one if corrensponding element is indeed in DOM atm.

That will work and you use just like it was the full JQuery selector.
var elm = $('#webappData');
if (elm.hasClass('someClass')) elm.removeClass('someClass');
return;

How to get the computed style of the current element

I want to get the computed style of the current element using JS,
I am able to fetch the other attributes but am stuck at when it come to css.
here is my code , please help
document.addEventListener("click", function (e) {
e.preventDefault();
var dom_id = e.target.id.toString();
var dom_class = e.target.className.toString();
var dom_el = e.target.toString();
var dom_html = e.target.innerHTML;
document.getElementById('ospy_id').value = dom_id;
document.getElementById('ospy_class').value = dom_class;
document.getElementById('ospy_el').value = dom_el;
},
false);

Use following statement to get css of any element
document.getElementById(elementid).style.property
example:
document.getElementById("ospy_class").style.color

If you're using jquery (based on tags you're) you can do something along the lines of:
$("#elementID").css("color");
etc...... Documentation

It's not jQuery but, in Firefox, Opera and Safari you can use window.getComputedStyle(element) to get the computed styles for an element and in IE you can use element.currentStyle. The returned objects are different in each case, and I'm not sure how well either work with elements and styles created using Javascript, but perhaps they'll be useful.
please refer below url...
jQuery CSS plugin that returns computed style of element to pseudo clone that element?

Unable to replace the class of div element - no method named css

I want to replace the old class of html element with the new one using jQuery. Here is what I'm doing:
var elem = $('.my_selector')[0];
elem.css('class', 'my_new_class');
But I get the error saying "Uncaught type error: Object#<HtmlDivElement> has no method css.
How do I fix it?

The problem is that you are trying to call jQuery method css() (even not relevant here) from DOM element, which is derived with [0]. You can use toggleClass() to do the job:
$(".my_selector:first").toggleClass("my_selector my_new_class");

$('.my_selector')[0] is returning you a DOM element, not a jQuery Object. You'll also want to use the addClass method rather than css. To get the first element, you can use the :first pseudoselector.
So this should be what you are looking for:
$('.my_selector:first').removeClass('my_selector').addClass('my_new_class');
EDIT You can use either removeClass/addClass or toggleClass. Either are fine. Explicitly adding the new class may be safer if you have a case where an element can have both classes at the same time since toggleClass will remove both classes.

var elem = $('.my_selector')[0];
This will return the DOM element, not a jQuery object. Simply change it to this...
var elem = $('.my_selector');
To get just the first element that matches the selector, use this...
var elem = $('.my_selector').first();
Also, you have...
elem.css('class', 'my_new_class');
This is incorrect and should be changed to this...
elem.attr('class', 'my_new_class');

Try this ,
var elem = $(".my_selector");
elem.class("newclass");
otherwise you can do,
var elem = $(".my_selector");
elem.removeClass("my_selector");
elem.addClass("newclass");

$(".my_selector").removeClass('currentClass').addClass('newClass');

As said, you need the jquery object of the first element. A good method could be this:
$('.my_selector').first().css('class', 'my_new_class');
Moreover the method signature is .css( propertyName, value ) so its intented to set a css property not to change a class. To do that you need to remove old class and add new one with .removeClass and .addClass respectively.

$($('.my_selector')[0]).css('class', 'my_new_class');
document.getElementsByClassName('my_selector')[0].className = 'my_new_class';

Value of programmatically added checkbox

I have been searching for the solution for this for a while so I hope I can get some help now. I am attempting to figure out whether a programmatically added checkbox is checked using jquery. The HTML code of the checkbox is below:
<td>
<input type="checkbox" name='ismanual' id='ismanual' class="checkbox">
</td>
And I am doing it using the following jquery code:
var ismanual = document.getElementById("ismanual").val();
I have attempted using #ismanual as the selector, but that didn't help. Any idea where I have gone wrong?

If you're using document.getElementById("ismanual") you should use .checked instead of .val()...
var ismanual = document.getElementById("ismanual").checked;
For jQuery use...
var ismanual = $("#ismanual").is(':checked')

Where you have gone wrong: if you want to use val(), you need to use it on a jQuery object. getElementById() gives you a DOM element but not a jQuery object. To get a jQuery object you need to find the element using a jQuery selector like this:
jQuery('#ismanual')
You can then use jQuery's :checked selector and the .is() function on that object:
var isManual = jQuery('#ismanual').is(':checked');

.val() is a jQuery function. It will not work with DOM style element selection.
To get value using .getElementById(), you must use .checked like,
var ismanual = document.getElementById("ismanual").checked;
.val() will work when you are selecting the element using jQuery like,
$("#ismanual").val();