《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