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