javascript 操纵html（DOM和JQuery）

Posted 2021-05-04

let button = $('<button class="btn1"></button>').text('Click Me');

$('body').append(button);
$('.btn1').click(function(){
    alert('Have a Wonderful Day!');
});

$('#btn2').click(function(){
    let msg = $(`#message`).val();
    alert(`${msg}`);
});

let div = $('<div></div>').appendTo('body');
$('div').height('100px');
$('div').width('300px');
$('div').hover(function () {
    $(event.currentTarget).css("background-color", "red");
}, function () {
    $(event.currentTarget).css("background-color", "blue");
});

$('<p>This is just text.</p>').appendTo('body');

function getRandomColor() {
    let randColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    return randColor;
};

$('p').click(function(){
    $('p').css('color', getRandomColor());
});

$('<div id="btnDiv"></div>').appendTo('body');
$('<button id="btn3">Click</button>').appendTo('body');
$('#btn3').click(function(){
    $('<span>Justin</span>').appendTo('#btnDiv');

});

var friends = ['Daniel', 'Jose', 'Sean', 'Cameron', 'James', 'Adam', 'Bob', 'Charles', 'David', 'Ed'];

$('<button id="btn4">Show Friends</button>').appendTo('body');
$('<ul id="friendList"></ul>').appendTo('body');
$('#btn4').click(function(){
    for (var f = 0; f < friends.length; f++) {
        $(`<li>${friends[f]}</li>`).appendTo('#friendList');
    }
});

let btn = document.createElement('button');
let btnText = document.createTextNode('Click Me');
btn.appendChild(btnText);
document.body.appendChild(btn);

function sendAlert(){
    alert('Have a wonderful day!');
};

btn.addEventListener('click', sendAlert);


document.getElementById('btn2').addEventListener('click', function() {
    let msg = $(`#message`).val();
    alert(`${msg}`);
});

let div = document.createElement('div');
document.body.appendChild(div);
div.style.height = '100px';
div.style.width = '300';

div.addEventListener('mouseover', function(){
    div.style.backgroundColor= 'red';
});

div.addEventListener('mouseout', function(){
    div.style.backgroundColor= '';
});

let color = ['red', 'blue', 'green', 'yellow', 'purple', 'pink', 'white', 'black'];
    
function getRandomColor() {
    let randomColor = color[Math.floor(Math.random()*color.length)];
    return randomColor;
};

let paragraph = document.createElement('p');
document.body.appendChild(paragraph);
let pText = document.createTextNode('This is just random text.');
paragraph.appendChild(pText);

paragraph.addEventListener('click', function(){
    let randomColor = getRandomColor();
    paragraph.style.color = randomColor;
});





let btn3 = document.createElement('button');
document.body.appendChild(btn3);
let btn3Text = document.createTextNode('Click');
btn3.appendChild(btn3Text);
let divContainer = document.createElement('div');
document.body.appendChild(divContainer);

btn3.addEventListener('click', function (){
    var span = document.createElement('span');
    divContainer.appendChild(span);
    var spanText = document.createTextNode('Justin');
    span.appendChild(spanText);

});

let btn4 = document.createElement('button');
document.body.appendChild(btn4);
let btn4Text = document.createTextNode('Click');
btn4.appendChild(btn4Text);
let ul = document.createElement('ul');
document.body.appendChild(ul);

var friends = ['Daniel', 'Jose', 'Sean', 'Cameron', 'James', 'Adam', 'Bob', 'Charles', 'David', 'Ed'];

btn4.addEventListener('click', function(){
    for (var f = 0; f < friends.length; f++) {
        let li = document.createElement('li');
        ul.appendChild(li);
        let liText = document.createTextNode(`${friends[f]}`);
        li.appendChild(liText);
    }

});