jQuery常用的API宝典

目录

一、jQuery选择器

1.1 基础选择器

1.2 层级选择器

1.3 筛选选择器 

1.4 jQuery 筛选方法（重点）

1.5 jQuery 里面的排他思想

1.6 隐式迭代

1.7 链式编程

二、jQuery 样式操作

2.1  操作css 方法

2.2  类样式方法

2.3  jQuery 效果

2.4  jQuery 属性操作

2.5  jQuery 内容文本值

2.6  jQuery 元素操作

2.7  jQuery 尺寸、位置操作

三、jQuery 事件

3.1  事件注册

3.2  事件处理

3.3  事件对象

3.4  拷贝对象

---

一、jQuery选择器

1.1 基础选择器

1.2 层级选择器

1.3 筛选选择器 

1.4 jQuery 筛选方法（重点）

1.5 jQuery 里面的排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

• $(this).css(“color”,”red”);
• $(this).siblings(). css(“color”,””);

1.6 隐式迭代

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

• $('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

1.7 链式编程

// 链式编程是为了节省代码量，看起来更优雅。

• $(this).css('color', 'red').sibling().css('color', ''); 

二、jQuery 样式操作

2.1  操作css 方法

1.参数只写属性名，则是返回属性值

• var strColor = $(this).css('color');

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

• $(this).css(''color'', ''red'');

3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号

• $(this).css({ "color":"white","font-size":"20px"});

2.2  类样式方法

1.添加类

• $("div").addClass("current");

2.删除类

• $("div").removeClass("current");

3.切换类

• $("div").toggleClass("current");

2.3  jQuery 效果

显示隐藏：show() / hide() / toggle() ;

划入画出：slideDown() / slideUp() / slideToggle() ;

淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

自定义动画：animate() ;

事件切换：hover([over,]out)；

动画队列及其停止排队方法：stop()；

2.4  jQuery 属性操作

1.设置或获取元素固有属性值

• prop(''属性'')；
• prop(''属性'', ''属性值'')；

2.设置或获取元素自定义属性值 

• attr(''属性'') // 类似原生 getAttribute()
• attr(''属性'', ''属性值'') // 类似原生 setAttribute()

3.数据缓存 

• data(''name'',''value'') // 向被选元素附加数据
• date(''name'') // 向被选元素获取数据
• data("index") //获取HTML5里面自定义属性datda-index，得到数字型  不用写data-

2.5  jQuery 内容文本值

1.元素的内容

• html() // 获取元素的内容
• html(''内容'') // 设置元素的内容
• text() // 获取元素的文本内容
• text(''文本内容'') // 设置元素的文本内容

2.表单的值

• val() // 获取表单的值
• val(''内容'') // 设置表单的值

2.6  jQuery 元素操作

1.返回指定祖先元素

• parent()；//最近一级父元素
• parents()；//所有的祖先
• parents("名字")；//指定名字的祖先

2.遍历元素

• $("div").each(function (index, domEle) { xxx; }）
• $.each(object，function (index, element) { xxx; }）

3.创建元素

• $(''<li></li>'');

4.添加元素

• 内部添加         

               element.append(''内容'')；    //把内容放入匹配元素内部最后面 

               element.prepend(''内容'') ； //把内容放入匹配元素内部最前面

•  外部添加

               element.after(''内容'')；     // 把内容放入目标元素后面

               element.before(''内容'')；  // 把内容放入目标元素前面

5.删除元素

• element.remove() // 删除匹配的元素（本身）
• element.empty() // 删除匹配的元素集合中所有的子节点
• element.html('''') // 清空匹配的元素内容

2.7  jQuery 尺寸、位置操作

1.尺寸(返回的是数字型)

• width()    // 获取设置元素 width和height大小
• innerWidth() / innerHeight()    // 获取设置元素 width和height + padding 大小 
• outerWidth()/outerHeight()      // 获取设置元素 width和height + padding + border 大小  
• outerWidth(true)/outerHeight(true)    //获取设置元素 width和height+padding+border+margin 大小

2.位置

• offset() 设置或获取元素偏移
• position() 获取元素偏移
• scrollTop() 设置或获取元素被卷去的头部
• scrollLeft() 设置或获取元素被卷去的左侧

三、jQuery 事件

3.1  事件注册

element.事件(function(){})

3.2  事件处理

1.on() 绑定事件

• element.on(events,[selector],fn)
•  on绑定事件 可以绑定一个或者多个
• on可以实现事件委托（委派）
• on可以给动态创建的元素绑定事件

2.off() 解绑事件

• element.off() // 解绑元素所有事件处理程序
• element.off( "click") // 解绑元素上面的点击事件
• $("ul").off("click", "li"); // 解绑事件委托
• one() 绑定事件，只触发一次

3.自动触发事件 trigger()

• element.click() // 第一种简写形式
• element.trigger("type") // 第二种自动触发模式
• element.triggerHandler(type) // 第三种自动触发模式

3.3  事件对象

element.on(events,[selector],function(event) {})
阻止默认行为：event.preventDefault() 或者 return false 
阻止冒泡： event.stopPropagation()

3.4  拷贝对象

$.extend([deep],target,object1,[objectN])
浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象，修改目标对象会影响被拷贝对象
深拷贝，前面加true，把里面的数据完全复制一份给目标对象，不冲突的属性，合并到一起，，修改目标对象不会影响被拷贝对象