jQuery小结

    什么是jQuery？

    jQuery 是一个 JavaScript 函数库，极大地简化了 JavaScript 编程。

  

    jQuery可以做什么？

    通过jQuery，可以对前端的dom元素做一系列的操作。

    1.与dom元素的交互：

    选取、遍历、修改、给dom元素注册事件。

   

   

    2.与css样式控制的交互：

    通过css样式控制，达到对元素显示样式的控制。

    3.与Ajax的交互：

    jQuery 库拥有完整的 Ajax 兼容套件。

    4.归结为一点：就是通过jQuery可以动态、灵活的对前端的dom元素操作，进一步丰富了用户的体验。

    通过jQuery可以实现什么样的效果？

    如果单纯的靠css来控制页面布局样式，会比较死板，通过jQuery可以动态的添加和控制dom元素的样式。

   比如：用户验证、可编辑表格、横纵向菜单、标签页、级联下拉框、窗口效果等。

    怎么做？

    1.控制css样式语法

        $(this).addClass("tabin");
        $("#tabsecond li.tabin").removeClass("tabin");
        var inputObj = $("<input type='text'>").css("border-width", "1")
                        .css("fontsize", "16px")
                        .css("background-color", tdObj.css("background-color"))
                        .width(tdObj.width())
                        .val(text).appendTo(tdObj);

/*找到主菜单项对应的子菜单项*/
            if (ulNode.css("display") == "none") {
                ulNode.css("display", "block");
            } else {
                ulNode.css("display", "none");
            }

    2.dom元素的相关直接操作   

   //获取文本框对象，返回的是jQuery对象，不是文本框的内容
    var userNameNode = $("userName");
    //将数据发送到服务器端，并返回数据
    var userName = userNameNode.val();

   3.注册事件

//找到文本框，注册事件，添加样式显示
$("userName").keyup(function () {
    //获取文本框的内容
    var value = userNameNode.val();
    //如果文本框内容为空，显示红色样式
    if (value == "") {
        //给文本框添加样式
        userNameNode.addClass("userName");
    }
    //如果不为空，那么就去掉背景样式
    else {
        userNameNode.removeClass("userName");

    }   

}); 

    4.自定义事件   

/*自定义修改图标样式的函数*/
function changeMainIcon(mainNode) {
    if (mainNode) {
        if (mainNode.css("background-image").indexOf("collapsed.gif") > 0) {
            mainNode.css("background-image", "url('images/expanded.gif')");
        } else {
            mainNode.css("background-image", "url('images/collapsed.gif')");
        }
    }
}

    jQuery学什么？怎么学？

    上面仅列出了一些最基本的常用的语法，其实还有很多，具体的每种方法的发现和使用需要参考jQuery的API使用手册。

    jQuery的学习除了需要有一些敲代码的功底，对于初学者来说最主要的还是学习如何使用api手册，学会在api手册中找到需要的目标函数，并套用得上。

    和其他知识之间的联系？

    我觉得jQuery的语法与常用的C#对比很大的一个差别就是在赋值方式上。jQuery因为已经封装了一些函数，所以，很多时候给dom元素赋值的时候，直接调用函数，将值作为参数即可。

   

  //将内容写入到td中
  tdObj.html(inputText);

 

    另外，在jQuery中，很多函数体都需要手动编写，很是考验敲代码的功底和思路，另外调试起来也比较麻烦；区别于C#、java这些语言的还有在一个事件中可以触发很多其他的事件，这里的事件可以看成是函数，这样就统一起来了。另外，在jQuery中有事件链机制，就是子元素的某个事件执行完后，会自动的触发父级元素的这一事件，当然这个事件链是可以人为的终止的。

        //获取当前td
        var tdObj = $(this);
        //中断事件链，当td单击后，如果有内容，不处理
        if (tdObj.children("input").length > 0) {
            return false;
        }