初学 jquery

 

 由于工作需要，要求实现在table中的某一列有树的结构和效果，不得已使用jquery，第一次用，寸步难行

一段程序憋三天，终于凑合着实现了

 

 功能要求如下：

点击+号，下面的子节点展开，只展开当前节点的下一级节点，二级及以下节点仍隐藏

点击-号，下面的所有子节点隐藏

点击 1 2 3 4 会相应的展开到第一级节点，展开到第三级，展开到第四级。

我的思路是：使用最原始的拼接html ，获取数据源以后，给tr赋值自定义属性，例如当前行数据的code 、parentcode，是否是叶子节点的标识，当前数据行的level 等等 我能用到的属性 ，至于加减号以及文字的缩进我是用jquery实现的。第二个td里面加入两个span，第一个控制缩进字符，第二个控制+-号，因为页面的要求是点击+-时才折叠、展开，而不是点击td展开折叠。

 贴一段程序，帮助我理解jquery

         function setIndentText() {
            $("#tableData tr:gt(0)").each(function() {//橘色部分是查找id为tableData的DataTable里面除第一行以外的行
                var ifEndNode = $(this).attr("IfEndNode"); //获取行的属性值。是否是根节点 False True
                var costLevel = $(this).attr("CostLevel"); //当然节点的级别

                var tdSubject = $(this).find("td:eq(1)");//在这一行里面定位行的第一个td
                var indentSpace = "  ";
                var tdText = tdSubject.text();//获取这个td的text，里面即使有span nobr 获取的也是文字，不是html
                for (var i = 0; i < costLevel; i++) {
                    indentSpace += indentSpace;
                }
                if (ifEndNode == "False") {
                    tdSubject.children().html("<span>" + indentSpace + "</span><span class=\"plus\" style=\"CURSOR: hand\" onclick=\"tdClick(this);\">[-]</span>" + tdText);
                }
            })
        }

<td style="cursor:hand">
<nobr onmouseover="this.title = this.innerText.replace(/ /g,'').replace(/　/g,'').replace('[+]','').replace('[-]','')" >
<span></span>
<span style="CURSOR: hand" onclick="appGridTree.doExp(this);"></span>
项目成本</nobr>
</td> 

如果是这样一个td，获取到td的对象，

tdSubject.children()就是 <nobr></nobr>

 tdSubject.children().html() 就是两个span的html

  tdSubject.text();就是项目成本这几个字

tdSubject.parent()  是获取tr

1、 js给tr 添加一些属性,自定义属性不知道行不行？？

jquery 的：$("#test").attr("test","aaa") // 设置   

$("#test").removeAttr("test") // 删除 

js 的：var testEle = document.getElementById("test")   

testEle.setAttribute("test","aaa"); // 设置   

testEle.attributes["test"].nodeValue; // 获得 

2.jquery 的选择器 $("#btnConfirm")

事件绑定函数：bind();

隐藏显示函数：show() 、hide()；

修改元素内部html ：html("hello world");

 

3  遍历   id 为tableData 的table里面所有td

$("#tableData").find("tr").each(function() {
                $(this).find("td").each(function() {
                    alert($(this).text());
                });
            });

4、 undefined 类型

var name;   

alert(typeof name);//输出为undefined   

alert(typeof myname);//输出为undefined   

alert(name=="undefined");//输出为false   

alert(name==undefined);//输出为true  

undefined是一种类型，不是字符串

javascript 中有五种原始值：Undefined,Null,Boolean,Number,String，

5、元素显示、隐藏

 $(this).show();     $(this).hide();   $(this).toggle();自动切换隐藏显示

显示：toggle(true);

隐藏：toggle(false);

 $(this).slideDown("slow")；缓慢滑动的效果显示

$(this).slideUp("slow")缓慢滑动的效果隐藏

 $(this).slideToggle();缓慢滑动的显示或隐藏

 

6、增加css

如果是css，$(this).css("background", "#f9edf1");
如果是class，  $(this).addClass("classname");

7 append 与appendto用法的区别

$("#button1").click(function(){
$("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>").appendTo("#div1");
});

$("#button1").click(function(){
$("#div1").append("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>");
});

$(html字符串).appendTo(某个控件)；$(某个控件).append(html字符串);

 

8、调试同事的一个bug，发现Append这个方法的真正用法

append() 方法在被选元素的结尾（仍然在内部）插入指定内容

关键就在这个“仍然在内部”，比如tr.append ，就是在</tr>这个结束标记里面附加字符串，不是在外面

9、2011-3-25

今天使用了after函数，跟append（）相对应的 ，在某个元素后面附加相应的东东；$("#tblId").find("tr[id]:last") 查找table中凡是有id属性的最后一个tr元素

 

10.$("#tableId").find(tr[id]:last)  遍历table下面的tr 不仅遍历table中tr，也遍历table里面嵌套的table的tr，

也就是说遍历table里面所有的tr标签，不分层级关系

 

11、

Query.each(obj,callback) 这个函数用了很多次了，没有真正理解其中的意思，现在了解了
object (Object) : 需要例遍的对象或数组。      callback (Function) : (可选) 每个成员/元素执行的回调函数。
    $("select[name^='txtCarColorID']").each(function() {
                var ddl = $(this);
                $.each(colorList, function(i, n) {
                    if (ddl.attr("class") == n[0]) {
                        ddl.append("<option value='" + n[0] + "' selected='true'>" + n[1] + "</option>");
                    }
                    else {
                        ddl.append("<option value='" + n[0] + "'>" + n[1] + "</option>");
                    }

                });
            });
colorList ：我在后台拼接的数组的数组字符串，类似：var colorList=[[1,'sss'],[2,'ere'],[3,'uio']]
现在主要考虑这个回调函数的参数问题，参数i n是遍历的元素的序号索引 和遍历的每一条值，因为是数组的数组，所以n[0] n[1] 对应的是每一个小数组里面的
第一个元素和第二个元素

12、调用ajax
在js里面调用了一个方法，给select的赋值，用的是ajax，后面取这个值的时候，总是赋值前的状态，考虑到ajax异步加载可能引起的问题，加了句代码如下：
$.ajaxSettings.async =  false 搞定了
13、js对象和jquery对象互相转换
用惯了js对象也常用jquery对象 ，但之间的转换很少用 ，今天用到了
var jsOb;var jquOb;
$(jsOb)即转换成了jquery对象； jquOb.get(0)即转成了js对象 ，真的很方便