您的位置：首页 > Web前端 > JQuery

JavaScript for Kids 学习笔记8. DOM & jQuery

2017-03-12 19:55 585 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 前端 jQuery

相关文章推荐

新的分享

章节导航