Jquery真的不难

回到占占推荐博客索引

JQ不错,被JS大师们封装的不错,这对于开发者来说是件好事,会让你少写很多代码,呵呵,你可能已经忘记了 document.getElementById,document.getElementByTagName等等恩,写这个系列的目的是帮助“我喜欢 的”年轻人们一起成长,呵呵!

对于javascript类库目前来说有几个比较流行,如jquery,yahooYUI,prototype等等,但今天的主角是jquery,目前比较新的是1.8了,发展的很快呀,呵呵,解决了之前版本的很多BUG,这一点告诉我们,对于jq我们还是要用新版本的。

好了,来看一下我们JQ系列的目录吧!

 

第一回  编程基础知识

第二回  选择器的使用及性能

第三回  如何改变HTML标签的样式

第四回  JQ也是事件驱动的(匿名函数的使用)

第五回  JQ中的遍历(遍历中的性能知识点)

第六回  JQ中的异步调用方式

第六回  JQ中的异步调用方式~续

第七回  JS也要面向对象

第八回  JS的闭包问题

书后语:感谢兄弟让我静下心来写这个系列,其时早就想总结一下了,最后祝有志者早日事尽成!

今天一个小需求,把它改成面向对象的了,感觉不错,呵呵!

复制代码
  $(function () {

            //根据对象得到它所要用的CSS名称
            var getClass = function (obj) {
                var className;

                switch ($(obj).closest("ul").attr("id")) {
                    case "a1":
                        className = "a1";
                        break;
                    case "a2":
                        className = "a2";
                        break;
                    default:
                        console.log("error type");
                        break;
                }
                return className;
            };

            //滑动变色操作
            $("#a1,#a2").find("li").hover(function () {
                $(this).addClass(getClass(this));

            }, function () {
                $(this).removeClass(getClass(this));
            });
        });
复制代码

HTML代码:

复制代码
 <ul id="a1">
        <li>one</li>
        <li>two</li>
    </ul>
    <ul id="a2">
        <li>1</li>
        <li>2</li>
 </ul>
复制代码

 回到占占推荐博客索引

posted @ 2014-08-25 17:12  marvinYu  阅读(352)  评论(0编辑  收藏  举报