J.chong

全选：当点击或勾选全部时，列表包括本身复选框选中；
全不选：当点击不选时，包括不选框、全选框都为未选中；
反选：注意全选框状态，需要each()所有，每个都设置一次；
allchk()检测全选框选中状态还是未选中，先算checkbox个数，each每个框，如果true则临时变量+1，最后，临时变量==checkbox个数，证明为全选，！=证明全选框应为未选中状态；

* attr可能返回disabled 或 disabled = 'disabled'
* prop()只返回标准的true false
* 1/只添加属性名称即生效应该使用prop()
* 2/只存在true/flase应该使用prop()
* 所以操作checkbox 的状态时建议全部使用prop()

<pre>

    //全选
$(&#39;#CheckedAll&#39;).click(function () {
    if (this.checked) {
        $(&#39;[name=items]:checkbox&#39;).prop(&#39;checked&#39;, true)
    } else {
        $(&#39;[name=items]:checkbox&#39;).prop(&#39;checked&#39;, false)
    }
    allchk() //设置全选框状态
})
//全不选
$(&#39;#CheckedNo&#39;).click(function () {
    $(&#39;[name=items]:checkbox,#CheckedAll&#39;).prop(&#39;checked&#39;, false)
    allchk()
})
//反选
$(&#39;#CheckedRev&#39;).click(function () {
    $(&#39;[name=items]:checkbox&#39;).each(function () {
        $(this).prop(&#39;checked&#39;, !$(this).prop(&#39;checked&#39;))
        //this.checked = !this.checked
    })
    allchk()
})
$(&#39;[name=items]:checkbox&#39;).click(function () {
    allchk()
})
$(&#39;#print&#39;).click(function () {
    var arrv = [
    ]
    $(&#39;[name=items]:checkbox:checked&#39;).each(function (i) {
        arrv[i] = $(this).val()
        //arrv.push( $(this).val())
    })
})
//检测及设置全选框是否选中
function allchk() {
    var _chkn = $(&#39;[name=items]:checkbox&#39;).size()
    var _chk = 0
    $(&#39;[name=items]:checkbox&#39;).each(function () {
        if ($(this).prop(&#39;checked&#39;)) {
            _chk++
        }
    })
    if (_chkn == _chk) { //全选
        $(&#39;#CheckedAll&#39;).prop(&#39;checked&#39;, true)
    }
    else {//不全选
        $(&#39;#CheckedAll&#39;).prop(&#39;checked&#39;, false)
    }
See the Pen jbyXro by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

select multiple 事件，$('select:first-child option:selected') 获取被选中，

然后使用appendTo【剪切】添加；

使用dblclick()双击事件，重点：获取当前选项：$('option:selected',this); 

$('') 完整=== $('',document),后面是作用域；
console.log($('select:first-child option:eq(2)').val());获取第2个值
console.log($('select:first-child option:eq(2)').text());获取第2个text值

<select name="" id="" multiple="multiple">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
    <option value="5">选项5</option>
</select>

<select name="" id="" multiple="multiple"></select>
<div class="add">选中添加到左边</div>
<div class="addall">全部添加到右边</div>
<script src="jquery-1.11.1.js"></script>
<script>
    $('.add').click(function () {
        var _options = $('select:first-child option:selected')
        _options.appendTo('select:nth-of-type(2)')
    })
    $('.addall').click(function () {
        var _options = $('select:first-child option')
        _options.appendTo('select:nth-of-type(2)')
    })
    //绑定事件，通过$('option:selected',this) 方法获取被选中选项，
    $('select:first-child').dblclick(function () {
        var _options = $('option:selected', this)
        _options.appendTo('select:nth-of-type(2)')
    })
</script>


1、先添加提示内容； 

2、文本框失去焦点后处理；

3、由于每次失去焦点后都会创建一个新元素，所以创建之前先删除以前的 remove();

4、在提交表单之前，需要对表单整体进行一次验证，使用trigger()触发blur; 

5、即时提醒，表单元素绑定keyup和focus事件; 

6、trigger('blur')不仅会触发元素绑定的blur事件，也会触发默认，所以使用triggerHandler('blur')，不触发默认事件

See the Pen meRvbv by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

100%死记硬背：对于高版本jq.1.7+  checked, selected 这些属性要用 prop()来操作

例如單選radio控制表格單高亮，当前tr加click,$(this).addClass('on').【兄弟去掉】.siblings().removeClass('on').【返回tr $(this)】.end().【找radio】.find(':radio').【加属性】.prop('checked',true)
，使用attr会出错
<style>
    table{border-collapse: collapse}
    td{border:1px solid #cccccc; padding: 5px 20px;}
    .on{ background: #f1f1f1;}
</style>
<table>
    <tbody>
    <tr>
        <td><input type="radio" name="item" id=""/></td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
    </tr>
    <tr>
        <td><input type="radio" name="item" id=""/></td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
    </tr>
    </tbody>
</table>
<script src="jquery-1.11.1.js"></script>
<script>
$('table tr').click(function () {
    $(this).addClass('on')
            .siblings().removeClass('on')
            .end().find(':radio').prop('checked',true)

})
</script>

//当然也可以使用
$('table :radio:checked').parent().parent().addClass('on')
$('table :radio:checked').parents('tr').addClass('om')
$('tbody>tr:has(:checked)').addClass('on')
表格多行高亮：
$('table tr').click(function () {
  if ($('table tr').hasClass('on')) {
    $(this).removeClass('on').find(':checkbox').prop('checked', false)
  } else {
    $(this).addClass('on').find(':checkbox').prop('checked', true)
  }

//當然，更高級點的寫法
$('table tr').click(function () {
  var hasCheck = $(this).hasClass('on')
  $(this) [hasCheck ? 'removeClass' : 'addClass']('on').find(':checkbox').prop('checked', !hasCheck)
})
表格收縮
<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
   $('table tr.parent').click(function () {
        $(this).toggleClass('on')
                .siblings('.child_'+this.id).slideToggle('slow')
    })

mouseenter 與 mouseover

條件：目標點為外層元素，mouseenter在內層裏移到子元素不會觸發，只有從別的元素移到目標點才會觸發；mouseover在內層移到任意子元素都會觸發；
原理：mouseenter 無冒泡機制，mouseover有冒泡機制

<style>
div{ width: 200px;}
.box,.box2{ background: #727272; color: #ffffff;}
.div,.div2{border:1px solid #cccccc;padding:15px;}
</style>
<div class="div">
<div class="box">0</div>
</div>
<div class="div2">
<div class="box2">0</div>
</div>
<script>
var i = 1;
var j = 1;
$('.div').mouseenter(function () {
    $('.box').html(i++)
})
$('.div2').mouseover(function () {
    $('.box2').html(j++)
})
</script>

mouseleave 與 mouseout 類似

hover方法用的是: mouseenter mouseleave方法，so，當需觸發hover方法第2個fn時，使用trigger('mouseleave')；

事件對象：
1）e.type，獲取事件的類型：

$('#a').click(function (e) {
    e.preventDefault()
    console.log(e.type); // click
})

2）e.target 獲取觸發事件的元素；

$('#a').click(function (e) {
    e.preventDefault()
    console.log(e.target); 
//<a href="http://baidu.com" id="a">aaa</a>
})

3）e.relatedTarget
標準DOM發生元素可通過e.target訪問，相關元素通過e.relatedTarget訪問

对于"mouseenter"、"mouseover"等事件而言，relatedTarget属性返回被离开的DOM元素。

对于"mouseout"、"mouseleave"事件而言，relatedTarget属性返回被进入的DOM元素。

对于"focus"事件而言，relatedTarget属性返回失去焦点的DOM元素(如果有的话)。

对于"blur"事件而言，relatedTarget属性返回获得焦点的DOM元素(如果有的话)。

如果当前事件没有涉及到其他元素，则返回null或undefined(视情况而定)。

<script src="jquery-1.11.1.js"></script>
<style>
*{ margin: 0; padding: 0;}
.wrap{padding:10px;border:1px solid #ccc;}
.box,p{padding:20px;border:1px solid #ccc;}
</style>
<div class="wrap" id="wrap">
    wrap，父元素 id=wrap
    <div class="box" id="box">box相臨元素 id=box</div>
    <a href="#">綁定事件點a</a>
    <p id="p">p相臨元素 id=p</p>
</div>
<script>
$('a').bind('mouseout', function (e) {
console.log(e.relatedTarget.id);//離開a後到哪個元素即哪個元素
})
</script>

4）e.which
鼠標左中右及鍵盤鍵值

$('a').mousedown(function (e) {
    console.log(e.which);
})
$('a').keyup(function (e) { //获取键盘的按钮值
    console.log(e.which)
})
$('a').keyup(function (e) {
    console.log(e.metaKey); //按ctrl
})

1、事件綁定移除
bind、unbind、one、on、off、delegate、undelegate
2、常用模擬
trigger(type,[data]);可傳參；

$('.a').bind('myClick', function (elem,n1,n2) {
    alert(n1+n2)
})
$('.a').trigger('myClick',[2,3])

下面方法自動觸發input元素綁定focus事件，也會使焦點本身得到，瀏覽器默認行為，如有多個input元素，則觸發最後一個；

$('input').trigger('focus')

$('input').triggerHandler('focus')
//只觸發focus事件，焦點不會得到，即同時會取消瀏覽器對此事件的默認行為

3、命名空间

$('.box').bind('click',function(){
    console.log('default')
})
$('.box').bind('click.fn1',function(){
    console.log('fn1')
})
$('button').click(function(){
    $('.box').trigger('click!') //加!表示匹配所有不包命名空间的click，即fn1不会被执行；
})

4、动画
1个animate，同步执行,走斜线

$(this).animate({'left','200px','top','200px'})

2个animate，先后执行,走直角

$(this).animate({'left','200px'})
        .animate({'top','200px'})

若最后一切，切换css样式，而不是隐藏元素，则需要回调函数

$('.box').on('click', function () {
    $(this).animate({
        left:'500',height:'200',opacity:1
    },2000)
    .animate({
       top:'200px',width:'200'
    },2000).css('border','5px solid blue') 
    //最后一步css()，但这里动画一开始便会被执行，
    //若想动画结束后再执行，使用回调
})

$('.box').on('click', function () {
    $(this).animate({
        left:'500',height:'200',opacity:1
    },2000)
            .animate({
                top:'200px',width:'200'
            },2000, function () {
                $(this).css('border','5px solid blue')
            })
})

$('#btn').on('click', function () {
   $('.box').slideDown('normal', function () {
       $(this).css('border','5px solid blue')
       console.log($(this));
   })
})

一、停止元素动画

stop(clearQueue)

clearQueue,gotoEnd,true或false,

clearQueue：代表是否要清空未扫行完的动画队列

gotoEnd：代表是否直接将正在执行的动画跳转到末状态

stop()，立即停止当前正在进行，如下面还有动画则继续执行；

鼠标快速移动：

$('#btn').hover(function () {
    $('.box').stop().slideDown()
}, function () {
    $('.box').stop().slideUp()
})

stop(true)，当前元素接下来尚未执行完的动画队列清空；

$('.box').hover(function () {
    $(this).stop()
            .animate({  //只带一个参数只能处理到这里
                height:150
            },200)
            .animate({  //处理这里需要stop(true)
                width:300
            },300)
}, function () {
    $(this).stop()
            .animate({
                height:22
            },200)
            .animate({
                width:60
            },300)
})

gotoEnd用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态况，可使用stop(false,true)

stop(true,true)，停止当前动画并直接到达当前动画末状态，并清空队列。

jq只能设置正在执行动画的最终状态，没提供直接到达【未执行动画】队列的方法,以下无论怎么设置都无法在改变width或height时，将此div末状态变成300 x 150，且opacity:2

$('.box').on('mouseover', function () {
    $('.box').animate({
        width:300
    })       .animate({
                height:180
            })
            .animate({
                opacity:0.2
            })
})

二、判断元素是否处于动画状态

if(!$(elem).is(':animated')){
    //如果当前没有进行动画
}

<div id="box" style="width: 100px; height: 100px; background: #f00; position: absolute;"></div>
<script src="jquery1.11.1.js"></script>
<script>
    $(function() {
        // 开始动画
        $("#box").animate({left: 500}, 5000);
        $(document).on("click", function() {
            // 在选择器中使用
            if($("#box:animated").length) {
                $("body").append("<p>#box 尚在动画</p>");
            }

            // 在 is 中使用
            if(!$("#box").is(":animated")) {
                $("body").append("<p>#box 动画停止</p>");
            }
        });
    });
</script>

animate()方法替代：

//show()
$('.box').animate({
    height:'show',width:'show',opacity:'show'
},400)

//fadeIn(400)
$('.box').animate({
   opacity:'show'
},400)

//slideDown()
$('.box').animate({
   height:'show'
},400)

延迟动画：

$(this).animate({
    left:400
}).delay(1000)
    .animate({
    width:'200px'
})

1）1组元素动画：当在一个animate()应该多个时，动画是同时发生，以链式写法应用动画时，按顺序发生；
2）多组元素：默认情况下，动画同时发生，当以回调应用时，按回调顺序发生
非动画队列也按顺序，需要写在回调里

简单图片切换：

<div class="v-show clearfix">
    <div class="v-caption clearfix">
        <h4>图片</h4>
        <div class="v-caption-tip">
            <span class="on">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div class="v-caption-btn">
            <span class="prev">上一页</span>
            <span class="next">下一页</span>
        </div>
        <em><a href="#">更多</a></em>
    </div>
    <div class="v-content">
        <ul class="ul-pic">
            <li><img src="1.jpg" alt=""/></li>
            <li><img src="2.jpg" alt=""/></li>
            <li><img src="3.jpg" alt=""/></li>
            <li><img src="1.jpg" alt=""/></li>
            <li><img src="2.jpg" alt=""/></li>
            <li><img src="3.jpg" alt=""/></li>
            <li><img src="2.jpg" alt=""/></li>
            <li><img src="3.jpg" alt=""/></li>
        </ul>
    </div>
</div>

1、要点击的项为.next .prev，所以可以此点为基点向上找元素；
2、每次切换的宽度为ul父级的宽度即可；
3、page代表第一板，每板有3个图片，即总板数为li个数/3，向上取整；
4、!_show.is(':animated')限制在非运动时点击才生效；
5、-=，+=表示每次点击都累加或累减；

var _parent = $('.v-caption-btn span').parents('div.v-show');
var _show = _parent.find('.ul-pic');
var _content = _parent.find('div.v-content');
var v_width = _content.width();
var len = _show.find('li').length;
var page = 1;
var i = 3;
var page_count = Math.ceil(len / i);
$('.next').on('click', function () {
  if (!_show.is(':animated')) {
    if (page == page_count) {
      _show.animate({
        left: 0
      }, 'normal');
      page = 1;
    } 
    else {
      _show.animate({
        left: '-=' + v_width  //注意：-=
      }, 'slow');
      page++;
    }
    _parent.find('span').eq((page - 1)).addClass('on').siblings().removeClass()
  }
})
$('.prev').on('click', function () {
  if (!_show.is(':animated')) {
    if (page == 1) {  //第一板切换到最后一板
      _show.animate({
        left: '-=' + v_width * (page_count - 1)
      }, 'slow');
      page = page_count
    } 
    else {
      _show.animate({
        left: '+=' + v_width  //注意：+-
      }, 'slow');
      page--;
    }
    _parent.find('span').eq((page - 1)).addClass('on').siblings().removeClass()
  }
})

css主要设置ul父级relative,ul为absolute;

.v-content{overflow:hidden;position:relative}
.v-show{position:absolute}

*{margin:0;padding:0;font-size:16px}ul{float:left}.ul-pic{position:relative}img{width:150px;vertical-align:top}li{list-style:none;float:left;margin:10px;border:1px solid #ccc;padding:1px}.v-show{width:524px;margin:0 auto;border:1px solid #ccc;}.ul-pic{width:2000px}.v-caption-btn,.v-caption-tip,h4{float:left;margin-right:20px}.v-caption em{float:right}.on{color:red}.clearfix:after{content:'';width:0;height:0;display:block;clear:both;visibility:hidden}

J.chong

零JQ筆記 | 備忘 5-10

零JQ筆記 | 備忘1-4

最新文章

最近回复

分类

归档

其它