zoukankan      html  css  js  c++  java
  • 链式编程,隐式迭代

    链式编程原理: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)//当前对象 
    )

  • 相关阅读:
    前端下拉框
    使用Redis的有序集合实现排行榜功能
    python--list,str,dict,json,tuple互换用法实例
    微信支付
    C++创建及访问动态对象
    C++动态持久内存分配(new)
    C++函数与指针
    C++数组与指针
    C++指针基础
    MySQL再安装
  • 原文地址:https://www.cnblogs.com/wdz1/p/8076157.html
Copyright © 2011-2022 走看看