diff --git "a/36\351\273\204\345\257\214\350\264\265/12-01-JQuery\346\226\271\346\263\225\344\275\234\344\270\232/12-01-JQuery\346\226\271\346\263\225\344\275\234\344\270\232.html" "b/36\351\273\204\345\257\214\350\264\265/12-01-JQuery\346\226\271\346\263\225\344\275\234\344\270\232/12-01-JQuery\346\226\271\346\263\225\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..f34a19569302caec2aeef2f204fb3c43c630b836 --- /dev/null +++ "b/36\351\273\204\345\257\214\350\264\265/12-01-JQuery\346\226\271\346\263\225\344\275\234\344\270\232/12-01-JQuery\346\226\271\346\263\225\344\275\234\344\270\232.html" @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git "a/36\351\273\204\345\257\214\350\264\265/12-01-JQuery\346\226\271\346\263\225\344\275\234\344\270\232/12-01-jquery\346\226\271\346\263\225\347\254\224\350\256\260.md" "b/36\351\273\204\345\257\214\350\264\265/12-01-JQuery\346\226\271\346\263\225\344\275\234\344\270\232/12-01-jquery\346\226\271\346\263\225\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..573a9bbbec03a8ec1ac2a05f201cb28459816828 --- /dev/null +++ "b/36\351\273\204\345\257\214\350\264\265/12-01-JQuery\346\226\271\346\263\225\344\275\234\344\270\232/12-01-jquery\346\226\271\346\263\225\347\254\224\350\256\260.md" @@ -0,0 +1,123 @@ +jquery方法笔记 + +1.eq():跟据下标找元素,从0开始 + +``` +$('button').eq(2).click(()=>alert('按钮3')); +``` + +2.each(index,element):表示遍历jQuery对象集 中的所有元素对象 + +``` +$('button').each( + function (index) { + if(index==2){ + $(this).click(()=>{alert('按钮')}); + } + + } + ) +``` + +3.detach():保留事件 + +``` +var $btn = $('button').eq(2).detach(); + $('button').eq(1).click(function () { + $(this).after($btn); + }) +``` + +4.clone(bool):返回一个复制元素,默认是false:只克隆元素。不克隆事件,参数为bool=true:表示将事件一起复制, + +``` +$('button').eq(4).click( + function () { + var $btn3 = $('button').eq(2).clone(true); + $(this).after($btn3); + } + ) +``` + +5.replaceWith():替换jQuery对象, + +``` +$('button').eq(3).replaceWith($('')); +``` + +6.hasClass(属性值):查找jQuery对象中的class有没有该属性值 + +``` +console.log($('div').eq(0).hasClass('blue')); +``` + +7.全选 + +``` +$('#selectAll').click( + function () { + //点击全部选中 + if($(this).is(':checked')){ + $('[class=fruit]').prop('checked',true); + }else{ + $('[class=fruit]').prop('checked',false); + } + + } + ) +``` + +8.反选 + +``` +$('#selectAll1').click(function () { + if($(this).is(':checked')){ + console.log('111'); + $('[class="fruit"]').each( + function () { + if($(this).is(':checked')){ + $(this).prop('checked',false); + }else{ + $(this).prop('checked',true); + } + } + ) + } + }) +``` + +9.反向过滤not():去除符合条件的 + +``` +$('button').not('[class="btn"]').click( + function () { + alert('剩下的按钮点击') + } + ) +``` + +10.filter():筛选符合条件的 + +``` +$('button').filter('[class="btn"]').click( + function () { + alert('剩下的按钮点击') + } + ) +``` + +11.has( ):查找子代中是否有该元素,如果有,为父元素绑定事件 + +``` +$('.btn1').click( + function (e) { + e.stopPropagation(); + } + ) + $('div').eq(0).has('[class="btn2"]').click( + function () { + alert('点击') + } + ); +``` +