jQuery 第四部分 2018-03-23

一、复习一下

1. jQuery就是一堆js函数，就是普通的js。
2. （参考书）（官网api）简单过一下
3. 入口函数：html文档加载完成再执行
   比window.onload 快
4. 属性选择器 li[id] 效率低

• id选择器、类、标签、层级是重点
  document.get ...效率最高
• ：contains("文本") 包含文本的元素
• [attribute]、[attribute = value] 包含某属性和属性是某个值的
  js用id选择器，css用class

5. 获取内容：
   html() text() val()

二、手动创建代码段

看jq第四天04视频

三、json创建表格

    //假设是从后端获取的
        var data = [{
            name: "111",
            url: "http://www.111.cn",
            type: "a"
        },{
            name: "222",
            url: "http://www.222.com",
            type: "b"
        },{
            name: "333",
            url: "http://web.333.cn",
            type: "c"
        }];
        $(function(){
            var strHtml = "";
            //把上面的数据动态创建到tbody中去
            for( i = 0; i < data.length; i++){
                var temp = data[i];
                strHtml += "<tr>";
                strHtml +=    "<td>" +temp.name+ "</td>";
                strHtml +=    "<td>" +temp.url+ "</td>";
                strHtml +=    "<td>" +temp.type+ "</td>";
                strHtml += "</tr>";
            }
            $("#J_TbData").html(strHtml);
        });
    ```

    // 动态创建dom的方式
        // $("#J_TbData").empty();
        // 清空所有子节点
        // $("#J_TbData").remove();
        // 自杀
    $(function(){
        $("#J_TbData").empty();
        for(var i = 0; i < data.length; i++){
            var $temp = $("<tr></tr>");
            $temp.append("<td>"+ data[i].name +"</td>");
            $temp.append("<td>"+ data[i].url +"</td>");
            $temp.append("<td>"+ data[i].type +"</td>");
            $temp.appendTo("#J_TbData");
        }
    })
```

四、样式操作复习

样式操作尽量操作样式类，少直接操作css属性
最好用on！

• 案例：select城市选择

      $(function(){
          //把城市从左边移动到右边
          $("#btn-sel-all").on("click",function(){
              $("#city option").appendTo("#target");
          });
          $("#btn-sel-none").on("click",function(){
              $("#target option").appendTo("#city");
          });
          $("#btn-right").on("click",function(){
              $("#city option:selected").appendTo("#target");
          });
          $("#btn-left").on("click",function(){
              $("#target option:selected").appendTo("#city");
          })
      })
  

• 省市选择
  data中存放省市数据；

            //先初始化省，将省添加到第一个select
             $.each(data,function(i,e){
              var $pro = $("<option>" + i +"</option>");
              $("#province").append($pro);
             });
            //当省change，加载对应市的值，再添加到第二个select中
              $("#province").on("change",function(){
            //拿到当前选择的省的名字
                 var proValue = $("#province option:selected").text();
                 var cities = data[proValue];
            //每次更换都要先清空城市
                 $("#city").empty();
                 $.each(cities,function(ii,ee){
                  var $city = $("<option>" + ee +"</option>");
                  $("#city").append($city);
                 })
             });
            //触发一下change函数，使右边select不为空
             $("#province").change();
  

• 仿腾讯微博
  思路：

1. 初始化表情的div，遍历数据里面的所有图片，把图片添加到div中；
2. 再把div添加到body里，鼠标过去显示，移开隐藏；
3. 将这个div绑定一个click事件，对img的每次点击，文本框内容改变成alt里面的文本。（先获取文本~~，并且要追加文本）

function initFaces(){
   var $faceDiv = $("<div class='faceDiv'></div>");
   for(var key in userFaces){
       var $img = $("<img src='faces/"+key+"' alt='"+userFaces[key]+"'>");
       $faceDiv.append($img);
   }
   $(".insertFace").append($faceDiv).hover(function(){
       $faceDiv.show();
   },function(){
       $faceDiv.hide();
   });
    $faceDiv.hide();
    $faceDiv.on("click","img",function(){
       var str = $(this).attr("alt");
       $("#msgTxt").text($("#msgTxt").text()+"["+str+"]");
    })
}