js小白经验总结

div类标签赋值用html，input赋值用val

1、div实例

<h1>div1的文字修改成hello 颜色red</h1>

<div id="div1"></div>

<script>
   $(function(){
       // 添加内容并改变颜色
       $("#div1").html('hello');
       $("#div1").css('color','red');
   })
</script>

2、input实例

01、<h1>给Input赋值 hello world  不准加class 以及 Id</h1>

<input type="text" name="test">

<script>
    // input赋值
 $(function(){
     $('input[name="test"]').val('hello world');
 })
</script>

02、<h1>把id为leng的input的值清空</h1>

<input type="text" id="leng" value="哈哈哈哈哈哈哈哈哈">

<script>
    // input赋值
 $(function(){
     $("#leng").val('');
 })
</script>

3、jquery中html（）和append（）的区别

简单来说就是append（）方法是在元素列表添加某个元素，但是html（）是替换元素中的数据。

数组显示在div里用append()

<div id="main">

</div>

<script>
    $(function(){
        var arr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99];
        // $("#main").html('<div style="color: gray">'+arr[0]+'</div>');
        // $("#main").html('<div style="color: gray">'+arr[1]+'</div>');
        // $("#main").html('<div style="color: gray">'+arr[2]+'</div>');
        // $("#main").html('<div style="color: gray">'+arr[3]+'</div>');
        // $("#main").html('<div style="color: gray">'+arr[4]+'</div>');
        // $("#main").html('<div style="color: gray">'+arr[5]+'</div>');
        // $("#main").html('<div style="color: gray">'+arr[6]+'</div>');
        // $("#main").html('<div style="color: gray">'+arr[7]+'</div>');
        // $("#main").html('<div style="color: gray">'+arr[8]+'</div>');
        // $("#main").html('<div style="color: gray">'+arr[9]+'</div>');
        
        for(var i=0; i<arr.length; i++){
    
            $("#main").html('<div style="color: gray">'+arr[i]+'</div>');
            
            
        }
    })
    

</script>