前端框架-11-jQuery文档&对象

前端框架-jQuery文档&对象

1.scroll滚动属性

滚动条属性：
 scrollTop
 scrollLeft

#获取 滚动高度/宽度
$(document).click(function () {
    console.log("滚动高度" + $(this).scrollTop());
    console.log("滚动宽度" + $(this).scrollLeft());
})

#设置滚动高度/宽度
$(document).click(function () {
    $(this).scrollTop(750); #滚动的垂直位置
    $(this).scrollLeft(750);#滚动的水平位置
})

2.append,prepend

添加子元素 可以是标签、文本、js对象、jq对象
#append 追加在该元素里面的最后面
 $("#box").append("<a>我是新增的a标签</a>");
#appendTo  同append功能
$("<a>我是新增的a标签</a>").appendTo($("#box"));

# prepend 追加在该元素里面最前面
$("#box").prepend("<a>我是新增的a标签</a>");
#prependTo同 prepend
$("<a>我是新增的a标签</a>").prependTo($("#box")

#特殊用法append
<div id="box">
    我是div
    <p>我是已经存在的p标签</p>
</div>
<b>我是b标签</b>
 <b>我是b标签2</b>

var b = document.querySelector("b");
  $("#box").append(b);#会把相邻的第一个b标签添加到div里面

var $b = $("b");
$("#box").append($b);#会把相邻的所有b标签添加到div里面

3.before,after

#添加兄弟元素
after ，添加在后面
$("#box").after("<b>我是新增的</b>");
#insertAfter 同after
$("<b>我是新增的</b>").insertAfter("#box");

#before，添加该元素前面
$("#box").before("<b>我是新增的</b>");

#insertBefore 同before
$("<b>我是新增的</b>").insertBefore("#box");

4.wrap

#wrap  给每个元素添加一个父元素
$("p").wrap("<div>123</div>");

#unwrap 删除元素的父元素
$("p").unwrap();

#wrapAll 给子元素添加一个父元素都包起来
$("p").wrapAll("<div></div>");

wrapInner
$("p").wrapInner("<em></em>");//所有段落内的每个子内容加粗

5.empty

empty 清空子节点
$("#box").empty();

remove 移除自己（不保留数据和事件）
$("#box").remove();//不传参 移除自己和子元素
$("p").remove(".box");//删除class叫box的那个p

detach 移除自己（保留数据和事件）
$("#box").detach();

clone  复制自己（根据参数不同，，决定是否保留事件和子元素）
$(".box").clone().appendTo($("p"));

6.筛选

#html演示
<div id="box" class="show">
    <p>1</p>
    <p class="box">2</p>
    <div>
        <p>3</p>
        <p>4</p>
    </div>
</div>

eq
#hasClass 检查当前的元素是否含有某个特定的类，如果有，则返回true。
alert($("p").hasClass("box"));

#children 找儿子 可以不传参数
console.log($("#box").children(".box"));

#find  不传参，默认不找
console.log($("#box").find("p"));

#parent 不需要参数
console.log($(".box").parent());

#parents找到所有
console.log($(".box").parents()); #找到所有的
console.log($(".box").parents(".show"));

#siblings 不传参 所有兄弟 传参 所有兄弟按照参数筛选出合格的
 $("p").siblings(".box").css("color","red");

7.事件

jquery里面的事件
        都是函数形式的，去掉on的那种
        原理上事件都是事件绑定的形式而不是赋值的形式
jquery事件绑定、解绑
        所有事件的添加都是绑定的形式
        可以通过on来添加事件

#html
<div id="box">
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>
</div>
#绑定点击事件，事件可以绑定多次，会执行多次点击事件
var $box = $("#box");
$box.click(function () {
    alert(1);
})
$box.click(function () {
    alert(2);
})

#每个li添加点击事件
$("#box ul li").click(function () {
    alert($(this).index());
});
#on绑定单个事件
$("#box").on("click","li",function () {
     alert($(this).index());
})

#on绑定多个事件
$("#box").on({
    "click": function () {
        console.log("我被点击了");
    },
    "mouseenter": function () {
        console.log("我被鼠标移入");
    },
    "mouseleave": function () {
         console.log("我被鼠标移出");
    }
});

#移除事件
$("#box").off("click");

#鼠标移入移除，mouseenter和 mouseleave结合功能
$("#box").hover(function () {
    console.log(1);//移入
},function () {
    console.log(2);//移除
});

8.动画

#show  不传参 瞬间显示隐藏
hide  传一个数字参数，代表毫秒，改变宽、高、透明度
toggle
var off = false;
var $box = $("#box");
$(document).click(function () {
    if(off){
        $box.show(2000);
    }else{
        $box.hide(2000);
    }
    off = !off;
})


#fadeIn
fadeOut 默认300 改变透明度
fadeTo  可以把透明度设置一个值，时间参数不能省略
var off = false;
var $box = $("#box");
$(document).click(function () {
    if(off){
        $box.fadeIn(2000);
    }else{
        $box.fadeOut(2000);
    }
    off = !off;
})

var $box = $("#box");
  $(document).click(function () {
      $box.fadeTo(500,0.2); #指定透明度
})


#slideDown 默认300 改变高度
slideUp

var off = false;
var $box = $("#box");
$(document).click(function () {
    if(off){
        $box.slideDown(2000);
    }else{
        $box.slideUp(2000);
    }
    off = !off;
})
#slideToggle 改变高度,有就隐藏，没有就显示
var $box = $("#box");
$(document).click(function () {
    $box.slideToggle();
})


这三组动画属性，不仅仅可以接受一个数字参数，能接受的参数有：
* number / string  代表动画时间（可缺省）   毫秒数 / （"fast" "normal" "slow"）
* string   代表运动曲线（可缺省）
* function   代表回调函数

9.animate

animate
传参：
    * obj  必传  json格式代表的变化的属性和目标值  数值变化
    * number/string 可缺省 代表毫秒数 或者 三个预设好的值 默认300
    * string 可缺省，代表运动曲线，只能是三个预设好的运动缺陷 默认easing
    * function 可缺省，代表动画结束后的回调函数

$("#box").animate({
    "width": 500,
    "height": 200,
    "marginLeft": 200
},5000)
--------------------------------------------------------------------
#stop动画
清空动画队列，可以接受两个布尔值参数
第一个不用管
第二个决定是否瞬间到达，true到底，false没到

#css
<style>
    * {
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    #box ul li{
        float: left;
        width: 150px;
        height: 30px;
        text-align: center;
        overflow: hidden;
        border-right: 1px solid #fff;
        background: red;
    }
    #box ul li p{
        height: 200px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
    }
</style>

#html
<div id="box">
    <ul>
        <li>
            <p>苹果</p>
        </li>
        <li>
            <p>香蕉</p>
        </li>
        <li>
            <p>梨子</p>
        </li>
        <li>
            <p>橘子</p>
        </li>
        <li>
            <p>黄瓜</p>
        </li>
    </ul>
</div>
#动画开启
$("#box ul li").hover(function () {
    $(this).stop(true,false).animate({"height":200},1000);
},function () {
    $(this).stop(true,false).animate({"height":30},1000);
})
--------------------------------------------------------------------
#延迟属性
delay 只对动画有用
$(document).click(function () {
//   $("#box").delay(1000).fadeOut(500);#延迟操作
//            $("#box").delay(5000).css("background","pink");//delay无用
    $("#box").delay(2000).queue(function () {
        $(this).css({
            "background":"pink",
            "width": 300
        });
    })
})