[jQuery] DOM & CSS

1. html(), text(), val()

---

2. Attribute

   <div class="red" title="redone">red1</div>
   <div class="green">green1</div>
   <p class="red" title="redtwo">red2</p>


   <ul>
     <li title="1">1</li>
     <li title="2">2</li>
     <li title="3">3</li>
     <li title="4">4</li>
     <li title="5">5</li>
   </ul>

$(function(){
//set 'title' is jessica
    $(".red").attr('title', 'jessica');

// set 'title' by function  
    $("li").attr('title',function(index,value){
        return "I am No."+value+index*10;
    });
});

---

3. CSS

---

    $(".red").css({
        'color': 'white',
        'font-size': '2em',
        'background-color': 'orange'
    });

---

.addclass{
  font-size: 3em;
  border:5px dotted blue;
  width: 100px;
  height:100px;
}

$(".green").addClass('addclass')

---

3. Width/Height

.green{
  width:200px;
  height:200px;
  border:10px dotted orange;
  padding:8px;
  margin:16px;
  background-color: green;
}

$(function(){
    console.log($(".green").width());
    console.log($(".green").innerWidth());
    console.log($(".green").outerWidth());
    console.log($(".green").outerWidth(true));
});