jQuery(笔记)

jQuery

jQuery是一个JavaScript库，里面是大量的函数方法，可以帮助我们进行快速的操作DOM

优点
轻量级，文件才几十kb，不会影响
基本兼容主流浏览器
有插件
免费，开源

使用jQuery需要引入下边的文件

<script src="js/jQuery.min.js"></script>

jQuery的入口函数

    <div style="width: 100px; height: 100px; background-color:pink;"></div>
    <script>
        // $是jQuery的别称
        // 两个等效
        // $同时也是jQuery的顶级对象,相当于JavaScript的window
        // 把元素用$包装成jQuery对象，就可以调用jQuery的方法
        // $(function() {

        // })
        jQuery(function() {
            jQuery('div').hide();
        })

JavaScript对象与DOM对象互相转换

var div = document.querySelector(‘div’); //是DOM对象
$(‘div’)//是jQuery对象

<script>
    // DOM对象转换成jQuery对象
    $('div')
    // jQuery对象转换成DOM对象
    $('div')[index] //index是索引号
    $('div').get(index)
</script>

jQuery基础选择器
$(“选择器”)
里面直接写css选择器就行

	$("#id") //ID选择器
    $("*") //全选选择器
    $(".class") //类选择器
    $("div") //标签选择器
    $("div,p,li") //并集选择器
    $("li.current") //交集选择器

jQuery层级选择器
$(“ul>li”) //子代选择器
$(“ul li”) //后代选择器

隐式迭代
遍历内部DOM元素的过程叫隐式迭代
就是不需要进行循环了

jQuery筛选选择器

		$("li:first") //获取第一个元素
        $("li:last") //获取最后一个元素
        $("li:eq(2)") //获取索引为2的元素
        $("li:odd") //获得索引为奇数的元素
        $("li:even") //获得索引为偶数的元素

jQuery筛选方法

<script>
    $(function() {
        //查找父级
        console.log($('div').parent());
        // 相当于子代选择器
        console.log($('ul').children('li'));
        // 相当于后代选择器
        console.log($('ul').find('li'));
        // 查找兄弟节点
        console.log($('ul').siblings('li'));
        // 查找当前元素之后的同辈元素
        console.log($('li').nextAll());
        // 查找当前元素之前的同辈元素
        console.log($('li').prevAll());
        // 检查当前元素是否有某个类
        console.log($('div').hasClass('color'));
        // 相当于$("li:eq(2)")
        console.log($('li').eq(2));
    })
</script>

操作css方法

参数只写属性名，返回的是属性值
$(this).css*(“color”);
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不加引号
$(this).css(“color”,“red”);
参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不加引号
$(this).css({“color”:“white”,“font-size”:“20px”});

设置类样式方法

<script>
	//添加类
    $("div").addClass("current");
    //移除类
    $("div").removeClass("current");
    //切换类
    $("div").toggleClass("current");
</script>

显示隐藏效果

显示
show(speed,easing,fn)
隐藏
hide(speed,easing,fn)
切换
toggle(speed,easing,fn)
滑动
slideDown(speed,easing,fn)
slideUp(speed,easing,fn)
slideToggle(speed,easing,fn)

每个参数都可以省略，无动画直接演示
speed：可选slow normal fast 或者毫秒数值1000
easing：用来指定切换效果，默认是swing 可用linear
fn：回调函数，在执行完动画后执行

事件切换
hover(over,out)
over鼠标移到元素上触发的函数相当于mousenter
out鼠标移出元素触发的函数相当于mouseleave

<script>
    $("ul>li").hover(function() {
            $(this).children("ul").slideDown(200);
        }, function() {
            $(this).children("ul").slideUp(200);
        })
        // 和上边的等效
    $("ul>li").hover(function() {
        $(this).children("ul").slideToggle(200)
    });
</script>

动画排队
动画一旦触发就会执行，如果多次触发，就会造成多个动画效果排队执行
停止排队
stop()
用于停止动画效果
写到动画或效果的前面，相当于停止结束上一次动画

$("ul>li").hover(function() {
    $(this).children("ul").stop().slideToggle(200);
});

淡入淡出效果
fadeTo(speed,opacity,easig,fn)
fadeIn(speed,opacity,easig,fn)
fadeInfadeOut(speed,opacity,easig,fn)
fadeToggle(speed,opacity,easig,fn)

speed：可选slow normal fast 或者毫秒数值1000
easing：用来指定切换效果，默认是swing 可用linear
fn：回调函数，在执行完动画后执行
opacity:指的是透明度，取值0-1

<div style="width: 100px; height: 100px; background-color:pink;"></div>
    <button>dianji</button>
    <button>dianji</button>
    <button>dianji</button>
    <button>dianji</button>
<script>
    $(function() {
        $("button").eq(0).click(function() {
            $("div").fadeIn(1000);
        })
        $("button").eq(1).click(function() {
            $("div").fadeOu(1000);
        })
        $("button").eq(2).click(function() {
            $("div").fadeToggle(1000);
        })
        $("button").eq(3).click(function() {
            $("div").fadeTo(1000, 0.5);
        })
    })
</script>

自定义动画

animate(params,opacity,easig,fn)

params是想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性需要采用驼峰命名法
speed：可选slow normal fast 或者毫秒数值1000
easing：用来指定切换效果，默认是swing 可用linear
fn：回调函数，在执行完动画后执行

<button>dianji</button>
<div style="width: 100px; height: 100px; background-color:pink; position: absolute;"></div>

<script>
    $(function() {
        $('button').click(function() {
            $("div").animate({
                left: 500,
                top: 200,
                opacity: .3,
                width: 400
            }, 500);
        })
    })
</script>

设置或获取元素自定义属性值attr()

获取属性
attr(“属性”) //类似于getAttribute()
设置属性语法
attr(“属性”,“属性值”) //类似于setAttribute()

<script>
    $("div").attr("index", 4);
    console.log($("div").attr("index"));
</script>

数据缓存
data()方法可以在指定的元素上存储数据，不会修改DOM元素结构，刷新后数据移除

附加数据
data(“name”,“value”)
获取数据
data(“name”)
与attr()语法类似

遍历元素
jQuery的隐式迭代是对同一类元素做了同样的操作，如果想给同一类元素做不同的操作，需要遍历

<div style="width: 100px; height: 100px;">1</div>
<div style="width: 100px; height: 100px;">2</div>
<div style="width: 100px; height: 100px;">3</div>
<script>
    $(function() {
        var arr = ["red", "green", "blue"];
        $("div").each(function(i, domEle) {
            console.log(i);
            console.log(domEle);
            // 因为不是jQuery对象，所以要转换
            $(domEle).css("backgroundColor", arr[i])
        })
    })
</script>

$.each()可以用来遍历对象
index是每个元素的索引号，element遍历内容

<script>
    $.each({
        name: "yy",
        age: 20
    }, function(i, ele) {
        console.log(i);
        console.log(ele);
    })
</script>

删除元素

删除匹配的元素（本身）
element.remove()
删除匹配元素集合中所有的子节点
element.empty()
清除匹配的元素内容
element.html("")

<ul>
    <li>1</li>
</ul>
<div style="width: 100px; height: 100px; background-color: pink;">1</div>
<script>
    var li = $("<li>xinde</li>"); //创建元素
    $('ul').append(li); //放在后边
    // $("ul").prepend(li); //放在前边
    var div = $("<div>xinde</div>")
    $("div").after(div);
    // $("ul").remove(); //删除ul自己
    // $("ul").empty(); //删除ul的子节点
    $("ul").html(""); //删除ul的子节点
</script>