1. DOM
Document Object Model
HTML 文档的结构
2. 选择DOM元素
用id来标识一个元素
<h1 id="main-heading">Hello world!</h1>
用getElementById( ) 选择一个元素
var headingElement =document.getElementById("main-heading"); headingElement.innerHTML; headingElement.innerHTML="xx";3. 使用js修改HTML的内容
<h1 id="main-heading">Hello world!</h1> <script> var headingElement = document.getElementById("main-heading"); console.log(headingElement.innerHTML); var newHeadingText = prompt("Please provide a new heading:"); headingElement.innerHTML = newHeadingText; </script>4. jQuery
是一个js库。 提供了一堆函数，可以方便的操作DOM。5. 在HTML页面中加载 jQuery
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>6. 使用jQuery 修改HTML中的内容
<body> <h1 id="main-heading">Hello world!</h1> <script src="https://code.jquery.com/jquery-2.1.0.js"></script> <script> var newHeadingText = prompt("Please provide a new heading:"); $("#main-heading").text(newHeadingText); </script> </body>仔细看这一行： $("#main-heading").text(newHeadingText);
"#main-heading" // selector
$ // 这是个 function, 相当于 getElementById( ) 或者 getElementByClass( ) 或者 getElementByTag( )
$("#xx") // getElementById
$(".xx") // getElementByClass
$("xx") // getElementByTag, i.e, $("body")
selector 的规则和 CSS 相同。
7. 使用jQuery创建一个元素
<body> <h1 id="main-heading">Hello world!</h1> <script src="https://code.jquery.com/jquery-2.1.0.js"></script> <script> $("body").append("<p>This is a new paragraph</p>"); </script> </body> 加个循环，创建多个元素 for (var i = 0; i < 3; i++) { var hobby = prompt("Tell me one of your hobbies!"); $("body").append("<p>" + hobby + "</p>"); } 8. 使用jQuery 的动画 $("h1").fadeOut(1000);9. 连成一串的动画
$("h1").text("This will fade out").fadeOut(3000); $("h1").fadeOut(3000).fadeIn(2000); $("h1").slideUp(1000).slideDown(1000);10. 这两种写法的区别
第一种写法： $("h1").fadeOut(1000); $("h1").fadeIn(1000); 第二种写法： $("h1").fadeOut(1000).fadeIn(1000); 额哦，显示效果差别挺大哈。Animation都是异步函数，第一种写法，fadeOut 还没执行完，fadeIn就开始了。 第二种写法，会等fadeOut动画完成，fadeIn才会开始。11. 试一试其它函数
$("h1").show();
$("h1").hide();
$("h1").fadeTo(2000, 0.5);
$("h1").slideUp(300).delay(800).fadeIn(400);
12. jQuery 的文档
https://api.jquery.com
