前端框架-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 }); }) })
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!