JQuery基础讲解

一、什么是jQuery？

jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.

二、基础核心内容

1.代码风格

（1）$(function() {}); 匿名函数的执行

（2）$("#div1") 选取元素

（3）$("#div1").css('color','red') 添加内联样式

（4）$ == jQuery js封装好的一个对象

2.加载模式

（1）window.onload

全部资源加载完毕

只能执行一次，会覆盖前面的的

不能简写

（2）$(document).ready(function() {});

DOM结构加载完毕

可执行多次

可简写$(function(){});

3.对象互换:这个互换多指JQuery对象与DOM对象互换

三、选择器

1.最核心 选择器引擎：继承了css的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择

2.使用

（1）id   #div1

（2）标签名   div

（3）class    div1

（4）后代选择器 

header  div

$("header div")等价于$("header").find("div")

（5）子代选择器    header>div       （IE6不支持）

$("header>div")  等价于$("header").children('p')

（6）第一个     ：first

（7）最后一个   ：last

（8）所有偶数   ：even

（9）所有奇数    ：odd

（10）根据下标进行选择    ：eq（n）

（11）根据属性进行选择   [title]

3.拓展：容错功能

很多情况下动态DOM生成会有问题

4.拓展：选择器复杂度

选择器越复杂，字符串解析越慢

四、属性

1.attr（'title'）   获取属性值

2.attr（'title','hahhaha'）    设置属性值

3.同时设置多个属性值

attr（{
   title:'enenen',
   style:'background-color:red;'
});

4.removeAttr（'title'）   移除属性值

5.addClass（'page'）   添加class值

6.removeClass（'page'）  移除class的值

7.toggleClass（'hah'）   添加或者移除class值

五、CSS

1.css（"color"）  获取样式值

2.css（'color','red'）    设置样式值

3.设置样式值

css（{
  'color': 'red',
  'font-size': '30px'
})

4.offset()   相对于窗口获取top和left值

5.position（）   相对于父级获取top和left值

6.scrollTop（）    获取滚动的值

7.scroll Top（300）   设置滚动的值

8.scrollLeft（）   获取滚动的值

9.scroll Left（200）   设置滚动的值

10.height（）  获取高度

11.width（）  获取宽度

12.innerHeight（）  获取高度+padding上下

13.innerWidth（）  获取宽度+padding左右

14.outerHeight（）   获取高度+padding上下+border上下

15.outerWidth（）   获取宽度+padding左右+border左右

六、筛选

1.first（） 第一个

2.last（）  最后一个

3.find（）  寻找子级  类似于后代选择器

4.eq（n）  第n个

5.not（x）  没有x描述的

6.filter（）  过滤

7.slice（）   剪裁

8.has（）  过滤  检索的是集合中DOM的后代

9.children（）   子级（不包含子级的后代）

10.parent（）  直接父级

11.parents（）  所有父级

12.parentUntil（x）   直到找到x描述的父级停止

13.offsetParent（）   第一个定位的父级

14.next（）  下一个

15.nextAll()  后边所有

16.nextUntil（x）  下一个到x描述前

17.prev（）   上一个

18.prevAll（）  前边所有

19.prevUntil（x）  上一个到x描述前  

20.siblings（）  匹配元素的所有兄弟元素

21.addBack（）  当前的再添加上一个

22end（） 返回上一个jq对象

七、DOM

1.div.html()  获取div的html内容

2.div.text()   获取div的文本内容   

3.inp.val()   获取inp的value值

4.$("<p></p>")    创建元素

5.div.append(p)   拼接元素：p放到div中

6.p.appendTo(div)   同上 拼接元素：把p拼接到div中

7.a.prepend(b)   插入到最前面    a是父级，b是子级

8.a.prependTo（b） 插入到最前面   a是子级，b是父级

9.a.after(b)  把b插入到a后面

10.a.before(b)  把b插入到a前面

11.a.insertAfter(b)   把a插入到b后面

12.a.insertBefore(b)   把a插入到b前面

13.a.replaceWith(b)   用b替换a元素

14.a.replaceAll(b)   用a替换b

15.a.remove()   删除a元素

16.a.empty()  清空a的子元素

八、事件

1.绑定单击事件

$('#div1').click(function() {

})

2.绑定鼠标移动事件

$('#div1').mousemove(function(){

});

3.绑定事件

$('#div1').on('click',function() {

});

可同时添加多个事件

$('#div1').on({
  a:fun1,
  b:fun2
  });

4.$('#div1').off();

删除事件

全部删除

如果删除某一个事件括号传入指定值

5.以下重点强调下

（1）mouseover mouseout 与mouseenter mouseleave

over与out会造成多次无效的触发，建议使用enter与leave

（2)符合方法

ready

hover（fn1，fn2）

(3)事件对象

<1>默认传参的e（这是个变量名，啥都可以，见名知意）

<2>pageX      ===clientX

<3>pageY    ===clientY

<4>target    点击元素

<5>currentTarget    绑定元素

<6>timeStamp     获取时间戳

<7>type   类型

6.JQ不支持滚轮事件，所以我们还是用JS来写

7.冒泡       e.stopPropagation()

8.默认    e.preventDefault()

9.return false    既阻止冒泡，也阻止默认

九、动画

1.简单动画

（1）show（）  显示

（2）hide（）  隐藏

（3）toggle()    显示或隐藏

（4）slideDown（）   向下展开

（5）slideUp（）  向上收起

（6）slideToggle（）  展开或收起

（7）fadeln（）   淡入

（8）fadeOut（）   淡出

（9）fadeTo（）  渐变到一定程度

（10）fadeToggle（）   淡入或淡出

（11）以上小括号可以传递两个参数1.时间2.回调函数   

<1>时间         毫秒

有默认的三个值 

 slow    600

normal   400

fast    200

2.任意动画

（1）原生jq动画不支持颜色

d.animate({
  left:'50px',
  top:'50px'
},2000}

（2）left ：”+=100px“     具有累加类减的功能

（3）同步动画  同时改变的

（4）队列动画

<1>回调

d.animatte({},fn() {})

<2>连缀

d.animate().animate().animate()

(5)动画控制

stop（）   暂停

delay（）  延迟

finish（）  结束