HTML基础-03JS 数据获取

【javascript最初的梦】
（1.）点击获取数据进行渲染
 <div id="f1" οnclick="foo()">张三</div>
  <script>
      
        function foo(){
            //利用class获取div
            var c1di = document.querySelector(".c1");
            c1di.innerHTML = "李四";
</script>
【核心：
1.div要有class或者id，
2.写函数：获取id重新赋值var c1di = document.querySelector("id")
3.用获取到的值重新进行渲染c1di.innerHTML = "李四";】

（2.）这个是点击之后，遍历循环，全部内容会再加东西
   function foo2(){
            var c1divs = document.querySelectorAll(".c1");
            for(let c1div of c1divs){
                if(c1div.innerHTML.indexOf("超好吃") == -1){
                    c1div.innerHTML = c1div.innerHTML + "超好吃"
                }
            }

            // for(let i = 0 ; i < c1divs.length ; i ++){
            //     let c1div = c1divs[i];
            //     c1div.innerHTML = c1div.innerHTML + "超好吃"
            // }

        }
                                                
（2）比较复杂，点击获取参数来改变数据的值
<div id="box" style="width: 200px;height: 200px;background-color: black;"></div> //【1.创建一个方块】   
  <button class="colorBtn" οnclick="changeColor('red')">按钮1</button>//【2.每个按钮都有点击事件传参数】
    <button class="colorBtn" οnclick="changeColor('green')">按钮2</button>
    <button class="colorBtn" οnclick="changeColor('blue')">按钮3</button>

【3.创建函数，获取参数来改变方块的样式】
    <script>
        function changeColor(colorName) {
            document.querySelector("#box").style.backgroundColor = colorName;//获得方块的id.样式.属性 = 传过来的参数
        }
【一下子修改3个按钮的样式】
  <button οnclick="changeSize('200px')">变大</button>
    <button οnclick="changeSize('100px')">变小</button>
//1.创建2个点击按钮
              //2.点击函数，传好参数
        function changeSize(sizeName) {
            let colorBtns = document.querySelectorAll(".colorBtn");//（1）获取要按钮的（被改变内容的）id，querySelectorAll指这个数组全部内容
            //（2）遍历循获取的参数，赋值给按钮的属性
             for (let colorBtn of colorBtns) {
                colorBtn.style.width = sizeName;
                colorBtn.style.height = sizeName;
            }
 

知道就好的函数

  
string.indexOf(searchString[,startIndex])第一次出现的位置. string.lastIndexOf(searchString[,startIndex])最后一次出现的位置. string.replace(regExpression,replaceString)替换现有字符串. string.split(分隔符)返回一个数组存储值. string.substr(start[,length])取从第几位到指定长度的字符串. string.toLowerCase()使字符串全部变为小写. string.toUpperCase()使全部字符变为大写. string.substr(startIndex,endIndex)截取字符串
var testString = "AabbCcddAa;Ef;gh "; console.log(testString.indexOf("a"));//输出1 console.log(testString.lastIndexOf("a"));//输出9 console.log(testString.replace("h","g"));//替换字母h为g console.log(testString.split(";"));//根据;切分字符串成数组 console.log(testString.trim());//把前后的空格去掉 console.log(testString.length);//获取字符的长度 console.log(testString.substr(2,testString.length-5))//截取字符串 console.log(testString.toLowerCase())//全部转小写 console.log(testString.toUpperCase())//全部转大写

js点击变内容

//1.div和点击函数
  <div id="test1" οnclick="clickCuihua()" >翠花</div>
   
//2. 函数获取到id，赋值之后，直接赋值style 样式
function clickCuihua(){
            let test2 = document.getElementById("test2") ;
            test2.innerHTML = "<span style='color:green'>张三</span>";
        }

（2）点酸奶，冰淇淋会增加内容
//1.div和点击函数
  <div class="hello" οnclick="clickMev3()" >酸奶</div>
    <div class="hello1">冰淇淋</div>

2. 函数获取到id，赋值之后，遍历循环添加内容
function clickMev3(){
            let hellos = document.getElementsByClassName("hello1") ;
            for(let hello of hellos){
 hello.innerHTML = hello.innerHTML + "超好吃";
            }