博客

jQuery基础1

导入

<!-- 导入js文件 -->
<script src="./jquery.js"></script>

获取方法

    <div id="box">
        <div class="innerBox">
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li class="foot">
                    <a href=""></a>
                </li>
            </ul>
        </div>
    </div>

通过jquery对象来调用获取方法

console.log(jQuery('body'));

使用$来代替jQuery

console.log($('body'));

使用选择器来获取对应的内容

        console.log($('#box')); //id为box的元素
        console.log($('.innerBox'));//class为innerBox的元素
        console.log($('li'));//获取标签为li的元素
        console.log($('ul>li'));//使用组合器来获取li元素
        console.log($('li[name=jack]'));//获取name为jack的li

特殊选择器

        console.log($('li:first'));//获取第一个li
        console.log($('li:last'));//获取最后一个li
        console.log($('li:eq(2)'));//获取下标为2的li
        console.log($('li:odd'));//获取下标为奇数的li
        console.log($('li:even'));//获取下标为偶数的li

筛选器

获取第一个内容

console.log($('li').first());

获取最后一个内容

里面可以传入参数为选择器名称

console.log($('li').last());

获取上一个内容

里面可以传入参数为选择器名称

        console.log($('li:eq(2)').prev());
        console.log($('li:eq(2)').prev('.active')); //上一个选择器不为.active时返回内容为空

获取下一个内容

里面可以传入参数为选择器名称

        console.log($('li:eq(2)').next());
        console.log($('li:eq(2)').next('.foot'));

获取上面所有的内容

里面可以传入参数为选择器名称

        console.log($('li:eq(2)').prevAll());
        console.log($('li:eq(2)').prevAll('.active'));

获取下面所有内容

里面可以传入参数为选择器名称

        console.log($('li:eq(2)').nextAll());
        console.log($('li:eq(2)').nextAll('.foot'));

获取父元素

里面可以传入参数为选择器名称

        console.log($('li').parent());
        console.log($('li').parent('ul'));

获取所有父元素

里面可以传入参数为选择器名称

        console.log($('li').parents());
        console.log($('li').parents('ul'));

获取所有子元素(直系子元素)

里面可以传入参数为选择器名称

        console.log($('ul').children());
        console.log($('ul').children('.foot'));

获取所有兄弟元素

里面可以传入参数为选择器名称

        console.log($('li:eq(2)').siblings());
        console.log($('li:eq(2)').siblings('.foot'));

查找元素

里面可以传入参数为选择器名称

        console.log($('ul').find('li'));//在ul里面查找li
        console.log($('ul').find('a'));//在ul里面查找a

通过索引筛选

里面可以传入参数为选择器名称

        console.log($('li').eq(1));//相当于$('li:eq(1)')

属性操作

传入一个参数为获取,两个参数为设置

<div id="box"></div>

prop

        console.log($('div').prop('id'));//返回第一个id属性值
        $('div').prop('class','inner')//设置class属性,值为inner
        $('div').prop('name','tom')//对于本身没有的属性,不会显示添加,但可以用
        console.log($('div').prop('name'));//tom

attr

读取显示添加的内容

        console.log($('div').attr('class'));//inner
        console.log($('div').attr('name'));//undefined

设置本身没有的属性也会显示添加

        $('div').attr('age','20')

删除

attr只能删除显示的属性,prop可以删除自己设置的隐示属性,但不可以删除attr设置的属性

        $('div').removeAttr('class')
        $('div').removeProp('name')
        console.log($('div').prop('name'));

class属性操作的其他方法

        $('div').addClass('tom')
        $('div').removeClass('inner')
        console.log($('div').hasClass('inner'));//判断是否有inner名字的class
        $('div').toggleClass()//切换class   对于已经有class就删除,没有就添加class

元素的创建于添加

    <div>原本的div</div>
    <ul>
        <li class="one">11</li>
        <li>22 <a href="http://www.baidu.com" name="tom" id="haha">aaaa</a></li>
        <li>33</li>
        <li>44</li>
    </ul>

创建元素

        let $div = $('<div></div>')

添加操作

后添加(父子节点的添加)

        $('body').append($div)//在body里最后面添加div(已经添加了的不会在添加了)
        $div.appendTo($('body'))//把div添加到body里的最后面(已经添加了的不会在添加了)

往前添加(父子节点的添加)

        let $a = $('<a></a>')
        $a.attr('href','http://www.baidu.com')
        $('body').prepend($a)   //在body里面的最前面添加a
        $a.prependTo($('body'))//把a添加到body里的最前面

after 在什么之后 (兄弟节点的添加)

        let $b = $('<b></b>')
        $('div').eq(0).after($b)//在 div的后面添加b
        $b.insertAfter($('div').eq(0))//把b添加到div里的后面

before 在什么之前 (兄弟节点的添加)

        let $p = $('<p></p>')
        $('div').eq(0).before($p)//在 div的前面添加p
        $p.insertBefore($('div').eq(0))//把p添加到div里的前面

替换replace

        let $h = $('<h>哈哈啊哈</h>')
        $('div').replaceWith($h)//将div替换成h标签(div会被删除)
        $('<h>烦烦烦</h>').replaceAll($('div'))//将h标签替换进div(div会被删除)

删除 remove 和 清空empty

       $('li').remove('.one')//删除方法,将li里面的save所有的元素全部删除
        // $('li').empty()//将里面所有的元素全部清空,自身的事件等不删除

克隆clone

第一个参数是是否克隆事件，默认false

        $('body').append($('li').eq(0).clone())