JavaScript 常用小笔记

怼烎@ 2022-04-22 12:32 124阅读 0赞

**1. 强迫症患者**

**2. JS中定义全局变量**

var name = 'abc';
    function getName(){ 
        alert(name);
    }

尽量避免使用JS全局变量，防止产生冲突

**3. JavaScript中单引号和双引号的区别？**  
　　没什么区别，单双引号意义一样。一般JS建议使用单引号，只有嵌套的时候采用双引号，避免和网页中的值和表达式弄混。

**4. JS中 ; 号**  
`function`后可以不加分号，表明这是一个方法；如果是表达式，后面需要加上分号

**5. 点击button跳转**

1)<input type="button" name="register" value ="注册" onclick="window.location.href='Register.jsp'"/>
    
    2)
    <script>
        function jump(){ 
            window.location.href="https://www.baidu.com/";
        }
    </script>
     
    <input type="button" value="跳转" onclick="jump()">

**6. this.innerHTML**  
解释：`this.innerHTML` 是获取当前对象的内容，如果当前对象内部只有文本，那么 `this.innerHTML` 就是文本；如果是标签组成的内容， 那么 `this.innerHTML` 就是标签组成的内容。

**7. JavaScript 判断某个Id对应的标签元素是否存在**

if(document.getElementById( ... ))
    	or
    if($(...).length > 0)

**8. JavaScript 修改标签的属性值**

JavaScript代码：
    	var bq = document.getElementById("biaoqian1");
    	bq.setAttribute("color","green");

修改，设置，删除 自定义行内标签属性的分别是：  
**.setAttribute( )　　.getAttribute( )　　.removeAttribute( )**

**9. JavaScript 修改和添加css样式**  
[JavaScript 和 jQuery动态修改css样式的方法][JavaScript _ jQuery_css]

**10. 给表格单元格添加函数**  
通过层级选择器：

为表格的第一行第一列添加点击事件 
    	$("#tableId tr td:eq(0)").click(function(){  })
    为表格的第二列添加点击事件  
    	$("#tableId tr").find('td:nth-child(2)').click(function(){  })
    表格的第一行第二列的文本值
    	$("table tr:eq(0) td:eq(1)").val();

**11. JavaScript获取 input 文本框内容**

**12. 获取祖先的属性**  
　　获取祖先（li标签 class为clearfix）的孙子（span标签 class为one-time）的文本值：  
`var onetime = $(this).parents('li.clearfix').children('span.one-time').text();`

获取ID:

var timeId = $(this).parents('li.clearfix').children('span.one-time').attr("id");

**13.**`<a href =url>`

> a标签，href代表的连接地址，如：href=“http://www.baidu.com”，这样可以通过此标签页面跳转到百度；

<a href = "/">  --直接返回根目录，或者是网站首页
    <a href = "#">  --代表的连接地址是本页面，关键是后面的function

**14. JS输出**

.java  system.out.println   输出结果到IDE控制台
    .jsp     out.println    输出结果到编译后浏览器该页面
    .js      console.log    将返回的数据打印在Chrome中的控制台里

**15.**`t = setTimeout("timeCount()",1000);`  
解释：设置定时器，1000ms后执行timedCount函数，并将该定时器的标记赋值给变量t作为唯一标识。`setTimeout()` 方法用于在指定的毫秒数后调用函数或计算表达式，语法：`setTimeout(code,millisec)`，提示 setTimeout() 只执行 code 一次，如果要多次调用，需要使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

**16.** `setInterval() and clearInterval()`

*  `setInterval()` ，按照指定的周期（以毫秒计）来调用函数或计算表达式
 *  `clearInterval()` ，可以取消周期性的方法调用，`clearInterval(id)` 的参数必须是由 setInterval() 返回的id值

当setInterval( )调用执行完毕时，它将返回一个time id，后面可以利用该值对计时器进行访问，如果将该id传递给clearInterval()，便可以终止被调用的过程代码的执行。

**17.**

*  `empty()`：移除被选元素所有内容，包括所有文本和子节点
 *  `append()`：在被选元素的结尾（仍然在内部）插入指定内容
 *  `eval(string)`：计算某个字符串，并执行其中的的 JavaScript 代码

**18. 判断是否是 ie 浏览器**

//通过ActiveXObject对象判断是否是IE浏览器
    function IsIE(){ 
    	if (!!window.ActiveXObject || "ActiveXObject" in window){ 
     		return true;
     	}else { 
     		return false;
     	}
    }

**19. history**

`history.back(-1)`：直接返回当前页的上一页，清除全部消息，是个新页面；`history.go(-1)`：也是返回当前页的上一页，不过表单里的数据全部还在。

history.back(0)     刷新 
    history.back(1)     前进 
    history.back(-1)    后退

同理 history.go 也一样，不同之处在于保存表单数据。

**20. event.stopPropagation( )**  
　　不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。  
　　有些时候有两个节点绑定了相同的事件，例如：click事件，只是节点的级别可能不同，可以是父子节点（如：`<div>、<button>` 都绑定了click事件），所以可能当你点击子节点的时候，可能在触发子节点的同时会触发父节点。

**21. 获取url中参数**

url="http://localhost:8080/qc/staff/getStaffLeave?site=LH&department=ABC";
    
    function getQueryString(name) { 
    	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    	var r = window.location.search.substr(1).match(reg);
    	if (r != null) return unescape(r[2]); return null;
    }
    
    var site = getQueryString("site");
    var department= getQueryString("department");

**22. trim( ) 方法**

*  去除字符串的 **头尾** 空格

var str = " demo ";
    alert(str.trim());

输出结果：`demo`

[JavaScript _ jQuery_css]: https://www.cnblogs.com/66-88/articles/6627360.html