jquary笔记 选择器 选择器的过滤 函数 动画 特效 属性操作 事件 元素节点操作等

选择器

$(“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()