一、复习一下
- jQuery就是一堆js函数，就是普通的js。
- （参考书）（官网api）简单过一下
- 入口函数：html文档加载完成再执行
比window.onload 快 - 属性选择器 li[id] 效率低
- id选择器、类、标签、层级是重点
document.get ...效率最高 - ：contains("文本") 包含文本的元素
- [attribute]、[attribute = value] 包含某属性和属性是某个值的
js用id选择器，css用class
- 获取内容：
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(); 仿腾讯微博
思路：
- 初始化表情的div，遍历数据里面的所有图片，把图片添加到div中；
- 再把div添加到body里，鼠标过去显示，移开隐藏；
- 将这个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+"]");
})
}
