jQuery|jQuery 第四部分 2018-03-23 jQuery第四部分2018-03-23

一、复习一下

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

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

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

二、手动创建代码段 【jQuery|jQuery 第四部分 2018-03-23】看jq第四天04视频
三、json创建表格

//假设是从后端获取的 var data = https://www.it610.com/article/[{ 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 += ""; strHtml +="" +temp.name+ ""; strHtml +="" +temp.url+ ""; strHtml +="" +temp.type+ ""; strHtml += ""; } $("#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 = $(""); $temp.append(""+ data[i].name +""); $temp.append(""+ data[i].url +""); $temp.append(""+ data[i].type +""); $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 = $(""); $("#province").append($pro); }); //当省change，加载对应市的值，再添加到第二个select中 $("#province").on("change",function(){ //拿到当前选择的省的名字 var proValue = https://www.it610.com/article/$("#province option:selected").text(); var cities = data[proValue]; //每次更换都要先清空城市 $("#city").empty(); $.each(cities,function(ii,ee){ var $city = $(""); $("#city").append($city); }) }); //触发一下change函数，使右边select不为空 $("#province").change();
仿腾讯微博
思路：

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

function initFaces(){ var $faceDiv = $(""); for(var key in userFaces){ var $img = $(""); $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+"]"); }) }