Javascript使用总结

时间：2023-03-09 09:52:18
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/

相关文章