web_13day

    <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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值