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

最新推荐文章于 2021-07-02 21:43:04 发布
最新推荐文章于 2021-07-02 21:43:04 发布
阅读量435 收藏
点赞数
分类专栏： js xxx JavaScript for Kids 学习笔记 文章标签： javascript 前端 jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wershest/article/details/61627220
版权

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


wershest
关注
专栏目录
JavaScript for kids
12-03
高清英文版 JavaScript is the programming language of the Internet, the secret sauce that makes the Web awesome, your favorite sites interactive, and online games fun! JavaScript for Kids is a lighthearted introduction that teaches programming essentials through patient, step-by-step examples paired with funny illustrations. You’ll begin with the basics, like working with strings, arrays, and loops, and then move on to more advanced topics, like building interactivity with jQuery and drawing graphics with Canvas. Along the way, you’ll write games such as Find the Buried Treasure, Hangman, and Snake. You’ll also learn how to: –Create functions to organize and reuse your code –Write and modify HTML to create dynamic web pages –Use the DOM and jQuery to make your web pages react to user input –Use the Canvas element to draw and animate graphics –Program real user-controlled games with collision detection and score keeping With visual examples like bouncing balls, animated bees, and racing cars, you can really see what you’re programming. Each chapter builds on the last, and programming challenges at the end of each chapter will stretch your brain and inspire your own amazing programs. Make something cool with JavaScript today!
slideUp()方法和slideDown()方法
妖怪的博客
03-27 6522
slideUp()方法和slideDown()方法 slideUp()方法和slideDown()方法只会改变元素的高度.当调用slideDown()方法时,这个元素将由上到下延伸显示.sideUp()方法正好相反,由下到上缩短隐藏
JavaScript for Kids 学习笔记11. 面向对象
wershest的专栏
03-14 741
本章讲面向对象。面向对象本身的概念就略过不说了。重要的是，javascript没有class关键字，那么如何创建一个class呢？
JavaScript笔记二：jQuery学习笔记
weimingtom的待宵草
08-28 125
  JavaScript笔记二：jQuery学习笔记   （20150115注：部分方法的执行结果跟jquery版本有关， 例如.attr("checked")的值可能是“checked”，也可能是true 请注意）   （不完整，不准确，待修改，请以官方文档为准） see http://docs.jquery.com/Main_Page http://api.jquery....
jQuery api 学习笔记(1)
weixin_30924239的博客
10-22 71
之前自己的jquery知识库一直停留在1.4的版本，而目前jquery的版本已经更新到了1.10.2了，前天看到1.10中css()竟然扩充了那么多用法，这2天就迫不及待的更新一下自己的jquery知识，以下内容是自己整理的，目的是对jquery最新版的用法熟悉起来，网上资料很多，高手直接跳过 ^_^. 不错学习资源： 1.http://www.css88.com/jqapi-1....
React学习笔记_常用工具 插件使用
架构师的成长之路的博客
12-17 4007
常用组件axios(http请求模块，可用于前端任何场景，很强大)echarts-for-react(可视化图表，别人基于react对echarts的封装，足够用了)recharts(另一个基于react封装的图表，个人觉得是没有echarts好用)nprogress(顶部加载条，蛮好用)react-draft-wysiwyg(别人基于react的富文本封装，如果找到其他更好的可以替换)react
TS笔记啊
qq_36262295的博客
07-02 437
接口 描述一个对象类型 type myType = { name:string, age:number } 接口用来定义一个类结构，用来定义 一个类中应该包含那些属性和方法 同时借口也可以当作类型声明去使用 但是他可以重复声明 (声明2个，相当于2个加在一起了) interface myInter { name:string, age:number } .........
前端代码规范的笔记（一）
XIAOYANG55555的博客
08-23 342
为了方便团队其他人员的阅读本人代码，减少团队交流成本，提高工作效率。代码规范很重要，公司这段时间尤其对这一块重视。 本人对这块的学习改正重点为如下： HTML 一，class和ID的命名问题： 1.应该以内容和功能命名，不要以表现形式命名。 2.字母为小写，多个字母时用中划线-分隔 3.ID为js hook，避免使用空的class样式 二，ID统一使用双引号...
jQuery学习笔记之DOM对象和jQuery对象
12-03
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作。jQuery对象是jQuery库处理DOM对象的结果，通过$符号进行包装。例如，`$(domObj)`就是将一个DOM对象转化为jQuery对象。jQuery对象提供了丰富的API，使得操作...
jQuery学习笔记[1] jQuery中的DOM操作
12-11
这篇学习笔记主要探讨了DOM的三个方面：DOM Core、HTML-DOM和CSS-DOM，并且介绍了jQuery如何简化这些操作。 1. DOM Core是DOM的基础部分，它定义了一种标准接口，使得任何支持DOM的语言（如JavaScript）都能处理...
jQuery学习笔记之创建DOM元素
01-19
而jQuery使用$就可以直接创建DOM元素 代码如下: var oNewP = $(“使用jQuery创建的内容”); 以上代码等同于javascript 代码如下:  var oNewP2 = document.createElement(“p”);  var oText = document....
jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】
11-01
《jQuery 2.1.1：JavaScript 的强大库》 jQuery 是一个广泛应用于网页开发的JavaScript库，它的出现极大地简化了JavaScript的复杂性，使得网页交互变得更加简单和高效。在这个主题中，我们将深入探讨jQuery 2.1.1...
fp函数式编程_全面了解函数式编程（FP）
weixin_26750481的博客
09-15 2203
fp函数式编程This is the other major programming paradigm. If you are interested in Objected oriented programming, I have written about it here… 这是另一个主要的编程范例。 如果您对面向对象的编程感兴趣，那么我已经在这里写过…… *This article is i...
整理
onepunchmen00的博客
01-08 2008
1.前端安全问题有哪些，如何防范 主要有XSS攻击和CSRF攻击 xss：跨站脚本攻击，在网页里植入一段恶意代码，在该网站的作用域下执行了这段代码 防范： 1.在服务端设置对cookie的保护，也就是设置httponly，防止用户通过document.cookie来读取cookie 2.对用户的输入进行编码和解码，以及转义和过滤用户的输入内容，过滤掉用户输入的dom属性以及style iframe...
Eloquent JavaScript 笔记 前言：这是个艰难的决定
wershest的专栏
04-26 3508
最近在升级一个产品，从后端到前端，只有我一个程序员，后台用PHP、Yii、aws、CentOS 6.5、MongoDB、nginx，前端用ObjC、swift、sqlite、HTML、JavaScript、jQuery、CSS等等。对于其中的每一种技术，要想熟练使用，都不是一个简单的过程。粗略估计一下自己的能力，可能大部分都处于“新手”和“高级新手”阶段。有的时候很灰心，每天都充斥着面对复杂问题的
js 数组排除重复
wershest的专栏
06-08 1531
今天需要找个Array除重算法，google了一下，在 stackoverflow 上有位大侠极其认真的写了一大堆。看完后觉得挺有收获，整理在此，以便查阅。
第一款NativeScript app上线啦
wershest的专栏
04-10 1362
从2017年3月份开始学习js，到今天2018年4月9日，终于完成了一款android app： https://play.google.com/store/apps/details?id=jp.easyrote.toeic800 使用的技术/工具：NativeScript + Angular，VisualStudio Code 从3月到11月基本是利用业余时间自学相关的知识，看的第一本书...
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值