如何在Jquery中实现呢？ （JS到Jquery）

Question

I am using Javascript to design my website, however, I am been told that Jquery is much better and can help shorten my code. I am converted most of my code into Jquery, however, I little confused as to how I can achieve this in Jquery:

var Buttons = getElementsByTagName("Button");
for (var i = 0; i < Buttons.length; i++) {
    Buttons[i].style.background = "#000;
    Buttons[i].style.color = '#fff';
    Buttons[i].style.fontWeight = 'bold';

    Buttons[i].addEventListener("click", function(evt) {

        // Do something
    }

}

I know for these:

Buttons[i].style.background = "#000;
Buttons[i].style.color = '#fff';
Buttons[i].style.fontWeight = 'bold';

I can do something like this, not sure if this is correct though:

 Buttons[i].css("background", "#000");
 Buttons[i].css("color", "#fff");
 Buttons[i].css("font-weight","Bold");

Any help is welcomed.

EDITED:

If you have any other tips for me, please let me know as I am a beginner and can do we all the help I can get :)

Answer 1

did you mean? Example :

jQuery('Button').each(function(){
    jQuery(this).css({'background':'#000','color':'#FFF','font-weight':'bold'})
        .on('click', function(evt){
        // do something
        }
    )
})

Answer 2

Use document.ready event.

$(document).ready(function() {
    $('button').css({
        'background' : '#000',
        'color' : '#fff',
        'font-weight' : 'bold'
    }).on('click', function() {
        //write your click handler here
    });
});

this will work

Answer 3

how I can achieve this in Jquery:

Simply

$("Button").each(function(){
  var button = $(this);
  button.css("background","#000");
  button.css("color ","#fff");
  button.css("font-weight","bold");
  button.click( function(){
    //your method operation   
  });
});