javascript规范

最新推荐文章于 2024-05-30 13:26:01 发布

Raphaelkxy

最新推荐文章于 2024-05-30 13:26:01 发布

阅读量135

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_29726359/article/details/96096960

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

javascript规范

script标签最好放在之前

type = “text/javascript”，script默认是，不是必须要写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script  src=""></script>
</body>
</html>

获取元素方法
- document.getElementsByTagName
- document.getElementById
- document.getElementsByClassName
操作属性
- getAttribute
- setAttribute

html标签和js连接的桥梁可以用this

<a href="" onclick = "showPic(this);return false;">Click me</a>
function show(node){
    var source  =node.getAttribute("href");
}

js文件创建规范
- 若一个站点用到多个js文件，为了减少对站点的请求次数（提高性能），应该把这些.js文件合并到一个文件中。

a标签

a标签绑定click事件后，需要消除跳转页面效果，点击超链接之后，不会被带到目标链接窗口。（禁用默认行为）

    <a href="../image/test2.jpg" onclick="showpic(this);return false;" >更换图片</a>
<a href="../image/test2.jpg" onclick="showpic1(this)" target="_blank" >换回图片</a>
  //js
function showpic1(whispic) {
        var imagelink ="../image/test.jpg";
        var placeholder = document.getElementById("placeholder");
        placeholder.setAttribute("src",imagelink);
    }
 function showpic(whispic) {
        var imagelink = whispic.getAttribute("href");
        var placeholder = document.getElementById("placeholder");
        placeholder.setAttribute("src",imagelink);
    }

禁用默认行为的再举例(onclick是绑定事件到相关空间上的关键字)

//给test3绑定点击事件
var test3=document.getElementById("test3");
test3.onclick = function () {
    alert("test3被点击")
    return false;
}

链接使用href(img、script、link等使用src)

页面加载是调用函数

window.onload=showpic2;//载入页面执行函数
///jquery
 $(document).ready(function() {
    })
///加载多个函数
$(document).ready(function(){

    one();

});
$(document).ready(function(){
    two();
});

创建新页面窗口

    <button onclick="createNewWindows()">创建新窗口</button>
//js
function createNewWindows() {
    window.open("http://www.baidu.com","popup");
    return false;
}

检测浏览器是否支持javadom

由于一些古老的浏览器会不支持javaDom，如果执行下去，会报错，那么可以设置一个校验机制机制
```
 if(!document.getElementsByTagName) return false;
```
如果不识别javaDom语句，就会退出。
提高性能要做的必要点
- 尽量减少js文件，也就是能合并的尽量合并。
- 压缩脚本，使用xxx.min.js版本，自己写的js脚本，可以使用工具来压缩。
- 尽量减少访问javaDom
```
//例如getElementByID使用较多的话，可以用变量一次获取，多次操作
var links = document.getElementsByTagName("a");
if(links.length>0){
for(var i=0;i<links.length;i++){
}
}
```

绑定事件到相关控件

在html语句中

<a href="../image/test2.jpg" onclick="showpic1(this)" target="_blank" >换回图片</a>

在js文件中（被推荐的方式）

var test3=document.getElementById("test3");
test3.onclick = function () {
    alert("test3被点击")
    return false;
}

单选按钮的事件绑定

var dates = document.getElementsByName("Storage");
for(var j=0;j<dates.length;j++){
    dates[j].onclick=function () {
        console.log("被选中，值为"+this.getAttribute("value"));
        this.checked= checked;
        value = this.getAttribute("value");
        return false;
    }
}
//不过不放在函数体里面，会在加载js文件的时候，被加载，那么对应函数会在js在加载的时候被绑定到相关组件，后续再点击空间的时候，只运行相关和函数体，对于for语句来说，不会再执行。这也是为什么如果我在console里面添加i的话，总是打印3的原因。
//错误
  dates[j].onclick=function () {
        console.log("被选中，值为"+ dates[j].getAttribute("value"));
         dates[j].checked= checked;
        value =  dates[j].getAttribute("value");
        return false;
    }
//由于点击事件发生时，data[i]数据加载不到,因为i加载不到，用this来代表本元素
//这种选中会报错，

<div class="RadioStyle" id="radiobutton">
   <div class="Block PaddingL" >
       <input type="radio" name="Storage" id="model1" value="year" checked="checked" />
       <label for="model1">年</label>
       <input type="radio" name="Storage" id="model2" value="month" />
       <label for="model2">周</label>
       <input type="radio" name="Storage" id="model3" value="day" />
       <label for="model3">日</label>
   </div>
</div>
jquery///
   $(document).ready(function() {
       $('input[type=radio][name="Storage"]').change(function() {
           if (this.value == 'year') {
        
           } else if (this.value == 'month') {
              
           } else if (this.value == 'day') {
                     
                   }
       });
   });
              ```

* 多选按钮

 ```java
 <form class="layui-form">
         <div class="layui-form-item">
             <label class="layui-form-label">复选框</label>
             <div class="layui-input-block" id="checkbox">
            <input type='checkbox' name='permission' value='year'                          title='year'\>
             <input type='checkbox' name='permission' value='month'                          title='month'\>
              <input type='checkbox' name='permission' value='day'                          title='day'\>
             </div>
         </div>
      <button class="layui-btn" lay-submit="" lay-filter="btn_submit">立即提交</button>
 </form>
 ///jquery
 $("input[name='permission']:checked").each(function(i){//把所有被选中的复选框
                                 rolepermissions=rolepermissions+$(this).val()+","
                             });

jquery版本ajax

 $.ajax({
                    url : '',
                    type : 'get',
                    async : false,
                    dataType : "json",
                    contentType:"application/json"
                    success : function(json) {}
                    error: function(json) {}
                    })

jquery添加子节点

$('#checkbox').append("<input type='checkbox' name='permission' value='" + item.id + "' title='"+item.menuName+"'\>");

github

Raphaelkxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript规范

javascript规范script标签最好放在之前type = “text/javascript”，script默认是，不是必须要写<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&gt...
复制链接

扫一扫

专栏目录