1. 数据类型
2.运算符和表达式
算术运算符:±*/
比较运算符:> < =
逻辑运算符:|| && !
位运算符:| & ~ << >>
字符串连接符:+
其他:typeof instanceof new
var date = new Date(); //定义一个时间类
alert(date) //当前年份,月份 日期 具体时间
//alert(date.getDate()); //获取哪一日
alert(date.getDay()); //周几
alert(date.getFullYear()) //获取哪一年
alert(date.getHours()) //获取小时
alert(date.getMinutes())//获取分钟
alert(date.getSeconds()) //获取秒数
alert(date.getMonth()) //获取月份
alert(date.getTime()) //现在的时间与1979年1月1号的秒数
3.解决JavaScript无法加载
在javascript里面添加onload事件
<script type="text/javascript">
onload = function () {
alert("get my hobby")
var btn = document.querySelector("#btn");
btn.onclick = function () {
alert("你好啊");
};
}
</script>
事件:
alert(event.button);//鼠标点击时摁的是左(0)或者滑轮(1)右(2)
alert(event.altKey) //摁有ALt键就是true 同理:ctrkey shiftkey
alert(event.clientX) //鼠标点击点击按钮时,鼠标与按钮最左边框的距离 同理:clientY
alert(event.screenX) //鼠标距离屏幕的横坐标
****************************************************
onselect :选中内容
onselectionStart: 选中值的索引
**.subString(元素对象.selectionStart, 元素对象.selectionEnd)
//例子:
txt.onselect = function () {
alert("你选中了" + txt.selectionStart)
alert("你选中的内容:" + txt.value.substring(txt.selectionStart) + txt.value.substring(txt.selectionEnd));//通过substring来获取元素
********************************
onchange :内容改变 失去焦点才会触发
txt.onchange = function () {
alert("原本值被改变")
}
4.点击事件两种写法
1)在script里面写点击事件
2)在标签的属性里设置
5.取消浏览器默认动作
1)将事件设置为false
2) event.preventDefault
6.JQuery
是javascript库,封装方法的集合
<script src="jquery-1.8.3.min.js"></script> /*先引用jquery*/
<script type="text/javascript">
$(function () {
$("#div3").css("backgroundColor", "green")
});
</script>
each() 又称迭代器
//each会自动遍历获得的div对象
//函数里的参数,第一个是索引,第二个是索引对应的元素
$("div").each(function (index, Element) {
if(index==1)
{
Element.style.backgroundColor ="blue"
}
})
$("div:eq(0)").css("backgroundColor", "pink");/*根据索引设置属性*/
$("div:lt(2)").css("backgroundColor", "purple");/*索引前面所有元素*/
$("div:gt(1)").css("backgroundColor", "pink"); /*索引后面的所有元素*/
$("div:not(:gt(1))").css("backgroundColor", "pink"); /*设置选中的元素的剩余元素*/
用attr设置属性的话 后面的会覆盖前面的设置(不管类型是否一样 都会覆盖)
$("div").css("width"); //查找width的值
$("div").css("height", "100px");
css也可以设置查找属性
$("div").addClass("something"); /*往div添加class = "something"*/
$("div").removeClass("something"); /*删除class = something的div*/
$("div").toggleClass("some"); /*不存在去some类就自动添加*/
$("div").html(); /*获取div标签内的所用元素包括标签*/
var aa = $("div").val() /*获取div里的value属性值,没有的话返回空 用于input标签*/
$("div").val("hello") /*将div中的value属性值设为hello 如果没有value属性 就添加该属性*/
JQuery链式编程: 意思是事件可以多次添加
$("#btn").click(function () {
alert("我是点击事件")
}).keydown(function () {
alert("键盘摁下时触发")
})
7.html5控件
<input type="text" placeholder="请输入数字" autofocus="true" />
<!--placeholder:提示字//autofocus自动获取焦点-->>
<input ttype="file" multiple="multiple" accept="image/*" />
<!--上传文件格式,multiple:可以多选 accept接受的文件类型,
后面image/*指的是选择图片文件,如果不加/*不会过滤-->
提示关闭
onbeforeunload=function()
{
return "你确定关闭界面?"
// onbeforeunload事件用来提示用户是否真的要进行某些操作
}