<script type="text/javascript">
/*
* 基本数据类型
* String Number Boolean Null Undefined
* 引用数据类型
* Object
*
* 在JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象
* String()
* - 可以将基本数据类型字符串转换为String对象
* Number()
* - 可以将基本数据类型的数字转换为Number对象
* Boolean()
* - 可以将基本数据类型的布尔值转换为Boolean对象
* 但是注意:我们在实际应用中不会使用基本数据类型的对象,
* 如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预期的结果
*/
//创建一个Number类型的对象
//num = 3;
var num = new Number(3);
var num2 = new Number(3);
var str = new String("hello");
var str2 = new String("hello");
var bool = new Boolean(true);
var bool2 = false;
console.log(str === str2);//false
//向num中添加一个属性
num.hello = "abcdefg";
console.log("---->"+num.hello);
//console.log(str === str2);
var b = new Boolean(false);
console.log(typeof bool2);//"boolean"
console.log(typeof b);//object
console.log("bbbb---->"+b);
if(bool2){//false
alert("bool2 我运行了~~~");//并没有运行
}
if(b){//false 因为b是对象 返回的是object 所以并不是boolean值
alert("b 我运行了~~~");//运行了
}
/*
* 方法和属性之能添加给对象,不能添加给基本数据类型
* 当我们对一些基本数据类型的值去调用属性和方法时,
* 浏览器会临时使用包装类将其转换为对象,然后在调用对象的属性和方法
* 调用完以后,在将其转换为基本数据类型
*/
var s = 123;
var ss=new String(999);
s = s.toString();
ss=ss.toString();
console.log(s);
console.log(ss);
s.hello = "你好";
ss.hello="wo hao";
console.log(s.hello);
console.log(ss.hello);
//console.log(typeof s);
</script>
----------------------------------------------------------------------------------
<script type="text/javascript">
/*
* 基本数据类型
* String Number Boolean Null Undefined
* 引用数据类型
* Object
*
* 在JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象
* String()
* - 可以将基本数据类型字符串转换为String对象
* Number()
* - 可以将基本数据类型的数字转换为Number对象
* Boolean()
* - 可以将基本数据类型的布尔值转换为Boolean对象
* 但是注意:我们在实际应用中不会使用基本数据类型的对象,
* 如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预期的结果
*/
//创建一个Number类型的对象
//num = 3;
var num = new Number(3);
var num2 = new Number(3);
var str = new String("hello");
var str2 = new String("hello");
var bool = new Boolean(true);
var bool2 = false;
console.log(str === str2);//false
//向num中添加一个属性
num.hello = "abcdefg";
console.log("---->"+num.hello);
//console.log(str === str2);
var b = new Boolean(false);
console.log(typeof bool2);//"boolean"
console.log(typeof b);//object
console.log("bbbb---->"+b);
if(bool2){//false
alert("bool2 我运行了~~~");//并没有运行
}
if(b){//false 因为b是对象 返回的是object 所以并不是boolean值
alert("b 我运行了~~~");//运行了
}
/*
* 方法和属性之能添加给对象,不能添加给基本数据类型
* 当我们对一些基本数据类型的值去调用属性和方法时,
* 浏览器会临时使用包装类将其转换为对象,然后在调用对象的属性和方法
* 调用完以后,在将其转换为基本数据类型
*/
var s = 123;
var num = new Number(3);
//num = num.toString();
//s=s.toString();
//console.log(s);
//console.log(num);
s.hello="lala";
console.log(s.hello);//undefined
num.hello=num.hello="lalalallal";
console.log(num.hello);//lalalal
//console.log(typeof s);
</script>
-------------------------------------------------------------------------------------------------
<script type="text/javascript">
/*
* 基本数据类型
* String Number Boolean Null Undefined
* 引用数据类型
* Object
*
* 在JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象
* String()
* - 可以将基本数据类型字符串转换为String对象
* Number()
* - 可以将基本数据类型的数字转换为Number对象
* Boolean()
* - 可以将基本数据类型的布尔值转换为Boolean对象
* 但是注意:我们在实际应用中不会使用基本数据类型的对象,
* 如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预期的结果
*/
//创建一个Number类型的对象
//num = 3;
var num = new Number(3);
var num2 = new Number(3);
var str = new String("hello");
var str2 = new String("hello");
var bool = new Boolean(true);
var bool2 = false;
console.log(str === str2);//false
//向num中添加一个属性
num.hello = "abcdefg";
console.log("---->"+num.hello);
//console.log(str === str2);
var b = new Boolean(false);
console.log(typeof bool2);//"boolean"
console.log(typeof b);//object
console.log("bbbb---->"+b);
if(bool2){//false
alert("bool2 我运行了~~~");//并没有运行
}
if(b){//false 因为b是对象 返回的是object 所以并不是boolean值
alert("b 我运行了~~~");//运行了
}
/*
* 方法和属性之能添加给对象,不能添加给基本数据类型
* 当我们对一些基本数据类型的值去调用属性和方法时,
* 浏览器会临时使用包装类将其转换为对象,然后在调用对象的属性和方法
* 调用完以后,在将其转换为基本数据类型
*/
var s = 123;
var num = new Number(3);
//num = num.toString();
//s=s.toString();
//console.log(s);
//console.log(num);
s.hello="lala";
console.log(s.hello);//undefined
num.hello=num.hello="lalalallal";
console.log(num.hello);//lalalal
//console.log(typeof s);
</script>
-------------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
//创建一个字符串
var str = "Hello Atguigu";
/*
* 在底层字符串是以字符数组的形式保存的
* ["H","e","l"]
*/
/*
* length属性
* - 可以用来获取字符串的长度
*/
//console.log(str.length);
//console.log(str[5]);
/*
* charAt()
* - 可以返回字符串中指定位置的字符
* - 根据索引获取指定的字符
*/
str = "中Hello Atguigu";
var result = str.charAt(7);//下标从0开始 汉字默认就是一个字符!
console.log(result);
/*
* charCodeAt()
* - 获取指定位置字符的字符编码(Unicode编码)
*/
result = str.charCodeAt(3);//108
console.log(result);
/*
* String.formCharCode()
* - 可以根据字符编码去获取字符
*/
result = String.fromCharCode(0x2693);
console.log(result)
/*
* concat()
* - 可以用来连接两个或多个字符串
* - 作用和+一样
*/
result = str.concat("你好","再见");
console.log(result);
/*
* indexof()
* - 该方法可以检索一个字符串中是否含有指定内容
* - 如果字符串中含有该内容,则会返回其第一次出现的索引
* 如果没有找到指定的内容,则返回-1
* - 可以指定一个第二个参数,指定开始查找的位置
*
* lastIndexOf();
* - 该方法的用法和indexOf()一样,
* 不同的是indexOf是从前往后找,
* 而lastIndexOf是从后往前找
* - 也可以指定开始查找的位置
*/
str = "hello hatyyguigu";
result = str.indexOf("h",1);
console.log(result);//2
result = str.lastIndexOf("h",5);
console.log(result);//0
/*
* slice()
* - 可以从字符串中截取指定的内容
* - 不会影响原字符串,而是将截取到内容返回
* - 参数:
* 第一个,开始位置的索引(包括开始位置)
* 第二个,结束位置的索引(不包括结束位置)
* - 如果省略第二个参数,则会截取到后边所有的
* - 也可以传递一个负数作为参数,负数的话将会从后边计算
*/
str = "abcdefghijk";
result = str.slice(1,4);
result = str.slice(1,-1);
/*
* substring()
* - 可以用来截取一个字符串,可以slice()类似
* - 参数:
* - 第一个:开始截取位置的索引(包括开始位置)
* - 第二个:结束位置的索引(不包括结束位置)
* - 不同的是这个方法不能接受负值作为参数,
* 如果传递了一个负值,则默认使用0
* - 而且他还自动调整参数的位置,如果第二个参数小于第一个,则自动交换
*/
result = str.substring(0,1);
/*
* substr()
* - 用来截取字符串
* - 参数:
* 1.截取开始位置的索引
* 2.截取的长度
*/
str = "abcdefg";
result = str.substr(3,2);
/*
* split()
* - 可以将一个字符串拆分为一个数组
* - 参数:
* -需要一个字符串作为参数,将会根据该字符串去拆分数组
*/
str = "abcbcdefghij";
result = str.split("d");
/*
* 如果传递一个空串作为参数,则会将每个字符都拆分为数组中的一个元素
*/
result = str.split("");
//console.log(Array.isArray(result));
//console.log(result[0]);
console.log(result);
str = "abcdefg";
/*
* toUpperCase()
* - 将一个字符串转换为大写并返回
*/
result = str.toUpperCase();
str = "ABCDEFG";
/*
* toLowerCase()
* -将一个字符串转换为小写并返回
*/
result = str.toLowerCase();
//console.log(result);
</script>
---------------------------------大小写转换----------------------------------------
<script type="text/javascript">
//创建一个字符串
var str = "Hello Atguigu";
/*
* 在底层字符串是以字符数组的形式保存的
* ["H","e","l"]
*/
/*
* length属性
* - 可以用来获取字符串的长度
*/
//console.log(str.length);
//console.log(str[5]);
/*
* charAt()
* - 可以返回字符串中指定位置的字符
* - 根据索引获取指定的字符
*/
str = "中Hello Atguigu";
var result = str.charAt(7);//下标从0开始 汉字默认就是一个字符!
console.log(result);
/*
* charCodeAt()
* - 获取指定位置字符的字符编码(Unicode编码)
*/
result = str.charCodeAt(3);//108
console.log(result);
/*
* String.formCharCode()
* - 可以根据字符编码去获取字符
*/
result = String.fromCharCode(0x2693);
console.log(result)
/*
* concat()
* - 可以用来连接两个或多个字符串
* - 作用和+一样
*/
result = str.concat("你好","再见");
console.log(result);
/*
* indexof()
* - 该方法可以检索一个字符串中是否含有指定内容
* - 如果字符串中含有该内容,则会返回其第一次出现的索引
* 如果没有找到指定的内容,则返回-1
* - 可以指定一个第二个参数,指定开始查找的位置
*
* lastIndexOf();
* - 该方法的用法和indexOf()一样,
* 不同的是indexOf是从前往后找,
* 而lastIndexOf是从后往前找
* - 也可以指定开始查找的位置
*/
str = "abcdefge";
result = str.indexOf("c",3);
console.log(result);//-1 没有
result = str.lastIndexOf("c",3);
console.log(result);//2
/*
* slice()
* - 可以从字符串中截取指定的内容
* - 不会影响原字符串,而是将截取到内容返回
* - 参数:
* 第一个,开始位置的索引(包括开始位置)
* 第二个,结束位置的索引(不包括结束位置)
* - 如果省略第二个参数,则会截取到后边所有的
* - 也可以传递一个负数作为参数,负数的话将会从后边计算
*/
str = "abcdefghijk";
//result = str.slice(1,4);
//result = str.slice(1,-1);
/*
* substring()
* - 可以用来截取一个字符串,可以slice()类似
* - 参数:
* - 第一个:开始截取位置的索引(包括开始位置)[)
* - 第二个:结束位置的索引(不包括结束位置)
* - 不同的是这个方法不能接受负值作为参数,
* 如果传递了一个负值,则默认使用0
* - 而且他还自动调整参数的位置,如果第二个参数小于第一个,则自动交换
*/
result = str.substring(4,0);//0,4 而且他还自动调整参数的位置,如果第二个参数小于第一个,则自动交换
result = str.substring(0,4);//
console.log(result)
/*
* substr()
* - 用来截取字符串
* - 参数:
* 1.截取开始位置的索引
* 2.截取的长度
*/
str = "abcdefg";
result = str.substr(3,2);
console.log(result);//de
/*
* split()
* - 可以将一个字符串拆分为一个数组
* - 参数:
* -需要一个字符串作为参数,将会根据该字符串去拆分数组
*/
str = "abcbcdefghij";
result = str.split("d");
console.log(result);
/*
* 如果传递一个空串作为参数,则会将每个字符都拆分为数组中的一个元素
*/
result = str.split("");
//console.log(Array.isArray(result));
//console.log(result[0]);
console.log(result);
str = "abcdefg";
/*
* toUpperCase()
* - 将一个字符串转换为大写并返回
*/
result = str.toUpperCase();
console.log("小写转大写"+result);
str = "ABCDEFG";
/*
* toLowerCase()
* -将一个字符串转换为小写并返回
*/
result = str.toLowerCase();
console.log("大写转小写"+result)
//console.log(result);
</script>
-------------------------------------全选反选----------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">
/*
功能:
①全选按钮:点击后所有爱好都选中
②全不选按钮:点击后所有爱好都选中
③反选按钮:点击后所有爱好选中状态反转
④提交按钮:点击后依次弹出选中内容
⑤全选框:点击后让所有爱好的选中状态和自己一致
⑥爱好框:点满后将全选框选中,否则取消选中
*/
window.onload = function(){
var items = document.getElementsByName("items");
//1.#checkedAllBtn
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
setItemsChecked(true);
checkedAllBox.checked=true;
};
//2.#checkedNoBtn
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
setItemsChecked(false);
checkedAllBox.checked=false;
};
//3.#checkedRevBtn
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
setItemsChecked("reversStatus");
//点满时将checkedAllBox.checked设置为true
//统计当前items中被选中的个数
checkedAllBox.checked=isAllChecked();
};
//4.#checkedAllBox
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function(){
setItemsChecked(this.checked);
};
//5.#sendBtn
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
for(var i = 0; i < items.length; i++) {
if(items[i].checked) {
alert(items[i].value);
}
}
};
//6.items
for(var i = 0; i < items.length; i++) {
items[i].onclick = function(){
//点满时将checkedAllBox.checked设置为true
//统计当前items中被选中的个数
checkedAllBox.checked=isAllChecked();
}
}
function isAllChecked() {
for(var j = 0; j < items.length; j++) {
if(!items[j].checked)
return false;
}
return true;
}
function setItemsChecked(checkedStatus) {
for(var i = 0; i < items.length; i++) {
items[i].checked = (checkedStatus == "reversStatus")?(!items[i].checked):checkedStatus;
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>