jQuery attributes and styles (Attributes & CSS)

 

I think most of the operations of JavaScript are generally used to change the attributes and styles of HTML DOM elements. If you have this experience, you will know that there will be many complicated and troublesome problems in setting. For example, the old IE does not eat setAttribute. The name attribute; when specifying the class attribute, the name cannot use class but className. Happily, jQuery has helped you deal with the problems that you may encounter in these complicated processes!

When using jQuery, you only need to remember how the original HTML and CSS were written.

jQuery's operations on HTML Tag attributes (Attributes)

Get the attribute value of the selected element:

.attr(attributeName)

For example, to get the title value of the first link:

$('a').attr('title');

---

Set attribute values ​​for selected elements:

.attr(attributeName, value)

For example, set the title attribute of all links to Enjoy jQuery:

$('a').attr('title', 'Enjoy jQuery');

---

You can also use key/value object to set multiple attribute values ​​for all matched elements:

.attr(attributes)

For example, to change the alt and title attributes at the same time:

$( "#greatphoto" ).attr({
    alt: "Beijing Brush Seller",
    title: "photo by Kelly Clark"
});

---

Removing element attributes is also very simple:

.removeAttr(attributeName)

For example, to remove the title attribute of all links:

$('a').removeAttr('title');
// The above is equivalent to doing
$('a').attr('title', null);

jQuery has a special treatment for the class attribute

For class, jQuery also provides individual functions to add and delete classes. This is to facilitate the superposition and removal of specific classes.

Increase class:

.addClass(className)

For example, add selected and highlight categories to all paragraphs:

$('p').addClass('selected highlight');

Separate multiple classes with blanks.

---

Remove class:

.removeClass(className)

For example, to remove the blue category of the element whose id is wrapper:

$('#wrapper').removeClass('blue');

Value-Getter/Setter

val, a very commonly used method to get and set the value of form elements:

.val() // get
.val(value) // set

For example, to obtain the value of a form element:

// Get the value of the select box
$('select.foo').val();

// Get the selected value of the checkbox field
$('input:checkbox:checked').val();

// Get the selected value of the radio field
$('input:radio[name=bar]:checked').val();

For example, to set the value of the form element:

// HTML
<input type="text">
// set field value$('input').val('Hello World!');
// The result after setting<input type="text" value="Hello World!">

jQuery's style operation (CSS)

Traditional JavaScript is simply overwhelmed when it comes to dealing with CSS issues. To set a background-color, you must first know that you need to use elem.style.backgroundColor instead; for opacity settings, you must understand that the old IE uses filter··. The writing method of jQuery is very simple. It is set directly with a set of key/value paired attributes. As long as we know the expression of CSS, it is fine.

Get the style of the first matched element:

.css(propertyName)

For example, to get the font color of the first paragraph:

$('p').css('color'); 

---

Set a style for all matched elements:

.css(propertyName, value)

For example, set the transparency of all paragraphs to semi-transparent:

$('p').css('opacity', '0.5'); 

// Yes, set opacity, jQuery has taken care of cross-browser issues for you

You can also assign multiple styles to all matched elements in the form of key/value pairs:

.css(properties)

For example, set the font of all paragraphs to red and the background to blue:

$('p').css({
  color: 'red',
  'background-color': 'blue'
});

If the attribute contains -, remember to add quotation marks, if not, it is optional.

The position and width of the element-commonly used attributes are independent

.width() // Get element width
.width(value) // Set element width

.height() // Get element height
.height(value) // Set element height

The value captured by .width() .height() is the width and height of the element content, excluding padding, border, and margin.

For example, get the height of the first matched paragraph element (px) (no parameter)

$('p').height();

For example, set the height of each matched paragraph element to 100px (default is px if the unit is not specified) (with parameters)

$('p').height(100);

---

Get the position offset of the element relative to the upper left corner of the current window:

.offset()
// Return value Object{top, left}
var offset = $('p:last').offset();
console.log(offset.left)
console.log(offset.top)

Generally in traditional JavaScript, we will use offsetLeft and offsetTop to get the coordinates of the element on the page, but IE and FF browsers interpret these two attributes differently, and IE will interpret it as the left-top distance between the target element and the parent element; FF is relative to the left-top on the page, so under IE, we generally need to use the loop to the parent element to add offsetLeft to get the coordinate value of the element on the page. However, we can use offset() uniformly in jQuery!

Have seen the above jQuery operations on attributes and styles, has it simplified a lot of our unnecessary troubles, so that we can pull our energy back to pure HTML and CSS thoughts!