C#前端javascript\DOM/JQuery/HTML5

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事件用来提示用户是否真的要进行某些操作
        }