add는 선택한 요소들을 확장시킬때 사용한다
예제
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div{ width: 50px; height: 50px; margin: 10px; float: left; } p{ clear: left; } .redBorder{ border: 2px solid red; } .yellow{ background: yellow; } </style> <script src = "../js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('button').click(function(){ $('div').addClass('redBorder').add('p').addClass('yellow'); /* $('div').addClass('redBorder'); $('div').addClass('yellow'); $('p').addClass('yellow'); */ }) }) </script> </head> <body> <div></div> <div></div> <div></div> <p>이곳은 p영역</p> <button>클릭</button> </body> </html>
결과
버튼을 클릭시 다음과 같은 결과가 나온다