js中的function学习

来源：互联网发布：知乎'' 编辑：程序博客网时间：2024/05/20 22:01

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中的function学习</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
.title{
background: #fee;
border: 1px solid #fee;
}
</style>
</head>
<body>
<script type="text/javascript">
//javaScript jQuery html css中需要注意的问题：
//1 若发现浏览器的报错显示$符号有问题，确认：
// a、js是否和当前的html文件或者jsp文件在同一个文件夹，
// b、是否写后缀名 .js
// c、引用的名称是否写正确
//2 如果写了js代码或jQuery代码，却无任何反应：
// a、js是否正确引入
// b、js代码是否是错写在了引入js文件的标签内部
// c、方法是否正确引用
// d、是否正确查找到元素
// e、变量名是否可能与JavaScript内置对象（变量或者说方法）重名
//---------------------------------------------------------------------------------
//3 上课所讲到的知识点；
// javaScript 中的引用方式位置外部引入内部设置
// js 的数据类型： undefined、null、number、string、object、arrary、function
// var a="ddd" 无论该类型语句写在文档的哪个位置，全局还是某个方法里
// 不在前面写 var 时，定义的就是全局变量；
//总结：
// 访问不存在的变量会报出异常
// 访问未赋值的变量时，变量的值是undefined；

// 函数function ：关键字 function 函数名字参数列表函数体
// javaScript 的函数是一个数据类型 number boolean
// 个人感觉有点a相当于c++中test的一个别名，或者a是test的克隆而提供这种可能的最直接的原
// 因就是javaScript 是一个弱类型的语言，一个变量可以自动转化、存放任意类型的内容，不仅是Java
// 中所认为的基本数据类型，也可以是引用数据类型，甚至是一个函数

//弱类型语言（可变类型、动态类型）、函数式数据类型的一种，他和number string array object
//没什么区别

// window.onload=function(){ } // 用于最前面表示文档加载完成后触发

//很常用的一些方法使用：
//js中帮助我们调程序用到的方法：
console.log(); //该方法类似于System.out.println();可以接变量对象方法名
console.log(window) //该方法可以直接在浏览器窗口看到window属性方法等，可当作文档查看
console.log(history) //window 的内置对象 history document location
console.log(document); //document 表示html标签内的所有东西
console.log(location); //location 对象用来访问浏览器的地址

console.log(name) // 该变量为JavaScript 内置变量
console.log(name1) // 会报出异常，因为此处未定义

alert(); //因为是弹窗口，更容易在前台看到变化
//类比拓展： html css 中调程序的方法：
// 1 对于div 看不到边框，不知道大小、位置的时候，直接加背景颜色或者加颜色明显的边框
// 2 不知道某个样式是否起作用，可以在其中设置其他属性的样式，比如color （改变字体颜色）
// 等效果明显的样式，如果没有变化，说明该名称的样式未运用上，否则，说明是该属性设置问题，
// 则继续判断该标签是否有该属性属性值是否有误

//根据空格分割字符串，鼠标放上去可根据原点数判断split（''）中空格个数

typeOf()方法 //该方法用于判断(置于括号内)的东西是一个变量(变量的类型) 对象还是方法
// 该方法极其有用，可以用于多处，但都通常与console.log()合用，
// 例如 console.log(typeOf (widow) ) 注：window 等可以不加括号
// 1 不确信自己使用的a是一个属性还是一个方法，直接打印吧console.log(typeOf a);
//例如 // 2 用于if 判断语句或者其他循环控制语句中，如果类型是...，则...
console.log(typeOf Date); //打印出结果为方法 function
console.log(typeOf 5); //打印出结果为 int 或者num
//--------------------------------------------------------------------------------------------
console.log(history) //window 的内置对象 history document location
history.go(1); // 访问浏览器历史记录中的下一页
history.go(-1); // 访问浏览器历史记录中的上一页

console.log(document); //document 表示html标签内的所有东西

console.log(location); //location 对象用来访问浏览器的地址栏
location.href="1.html"; //常用于切换网页
location.reload(); //重新加载文档
//--------------------------------------------------------------------------------------------
<a href="javaScript:void(0);" onclick="abc">登录</a>

/此处JavaScript:void(0) 表示取消a标签的默认行为（跳转到一个链接目的地），更改一个a标签为按钮
//--------------------------------------------------------------------------------------------

//字符串的相关属性或者方法
str.length; //字符串长度
str.charAt(3); //字符串的第四个字符
str.indexOf(""); // 字符串中某个字符或者字符串的第一次出现时的开始位置
str.subString(pos1,pos2); //截取某段字符串，注意：截取到的包括前面索引在的位置不包括后面
str.substr(pos1,pos2); //同上计算器的退格功能可以巧妙借用该方法进行转化，显示字符串前面即可
str.isNaN(); //用于判断是否不是一个字符串
str.split("-"); // 分割字符串的方法，根据-将字符串进行分割，返回一个字符串数组

//---------------------------------------------------------------------------------------------------
parseInt("abc"); //将一个字符串转换为int类型的数字结果显示一个数字
parseFloat("abc"); // 将一个字符串转换为float 类型的小数


//---------------------------------------------------------------------------------------------------
event.printDefault(); // 用于阻止系统键盘的默认行为的发生，一般用于控制语句中，当符合某条件时
// 将阻止该按键的默认行为注：无法阻止语言输入法的正常输入行为；
// 用于用户输入内容的简单控制
//例如：
var age=document.getElementById("age"); //如果键盘上输入的内容不是0~9之间的数字或者空格键，
age.onkeydown=function(event){ //则阻止该键盘摁下后的默认行为
var key=event.key;
console.log(key);
if(!(key>=0&&key<9)&&key!='Backspace'){
event.preventDefault();
}

//---------------------------------------------------------------------------------------------------
window.setTimeout(func,time); //方法表示等time(毫秒)时间之后之后func函数被调用一次发生一次
window.setInterval(func,time);// 方法表示每隔time(毫秒) 后，func函数被调用一次多次发生

//---------------------------------------------------------------------------------------------------
var arr=new Array(); //创建数组
arr[i]=值; //为单一个元素赋值
var arr=['one',123,new Date()]; // json，数组直接量
arr.push('新放入的'); //不同于Java，此处数组有方法，比如push(),体现栈的特性;
var ss=arr.join('-'); //将字符串中的元素以- 连接起来

// javascript的数组就是一个集合，同时具备List、Map、Set和stack的特性
// 数组元素的类型可以不一致，数组是一个动态数组
var arr1=new Array(3);
arr1[0]="one";
arr1[1]=123;
arr1[2]=new Date();
console.log(arr1[2]); //根据下标访问

var arr2=['one',123,new Date()]; // json，数组直接量
console.log(arr2[2]);

arr2.push('新放入的'); //不同于Java，此处数组有方法，比如push(),体现栈的特性;
console.log(arr2.length);

arr2['oo']='集合'; //此处只能通过访问下标'oo'访问，而不是正常的list数组加入自动排序
console.log(arr2[4]); //结果为undefined
console.log(arr2['oo']); //此处可以看出map的键值对特性

var ss=arr2.join('-'); //将字符串中的元素以- 连接起来
console.log(ss);

var arr3=[1,2,1,8,10,5,9,45];
console.log(arr3.sort()); //排序不是按照int 类型大小排，而是1 1 10 2 45 5 8 9 排序

//---------------------------------------------------------------------------------------------------
//控制语句
var num1=-1; //num 为JavaScript 的内置对象，所以不要直接用num,
if (unm1) { //非 0 即是true，非空即是true
console.log('存在');
}else{
console.log( '不存在');
}
var arr1=[1,2,3,4,5]; //数组直接量
var total=0;
for (var i=0;i<arr1.length;i++) { //遍历数组

total=total+arr1[i];
}
console.log(total);

//---------------------------------------------------------------------------------------------------
//JavaScript 数组中一些奇怪的地方

console.log(Date); // 打印出的结果为 function 即方法
console.log(new Date()); //结果为打印出当前时间，所以Date为一个对象
//所以，Date 到底是一个什么呢

//函数function ：关键字 function 函数名字参数列表函数体
function test(num1,num2){
return num1+num2;
}
//函数调用
var result=test(1,2);
console.log(result);

//javaScript 的函数是一个数据类型 number boolean
var a=test; //个人感觉有点a相当于c++中test的一个别名，或者a是test的克隆
console.log(a(1,3)); //而提供这种可能的最直接的原因就是javaScript 是一个弱类型
var arr1=[test,a];//的语言，一个变量可以自动转化、存放任意类型的内容，不仅是Java
console.log(arr1[1](1,4)); //中所认为的基本数据类型，也可以是引用数据类型，甚至是一
// 个函数
function abc(func,num1,num2){ //方法func竟然可以当做参数传进来
return func(num1,num2);
}
//console.log(abc(test,10,20));
console.log(test(10,20));

if (!isNan(result)) { //isNaN()判断是否不是一个字符串
console.log('是一个数字');
}

//--------------------------------------------------------------------

对象.value=""; //value 为一个属性，可以设置input 标签的显示值
对象.innerHTML=""; // 用来设置非表单标签的元素内容
对象.val(); // val() 是一个方法，用于设置？

//--------------------------------------------------------------------
$(this).toggle(); //toggle()方法可以实现让元素显示或隐藏

$(this).toggle(function(){},function(){},function(){},...);
//该方法表示触发当前控件时，可以依次执行里面定义的方法
//常用于下列情况
// 1 如果有0个函数，则表示让当前元素自动显示或隐藏
// 2 如果有2个函数，则表示让当前元素在第一次触发时，调用方法一，再次调用时显示方法二，循环
// 3 如果有m个函数，则触发时，依次循环调用函数

$(this).toggleClass("样式名"); // 方法实现自定义的样式是在元素上自动增加或取消(自动取反操作)
//但是该样式必须定义在css样式文件中

//注：该方法是另外两个方法的合体
$(this).addClass("样式名"); // 为当前元素添加某样式
$(this).removeClass("样式名"); //为当前元素取消某样式

$(this).toggleClass("样式名");
= $(this).click=function(){
if (条件为true) { //此处的"条件" 是判断样式显示的唯一确定条件
$(this).addClass("样式名1");
}else{
$(this).removeClass("样式名1");

}
}

//注：上面在寻找"条件"时，对于条件不易寻找的，可以通过设定样式后，在浏览器观察，看看和该元素
//直接相关的属性中，看哪个是变化的，从变化的内容中找，或者从相邻的元素中找。

$(this).attr("属性","值"); //为当前元素某个属性进行设置

$(this).css("属性","值"); //为当前元素进行样式设置

$(this).slideUp("时间值");

$(this).slideDown("时间值");

$(this).fadeIn("时间值");

$(this).fadeOut("时间值");

//---------------------------------------------------------------------------------------------------

</script>

</body>
</html>

阅读全文

0 0