jquery 小知识

-jQuery的常用事件

click()   鼠标单击

mouseover() 鼠标进入

mouseout() 鼠标离开

hover(function(){},function(){}) 鼠标持久悬放(函数1写鼠标移入的代码，函数2写鼠标移出的代码)

blur() 元素失去焦点

focus()元素获得焦点

1. 布局上，html中分上下两部分，上面是标题栏，提供给用户点击/鼠标悬放；下面是内容显示栏，里面由多个内容窗口，与标题的数量对应。

2. 批量获取标题栏中的标题，组成一个数组，并给每一个标题，批量绑定事件。

3. 每次用户点击不同的标题，根据标题的下标，控制显示对应序号的内容窗口。

   内容窗口的显示，可以通过left定位来实现，也可以通过display:none;来实现。

2. 对选择的元素进行基本的过滤操作

1.比如选择第一个元素
2.最后一个元素
3.下标为奇数或者偶数的元素
4.具体到哪一个元素，使用eq(n)
5.lt(n)表示选择小于n号索引的元素
6.gt(n)表示选择大于n号索引的元素
7.还可以设置为属性值不等于的情况

$('p:first')

$('p:last')

$('p:odd');

$('p:even')

$(li[data-li = single] > img).addClass('img-circle');

$(li[data-li != single] > img).addClass('img-circle');

$(li[data-lt ~= single])表示含有空格，且有singe属性的元素

无论什么符号分割开的，只要含有就行的，用*=

$= 表示以设置的字符结束的属性^= 表示以设置的字符开始的属性

$('p:eq(1)');   选择页面中的第二个P元素

3.跟表单相关的选择元素：表单相关前面都加一个冒号

选择表单中所有的input元素：    $(':input')，注意这里的button按钮也被看成是input元素$(':button') 找到的就是页面上所有的重置按钮和注册按钮$(':submit') 找到所有的提交类型的按钮$(':reset') 选择所有的重置按钮

一切的表单元素都可以使用:元素名称/类型名称$(':file')选择文件类型的元素$('checkbox')选择复选框$('password')选择密码$(':radio')$(':checked')$(':focus')处于焦点状态的表单元素$(':disabled')禁用的表单元素$(':eabled')启用的表单元素

4.孩子，兄弟，父亲元素们

选择第一个子元素是first-child，与first有区别，first选择的是第一个元素

last-child选择最后一个子元素

nth-child允许我们选择指定的子元素，nth-child是从1开始的，与eq不同，eq是从0开始的

nth-chid(1)选择第一个子元素

nth-child(odd)奇数位置的子元素

nth-child(even)偶数位置的子元素

nth-child(4n)选择4的倍数的子元素

nth-last-child(4n)倒着数4n的倍数

contains()可以选择包含某些字符串的元素，包含的是文字内容

$('li:contains("viva")');

$('li img').first()

$('li img').last()

$('li img').slice(4,8)选择开始到结束的位置的值

$('li').children('h2');选择子元素里的h2元素

$('li").parent()也可以选择一个元素的父亲元素

$('li').next()选择这个元素的下一个兄弟元素

$('li').prev()选择上一个兄弟元素

$('li').siblings()选择所有的兄弟元素

$('li').nextAll()可以选择后边所有的兄弟元素

$('li').prevAll()

$(document).bind("click",function(e){   // 匹配最近的元素，如果没有就向上找，如果找不到就返回一个空jQuery对象

    $(e.target).closest('li').css("color","red");})

children()方法只考虑子元素，不考虑其他后代元素

5.parent(), parents(), closest()三者的区别

parent()返回集合中每个匹配元素的父元素，返回一个元素节点
parents()返回集合中每个匹配元素的祖先元素，找到第一个父节点之后继续向上查找，最终返回多个父节点
closest()从自身开始往上找，返回最先匹配的祖先元素，返回匹配的第一个元素节点

设置css的属性
width设置或者查看元素的宽度
height设置或者产看元素的高度
outerWidth
outerHeight表示包含元素 的高度+内外边距+边框的高度
innerWidth
innerHeight表示元素的内部高度，包含元素本身和内边距，不包括外边距和边框
offset可以设置元素的坐标，相对于文档的位置
console.log(("content").prepend("<div>hello</div>")所选的是父元素，在父元素的里边最开始的位置追加元素
('<h6>hello</h6>').appendTo(".content")可以将h6hello追加到content的后边
before，after，insertBefore，inserAfter
before和after与被选择的元素之间是兄弟关系
insertBefore和insertAfter首先指定插入的内容，然后再指定要插入的位置
empty，remove，detach
empty可以移除所选择的元素的所有子元素