js的基础

老张的战场

于 2018-01-19 19:25:06 发布

阅读量142

点赞数

分类专栏：基础 JS

本文链接：https://blog.csdn.net/mntsdr/article/details/79110055

版权

基础同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

前端


1. 表格标签:
<table>
<tr>
   <td></td>
</tr>
</table>

td 的重要属性:
     colspan:列合并
     rowspan:行合并


1. 使用 console.log() 实现信息的后台输出
   例: <script type="text/javascript">
         console.log("xxx");
       </script>

2. 定义函数的操作语法:
    function 函数名称(参数){
        函数体;
    }

   注意: 函数不用声明返回值类型
         参数不需要加类型
         函数调用的时候
                函数名(参数)

3. js 获取元素:
   var obj=document.getElementById("id值");
   获取元素的value值
   obj.value;

   在 form 上添加一个事件 οnsubmit="return 函数名()"

   例:
     <script>
           function checkForm(){
               var ObjectUser=document.getElementById("username");
               var username=ObjectUser.value;
               if (username==null||username=="") {
                   alert("用户名不能为空!");
                   return false;
               }

               var ObjPass=document.getElementById("password");
               var password=ObjPass.value;
               if (password==null||password=="") {
                   alert("密码不能为空");
                   return false;
               }

               return true;
           }

       </script>
   </head>
   <body>
       <form action="" method="get" οnsubmit="return checkForm()">
           姓名: <input name="username" id="username" />
           密码: <input type="password" name="password" id="password" /><br />
           <input type="submit" value="保存"/>
           <input type="reset" />
       </form>

   </body>

4. 计时器:
    var id=setInterVal(函数名,毫秒数):每隔指定的毫秒数执行一次函数(周期)
    var id=setTimeOut(函数名,毫秒数):延迟指定的毫秒数之后只执行一次函数

    清除计时器:
         clearInterval(id);
         clearTimeout(id);

    例:
       <script>
           var s = "JS第一行代码";
           var i = 0;

           function init() {
               divObj = document.getElementById("divId");
               setInterval(show, 200);
           }

           // 往div中写内容
           function show() {
               i++;
               var s_ = s.substring(0, i);

               // 往div 中设置内容
               divObj.innerHTML = s_;
               if(i == s.length) {
                   i = 0;
               }
           }
       </script>
   </head>

   <body οnlοad="init()">
       <div id="divId"></div>
   </body>

5. 只要是 window 对象的属性和方法,可以把 window 省略
      window.onload 等价于 onload
      window.setInterval() 等价于 setInterval()

   例:
      <script>
           οnlοad=function a(){
               alert("哈哈");
           }
       </script>



1. jquery 是单独的 js 文件
   通过 script 标签的 src 属性导入即可

   获取一个 jquery 对象
      $("选择器")

   例:
         <body>
       <input type="text" id="username" value="lisi" />
        </body>

       <script>
           var $username=$("#username");
       </script>

2. 页面加载:
   js:
       window.οnlοad=function(){} // 在一个页面中只能使用一次

   jquery:
       $(function(){...}) // 在一个页面中可以使用多次

   例:

     <script>
       $(function(){
           alert(123);
       })

       $(function(){
           alert("haha");
       })
   </script>

3. 事件:
    $("选择器").click(function(){...});
    需要掌握的事件:
    focus
    blur
    submit
    change
    click

    例:

    <body>
       <input type="button" id="a" value="点击查看"/>
   </body>
   <script>
       $(function(){
           $("#a").click(function(){
               alert("你好");
           })
       })
   </script>



四种:
       了解: 对象.load(url,params,function(数据){});
         ★: $.get(url,params,function(数据){},type);
             发送 get 请求的 ajax
                  url:请求的路径
                  params:请求的参数参数为 key/value 的形式 key=value {"":"","":""}
                  fn:回调函数参数就是服务器发送回来的数据
                  type:返回内容格式, xml, html, script, json, text, _default。以后用 "json"

         ★: $.post(url,params,function(数据){},type);
             发送post请求的ajax

        例:

         $(function () {
           $("#bt").click(function () {
               var url="/jquery/jqueryAjax";
               var params={"username":"张三"};

               // get方式
               $.get(url,params,function(d){
                   alert(d);
               })

                // post 方式
                $.post(url, params, function(d) {
                    alert(d);
                })

           })
       })


        若结果为 json 格式,打印返回值的时候是一个对象
             例如若 json 为 {"result":"success","msg":"成功"}
             获取 msg 只需要参数.msg


        例:

        // get 方式
           $.get(url, params, function(d) {
               alert(d.msg);
           }, "json")

        理解:
             $.ajax([选项]);
               选项的可选值:
                    url:请求路径
                    type:请求方法
                    data:发送到服务器的数据
                    success:fn 成功以后的回调
                    error:fn 异常之后的回调
                    dataType:返回内容格式经常使用 json
                    async:设置是否是异步请求

a href="#"> 点击链接后，页面会向上滚到页首，# 默认锚点为 #TOP
<a href="javascript:void(0)" onClick="window.open()"> 点击链接后，页面不动，只打开链接
<a href="#" οnclick="javascript:return false;"> 作用同上，不同浏览器会有差异。

点击链接后，不想使页面滚到页首，就用href="javascript:void(0)"，不要用href="#"，return false也有类似作用

详解href="#"与href="javascript:void(0)"的区别

"＃"包含了一个位置信息
默认的锚点是＃top 也就是网页的上端
而javascript:void(0) 仅仅表示一个死链接
这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首
而javascript:void(0) 则不是如此
所以调用脚本的时候最好用void(0)

如果是个# ，就会出现跳到顶部的情况,个人收藏的几种解决方法：
1：<a href="####"></a>
2：<a href="javascript:void(0)"></a>
3：<a href="javascript:void(null)"></a>
4：<a href="#" οnclick="return false"></a>

让我们先来看看JavaScript中void(0)的含义:
JavaScript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下：
1. javascript:void (expression_r_r)
2. javascript:void expression_r_r
expression_r_r是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的，但是写上去是一个好习惯。我们可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。面的代码创建了一个超级链接，当用户点击以后不会发生任何事。当用户点击链接时，void(0) 计算为 0，但在 JavaScript 上没有任何效果。
<a href="javascript:void(0)">单击此处什么也不会发生</a>
也就是说，要执行某些处理，但是不整体刷新页面的情况下，可以使用void(0),但是在需要对页面进行refresh的情况下，那就要仔细了。
其实我们可以这样用<a href="javascript:void(document.form.submit())">，这句话会进行一次submit操作。那什么情况下用void(0)比较多呢，无刷新，当然是Ajax了，看一下Ajax的web页面的话，一般都会看到有很多的void(0)，：）　，所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。(window是可以省略的因为window是当前浏览器窗口)

location.href   设置或返回完整的 URL。

老张的战场

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的基础

前端1. 表格标签: td 的重要属性: colspan:列合并 rowspan:行合并1. 使用 console.log() 实现信息的后台输出例: console.log("xxx"); 2. 定义函数的操作语法: func
复制链接

扫一扫