-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可以移除所选择的元素的所有子元素