jQuery知识点

1、什么是jQuery

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

2、代码风格

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

3、jQuery选择器

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

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

1、    id                #div
2、    标签名             div
3、    class             .div
4、    后代选择器         header div  
5、    子代选择器         header>div
6、    第一个            :first
7、    最后一个          :last
8、    所有偶数          :even
9、    所有奇数          :odd
10、   根据下标进行选择   :eq(n)
11、   根据属性进行选择   [title]

4、jQuery属性

1、    attr('title')                            获取属性值
2、    attr('title', 'hahahha')                 设置属性值
3、    attr({
            title: 'enenen',
            style: 'background-color: red;'
       })                                       同时设置多个属性值
4、    removeAttr('title')                      移出属性值
5、    addClass('page')                         添加class值
6、    removeClass('page')                      移出class值
7、    toggleClass('haha')                      添加或者移出class值

5、jQuery 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(300)           设置滚动的值
10、   height()                  获取高度
11、   width()                   获取宽度
12、   innerHeight()             获取高度+padding上下
13、   innerWidth()              获取宽度+padding左右
14、   outerHeight()             获取高度+padding上下+border上下
15、   outerWidth()              获取宽度+padding左右+border左右

6、jQuery 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)     同上
7、    a.prepend(b)        插入到最前面  a是子级，b是父级
8、    a.after(b)          把b插入到a后面
9、    a.before(b)         把b插入到a前面
10、   a.insertAfter(b)    把a插入到b后面
11、   a.insertBefore(b)   把a插入到b前面
12、   a.replaceWith(b)    用b替换a元素
13、   a.replaceAll(b)     用a替换b
14、   a.remove()          删除a元素
15、   a.empty()           清空a的子元素