动画队列与停止动画
在同一个元素上执行多个动画,那么对于这个动画来说后面的动画会放到动画队列当中,等待前面的动画执行完毕后执行。
stop( 参数1,参数2)
参数都为false和true两个值的选项。
参数1:是否清除队列。
参数2:是否跳转到最终效果。
不写参数默认2个都为false。
动态创建节点
html( )设置或获取内容。
如果不写参数则获取到元素的所有内容。
设置内容,会把原来的内容给覆盖掉。
.html("666");
参数里也可以写HTML代码不过所有参数内容都要写在双引号里面。
$( )和html( )写法一样,同样也是创建元素,不过它是保存在内存中的,如果要在页面上显示,就要追加。再用append( )追加节点,添加到页面当中。
$( )不会覆盖之前内容只会追加。
<script>
$("a").click(function(){
var a=$("<h1>ddd</h1>");
$(".kk").append(a);
})
</script>
for( var i in kyg){}遍历对象
kk.push("11")——添加数组值
kk.join("")——用字符串连接起来
添加节点的方式
append( )
父元素.append(子元素);//作为最后一个子元素添加
把已有的HTML元素作为子元素添加给父元素当中,会发生剪切的作用,剪切作为最后一个元素添加。--剪切/添加
prepend( )
父元素.prepend(子元素);//作为第一个子元素添加
把已有的HTML元素作为子元素添加给父元素当中,会发生剪切的作用,剪切作为第一个元素添加。--剪切/添加
before( )
元素a.before( 元素b);//把元素b插入到元素a的前面,作为兄弟元素添加。
添加已有--剪切/添加
after( )
元素a.before( 元素b);//把元素b插入到元素a的后面,作为兄弟元素添加。
添加已有--剪切/添加
appendTo( )
子元素.appendTo(父元素);//把子元素作为父元素的最后一个子元素添加。
添加已有--剪切/添加
表单选择器option:selected选中被选中的option
清除节点
清空Ul里
$(".kk").html("");——不推荐使用,有可能会造成内存泄露,不安全。
清空元素:empty( );
$(".kk").empty( );——推荐使用。
移除某一个元素.
$(".li3").remove( );——"自杀"
杀死"父亲".
$(".li3").parent( ).remove( );——即可
克隆节点
克隆节点:clone( );
只存在内存之中,如果要添加到页面,需要追加。
var a=$(".kk").clone();
$("body").append(a);
clone( )方法参数不管是true还是false,都是会克隆到后代节点的。
clone( )方法参数是true表示会把事件一起克隆到。参数如果是false就不会克隆事件。默认为false。
val( )与设置表单
val( )方法 不给参数就是获取input内容
val( )方法,给参数就是设置(改写input内容)
案例动态数据添加与删除
find(".kk");——查找元素为.kk的
attr( )方法设置或返回被选元素的属性值。
attr("id","kk");——改ID名
attr("calss","kk")——改class名
jQuery的属性操作
attr( );
共有2个参数,一个是属性名,另一个是属性值。
attr("src","kk.jpg");//以前有的属性,现在会更改。如果原来没有这个属性,那就是添加属性。
设置多属性可以在里面添加一个对象,把要改的或者是添加的写进这个对象里面。
attr({
src:"kk.jpg",
id:"kk"
})——添加多属性
获取属性直接给这个属性名写进去就可以了。attr("src");
移除属性removeAttr( );
直接就用removeAttr("src");就可以了。
移除多个属性用空格间断。
removeAttr("src id class");——移除多属性
prop操作布尔类型的属性
有一类值给她设置true/false取值也是true/false,有些熟悉写在元素身上就表示选中,没有写在元素身上就表示没有选择。在jQuery1.6之后,对于checked,selected来说这种Boolean类型的属性来说,不能用attr( )方法,只能用prop方法。
获取是否选中的Boolean值:prop("checked")
设置它的值:prop("checked","false");
选择所以input下面有被点击的length:
$("ul li input:checked").length;
编程思维很重要!
宽与高
用width( )跟height( )拿到的参数是数值类型
用它们设置或获取宽度,高度,不包括内边距,边框,外边距。
设置她们的数值可以直接在里面添写想要变成的数值大小即可。
用innerWidth( ),innerHeight( )拿宽高,会包含内边距。(元素宽高+内边距)。
用outerWidth( ),outerHeight( )拿宽高,会包含内边距跟边框。(元素宽高+内边距+边框)
用outerWidth(true),outerHeight(true)拿宽高,会包含内边距跟边框跟外边距。(元素宽高+内边距+边框+外边距)。
获取页面可视区域宽高
$(window).width( );
$(window).height( );
offset和position
offset( )会获取到一个对象,这个对象是元素距离document的位置。!!
position( )会获取到一个对象,这个对象是获取元素距离有定位的父元素的位置。
scrollTop与scrollLeft
scrollTop( )表示元素内容被卷曲出去的宽度
scrollLeft( )表示元素内容被卷曲出去的高度
设置:设置元素内容被卷曲出去的高度或者宽度。
scrollLeft(217);
scrollTop(217);
获取页面被卷曲的高度:$(window).scrollTop();
获取页面被卷曲的宽度:$(window).scrollLeft();
案例固定导航栏:
scroll()方法会触发scroll事件。scroll事件适用于所有可滚动的元素和window对象。当用户滚动指定元素时,会发生scroll事件。
$(".kk").scroll(function(){
});
当一个元素设置了定位想要恢复正常,可以使用static,给position设置这个值会把之前的定位恢复正常。position:static;
事件的发展历程
用原生js给div注册单击事件,原生JS注册相同的事件,后面的会把前面的给覆盖掉。而jQuery不会。
jQuery事件发展历程:
简单的事件绑定--bind事件绑定--delegate事件绑定--on事件绑定(推荐)。
1.简单事件绑定click( )
不支持同时注册,也不支持动态注册。(也就是动态添加的HTML标签不支持被设置绑定事件)。
2.bind方式注册事件
支持同时注册,不支持动态注册。
第一个参数:事件类型
第二个参数:事件处理程序
$("div").bind({
click:function(){
console.log("dd");
},
mouseenter:function(){
console.log("dddd");
}
});
3.delegate注册委托事件--原理是事件冒泡
支持同时注册,也支持动态注册
$(".father").delegate("div",{
click:function(){
console.log("dd");
},
mouseenter:function(){
console.log("dddd");
}
});
至jQuery1.7之后,jQuery用on统一了所有事件的处理方法。
on注册事件!!
on注册简单事件:(但不支持动态注册)
$("div").on("click",function(){
console.log("dddd");
});
on注册事件委托:(支持动态注册)
$(".father").on("click","div","function(){
console.log("dddd");
});
$(".father").on("click","div,span","function(){
console.log("dddd");
});