jQuery学习

jQuery简介

优点

• 兼容性好
• API友好
• 功能强大、与时俱进（当版本升级时，会将语言的新特性添加进来）

API写法
jquery中只有两种API写法：

• $.方法()
• $(选择器).方法()

什么时候适用jQuery

• DOM操作较多
• 简单的Ajax请求
• 兼容多款浏览器

什么时候不适用jQuery

• 交互简单
• 流量苛刻（如移动端）
• 公司有了jQuery的替代方案

版本说明

• jQuery1.xx：兼容IE6、7、8，因此文件较大
• jQuery2.xx：不再兼容IE6、7、8，因此文件较小，且做了其他方面的优化

使用jquery

• 为了不让加载js文件时，阻塞其他文件的加载，因此，我们将script文件放在html的最后，但是在使用jQuery时，可以将我们的程序放在$(fn)内，这样js程序会在html文件（注意并不会等所有的文件包括css、图片等资源加载完成，仅仅只是html加载完成）加载完成后，再执行js； 而如果使用window.onload，会等待所有文件加载完成再执行，时机太晚

选择器注意

• 使用jquery方法获取的是jquery对象，jquery对象是jquery对原生js对象进行了一层封装，因此，对于jquery对象只能使用jquery的方法和属性；

  对于一个特定结果集，我们想获取到指定index的jQuery对象，可以使用eq方法
  $('div').eq(3); // 获取结果集中的第四个jQuery对象
$('div')[2]; // 这样获取的是js原生对象，通过[]进行转换了

jQuery常见用法

DOM操作

• var obj = $('<div>element</div>')： 创建一个元素
• $(node).append(ele)： 追加末端ele
• $(node).prepend()：在前面追加
• $(node).remove()：移除
• $(node).before()： 在前面插入
• $(node).after()： 在后面插入
• `$(node).html()：相当于innerHTML
• `$(node).text()：相当于innerText
• $(node).empty()： 移除内部所有元素

CSS操作

• $(node).val()： 获取或修改元素的value
• $(node).css()：获取或设置内部样式（不是计算后的样式）
• $(node).attr()：属性值操作
• $(node).addClass()：类操作
• $(node).removeClass()：移除类
• $(node).hasClass()：是否拥有类
• $(node).toggleClass()：切换类

jquey动画