《javascript&jquery交互式web前端开发》第1-6章摘要

来源:互联网 发布:淘宝订单非支付宝交易 编辑:程序博客网 时间:2024/06/16 07:07

写在前边:

首先呢,本人并不是专门做web的,是做嵌入式相关的。这是我从新手到前端一般水平过程中的一个笔记。由于某种原因吧,本人从狗东上边买了这本书《javascript&jquery交互式web前端开发》,做一些内容摘要。由于这本书是翻译外国人写的,所以在css和js的写法格式与实现方式上要比《xxx从入门到精通》这类书有本质的区别,需要特殊留意下,感谢阅读,欢迎留言,觉得有用的话请点赞,打赏,非常感谢!


第一章 编程基础知识。

1/a 什么是脚本,如何创建一段脚本?

1/b 计算机如何融入它周围的世界之中?

模型,对象和属性,事件,方法;属性,方法,事件结合起来。

1/c 如何为web界面编写一段脚本?

html,css和javascript是如何结合起来的。

总结:第一章基本全是一些基础知识,概念知识,适合没有任何基础的或基础薄弱的朋友看。


第二章 javascript基础指令

这部分已经开始比较重要了,不再是喝凉水,,,,,

在本章中,你将开始学习阅读和编写javascript代码,还将学习如何编写web浏览器能够遵照执行的指令。


注释

单行注释://

多行注释:

/*

xxxxxxx

*/

变量:如何声明它们

在使用变量之前,需要先声明,包括创建变量和命名变量。

var quantity;

变量:如何给它们赋值

quantity=3;


数据类型

javascript区分数字,字符串,和布尔值(true,false)

html:

<!DOCTYPE html><body><head ><title>xxx</title><link rel="stylesheet" type="text/css" href="css.css"></head><body><h1>Elderflower</h1><div id="content"><h2>Custom Signage</h2><div id="cost">Cost:$5 per tile</div><img src="preview.jpg" alt="sign"/></div><script src="js.js"></script></body></html>

js:

var price;var quantity;var total;price=5;quantity=14;total=price*quantity;var el=document.getElementById('cost');el.textContent = '$' + total;
css:

html{height: 100%;}body{background-color: #b6a996;background: url('hobart.jpg') no-repeat center center fixed;--webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;font-family:helvetica,arial,sans-serif;font-size:100%;margin:0;padding: 0;text-align: center;min-height: 100%;}#content{background: #fff;border:3px double #31373f;color:#31373f;display: inline-block;padding: 30px 50px;margin:20px auto 50px auto;max-width: 580px;min-height: 4em;overflow: auto;text-align: center;}h1,h2{text-indent: 100%;white-space: nowrap;overflow: hidden;}h1{width:278px;height: 112px;margin:0 auto 0 auto;padding-top: 40px;background: url('elderflower-logo.png') no-repeat bottom center;}#cost, .action{background-color: #f84c53;color:#fff;width:auto;height:1em;padding: 0.5em 0.75em;float:right;}#cost{position: relative;top:1em;right:2em;}

结果:



附:为什么没有出现<h1><h2>的内容,因为css中有一个属性:

text-indent: 100%;   //缩进百分之百


用变量来存储字符串

html:

<!DOCTYPE html><body><head ><title>xx</title><link rel="stylesheet" type="text/css" href="css.css"></head><body><h1>Elderflower</h1><div id="content"><div id="title">Howdy <span id="name">friend</span>!</div><div id="note">Take a look around...</div></div><script src="js.js"></script></body></html>

js:

var username;var message;username = 'Molly'message = 'See our upcoming range';var elName = document.getElementById('name');elName.textContent = username;var elNote = document.getElementById('note');elNote.textContent = message;

css:

html{height: 100%;}body{background-color: #b6a996;background: url('hobart.jpg') no-repeat center center fixed;--webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;font-family:helvetica,arial,sans-serif;font-size:100%;margin:0;padding: 0;text-align: center;min-height: 100%;}#content{background: #fff;border:3px double #31373f;color:#31373f;display: inline-block;padding: 30px 50px;margin:20px auto 50px auto;max-width: 580px;min-height: 4em;overflow: auto;text-align: center;}h1,h2{text-indent: 100%;white-space: nowrap;overflow: hidden;}h1{width:278px;height: 112px;margin:0 auto 0 auto;padding-top: 40px;background: url('elderflower-logo.png') no-repeat bottom center;}#title{font-size:120%;font-weight: blod;}#cost, .action{background-color: #f84c53;color:#fff;width:auto;height:1em;padding: 0.5em 0.75em;float:right;}#cost{position: relative;top:1em;right:2em;}#note{background-color: #31373f;border-radius:0.5em;color:#e3bb5a;padding:0.5em 1em;margin-top: 1em;text-transform: uppercase;   /*小写转换为大写*/display:inline-block;}
结果:



在字符串中使用引号

html:

<!DOCTYPE html><body><head ><title>xx</title><link rel="stylesheet" type="text/css" href="css.css"></head><body><h1>Elderflower</h1><div id="content"><div id="title">Special offers</div><div id="note">Sign-up to receive personalized offers!</div></div><script src="js.js"></script></body></html>

js:

var title;var message;title = "Molly is Special Offers";message = '<a href=\"sale.html\">25% off!</a>';var elTitle = document.getElementById('title');elTitle.textContent = title;var elNote = document.getElementById('note');elNote.innerHTML = message;
css:

html{height: 100%;}body{background-color: #b6a996;background: url('hobart.jpg') no-repeat center center fixed;--webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;font-family:helvetica,arial,sans-serif;font-size:100%;margin:0;padding: 0;text-align: center;min-height: 100%;}#content{background: #fff;border:3px double #31373f;color:#31373f;display: inline-block;padding: 30px 50px;margin:20px auto 50px auto;max-width: 580px;min-height: 4em;overflow: auto;text-align: center;}h1,h2{text-indent: 100%;white-space: nowrap;overflow: hidden;}h1{width:278px;height: 112px;margin:0 auto 0 auto;padding-top: 40px;background: url('elderflower-logo.png') no-repeat bottom center;}#title{font-size:120%;font-weight: blod;}#cost, .action{background-color: #f84c53;color:#fff;width:auto;height:1em;padding: 0.5em 0.75em;float:right;}#cost{position: relative;top:1em;right:2em;}#note{background-color: #31373f;border-radius:0.5em;color:#e3bb5a;padding:0.5em 1em;margin-top: 1em;text-transform: uppercase;   /*小写转换为大写*/display:inline-block;}a{color:#e3bb5a;text-decoration: none;}

结果:



用变量来存储布尔值

html:

<!DOCTYPE html><body><head ><title>xx</title><link rel="stylesheet" type="text/css" href="css.css"></head><body><h1>Elderflower</h1><div id="content"><div class="message">Available:<span id="stock"></span></div><div class="message">Shipping:<span id="shipping"></span></div></div><script src="js.js"></script></body></html>
js:

var inStock;var shipping;inStock = true;shipping = false;var elStock = document.getElementById('stock');elStock.className = inStock;var elShip = document.getElementById('shipping');elShip.className = shipping;

css:

html{height: 100%;}body{background-color: #b6a996;background: url('hobart.jpg') no-repeat center center fixed;--webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;font-family:helvetica,arial,sans-serif;font-size:100%;margin:0;padding: 0;text-align: center;min-height: 100%;}#content{background: #fff;border:3px double #31373f;color:#31373f;display: inline-block;padding: 30px 50px;margin:20px auto 50px auto;max-width: 580px;min-height: 4em;overflow: auto;text-align: center;}h1,h2{text-indent: 100%;white-space: nowrap;overflow: hidden;}h1{width:278px;height: 112px;margin:0 auto 0 auto;padding-top: 40px;background: url('elderflower-logo.png') no-repeat bottom center;}#title{font-size:120%;font-weight: blod;}.true,.false{background: url("tick-cross.png");display:block;float:right;height:25px;width:25px;}.false{background-position: 0 -25px;}.message{font-weight: bold;line-height: 1.5em;height:2em;display:block;clear:left;min-width:10em;}.message span{font-weight: normal;}

结果:



此处对图片的处理需要注意一下,√和×用的是一个背景图片,是从一个背景图片不同的位置开始显示的。

   css:.false{background-position: 0 -25px;}


访问与更改数组中的值

html:

<!DOCTYPE html><body><head ><title>xx</title><link rel="stylesheet" type="text/css" href="css.css"></head><body><h1>Elderflower</h1><div id="content"><div class="message">Color:<span id="colors">We were unable to find your color choice. Please try again...</span></div></div><script src="js.js"></script></body></html>

js:

var colors = ['white','black','custom'];colors[2] = 'beige';var el = document.getElementById('colors');el.textContent = colors[2]; 

css:

html{height: 100%;}body{background-color: #b6a996;background: url('hobart.jpg') no-repeat center center fixed;--webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;font-family:helvetica,arial,sans-serif;font-size:100%;margin:0;padding: 0;text-align: center;min-height: 100%;}#content{background: #fff;border:3px double #31373f;color:#31373f;display: inline-block;padding: 30px 50px;margin:20px auto 50px auto;max-width: 580px;min-height: 4em;overflow: auto;text-align: center;}h1,h2{text-indent: 100%;white-space: nowrap;overflow: hidden;}h1{width:278px;height: 112px;margin:0 auto 0 auto;padding-top: 40px;background: url('elderflower-logo.png') no-repeat bottom center;}#title{font-size:120%;font-weight: blod;}.message{font-weight: bold;line-height: 1.5em;height:2em;display:block;clear:left;min-width:10em;}.message span{font-weight: normal;}



第三章 函数,对象与方法。

一个简单的函数

html:

<!DOCTYPE html><body><head ><title>xx</title><link rel="stylesheet" type="text/css" href="css.css"></head><body><h1>TravelWorthy</h1><div id="message">welcome to our site!</div><script src="js.js"></script></body></html>
js:

var msg = 'Sign up to receive our newseletter for 10% off!';function updateMessage(){var el = document.getElementById('message');el.textContent = msg;}updateMessage();
css

html{height: 100%;}body{background-color: #fff;background: url('travelworthy-backdrop.jpg') no-repeat center center fixed;--webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;font-family:helvetica,arial,sans-serif;font-size:100%;margin:0;padding: 0;text-align: center;}h1{background: #1e1b1e url('travelworthy-logo.gif') no-repeat;width:230px;height:180px;float:left;text-indent: 100%;white-space: nowrap;overflow: hidden;margin:0;}#title{font-size:120%;font-weight: blod;}#message{float:left;clear: left;background-color: #ffb87a;color: #1e1b1e;width:170px;padding:18px 30px;text-align: center;}



函数的返回值:返回一个数组变量

function getsize(width,height,depth){var area = width*height;var volume = width*height*depth;var sizes = [area,volume];return sizes;}var areaone = getsize(3,2,3)[0];var volumeone = getsize(3,2,3)[1];

创建一个对象

var hotal = {name:'Quay',rooms:'40',booked:'25',gym:'true',roomTypes:['twin','double','suite'],checkAvailability:function(){return this.rooms - this.booked;}}

this表示正在使用当前的rooms和booked属性。


访问对象的属性或方法可以使用点符号或者方括号

var hotelName = hotel.name;var roomsFree = hotel.checkAvailability();var hotelName = hotel['name'];

下边这一部分先保留,之后补上。


第四章 判断和循环

这一部分和c语言基本上是一致的,所以没有详细举例。

判断条件和条件语句:if else

比较操作符:==    ===   !=   !==   >   <   >=   <=   

组织比较操作符:var hadPassed = ( score >= pass );   true|false

比较操作符中使用表达式:(score1+score2)>(highscore1+highscore2)

逻辑操作符:逻辑与&& 逻辑或||逻辑非!

switch语句

循环:for whiledo while


第五章 文档对象模型

文档对象模型DOM规定了浏览器应该如何创建HTML页面的模型已经js如何访问修改浏览器窗口中的web界面的内容。


使用DOM树

第一步、访问元素

1,选择单个元素节点:

getElementById() 使用元素的id属性,唯一的id。

querySelector() 使用css选择器,返回第一个匹配的元素。

2,选择多个元素:

getElementByClassName() 选择所有在class属性中使用了特定值的元素

getElementByTagName() 选择所有使用了指定标记的元素

querySelectAll() 使用css选择器来选择所有匹配的元素

3,在元素节点之间遍历

parentNode previousSiblingnextSiblingfirstChild/lastChild

第二步、操作元素


缓存DOM查询

将查询结果缓存在一个变量中

var itemone = getElementById('one');


访问元素

DOM集合可能返回一个元素,也可能返回一个NodeList,即节点的集合。


返回单一元素节点的方法:

根据id属性值来选择:

getElementById('id');

 使用css选择器语法:

querySelector('css selector')

此语法会找到一个或多个元素,但是只返回第一个匹配的元素。


返回一个或多个元素的方法(结果是NodeList)

getElementByClassName('class')

根据指定的class属性值选择一个或多个元素,为了能被选中,html元素必须包含class属性。

getElementByTagName('tagName')

选择页面上所有指定标签名称的元素。

querySelectorAll('css selector');

使用css选择器语法选择一个或多个元素,该方法会返回所有匹配的元素。


选择单一节点的方法:

var el=document.getElementById('xx');

xx.className='yy';


NodeList:返回多个元素的DOM查询

当一个DOM方法可以返回多个元素时,它会返回一个NodeList。





暂且到这里,随后补上。
















 























阅读全文
0 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 word不允许修改锁定了是怎么办 word文档只读不能编辑怎么办 word无法读取文档时怎么办 ps超出2g存不了怎么办 qq帐号不记得了怎么办 苹果手机wifi密码输错怎么办 qq搜索关键字屏蔽了怎么办 手机数据被屏蔽了怎么办 ea账号安全问题答案忘了怎么办 电脑用户账户密码忘记了怎么办 公司名字审核通过剩下怎么办 抖音一直在审核怎么办 平板电脑显示ipad已停用怎么办 违章车型与实际车型不符怎么办 网购与实物不符怎么办 内网ip地址丢失怎么办 转账户名写错了怎么办 工资卡开户写错公司名称怎么办 商标跟别人重了怎么办 不受信任的应用打不开怎么办 oppo手机安全证书过期怎么办 网站安全证书有问题怎么办 公章圆圈摔坏了怎么办 高风险办税人员怎么办 公司因担保被起诉怎么办 借公司钱被起诉怎么办 qq群管理员满了怎么办 微信公众号搜索不到怎么办 微信名字改不了怎么办 微信号第一次限制登录怎么办 微信第一次限制登录怎么办 老板不回我微信怎么办 微信号换手机号了怎么办 电话被对方拉黑怎么办 微信被好友拉黑了怎么办 微信收藏删了怎么办 如果忘记支付宝登录手机号码怎么办 支付宝登录密码忘记了怎么办 支付宝账户名忘记了怎么办 搜索qq号搜不到怎么办 微信号手机号码换了怎么办