前端工具包_前端开源工具包-优快云博客

本文链接：https://blog.youkuaiyun.com/kangle0224/article/details/84728576

文章目录

1.1定时器和清理器
1.2 ajax
1.3 jquery一定要在bootstrap前引用
1.4 innerHTML,innerText,value的区别
1.5、连续添加
1.6、选择器

1.1定时器和清理器

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
    <input type="button" value="Start count!" onClick="timedCount()">
    <input type="text" id="txt">
</form>
<script type="text/javascript">
    var c = 0
    var t
    function timedCount() {
        document.getElementById('txt').value = c
        c = c + 1
        t = setTimeout("timedCount()", 1000)
    }
</script>
</body>
</html>

结果：
在这里插入图片描述
清理器：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
    <input type="button" value="Start count!" onClick="timedCount()">
    <input type="text" id="txt">
    <input type="button" value="Stop count!" onClick="stopCount()">
</form>
<script type="text/javascript">
    var c = 0;
    var t;
    function timedCount() {
        document.getElementById('txt').value = c;
        c = c + 1;
        t = setTimeout("timedCount()", 1000);
    };

    function stopCount() {
        clearTimeout(t);
    };
</script>
</body>
</html>

结果：
在这里插入图片描述

1.2 ajax

1.3 jquery一定要在bootstrap前引用

1.4 innerHTML,innerText,value的区别

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<div id="test">这是div中的<b>粗体字</b></div>
	<input type="text" id="test1" value="123">
</body>
</html>

在这里插入图片描述
可以看出，innerHTML将格式也带出来了，而innerText只是取出中间的文字

而value是取input、select、textarea中间的值

1.5、连续添加

字符串方式添加元素：

<!DOCTYPE html>
<html>
<head>
	<title>test b </title>
</head>
<body>
	<div id="container">
		
	</div>
	<a href="https://www.baidu.com" onclick="return aa();">添加</a>
	<script type="text/javascript">
		function aa(){
			var c = document.getElementById("container");
			var tag = "<input type='text'>"
			container.insertAdjacentHTML("beforeBegin", tag);  //连续添加
			return false;  // 返回false和a标签中的return false可以阻止跳转
		};
	</script>
</body>
</html>

在这里插入图片描述
自己创建标签：

<!DOCTYPE html>
<html>
<head>
	<title>c</title>
</head>
<body>
	<div id="container"></div>
	<a href="https://www.baidu.com" onclick="return aa();">点击</a>
	<script type="text/javascript">
		function aa(){
			var obj = document.createElement("a");
			obj.href = "https://www.google.com";
			obj.innerText = "老男孩";
			var cc = document.getElementById('container');
			cc.appendChild(obj);
			return false;
		};
	</script>

</body>
</html>

在这里插入图片描述

1.6、选择器

div .p a    // 层级选择器，div下的p下的a，最后这个a才生效
div, p, a   // 组合选择器，div和p和a都生效
jquery：
div > a > p // 是找div下的a下的p，给p加样式
prve + next // 找prve后紧邻的next标签
prev ~ siblings  //找到与prev所有同辈的siblings标签
:first //找到第一个标签