选择器
$(“div”)----->div标签
$(“.div”)----->class = “div”
$(“#div”)----->id = “div”
$(“div[name=aaa]”)----->name = “aaa”
选择器的集体过滤
$(“div”).has(“p”) 包含p标签的div
$(“div”).not(“.div1”) 所有的div标签,除了class=”div1”的
$(“ul li”).eq(5) 选择ul标签下的第6个li子元素
$(“ul .li11”).index() 返回ul标签下的所有子元素的class=li11标签的下标索引
$(“.div”).parent()
$(“.div”).children()
$(“.div”).siblings()
$(“.div”).prev()
$(“.div”).prevAll()
$(“.div”).next()
$(“.div”).nextAll()
$(“.div”).find(“.p”) 选择class=div的子元素class=p的元素
jquary有容错机制,即使找不到也不会报错,所以可以用length判断是否找到,如果为0,代表没有找到。
样式操作
获取
$(“.div”).css(“color”) 如果有多个元素,获取的是第一个元素的样式
添加/覆盖
$(“.div”).css({color:”red”})
操作样式类名
$(“.div”).addClass(“a b c”)
$(“.div”).removeClass(“a b”)
$(“.div”).toggleClass(“a”) 重复切换样式
click 事件点击
$(“ul li”).click(function(){
// this代表当前点击的元素
// jquary可以链式操作
$(this).addClass(“big”).siblings().removeClass(“big”);
})
动画 animate
// 1000 动画历经时间1s
// swing 默认为swing先快后慢,可不写 liner 匀速
// function 动画发生时的事件,可没有
$(“.div”)animate({以字典形式存储css属性},1000,”swing”,function(){})
特效
可以传入参数 时间 fast slow
淡入淡出
fadeIn()
fadeOut()
fadeToggle()
向下展开、向上卷起
slideDown()
slideUp()
slideToggle()
消失、显示 (可替换css属性 display:none 和display:static)
hide()
show()
toggle()
获取元素尺寸相关 页面滚动事件
获取元素的宽高
$(“.div1”).width()
$(“.div1”).height()
获取元素的 宽高 + padding
$(“.div1”).innerWidth()
$(“.div1”).innerHeight()
获取元素的 宽高 + padding + border
$(“.div1”).outWidth()
$(“.div1”).outHeight()
获取元素的 宽高 + padding + border + margin
$(“.div1”).outWidth(true)
$(“.div1”).outHeight(true)
获取浏览器可视区域的 宽高
$(window).width()
$(window).height()
获取文档的宽高
高度未超过浏览器可视区域时,宽高为浏览器可视区域的宽高
$(document).width()
$(document).height()
获取页面滚动距离
$(document).scrollTop()
$(document).scrollLeft()
监听页面滚动事件
$(window).scroll(function(){
...
})
属性操作
获取标签html内容
$(“.div1”).html()
$(“.div1”).html(“写入内容”)
取出某个属性的值
prop只能获取自带属性
$(“.a”).prop(“href”) 获取class=”a”标签中的href属性
$(“.a”).prop({href: “www.baidu.com”})
attr 能获取自定义的属性
$(“.div1”).attr(“haha”)
$(“.div1”).attr({haha: 123})
循环
$(“ul li”).each(function(index){
console.log(index); // index为循环到的每一个li的索引值
})
事件
事件函数
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
dbclick() 鼠标双击
mousedown() 鼠标按下
mouseup() 鼠标抬起
mouseover() 鼠标进入(进入子元素也触发)
mouseout() 鼠标离开(离开子元素也触发)
mouseenter() 鼠标进入(进入子元素不触发)
mouseleave() 鼠标离开(离开子元素不触发)
hover() 同时为mouseenter和mouseleave事件指定处理函数
hover(function(){}, function(){})
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单
绑定事件
$(“.div”).bind(“click mouseenter”, function(){})
$(“.div”).bind(“input prepertychange”, function(){})
propertychange(兼容IE9)
input没有提供方法,只能通过绑定
取消绑定事件
$(“.div”).unbind(“click”)
绑定一次事件
$(“.div”).one(“click”, function(){})
mousemove事件
$(document).mousemove(function(e){
// 可以获取鼠标在文档/块元素等的坐标
console.log(e.pageX);
console.log(e.pageY);
});
change事件
<input class="hehe" type="text" />
<select class="hehe" name="like">
<option value="0">a</option>
<option value="1">b</option>
<option value="2">c</option>
<option value="3">d</option>
</select>
如果该标签被改变,则触发该事件
$(".hehe").change(function(){
$(this).css("background-color","#FFFFCC");
});
事件委托(子元素将事件委托给父元素)
$(“ul”).delegate(“li”, “click”, function(){})
hover是方法不是事件,不能委托
冒泡
子元素被触发某事件,如果它没有该事件的处理方案,则一直向上面的父元素中找,直至找到处理方式。
阻止冒泡
event.stopPropagation();
阻止默认行为
event.preventDefault();
合并写法
return false;
元素节点的操作
已经存在的元素,不会重复操作
创建节点
var $div1 = $(“<div>”) 如果是空的,可以只写半个标签
var $div1 = $(“<div>哈哈哈</div>”)
在元素内部的后面添加
$(“ul”).append($(“<li>”))
$(“<li>”).appendto($(“ul”))
在元素内部后面添加
$(“ul”).prepend($(“<li>”))
$(“<li>”).prependto($(“ul”))
在某元素的前面/后面添加
$(“.li03”).after($(“<li class=”li04”>”))
$(“.li03”).before($(“<li class=”li02”>”))
变换位置
$(“.div3”).insertafter($(“<div class=”li04”>”))
$(“.div3”).inserbefore($(“<div class=”li02”>”))
删除节点
$(“.div1”).remove()