Jquery

选择器

基本选择器
    id:$('#id')  class:$('.class')  标签选择器: $('标签名称')

组合选择器
    后代选择器:$('.outer p')  子代选择器:$('.outer>p')  多元素选择器:$('.outer,#d1')

属性选择器
    $("[属性名='值']")

表单选择器
    $("[type='text']") == $(':text')

筛选器:
    $('ul li').eq()  $('ul li').first()  $('ul li').last()  $("").hasclass('c1')

    导航查找方法:
        向下查找兄弟标签:  $().next()  $().nextAll()  $().nextUntil('.c1')    

        向上查找兄弟标签:  $().prev()  $().prevAll()  $().prevUntil('.c1') 

        查找所有兄弟标签:  $().sibilings()  

        查找子标签:  
            子代查找: $().children('')
            后代查找: $().find('')

        查找父级标签: $().parent()  $().parentUntil('')


属性操作
    文本操作: $().html()   $().text()  $().val()

    属性操作:  
        DOM:    ele.属性名=值    ele.setAttribute('属性名','值')
        jquery: $().attr('属性名')  $().attr('属性名','值')

    class属性操作:  $().addClass('c1')   $().removeClass('c1')    

    节点操作：
        创建节点： $('<标签名>')
        父节点.append(子节点)
        子节点.appendTo(父节点)

 

jquery事件绑定方式一: jquery对象.click(function(){ alert(123) })
jquery事件绑定方式二: jquery对象.on('click',function(){ alert(123) })
方式一是方式二的简写形式，但是方式二可以动态的添加标签并且使刚添加的标签也有
和其他标签相同的效果
没有动态效果添加的用方式一，有事件委派发生的情况就用方式二

 

事件委派

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>


<button>add</button>

<script src='jquery-3.1.1.js'></script>
<script>

    $('button').click(function(){
        var $li=$('<li>');   // 创建<li></li>标签
        $li.html('444');
        $('ul').append($li);
    });

    $('ul').on('click','li',function(){
        alert(123)
    });


</script>

</body>
View Code

 

$(document).ready(function(){}) == $(function(){})

把js代码放在head区域时，用于等整个文档加载完之后才会执行js代码
但习惯于把js代码放在body的最下面，所以上面的用法就可以不用了

 

each循环

<body>
    <p>111</p>
    <p>222</p>
    <p>333</p>


<script src='jquery-3.1.1.js'></script>
<script>

var arr=[11,22,33];
var obj={'name':'tom','age':11};

//$.each遍历循环方式一：$.each(obj,function)

$.each(arr,function(i,v){
    console.log(i,v)      //i遍历的是索引,v遍历的是值
});

$.each(obj,function(i,v){
    console.log(i,v)      //i遍历的是键,v遍历的是键对应的值
});


//$.each遍历循环方式二：$('').each(function)
$('p').each(function(i){
    console.log(i);  //拿到的是索引值

    if(i==1){
        $(this).css('color','red')
    };

    console.log($(this).html());
});

</script>
</body>
View Code

表格操作

<head>

<style>

</style>
</head>
<body>

<button class='selectAll'>全选</button>
<button class='cancelAll'>取消</button>
<button class='reverseAll'>反选</button>

<hr>
<table border='1'>
    <tr>
        <td><input type='checkbox' checked='checked'/></td>
        <td>张三</td>
        <td>12</td>
        <td>s6</td>
    </tr>
    <tr>
        <td><input type='checkbox'/></td>
        <td>张三</td>
        <td>12</td>
        <td>s6</td>
    </tr>
    <tr>
        <td><input type='checkbox'/></td>
        <td>张三</td>
        <td>12</td>
        <td>s6</td>
    </tr>
</table>

<script src='jquery-3.1.1.js'></script>
<script>

    $('.selectAll').click(function(){
        $(':checkbox').prop('checked',true)
    });

    $('.cancelAll').click(function(){
        $(':checkbox').prop('checked',false)
    });

    //$('.reverseAll').click(function(){
    //    $(':checkbox').each(function(){
    //        if($(this).attr('checked')){
    //            $(':checkbox').removeAttr('checked')
    //        }else{
    //            $(':checkbox').attr('checked','checked')
    //        }
    //    })
    //});    此种方法可以验证一下，会出问题

    $('.reverseAll').click(function(){
        $(':checkbox').each(function(){
            if($(this).prop('checked')){
                $(this).prop('checked',false)
            }else{
                $(this).prop('checked',true)
            }
        })
    });

    //也可以一句代码解决问题
    //$('.reverseAll').click(function(){
    //    $(this).prop('checked',!$(this).prop('checked'))
    //});    

//以后凡是遇到checked,selected像这种选中勾中的属性，用prop处理


</script>
<body>
View Code

文本操作

<body>

<input type='text' class='c1' value='123'/>
<textarea class='c2'></textarea>

<select name='pro' id='d1'>
    <option value='hebei'>河北省</option>
    <option value='hubei'>湖北省</option>
    <option value='hunan'>湖南省</option>
</select>

<button>show</button>

<script src='jquery-3.1.1.js'></script>
<script>

    //取值
    $('.c1').val();
    console.log($('.c1').val());

    //赋值
    $('.c1').val('hello');
    console.log($('.c1').val());

    $('button').click(function(){
        //console.log($('.c2').val())
        console.log($('#d1').val())
    });


</script>
</body>
View Code

文档节点

<style>
    .c1{
        width:300px;
        height:300px;
        border: solid red 2px;
    }
</style>
<body>
<div class='c1'>
    <h3>hello world</h3>
</div>
<hr>
<button>add</button>

<script src='jquery-3.1.1.js'></script>
<script>
     
     $('button').click(function(){
         //创建标签
         var $img=$('<img>');
         $img.attr({'src':'tupian.jpg','width':100,'height':100});
         $('.c1').append($img);    //等同于 $img.appendTo($('.c1'))   $('h3').after($img)

         //替换标签
         //$('.c1 h3').replaceWith($img);

         //删除标签
         //$('h3').remove()
         //清空
         //$('.c1').empty()


     })

</script>
</body>
View Code

clone示例

<body>

<div class='outer'>
    <div class='item'>
        <button class='add'>+</button>
        <input type='text'/>
    </div>
</div>


<script src='jquery-3.1.1.js'></script>
<script>

    //$('.add').click(function(){
    //    var $item=$('.item').clone();
    //    $('.outer').append($item)
    //})       错误方法

    $('.add').click(function(){
        var $item=$(this).parent().clone();
        $item.children().first().html('-').attr('class','del_ele');

        $('.outer').append($item)
    });

    $('.outer').on('click','.item .del_ele',function(){
        console.log($(this));
        $(this).parent().remove()
    })

</script>
</body>
View Code

jquery动画

<style>

</style>
<body>

<p>yuan</p>

<button class='xianshi'>显示</button>
<button class='yincang'>隐藏</button>
<button class='qiehuan'>切换</button>
<hr>
<h4>淡入淡出<h4>

<img src='tupian.jpg' class='tupian'>
<p>
    <button class='danru'>淡入</button>
    <button class='danchu'>淡出</button>
    <button class='danqie'>切换</button>
</p>

<script src='jquery-3.1.1.js'></script>
<script>

    $('.xianshi').click(function(){
        $('p').show(1000)
    });

    $('.yincang').click(function(){
        $('p').hide(1000)
    });

    $('.qiehuan').click(function(){
        $('p').toggle(1000)
    });

    $('.danru').click(function(){
        $('.tupian').fadeIn(1000)
    });

    $('.danchu').click(function(){
        $('.tupian').fadeOut(1000)
    });

    $('.danqie').click(function(){
        $('.tupian').fadeToggle(1000)
    });

</script>
</body>
View Code

jquery之偏移量

<style>
    body{
        margin:0;
    }

    .c1{
        width: 200px;
        height:200px;
        background-color: #2459a2
    }
</style>
<body>


<div class='c1'></div>
<button>change</button>

<script src='jquery-3.1.1.js'></script>
<script>

    //offset方法的参照物是可视窗口
    console.log($('.c1').offset());
    console.log($('.c1').offset().top);
    console.log($('.c1').offset().left);

    $('button').click(function(){
        $('.c1').offset({top:200,left:200})
    })

</script>
</body>
View Code

position

<style>
    body{
        margin:0;
    }

    .c1{
        width: 200px;
        height:200px;
        background-color: #2459a2;
    }

    .c2{
        width: 200px;
        height:200px;
        background-color: darkgoldrod;
    }

    .father{
        position: relative;
    }
</style>
<body>


<div class='c1'></div>

<div class='father'>
    <div class='c2'></div>
</div>

<button>change</button>

<script src='jquery-3.1.1.js'></script>
<script>

    console.log($('.c2').position().top);
    console.log($('.c2').position().left);
    console.log($('.c2').offset().top);
    console.log($('.c2').offset().left);

    $('button').click(function(){
        $('.c1').offset({top:200,left:200})
    })

</script>
</body>
View Code

 

posted @ 2017-11-03 11:47  -Ryan-  阅读(123)  评论(0)  编辑  收藏  举报