Javascript使用总结
Javascript(简称JS)简介
JavaScript是一门广泛用于浏览器客户端的脚本语言,由Netspace公司设计,当时跟Sun公司(已经被oracle收购)合作,所以名字起得像Java,业内一般简称JS。
JS的常见用途
- HTML DOM操作(节点操作,比如添加、修改、删除节点)
- 给HTML网页增加动态功能,比如动画
- 事件处理:比如监听鼠标点击、鼠标滑动、键盘输入
在HTML页面中JS常见的书写方式
- 页内JS:在当前网页的script标签中编写
<script type="text/javascript"> //输入js内容 </script>
- 外部JS,像调用css样式一样,调用外部的JS文件。
<script src="index.js"></script>
JS的常见操作
1.节点的基本操作(CRUD)
- * C(Create)创建节点:
var div = document.createElement('div'); document.body.appendChild(div);
- * R(Read)读取节点:
var div = document.getElementById('logo'); var div = document.getElementsByTagName('div')[0]; var div = document.getElementsByClassName('logo')[0];
- * U(Update)更新节点:
var img = document.getElementById('logo'); img.src = 'images/01.png';
- * D(Delete)删除节点:
var img = document.getElementById('logo'); img.parentNode.removeChild(img);
2.事件绑定
1> 推荐做法
var button = document.getElementById('login'); button.onclick = function() { // 实现点击按钮想做的事情 };
2> 直接写在标签内部
<button onclick="var age = 20; alert(age);">登录</button>
3> 不常用
function login() { // 实现点击按钮想做的事情 } var button = document.getElementById('login'); button.onclick = login;
著名的JS框架jQuery
1.通过选择器查找元素
* $('选择器') * jQuery支持绝大部分的CSS选择器
2.属性操作
* 获得属性:
$('选择器').attr('属性名');
* 设置属性:
$('选择器').attr('属性名', '属性值');
3.显示和隐藏
* 显示:
$('选择器').show();
* 隐藏:
$('选择器').hide();
* 显示和隐藏来回切换:
$('选择器').toggle();
4.事件绑定
* 点击事件(常用)
$('选择器').click(function() { // 实现点击按钮想做的事情 }).hide(); // 先给节点绑定事件,再隐藏
* 点击事件(不常用)
function login() { // 实现点击按钮想做的事情 } $('选择器').click(login);
HTML5框架(大部分都是为移动设备而写的)
1.概念
* 有了HTML5框架,编写简易的几行JS代码,就能实现非常漂亮的手机界面
* HTML5框架封装了大量的DOM节点操作,封装了大量的CSS样式
* 对JS的要求比较高,对CSS的要求并不高
2.常见的HTML5框架
* PhoneGap
* jQuery Mobile
* sencha-touch
学习JS的参考资料
1.www.w3school.com.cn
2.http://www.w3school.com.cn/jquery/jquery_reference.asp
3.http://www.php100.com/manual/jquery/
Javascript使用总结的更多相关文章
- JavaScript之父Brendan Eich,Clojure 创建者Rich Hickey,Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
- 探究javascript对象和数组的异同,及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
- JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
- JavaScript进阶之路(一)初学者的开始
一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- HBase之过滤器
filter ==> SQL 中的Where filter的执行流程: 过滤器在客户端创建,然后通过RPC发送到服务器上,由服务器执行 基础过滤器: 比较器: Comparator D ...
- Convention插件 struts零配置
http://blog.csdn.net/spyjava/article/details/13631961系列课程使用 注解:http://www.yiibai.com/struts_2/struts ...
- 简单的Hibernate入门简介
其实Hibernate本身是个独立的框架,它不需要任何web server或application server的支持.然而,大多数的Hibernate入门介绍都加入了很多非Hibernate的东西, ...
- 【转】HTML, CSS和Javascript调试入门
转 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html HTML, CSS和Javascript调试入门 本文介绍一些入 ...
- XPath 语法示例
参考:http://www.w3school.com.cn/xpath/xpath_syntax.asp XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path ...
- form表单提交过程
本文为转载文章! 今天,我将站在HTML和单纯的Asp.net框架的角度来解释它们的工作方式,因此,本文不演示WebForms服务器控件的相关内容. 简单的表单,简单的处理方式 好了,让我们进入今天的 ...
- Collaborative Filtering
for i=1:6040 Ai=ratings(ratings(:,1)==i,:); for j=1:5 Labnum(i,j)=length(Ai(Ai(:,3)==j)); end num(i) ...
- Generic泛型
1.问题 未使用泛型时,元素的类型不安全:操作麻烦,可能需要强制转换import java.util.ArrayList;import java.util.List;import org.junit. ...
- linux tar 增量备份命令
tar --newer-mtime "2013-09-17 00:00:00" -zcvf /var/www/good.tar.gz spider/
- C#入门篇6-10:字符串操作 DateTime操作
#region DateTime操作 public class C3 { //DateTime常用的操作 public static void Fun1() { //格式:2012-8-16 11:2 ...