【web】IQ——jQuery

介绍

1. jQuery

2. 是一个javascript类库：

   通过封装原生的javascript函数从而得到一套完整的方法。

3. 以最少的代码实现更多的功能

4. 优势：

   • 像CSS操作那样操作DOM

   • 修改CSS方便简单

   • 简化JS代码操作

   • 事件处理更加容易

   • 各种动画效果

   • ajax更加完美

   • 大量插件 eg：日历

   • 量大的优势： 特别方便

5. 版本拓展：是否兼容IE678

   • 成本控制

   • 用户选择：高质量；低质量（创业初期可以考虑放弃）

   • 项目侧重点

   • 用户体验

   • 数据支持

   • 教育用户

   • 总而言之：视情况而定

基础核心

代码风格

1. $function(){}; 匿名函数的执行
2. $(“#div1”) 选取元素
3. $(“#div1”).css(‘color’,‘red’) 添加内联样式
4. $ == jQuery js封装好的一个对象

加载模式

1. window.onload

   • 全部资源加载完毕

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

   • 不能简写

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

   • DOM结构加载完毕

   • 可多次执行

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

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

选择器

最核心：选择引擎

​ 继承了css的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择。

使用

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]

拓展：

1. 容错功能：很多情况下动态DOM生成会有问题。

2. 选择器复杂度：选择器越复杂，字符串解析越慢。

属性

1. attr(‘title’)：获取属性值；

2. attr(‘title’,‘hahaha’)：设置属性值；

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. scrollTop(300)：设置滚动的值

8. scrollLeft()：获取滚动的值

9. scrollLeft(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()：当前的再添加上一个
22. end()：返回上一个jq对象

DOM

1. div.html()：获取div的html内容
2. div.text()：获取div的文本内容
3. inp.val()：获取inp的value的值
4. $(“
   ”)：创建元素
5. div.append§：拼接元素： 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的子元素

事件

绑定单击事件

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

绑定鼠标移入事件

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

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

1. 绑定事件

2. 可同时添加多个事件：

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

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

1. 删除事件

2. 全部删除

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

以下重点强调下

1. mouseover mouseout 与 mouseenter mouseleave

• over与out会造成多次无效的触发

• 建议使用enter与leave

2. 复合方法

   • ready

   • hover(fn1,fn2)

3. 事件对象

   • 默认传参的e (这个是变量名，啥都可以，见名知意)
   • pageX ===clientX
   • pageY ===clientY
   • traget：点击元素
   • currentTarget：绑定元素
   • timeStamp：获取时间戳
   • type：类型

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

5. 阻止冒泡：e.stopPropagation()

6. 阻止默认：preventDefault()

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

动画

简单动画

1. show()：显示
2. hide()：隐藏
3. toggle()：显示或隐藏
4. slideDown()：向下展开
5. slideUp()：向上收起
6. slideToggle：展开或收起
7. fadeln()：淡入
8. fadeOut()：淡出
9. fadeTo()：渐变到一定程度
10. fadeToggle()：淡入或淡出
11. 以上小括号可以传递两个参数 1. 事件 2. 回调函数 时间
    • 毫秒
    • 有默认的三个值：show、normal、fast

任意动画

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

​ 原生jq动画，不支持颜色

2. 具有累加累减的功能：left: “+=100px”

3. 同步动画：同时改变的

4. 列队动画

   • 回调：d.animate({},fn(){})
   • 连缀：d.animate().animate().animate()

5. 动画控制：

   • stop()：暂停
   • delay()：延迟
   • finish()：结束

jquery动画拓展库jQuery.easing