《javascript&jquery交互式web前端开发》第1-6章摘要
来源:互联网 发布:淘宝订单非支付宝交易 编辑:程序博客网 时间:2024/06/16 01:36
写在前边:
首先呢,本人并不是专门做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。
暂且到这里,随后补上。
- 《javascript&jquery交互式web前端开发》第1-6章摘要
- JavaScript & jQuery交互式Web前端开发
- JavaScript & JQuery 交互式Web前端开发
- JavaScript & jQuery交互式Web前端开发pdf
- JavaScript&jQuery交互式Web前端开发
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-Focus和blur事件
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-鼠标事件-确定光标位置
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-键盘事件-确定按键值
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-表单事件
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-变动事件
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-HTML5事件
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-示例(Example)
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-HTML事件处理程序
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-使用事件委托
- 源码-JavaScript&jQuery交互式前端开发-第1章-编程基础知识
- 《JavaScript & jQuery交互式Web前端开发》之JavaScript基础指令
- 源码-JavaScript&jQuery交互式前端开发-第7章-JQuery-基本示例
- 源码-JavaScript&jQuery交互式前端开发-第7章-JQuery-修改内容
- Linux下启动停止查看杀死Tomcat进程
- Mapped Statements collection does not contain value for 解决方法
- resultset与resultsetmatadata的区别
- C/C++从入门到高手常用学书籍
- Javafx 自创小程序
- 《javascript&jquery交互式web前端开发》第1-6章摘要
- Spark Streaming应用与实战全攻略
- 快速排序原理(java实现)
- WebSphere V8.5 静默安装升级(三)-命令查看创建删除WAS概要文件
- Codeforces 229C Triangles
- 修饰符 接口 抽象类 总结
- Linux底下安装JDK warning: waiting for transaction lock on /var/lib/rpm/.rpm.lock
- 漫谈格兰杰因果关系(Granger Causality)——第一章 野火烧不尽,春风吹又生
- web前端知识体系