javascript基础学习
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript基础学习相关的知识，希望对你有一定的参考价值。
<--目录-->
1、js存在形式及其它
2、函数
3、自执行函数
4、jquery3添加事件
5、jquery自动增减样式
6、返回顶部
7、滚动条
8、跑马灯
9、搜索框
js存在形式及其它
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试js</title> <style> .show{ } .hide{ display:none; } </style> </head> <body> <!--js存在形式--> <!--引用js文件--> <!--<script src="js/test.js"></script>--> <!--<script src="js/zhixi.js"></script> --> <!--当前页--> <!-- <script type="text/javascript"> alert(‘wsyht‘); </script> --> <div id=‘t1‘ class=‘show‘ name=‘wsyht‘>内容</div> <!-- <div id=‘t2‘ style="width:500px;height:200px;border:2px solid #333;"></div>--> <form id=‘F1‘ action=‘https://www.baidu.com/s?‘> <input type=‘text‘ name=‘wd‘ /> <!--<input type=‘submit‘ value=‘提交‘ />--> <input type=‘button‘ value="伪提交" onclick="Foo();" /> <!--当点周伪提交会执行Foo父函数--> </form> <script type="text/javascript"> function Foo(){ document.getElementById(‘F1‘).submit(); //找到这个id，并提交这个id } </script> <!--<script type="text/javascript"> /* 创建标签 var tag = document.createElement("a"); tag.href = "http://www.baidu.com"; tag.innerText = ‘点我‘; var id1 = document.getElementById(‘t1‘); id1.appendChild(tag); */ //第二种标签方式 /* var tag = "<a href=‘http://baidu.com‘>走你</a>" var id1 = document.getElementById(‘t1‘); id1.innerHTML = tag; */ //隐藏标签 //var id1 = document.getElementById(‘t1‘); //id1.className = ‘hide;‘ //获取属性 //var id1 = document.getElementById(‘t1‘); //console.log(id1.getAttribute(‘name‘)); //修改属性 //id1.setAttribute(‘name‘,‘jenkins‘) //console.log(id1.getAttribute(‘name‘)); //获取他的宽度 /* //var id2 = document.getElementById(‘t2‘); //var width = id2.style.width; //console.log(width); //id2.style.width=‘100px‘ //修改他的宽度 //a = ‘123‘ //parseInt(a) //将字符转成数字 */ </script>--> <!--javascript基础，Dom编程,jquery--> <!-- http://www.cnblogs.com/wupeiqi/articles/4457274.html--> <!-- <script type="text/javascript"> var name = ‘ wsyht ‘; name.trim() </script> --> <!--去空格--> <!--切片 <script type="text/javascript"> var name = ‘wsyht‘ name.charAt(0) name.charAt(1) name.charAt(2) </script> --> <!-- 输出1和2个字母 <script type="text/javascript"> var name = ‘wsyht‘ name.substring(1,3) 输出长度 name.length </script> --> </body> </html>
函数.js
//alert(‘杨过‘);
//这是单行注释
/*
这是多行注释
name=123 全局变量设置
var name=123 局部变量设置
* */
//函数变量，函数声明，函数返回值
name = ‘123‘
tes = ‘test1‘
Foo(‘wsyht1‘,‘wsyht2‘,‘wsyht3‘) //赋值第1、2、3位参数
Bar()
Bat()
function Foo(name1,name2){ //传第1、2位参数
var name3 = arguments[2];var name4 = arguments[3]; //声明第3、4位参数，不推荐使用
console.log(name1);
console.log(name2);
console.log(name3);console.log(name4); //加分号写多条语句，输出3、4位参数，第四位没有赋值，则会输出没有定义
return console.log(name1);
}
function Bar(){
tes = ‘test2‘;
console.log(name);
console.log(tes);
}
function Bat(){
var name = ‘456‘ ;
console.log(name);
}自执行函数
/*
var temp = function(){ //匿名函数
}
*/
//自执行函数，不用调用，自已去执行
/*
(function(){
console.log(‘hello world‘);
})()
*/
/*
(function(name){
console.log(name);
})(‘wsyht‘)
*/
//声明数组
//var arry = arry(12,3,4,5)
/*
var arry = [1,2,3,4]
arry.push(‘wsyht‘);
console.log(arry);
arry.unshift(‘wsy‘);
console.log(arry);
arry.splice(1,0,‘ht‘); //在1后面插入数字ok，0代表插入不删除的意思
console.log(arry);
arry.splice(100,0,‘ok‘); //在100后面插入数字ok，0代表插入不删除的意思
console.log(arry);
*/
//a = [1,2,3]
//a[10] = 9
//a
//names = [1,22,33,44,55,66]
//names.slice(1,5) //取第1位后面的所有数字
//dic = {‘name‘:‘wsyht‘,‘age‘:18}
//dic = {‘name‘:{‘xx‘:‘oo‘},‘age‘:18}
//第一种for循环
var array = [11,22,33,44,55]
var dict = {‘name‘:‘wsyht‘,‘age‘:19}
/*
for(var item in array){
console.log(item)
}
for(var item in dict){
console.log(dict[item])
}
*/
//第二种for循环
/*
for(var i=0;i<array.length;i++){
console.log(array[i]);
}
for(var i=0;i<10;i++){
console.log(dict[i]);
}
*/js添加事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<p>I would like to say：<span></span></p>
<input type=‘button‘ id=‘addId1‘ value="追加1" />
<input type=‘button‘ id=‘addId2‘ value="追加2" />
<script src=‘js/jquery-3.1.0.js‘></script>
<script type="text/javascript">
$(function(){
$(‘#addId1,#addId2‘).click(function(){ //给id1和id2都创建追加事件
var currentId = $(this).attr(‘id‘); //this:获得点击的div，attr：获得点击的div的id的属性赋值给currentID
if(currentId == ‘addId1‘){ //如果是id1
//$(‘p‘).append(‘wsyht ‘); //p标签添加wsyht
//$(‘p‘).text(‘I would like to say：wsyht ‘); //覆盖添加wsyht
$(‘p span‘).text(‘wsyht‘) //p标签下的span标签覆盖添加wsyht
}else if(currentId == ‘addId2‘){ //如果是id2
//$(‘p‘).append(‘jenkins ‘); //p标签添加jenkins
//$(‘p‘).text(‘I would like to say：jenkins ‘); //覆盖添加jenkins
$(‘p span‘).text(‘jenkins‘) //p标签下的span标签覆盖添加jenkins
}else{
}
});
})
</script>
</body>
</html>js自动增减样式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery</title>
<style>
.c1{
border: 2px solid red;
}
.c2{
font-size: 58px;
}
</style>
</head>
<body>
<!--http://www.php100.com/manual/jquery/-->
<div id = ‘id1‘> 1234<a>12</a>3</div>
<input name=‘username‘ type=‘text‘ value=‘9999‘>
<input name=‘username‘ type=‘checkbox‘ value=‘9999‘>
<hr/> //下划线
<div class="c1">dddddd</div>
<div class="c1">aaaa</div>
<div class="c1">bbbbb</div>
<input onclick="Foo();" type=‘button‘ value="点我">
<script src="js/jquery-3.1.0.js"></script>
<script type="text/javascript">
/*
var text = $(‘#id1‘).text(); //获取id1文件内容，test()不设置参数是取值，设置了参数是赋值
var html = $(‘#id1‘).html(); //获取id1html
console.log(text); //输出内容
console.log(html); //输出html
$(‘#id1‘).text(‘wsyht‘); //赋值
*/
/*
var data = $("input [ name = ‘username‘ ]").val()
console.log(data);
$("input [ name = ‘username‘ ]").val(‘python‘)
*/
var data = $("input[name=‘username‘]").attr(‘name‘);
console.log(data);
$("input[name=‘username‘]").attr(‘name‘,‘ok‘);
//$("input[type=‘checkbox‘]").prop(‘checked‘,true); //默认给复选框打勾
$("input[type=‘checkbox‘]").prop(‘disabled‘,true); //复选框不可用
function Foo(){
//$(‘.c1‘).addClass(‘c2‘); //为所有class=c1的标签再加上c2的样式功能
$(‘.c1‘).toggleClass(‘c2‘); //只要一点击，就会自动添加或删除c2的样式功能
}
</script>
</body>
</html>js返回顶部
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
.returnTop{
position: fixed;
width: 70px;
height: 25px;
right: 20px;
bottom: 20px;
background-color: blue;
color: white;
}
.hide{
display: none;
}
</style>
</head>
<body>
<!--返回顶部-->
<!--<div id=‘return_top‘ class="returnTop hide" onclick="Go();">返回顶部</div>-->
<div id=‘return_top‘ class="returnTop hide">返回顶部</div>
<div style=‘height: 3000px;‘>asd</div>
<script src=‘js/jquery-3.1.0.js‘></script>
<script type="text/javascript">
$(function(){
//当页面加载完成之后，默认执行该函数
$(‘#return_top‘).click(function(){
$(window).scrollTop(0); //0返回顶部，顶部数字为0
})
})
$(window).scroll( function(){ //当页面滚动条滚动时执行的函数
//console.log(123);
var height = $(window).scrollTop(); //获得当前所在高度
if(height>0){
//显示返回顶部
$(‘#return_top‘).removeClass(‘hide‘)
}else{
//隐藏返回顶部
$(‘#return_top‘).addClass(‘hide‘)
}
});
/*
function Go(){
$(window).scrollTop(0);
}
*/
</script>
</body>
</html>js滚动条
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<!--滚动条-->
<div style="width: 500px;background-color: #ddd;">
<div id=‘process‘ style="width: 10%;background-color:green;height: 10px;"></div>
</div>
<!--
<input value="停止" onclick=‘stop()‘ />
-->
<script type="text/javascript">
pro = 10
function Foo(){
var id = document.getElementById(‘process‘)
pro = pro + 10
if(pro > 100){
clearInterval(interval) //停止滚动条
}else{
id.style.width = pro + ‘%‘;
}
}
interval = setInterval(‘Foo()‘,2000) //每隔2秒执行一次v
//interval = setTimeout(‘Foo()‘,2000) //只执行一次
/*
function Foo(){
var id = document.getElementById(‘process‘)
pro = pro + 10
id.style.width = pro + ‘%‘;
}
interval = setTimeout(‘Foo()‘,5000);
function stop(){
clearTimeout(interval);
}
*/
</script>
</body>
</html>js跑马灯
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>欢迎wsyht来参观我的项目 </title>
<script type="text/javascript">
function Go(){
var content = document.title;
//欢
var firstChar = content.charAt(0);
//迎wsyht来参观我的项目
var sub = content.substring(1,content.length);
//迎wsyht来参观我的项目;欢
document.title = sub + firstChar;
}
interval = setInterval(‘Go()‘,1000); //每隔1秒执行Go函数
function Stop(){
clearTimeout(interval) //只执行一次stop
}
</script>
</head>
<body>
<input value="停止" type="button" onclick="Stop();" />
</body>
</html>js搜索框
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
.gray{
color:gray
}
.black{
color: black;
}
</style>
</head>
<body>
<!--搜索js事件 http://www.w3school.com.cn/jsref/jsref_events.asp -->
<input type="text" class="gray" id=‘tip‘ value="请输入关健字"
onfocus="Enter();" onblur="Leave();" />
<script type="text/javascript">
function Enter(){
var id = document.getElementById(‘tip‘)
id.className = ‘black‘;
if(id.value=="请输入关健字" || id.value.trim()==‘‘){ //trim左右两边去除空格
id.value = ‘‘
}
}
function Leave(){
var id = document.getElementById(‘tip‘)
var val = id.value
if(val.length==0||id.value.trim()==‘‘){
id.value=‘请输入关健字‘
id.className = ‘gray‘;
}else{
id.className = ‘black‘;
}
}
</script>
</body>
</html>本文出自 “wsyht90的博客” 博客，请务必保留此出处http://wsyht90.blog.51cto.com/9014030/1854664
以上是关于javascript基础学习的主要内容，如果未能解决你的问题，请参考以下文章
VSCode自定义代码片段12——JavaScript的Promise对象