《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。





暂且到这里,随后补上。
















 























阅读全文
0 0
原创粉丝点击