JavaScript 常用小笔记

最新推荐文章于 2021-08-16 20:48:29 发布

原创最新推荐文章于 2021-08-16 20:48:29 发布 · 410 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #笔记

Web前端专栏收录该内容

10 篇文章

订阅专栏

本文围绕JavaScript展开，介绍了定义全局变量、单双引号区别、分号使用等基础要点，还涉及点击跳转、判断元素是否存在、修改标签属性和样式等操作，同时讲解了定时器、浏览器判断、事件处理、获取URL参数等内容，为JavaScript开发提供实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 强迫症患者

<link rel="stylesheet" type="text/css" href="something.css" />
<script type="text/javascript" src="myscripts.js"></script>

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 修改标签的属性值

<div id="biaoqian1" class="first" color="red">第一个</div>

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

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

9. JavaScript 修改和添加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 文本框内容

<script>
    function myfunction(){
		//第一种方法
		var temp1 = document.getElementById("id1").value;
		
		//第二种方法,这里第一个"."后面必须是form标签的name而不能是id
		//第二个"."后面是要获取文本值的<input>的id或者name
		var temp2 = document.form1.name1.value;   
		
		//第三种方法
		var temp3 = $("#id1").val();
}
</script>

<body>
	<form name="form1" id="fid"  method="post">
    	<input type="text" name="name1" id="id1">
        <input type="button" value="点击提交" onclick="myfunction()">
    </form>
</body>

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