• 链式编程,隐式迭代


    链式编程原理:return this
    但有时候获取操作的时候,会返回获取到相应的值,无法返回this
    比如 链式的多了,就不知道返回谁,如果像返回之前this 就用 end()
     $(".comment li").on("mouseente",function(){
                    $(this).text(wjx_sel).prevAll().text().nextAll().text()
                })

    end() 结束当前链最近的一次过滤操作,并且返回匹配之前的状态 this

    隐式迭代原来
    隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。
    如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。
     
    案例淘宝评论五角星
     $(function(){
                var wjx_none = ''; // 空心五角星
                var wjx_sel = ''; // 实心五角星
                //需求1:鼠标移上当前五角星和他之前的额五角星都变成实心,后面的是空心
                //需求2:鼠标点击当前五角星和他之前的额五角星都变成实心,后面的是空心
                //鼠标移上事件
                $(".comment li").on("mouseenter",function(){
                    $(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none)
                });
                //鼠标离开
                $(".comment li").on("mouseleave",function(){
                    //bug:如果没有点击过li,那么会出现无法清除的现象,处理办法就是先判断,看看是否有current类
                    if($("li.current").length >0){
                    //当鼠标移开的时候,谁有current类名,那么当前和之前所有的li前部是实心五角星,后面的所有li都是空心
                        $("li.current").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none)
                    }else{
                        $(".comment li").text(wjx_none)
                    }
                });
                //鼠标点击
                
                $(".comment li").on("click",function(){
                    //点击哪个li给他加一个类名。清空其他所有的li的类名
                    $(this).attr("class","current").siblings().removeClass()
                });
            })
        </script>
    each 方法
    遍历jq对象集合,为每个元素执行一个函数
    $(" 获取元素").each( fucntion( 参数1(index 当前元素索引值) ,参数2(当前元素element)){ 执行函数})
    tagName:获得元素的标签名:
    $("ul li").each(function(index,element){
        console.log(index +"^^^^^"+ element.tagName)//当前对象 
    )

  • 相关阅读:
    Jquery Plugin模版
    jquery之extend
    java反射技术实例
    java基础汇总
    Java学习路线
    java的一个爬虫
    Java深度理解——Java字节代码的操纵
    java编程思想-基础
    hdu 5201 The Monkey King【容斥原理+组合数学】
    容斥原理
  • 原文地址:https://www.cnblogs.com/wdz1/p/8076157.html
Copyright © 2020-2023  润新知