jQuery(easyUI) 学习杂记
01.获取第一代子元素的语法是parent>child选择器
例：获取所有div元素下第一代子元素span元素的语法是
$("div>span")
02.id选择器用#
03.class选择器用.
04.星号(*)选择器，获取页面的所有元素。“全部”！！
05.如要选取多个指定的元素，则需要用 "," 分割。
$("sele1,sele2,seleN")
06.:first选择器获取第一个元素
例：获取li标签中第一个元素
$("li:fiirst")
07.:eq(index)选择器，获取指定的index元素，下标从0开始。
$("li:eq(3)").css("background-color","red") //把第4个li元素的背景换成红色
08.:contains(string)选择器，选取含有string字符串的所有元素
09.:has(selector)选择器，选择器中包含指定元素名称的全部元素
例：改变li标签下p标签的背景
$("li:has(p)").css("background-color", "blue");
10.:hidden显示隐藏的元素
var $strHTML = $("input:hidden").val(); //显示隐藏的input标签
$("div").html($strHTML);
11.:visible获取所有display不为none的元素
12.:input功能是返回全部的表单元素
13.bind()方法 与 unbind()
$(selector).bind(event,[data] function)
$(selector).unbind(event,fun)
14.one()方法 不同于13中的bind()与unbind()方法， 此只能触发一次。
15.Ajax
get:一般用于信息获取。使用url传递参数。对所发送的信息数量限制在2000字符内。
post:一般用于向服务器修改数据。对所发送的信息数量无限制。
Http请求状态码：
1xx:信息类，表示收到Web浏览器请求，正在进一步处理中
2xx:成功，表示用户请求被正确就收，理解和处理
3xx:重定向，表示请求没有成功，客户必须采取进一步处理
4xx:客户端错误，表示客户端提交的请求有错误
5xx:服务器错误，表示服务器不能完成对请求的处理
found:意味着请求中所引用的文档不存在
16.UI
(1)拖曳插件—draggable
$(selector). draggable({options});
options属性。如"containment"属性指定拖曳区域，"axis"属性设置拖曳时的坐标方向。
(2)放置插件—droppable(购物车？)
$(selector).droppable({options})
drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。
如：$(function () {
$(".drag").draggable();
$(".cart").droppable({
drop: function () {
?
?
?
}
})
});
(3)拖曳排序插件—sortable
$(selector).sortable({options});
(4)面板折叠插件—accordion
$(selector).accordion({options});
(5)选项卡插件—tabs
$(selector).tabs({options});
$(function () {
$("#tabs").tabs ({
//设置各选项卡在切换时的动画效果
fx: { opacity: "toggle", height: "toggle" },
event: "mousemove" //通过移动鼠标事件切换选项卡
})
});
(6)对话框插件—dialog
$(selector).dialog({options});
(7)菜单工具插件—menu
$(selector).menu({options});
--------------------------------
---2015年7月3日18:10:06
17. jQuery Select
1 $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3 var checkValue=$("#select_id").val(); //获取Select选择的Value 4 var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5 var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 6 $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 7 $("#select_id ").val(4); //设置Select的Value值为4的项选中 8 $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为 9 $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 10 $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 11 $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 12 $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 13 $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 14 $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
18. 属性选择器
1 $("[href]") 选取所有带有 href 属性的元素。 2 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 3 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 4 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
19.EasyUI datagrid
1 第一步：添加样式和js脚本在前台添加展示数据表格的table元素 2 例如： 3 <div> 4 <table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit"> 5 </table> 6 </div> 7 注：表格的属性可以在table中设置（Unobtrusive），也可以直接使用js脚本进行控制。建议使用js脚本控制 8 9 10 属性的定义： 11 请参见Jquery easyui API 12 13 第二步：在doucment.ready中初始化表格的属性以及数据获取的方式。 14 例如： 15 $('#tt').datagrid({ 16 url: '/UserInfo/GetAllUserInfos', 17 title: '演示表格使用', 18 width: 700, 19 height: 400, 20 fitColumns: true, 21 idField: 'ID', 22 loadMsg: '正在加载用户的信息...', 23 pagination: true, 24 singleSelect: false, 25 pageSize:10, 26 pageNumber:1, 27 pageList: [10, 20, 30], 28 queryParams: {}, 29 columns: [[ 30 { field: 'ck', checkbox: true, align: 'left', width: 50 }, 31 { field: 'ID', title: '主键', width: 80 }, 32 { field: 'UserName', title: '用户名', width: 120 }, 33 { field: 'SubTime', title: '提交时间', width: 80, align: 'right', 34 formatter:function(value,row,index){ 35 return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s.S"); 36 } 37 }， 38 {field:'showprice',title:'商品价格',width:80,align:'right', 39 styler:function(value,row,index){ 40 if (value < 20){ 41 return 'background-color:#ffee00;color:red;'; 42 } 43 }, 44 formatter:function(value,row,index){ 45 return "<a href='#' onclick='editGoodsPrice("+row.goodsid+");return false;'>"+value+"</a>"; 46 } 47 } 48 ]], 49 toolbar: [{ 50 id: 'btnDownShelf', 51 text: '上架', 52 iconCls: 'icon-add', 53 handler: function () { 54 var rows = $('#goodGrid').datagrid('getSelections'); 55 if (!rows || rows.length == 0) { 56 //alert("请选择要修改的商品！"); 57 $.messager.alert("选择商品提醒", "请选择要修改的商品!", "error"); 58 return; 59 } 60 $.messager.confirm("上架提醒", "您是否要真的要将此商品上架？", function (r) { 61 if (r) { 62 updateGoodsNewHot(rows, "onshelf"); 63 } 64 }); 65 } 66 }], 67 onHeaderContextMenu: function (e, field) { 68 69 } 70 }); 71 72 73 第三步：后台设置加载的数据： 74 75 注意：表格Post或者get回来的请求中 76 page：3 代表page为key，然后选择的当前页码为3 77 rows：10 代表一页的大小为10 78 后台返回的数据的格式为：{total：''，rows：[{},{}]} 79 只要包含了总数tatol字段，rows是具体的行数 80 例如： 81 Asp.Net MVC 例子： 82 public JsonResult GetAllUserInfos() 83 { 84 int pageSize = 5; 85 int pageIndex = 1; 86 int.TryParse(this.Request["page"], out pageIndex); 87 int.TryParse(this.Request["rows"], out pageSize); 88 89 pageSize = pageSize <= 0 ? 5 : pageSize; 90 pageIndex = pageIndex < 1 ? 1 : pageIndex; 91 92 var temp = db.UserInfo 93 .OrderBy(u=>u.Sort) 94 .Skip<UserInfo>((pageIndex-1)*pageSize) 95 .Take<UserInfo>(pageSize) 96 .ToList<UserInfo>(); 97 Hashtable ht = new Hashtable(); 98 ht["total"] = db.UserInfo.Count(); 99 ht["rows"] = temp; 100 return Json(ht); 101 } 102 103 Asp.Net WebForm 例子： 104 public void ProcessRequest(HttpContext context) 105 { 106 context.Response.ContentType = "text/plain"; 107 var strWebName = context.Request["WebName"] ?? string.Empty; 108 var GoodsNo = context.Request["GoodsNo"] ?? string.Empty; 109 int categoryId = 0; 110 111 int pageIndex = 1; 112 int pageSize = 10; 113 114 int.TryParse(context.Request["rows"], out pageSize); 115 int.TryParse(context.Request["page"], out pageIndex); 116 117 decimal priceLeft = 0; 118 decimal priceRight = 1000000; 119 int goodsStatus = 0; 120 decimal.TryParse(context.Request["PriceLeft"], out priceLeft); 121 decimal.TryParse(context.Request["PriceRight"], out priceRight); 122 int.TryParse(context.Request["CategoryId"], out categoryId); 123 int.TryParse(context.Request["GoodsStatus"], out goodsStatus); 124 var goodsQueryParamter = new GoodsQueryParamter(); 125 126 127 goodsQueryParamter.GoodsStatus = (Model.GoodsModel.GoodsStatusEnum)goodsStatus; 128 129 var ds = goodsService.GetGoodsList(goodsQueryParamter); 130 string json = string.Empty; 131 132 if (ds != null && ds.Tables.Count > 0) 133 { 134 System.Text.StringBuilder rowJson = new System.Text.StringBuilder(); 135 int colLen = ds.Tables[0].Columns.Count; 136 DataColumnCollection col = ds.Tables[0].Columns; 137 foreach (DataRow row in ds.Tables[0].Rows) 138 { 139 System.Text.StringBuilder colJson = new System.Text.StringBuilder(); 140 rowJson.Append("{"); 141 for (int i = 0; i < colLen; i++) 142 { 143 colJson.Append("\"" + col[i].ColumnName + "\":\"" + row[i].ToString() + "\","); 144 } 145 rowJson.Append(colJson.ToString().TrimEnd(',')); 146 rowJson.Append("},"); 147 } 148 json = "{\"total\":" + ds.Tables[0].Rows[0]["sumGoods"] + ",\"rows\":[" + rowJson.ToString().TrimEnd(',') + "]}"; 149 } 150 context.Response.Write(json); 151 152 }