Jquery基础

Jquery2.0及后续版本将不再支持IE8以下浏览器

Jquery2.0以下兼容css3,兼容各种浏览器

一、定义:

方式一、$(document).ready(function(){//等待文档加载完再执行});

方式二、$(function(){//等待文档加载完成再执行});

二、节点的获取方式:

1、基本选择器

id选择器

class选择器

*通配符选择器

标签选择器

分组选择器

2、层次选择器

包含选择器

子对象选择器

选择器+选择器:这个+指的是紧跟着在某个元素后面的元素(仅一个)

选择器~选择器:这个~指的是跟在某个元素后面的元素(不止一个)

3、过滤选择器

基本

:first 过滤出第一个元素

:last 过滤出最后一个元素

:not(选择器) 过滤出不包含指定的选择器

:even 过滤出下标为偶数的元素

:odd 过滤出下标为奇数的元素

:eq(下标) 过滤出下标为某个值的元素

:gt(下标) 过滤出下标大于某个值的元素

:lt(下标) 过滤出下标小于某个值的元素

:header 过滤出h 标签元素(在某个范围的所有h 表签)

:animated 过滤出自动画效果的元素

: focus 获取焦点的元素

内容

:contains(text) 过滤出含有某个内容的元素

:parent 过滤出有内容的元素

:empty 过滤出没有内容的元素

:has(选择器) 过滤出选择器匹配的元素的元素

属性

[属性名]过滤出含有某个属性的元素

[属性名=属性值]过滤出含有某个属性等于某个值的元素

[属性名!=属性值]过滤出含有某个属性不等于某个值的元素

[属性名^=属性值]过滤以某个属性值开头的元素

[属性名$=属性值]过滤以某个属性值结尾的元素

[属性名*=属性值]过滤出含有某个属性值的所有元素

[属性名][属性名]过滤出含有多个属性名的元素

子元素

:nth-child(数值)

:first-child()第一个子元素

:last-child()最后一个子元素

:only-child过滤出只有一个子元素

可见性

:hidden 过滤出隐藏元素

:visible 过滤出显示的元素

表单元素状态

:enabled 过滤出被激活的表单元素

:disabled 过滤出没被激活的表单元素

:checked 过滤出被选中的元素(单选框、多选框)

:selected 过滤出被选中的元素(下拉列表框)

表单

:input 过滤出所有表单元素

:text 过滤出文本框的表单元素

:password 过滤出密码框

:radio 过滤出单选框

:file 过滤出文件域的元素

:hidden 过滤出隐藏域的元素

:textarea 过滤出多行文本框

三、事件

1、绑定: 元素.事件方法(function(){ });

2、解绑: 元素.undind(‘事件名’);

3、事件方法:click() blur() focus()...........

4、事件的合成: hover(函数1,函数2) 函数1指的是鼠标移上,函数2指的是鼠标移出;

5、事件切换:toggle(函数1,函数2,函数3.......) 点击一次执行函数1、点击二次执行函数2.........

6、事件触发:trigger(事件名);

7、事件委托:子元素的事件处理交给父级事件处理函数的机制作用,提高事件绑定的效率;

Live(‘事件名’,函数);

Delegate(‘子元素’,‘事件名’,‘函数’);

四、节点样式操作:css方法

1、css(属性名)获取指定css属性的值;

2、css(属性名,属性值)给某个css属性设置一个值;

3、css()给多个css属性设置一个值;

4、css(‘属性名’,函数)通过函数给css属性设置一个值;

五、节点属性操作:attr方法

1、attr(属性名)获取指定html属性的值;

2、attr(属性名,属性值)给某个html属性设置一个值;

3、attr()给多个html属性设置一个值;

4、attr(‘属性名’,函数)通过函数给html属性设置一个值;

六、文本操作

1、val() 获取表单元素的值

2、html() 获取非表单元素的内容

3、text() 获取非表单元素的内容 纯文本内容

七、动画操作

显示隐藏:show() hide() toggle()

淡入淡出:fadenIn() fadeOut() fadeToggle()

上滑下滑:slideUp() slideDown() slideToggle()

自定义动画:animate()

Animate(,毫秒数,回调函数)

回调函数:等前面执行完了再执行

八、节点增删改复

1、增

appendTo 把匹配的元素添加到指定元素内容的后面

prependTo 把匹配的元素添加到指定元素内容的前面

insertBore 把匹配的元素添加到指定元素的前面

insertAfter 把匹配的元素添加到指定元素的后面

2、删

Remove 删除匹配的元素(不会保留绑定事件和数据)

Empty 删除匹配的子元素

Detach 删除匹配的元素(会保留绑定事件和数据)

3、改

Replacewith 替换

4、复

Clone(ture|false) true 复制节点的同时复制绑定的函数,false仅复制节点

九、拓展:

Find()去父元素找一个子元素

以上就是个人整理出来的Jquery基础,供大家参考和学习。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20190128G19HME00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券