JavaScript初级教程(Jquery)
序,学习前端页面编程技术,JS是不得不学的一门技术,目前JS不仅可以作为前端编程语言,在服务器端也有了一定发展,例如NodeJS。废话不多书,本篇博客主要介绍JS作为前端语言,怎样获得和改变HTML标签。
另外,这篇文章是基础知识的总结,相当于学习笔记,请高手绕行,哈哈。。。
一、编程基础知识
1、一个网页一般由三层组成:内容层:html文件,展现层:css文件,行为层:js文件。
2、编程中,最好将JS放置在单独的文件中。而不要把JS和HTML混合在一起。
3、JS大小写敏感
二、JS基础指令
1、变量
定义变量 var quantity = 5;
变量命名:不能以数字开头,变量名中,不能使用连字符(-)或点(.)号。
2、数据类型
JS中数据类型有数字类型、字符串类型、布尔类型、数组、对象、undefined、null。JS是弱类型语言。
3、算术操作符
加(+) - * / ++ -- %
三、函数、方法与对象
函数声明、函数表达式、匿名函数
对象:包括属性(变量)和方法(函数)
通过点标记语法使用属性和方法hotel.name;hotel.checkAvailability();
数组:
var hotels = ['Quay','Park','Beach']
创建对象:构造函数语法
var hotel = new Object();
hotel.name = 'Quary';
hotel.checkAvailability = function(){
return this.rooms - this.booked;
}
内置对象:
浏览器对象模型(BOM):

示例:
window.print();产生一个浏览器对话框
window.screen.width;screen对象的width属性告诉我们设备的像素宽带。
文档对象模型(DOM)
示例:

<>的为标签,不含<>的为属性
常用对象和方法
window.alert() 创建含有消息的对话框(需要单击OK才能关闭)
window.open()新的浏览器窗口中打开参数中指定的URL(如果浏览器安装了阻止窗口弹出的软件,这个操作可能会失败)
window.print()告诉浏览器用户想要打印当前页的内容(其行为就像用户单击了浏览器界面中的打印选项)
document.title当前文档的标题
document.lastModified 文档最后一次被修改的日期
document.URL 返回包含当前文档URL的字符串
document.domain 返回当前文档的域
document.write()将文本写入文档
document.getElementById()返回与id属性值相匹配的元素
document.querySelectorAll()返回一组元素,这些元素都符合参数中定义的CSS选择器
document.createElement()创建新元素
document.createTextNode()创建新的文本节点
String.length
toUpperCase()
toLowerCase()
charAt() 返回索引编号的字符
indexOf()
lastIndexOf()
subString()
split() 将字符串分隔,然后将它们存储在一个数组中
trim() 删除字符串开始和结尾的空格
replace() 只替换第一个查找的项
JS是弱类型的语言
Math对象
Math.PI
Math.round()
Math.sqrt() 返回平方根
Math.ceil()
Math.floor()
Math.random() 从0到1的苏技术
Date()对象和Time()对象
getDate() setDate()
getDay()
getFullYear() setFullYear()
getHours() setHours()
getMilliseconds() setMilliseconds()
getMinutes() setMinutes()
getMonth() setMonth()
getSeconds() setSeconds()
getTime() setTime()
getTimezoneOffset()
toDateString()
toTimeString()
toString()
四、判断和循环
和java类似
五、文档对象模型
当浏览器加载Web页面时,会在内存中创建页面的模型。
p178页面
六、事件
七、JQuery
八、Ajax与JSON
JavaScript初级教程(Jquery)的更多相关文章
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- JavaScript强化教程——jQuery UI API 类别
---恢复内容开始--- 主要介绍:JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...
- Yeoman+Bower+gulp web前端自动化工作流程(初级教程)
Yeoman包括了三个部分yo(脚手架工具).grunt/gulp(构建工具).bower(包管理器).听说gulp更容易上手,所以我就没用grunt而选的gulp 什么是开发流程? 在我看来一个完整 ...
- JavaScript强化教程——JavaScript 总结
本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...
- JQuery强化教程 —— jQuery Easing
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- 《JavaScript基础教程(第8版)》PDF
简介:JavaScript基础教程(第8版)循序渐进地讲述了JavaScript及相关的CSS.DOM.Ajax.jQuery等技术.书中从JavaScript语言基础开始,分别讨论了图像.框架.浏览 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- 极客技术专题【011期】:EasyUI初级教程
来源:GBin1.com 技术专题:EasyUI初级教程 分享人:极客标签技术编辑 - html580(请站内关注分享人) 资深Web前端工程师,HTML580创始人,目前就职于广州一间软件公司.多年 ...
- jquery教程-Jquery 获取标签个数 size()函数用法
jquery教程-Jquery 获取标签个数 size()函数用法,size() 方法返回被 jQuery 选择器匹配的元素的数量. 语法 $(selector).size() jQuery ...
随机推荐
- 20145222黄亚奇《Java程序设计》第10周学习总结
20145222 <Java程序设计>第10周学习总结 学习总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接 ...
- IT应届生如何准备找工作?
今天和一个弟弟吃饭,他明年年初即将计算机研究生毕业.谈论到怎么找工作,觉得自己会的不多,心里非常发虚.虽然我当年找工作也走了很多弯路,思路并不是很清晰.但是工作了这么多年,对企业需要什么样子的人还是有 ...
- WIN8 浏览器排版不兼容问题
经常访问网站失败 访问部分网站只显示白底蓝字没有排版也没有图片 尝试了网上的各种方法,也是用了360和百度安全管家的网页修复 重置了IE设置 都不行!!! 最后有效的方法是 更换DNS 208.67. ...
- 《TCP/IP详解卷1:协议》第6章 ICMP:Internet控制报文协议-读书笔记
章节回顾: <TCP/IP详解卷1:协议>第1章 概述-读书笔记 <TCP/IP详解卷1:协议>第2章 链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...
- JavaScript事件---事件对象
发文不易,若转载传播,请亲注明出处,谢谢! 内容提纲: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开 ...
- 每天一个linux命令(10):more命令
more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...
- OneZero第一次会议(非正式)
会议时间:2016年3月20日 15:50~16:50 会议成员:冉华(http://www.cnblogs.com/ranh941/) 张敏(http://www.cnblogs.com/zhang ...
- G-nav-02
/*header: Navigation public style*/header:before, header:after ,.navigation:before, .navigation:afte ...
- 百分比定位加position定位的常用布局
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 【CodeForces 557B】Pasha and Tea
题 题意 总共有 w 克蛋糕,2n 个盘子,第 i 个盘子容量为 ai ,n 个女孩和 n 个男孩,男孩得到的是女孩得到的蛋糕的两倍,求他们得到蛋糕的最大值. 分析 把盘子从小到大排序,然后 女生得到 ...