jquery基础

JQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。

选择器:

子元素

:nth-child(N)  

:first-child 匹配第一个子元素

:last-child 匹配最后一个子元素

:only-child 匹配父元素里面只有一个子元素

表单

:checked 匹配所有选中的被选中元素

:selected 匹配所有选中的option元素

属性

[attribute] 匹配包含给定属性的元素

[attribute=value]  匹配给定的属性是某个特定值的元素

[attribute!=value]  匹配所有不含有指定的属性,或者属性不等于特定值的元素。

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

[attribute*=value] 匹配给定的属性是以包含某些值的元素

[attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用

文本选择器

匹配包含给定文本的元素 contains(text)

匹配所有不包含子元素或者文本的空元素 empty

匹配含有选择器所匹配的元素的元素 has(selector)

匹配含有子元素或者文本的元素 parent

选择器

基本选择器

id

标签

class

组合

层级选择器

后代 ancestor descendant 

父子 parent > child 

下个兄弟 prev + next 

所有的兄弟 prev ~ siblings 

基本

获取第一个元素 $('li:first')

最后一个元素 :last 

去除所有与给定选择器匹配的元素 :not

匹配所有索引值为偶数的元素,从 0 开始计数 :even

匹配所有索引值为奇数的元素,从 0 开始计数 :odd

匹配一个给定索引值的元素 eq

匹配所有大于给定索引值的元素 gt(index)

匹配所有小于给定索引值的元素 lt(index)

表单

:checked 匹配所有选中的被选中元素

:selected 匹配所有选中的option元素


属性

属性

设置或返回被选元素的属性值。 attr(name|properties|key,value|fn)

从每一个匹配的元素中删除一个属性 removeAttr(name)

css类

addClass(class|fn) 为每个匹配的元素添加指定的类名

removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。

toggleClass(class|fn[,sw]) 如果存在(不存在)就删除(添加)一个类

HTML代码/文本/值

html([val|fn])  取得第一个匹配元素的html内容。

text([val|fn]) 取得所有匹配元素的内容

val([val|fn|arr]) 获得匹配元素的当前值。


CSS

css(name|pro|[,val|fn])

访问匹配元素的样式属性

offset([coordinates])

获取匹配元素在当前视口的相对偏移。

position()

获取匹配元素相对父元素的偏移。

scrollTop([val])

获取匹配元素相对滚动条顶部的偏移

scrollLeft([val])

获取匹配元素相对滚动条左侧的偏移

pageX获取鼠标的坐标点


对象访问

each() 遍历对象

size()获取对象的长度

length 获取对象的长度

index()搜索匹配的元素,并返回相应元素的索引值,从0开始计数。


筛选

过滤

eq(index|-index) 查找第几个

first() 查找第一个

last() 查找最后一个

hasClass(class) 查找元素包含class 的  返回布尔值

has(expr|ele) 查找包含元素的

not排除元素

查找

children([expr])匹配所有的子级元素

find():查找后代元素

 next():查找下一个

prev():查找上一个

parent():查找父级

siblings():查找所有的同辈元素(不包含自己)

    事件

    页面载入

     ready(fn) 

    事件处理

on(eve,[sel],[data],fn)1.7+ 

bind(type,[data],fn) 

one(type,[data],fn)   //执行一次

trigger(type,[data]) 

live(type,[data],fn) 

    事件切换

hover鼠标移入移出

toggle点击事件切换

效果

基本

show 显示

hide 隐藏

注意:隐藏就是元素通过自身的宽度,高度和透明度的变化

toggle效果切换

滑动

slideDown([speed],[easing],[fn])

通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

slideUp([speed,[easing],[fn]])

通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

slideToggle([speed],[easing],[fn])

通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

淡出淡入

fadeIn([speed],[easing],[fn])淡入

fadeOut([speed],[easing],[fn])淡出

fadeTo([[speed],opacity,[easing],[fn]])切换到指定的透明度

fadeToggle([speed,[easing],[fn]])// 淡入淡出的切换

自定义

animate(p,[s],[e],[fn])1.8* 

stop([c],[j])1.7* 

delay(d,[q]) 

文档处理

内部处理

append(content|fn)向每个匹配的元素内部追加内容。

appendTo()把所有匹配的元素追加到另一个指定的元素集合中

prepend()向每个匹配的元素内部前置内容

 prependTo()把所有匹配的元素前置到另一个、指定的元素元素集合中。

外部插入

after(content|fn)在每个匹配的元素之后插入内容

before(content|fn)在每个匹配的元素之前插入内容

insertAfter(content)把所有匹配的元素插入到另一个、指定的元素集合的后面。

insertBefore(content)把所有匹配的元素插入到另一个、指定的元素集合的前面。

替换

replaceWith(content|fn)将所有匹配的元素替换成指定的HTML或DOM元素。

replaceAll(selector)用匹配的元素替换掉所有 selector匹配到的元素。

删除

empty()删除匹配的元素集合中所有的子节点。

remove([expr])从DOM中删除所有匹配的元素。

复制

clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本。

    对比javascript

    创建节点:document.createElement('img');  //创建img标签

                     在元素后追加节点:box.appendChild('img'); //在box后追加img

                    在元素之前插入节点:box.insertBefore(newNode,oldNode);   newNode为新节点  old 为原有的

                    替换一个节点:box.replaceChild(newNode,oldNode);

                    删除一个节点:box.removeChild(node);

                    克隆一个节点:img.cloneNode(true);


jquery事件冒泡

return false

event.stopPropagation()


伪基本选择器

获取第一个元素 $('li:first')

最后一个元素 :last 

去除所有与给定选择器匹配的元素 :not

匹配所有索引值为偶数的元素,从 0 开始计数 :even

匹配所有索引值为奇数的元素,从 0 开始计数 :odd

匹配一个给定索引值的元素 eq

匹配所有大于给定索引值的元素 gt(index)

匹配所有小于给定索引值的元素 lt(index)



trigger() 触发器



本博客所有文章如无特别注明均为原创。作者:长颈鹿复制或转载请以超链接形式注明转自 SZY
原文地址《jquery基础

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(1)