JQuery 常用方法

JQuery 常用方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <button class="btn1">点我替换ul的值</button>
  12. <button class="btn2">点我更改第一个ul的样式</button>
  13. <ul class="ul1">
  14. <li>点我变色 1</li>
  15. <li>点我变色 2</li>
  16. <li>点我变色 3</li>
  17. </ul>
  18. <ul class="ul2">
  19. <li>点我变色 1</li>
  20. <li>点我变色 2</li>
  21. <li>点我变色 3</li>
  22. </ul>
  23. <script>
  24. //文本操作
  25. $('.btn1').click(function(){
  26. $('.ul1').text(function(){
  27. return '这是text 替换第一个ul的值'
  28. });
  29. });
  30. //样式属性操作
  31. $('.btn2').click(function(){
  32. $('.ul1').css('color','blue');
  33. });
  34. $('.ul1 > li, .ul2 > li').click(function(){
  35. $(this).css('color','red');
  36. });
  37. </script>
  38. </body>
  39. </html>