零基础一篇吃透（jQuery）

1.$. each(); 遍历数组，对象，对象数组中的数据

2.$.trim();去除对象两边(前后)的空格

3.$.type(obj);得到数据的类型

4.$.isArray(obj);判断是否是数组

5.$.isFunction(obj);判断是否是函数

6.$.parseJSON(obj);解析josn字符串转换为js对象/数组

四，jQuery属性和CSS

1 属性

1.attr();获取某个标签属性的值或者设置某个标签属性的值

2.removeAttr();删除某个标签属性

3.addClass();给某个标签添加class属性值或者设置某个标签class属性的值

4.removeClass();删除某个标签class属性的值

5.prop()和attr()相似，区别prop比较多用于Boolean类型的情况比如多选

6.html();获取某一个标签体内容(改标签体可以包含子标签)

7.text();获取某一个标签体内容(改标签体不能包含子标签)

8.val();获取用户输入框的值或设置输入框的值

2 CSS

2.1 css()设置标签的css样式

1.获取样式值: css("样式名")

2.设置单个样式: css("样式名","样式值")

3.设置多个样式: css({"样式名":"样式值","样式名":"样式值"})

2.2 位置

1.offset();相对整个大容器的位置

2.position();相对父容器的位置

3.scrpllTop();滚动条到顶部距离

2.3 尺寸

1.width();容器宽

2.heigth();容器高

3.innerWidth();width+padding

4.innerHeigth();heigth+padding

5.outerWidth();width+padding+border

6.outerHeigth(); heigth+padding+border

五，jQuery筛选

1 过滤

1.first();获取匹配的第一个元素

2.last();获取匹配的最后一个元素

3.eq(N);获取匹配的第N或-N个元素

4.filter(selector);筛选出于指定表达式匹配的元素集合

5.has(selector);筛选出包含特定特点的元素集合

6.not(selector);筛选出不包含特定特点的元素集合

2 查找

1.children();子标签中找

2.find(); 后代标签中的找

3.parent();父标签

4.prevAll();前面所有的兄弟标签

5.nexeAll();后面所有的兄弟标签

6.siblings();前后所有的兄弟标签

六，jQuery文档处理

1 增

内部插入

1.append();将内容添加到指定的内容后面

2.appendTo();和append();颠倒

3.prepend();将内容添加到指定的内容前面

4..prependTo();和prepend();颠倒

外部插入

1.after();在匹配元素之后插入内容

2.before();在匹配元素之前插入内容

2 删

1.empty();删除匹配的元素集合中所有字节点（不包含匹配的元素）

2.remove();删除匹配的元素集合中所有字节点（包含匹配的元素）

3 改

replaceWith();将所有匹配的元素替换成指定的内容

七，jQuery事件

1 加载DOM两种方式

1.1 window.onload方式:

执行时间:整个网页中所有内容（包括图片）加载完成后才会执行

编写个数：1个

1.2 jQuery方式：

执行时间：网页结构绘制完成后，执行

编写个数：多个

2 绑定事件的两种方式

1.元素.on("事件名",function(){})

2.元素.事件名(function(){})

3 合成事件/切换事件

1.hover();鼠标悬停合成事件(鼠标移上去第一个函数，鼠标移除第二个函数)

2.toggle();鼠标点击合成事件(鼠标点击奇数次第一个函数，鼠标点击偶数次第二个函数)

4 事件传播（事件冒泡）

1 传播:小-->中-->大

2 阻止传播：事件后面加上return false

5 事件坐标

1.offsetX;当前元素左上角

2.clientX;窗口左上角

3.pageX;网页左上角

6 移除事件

1.元素.unbind(事件名);

2.元素.off(事件名);

八，jQuery动画

1 基本

1.显示:show(Time)

2.隐藏:hide(Time)

3.切换:toggle(Time);

2 滑动

1.slideUp(Time);动画收缩(向上滑动) -->隐藏

2.slideDown(Time);动画展开(向下滑动)-->显示

3.slideToggle(Time);动画切换

3 淡入淡出（透明度）

1.fadein(Time);淡入（透明度减少，显示）

2.fadeout(Time);淡出（透明度增大，隐藏）

3.fadeToggle(Time);切换

4 自定义动画

1.元素.animate({属性，属性值}，Time)

2.缩放:设置(width-height)

3.移动:设置(top-left)

4.移动本元素距离:

width:'+=值'

width:'-=值'

heigth:'+=值'

heigth:'-=值'

top:'+=值'

top:'-=值'

left:'+=值'

left:'-=值'

JoneClassMate

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
零基础一篇吃透（jQuery）

目录一，jQuery是什么？为什么要学习？那些情况下用？该怎么用？1 jQuery是什么？(jQuery是javascript代码库，里面封装了很多常用的javascript方法(' 常用 ' != ' 全部 ')官方地址：http://jquery.com/2 为什么要学习？为了简化JavaScript开发：选择器，CSS，HTML事件处理，JS动画，浏览器兼容，丰富插件3 那些情况下用？中大型网站开发一些前端框架的基础，比如EasyUI4 该怎么用？下载jQ..
复制链接

扫一扫