前端框架-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的那个pdetach 移除自己（保留数据和事件）$("#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  传一个数字参数，代表毫秒，改变宽、高、透明度togglevar off = false;var $box = $("#box");$(document).click(function () {    if(off){        $box.show(2000);    }else{        $box.hide(2000);    }    off = !off;})#fadeInfadeOut 默认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 改变高度slideUpvar 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        });    })})