如何使用jQuery获取页面加载元素的ID

Question

I simply know how to get the id of a clicked element it's like this:

$("button").click(function(){
console.log($(this).attr("id"));
}

but what can I do for getting the id on web page load? Look at this..

$("button").ready(function(){
console.log($(this).attr("id"));
}

it returns the whole document object and this one ..

$("button").load(function(){
console.log($(this).attr("id"));
}

simply does nothing.

I want to dynamically change the styles of all buttons on load.

The main project is more complicated, and I don't want to use js core to do it, I want the simplicity of jQuery selector, but equivalent js approaches are appreciated.

Answer 1

i want to dynamically change the styles of all buttons on load.

If that is the case you can simply apply the css to the button selector on load, without needing to get the id of each button.

$(function() {
    $("button").css("background-color", "#C00");
});

Or better yet, put the css styling into a class and just apply a class to all the buttons:

$(function() {
    $("button").addClass("red-bg");
});

If you did want to get the id of each button on load, you'd need to use an array to cater for the fact there may be more than one button:

var buttonIds = $("button").map(function() {
    return this.id;
}).get();

However, this is a rather pointless method as you can just use each() to iterate over the button selector anyway to get access to each indiviual button element.

Answer 2

you can get the all button elements in jquery and then loop on each button element to change their style -:

$(function()
{
    var allButtons = $('button');
    $.each(allButtons,function(index,element)
    {
        $(element).css('width','100px');
    });
});

Answer 3

I think you're looking for this:

        $(document).ready(function () {
            $(":button").each(function () {
                console.log($(this).attr("id"));
            })
        });