https://www.jquery123.com/category/attributes/ 详细文档
http://hemin.cn/jq/ 使用提示

jquery是对js的高级封装，使得用户对js的操作更简单，更丰富和清晰，jquery的绝大多数api是围绕操作DOM来制定的，因此学习找到dom是我们的第一步操作。

什么是DOM？

DOM是Document Object Model（文档对象模型）的缩写。
DOM的基本组成是节点：
节点本身分为：元素节点，属性节点，文本节点
1.元素节点：每一个标签 element对象
2.属性节点：标签上的属性 attributes
3.文本节点：标签中的内容 innerText

元素：元素包含了以上全部节点的特点

元素与元素之间的关系：

父关系：parentElement，parentNode
子关系：childNodes，children，lastChild，lastElementChild，firstChild，firstElementChild
兄弟关系：nextSibling，nextElementSibling，previousSibling，previousElementSibling

打印DOM对象

let el = document.getElementsByTagName('div');
console.log([el[0]]);

DOM查询

首先是元素的查询：
原生js当中，将查询语法分为很多种，其中包括了：
通过id查找，class查找，标签查找，属性查找，
id查找：$('#id')
class查找：$('.class')
标签查找：$('')
在jquery中还添加类似css中的选择器：

image.png

DOM的筛选

在查找到class或者tag后，将有可能会找到多个元素,直接添加内容，默认会为所有元素添加内容，因此我们可以进行内容的筛选，比较常用的有：
eq

DOM创建

同样使用$符号，就可以创建一段html
$("<div><p>Hello</p></div>")

DOM节点的增删改查

文本/元素节点：

查询

查询元素：.html()
查询文本节点: .text()

修改

增加元素：.html(el)
增加文本节点：.text(text)

---

属性节点：

查询

attr(name|pro|key,val|fn)
prop(n|p|k,v|f)

删除

removeAttr(name)
removeProp(name)

DOM内容的增删改查

内部插入

append(content|fn)
appendTo(content)
prepend(content|fn)
prependTo(content)

外部插入

after(content|fn)
before(content|fn)
insertAfter(content)
insertBefore(content)

包裹

wrap(html|ele|fn)
unwrap()
wrapAll(html|ele)
wrapInner(html|ele|fn)

替换

replaceWith(content|fn)
replaceAll(selector)

删除

empty()
remove([expr]
detach([expr])

复制

clone([Even[,deepEven]])

事件

 .father {
            width: 500px;
            height: 500px;
            position: relative;
            background: red;
        }

        .son {
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 300px;
            height: 300px;
            background: burlywood;
        }

冒泡：点击子元素的事件会触发父元素的事件

image.png

阻止冒泡:

$('.son').on('click', function (event) {
            event.stopPropagation();
            alert(222)
        })

事件代理

通过冒泡机制和判断机制，能够为动态模块添加事件处理

<ul>
    <li>item 1
      <ul>
        <li>sub item 1-a</li>
        <li>sub item 1-b</li>
      </ul>
    </li>
    <li>item 2
      <ul>
        <li>sub item 2-a</li>
        <li>sub item 2-b</li>
      </ul> 
    </li>
  </ul>
  <script>function handler(event) {
    var $target = $(event.target);
    if( $target.is("li") ) {
      $target.children().toggle();
    }
  }
  $("ul").click(handler).find("ul").hide();
  </script>

事件对象

所有事件都有回调对象，event
event可以获取到触发事件的相关属性

ajax

基础用法

$('#save').on('click',function(){
            $.ajax({
                type:'GET',
                url:'http://localhost:8081/test',
                data:$('form:first').serializeArray(),
                success:function(res){
                  console.log(res)
                },error: function () {
                console.log('error')
                }
            })
        })

逻辑不够清晰，改良版

var ajax = $.ajax('data.json')
ajax.done(function () {
        console.log('success 1')
    })
    .fail(function () {
        console.log('error')
    })

最新的方法

var ajax = $.ajax('data.json')
ajax.then(function () {
        console.log('success 1')
    }, function () {
        console.log('error 1')
    })

回调地狱
假设有10个ajax互相依赖，并且每个ajax的执行都依赖上一个ajax怎么办？
使用jquery中的$.Deferred对象

　var task1 = function(){
                var $d = $.Deferred();
                setTimeout(function(){
                    console.log('t1');
                    $d.resolve();
                },1000);
                return $d.promise();
            }

            //2
            var task2 = function(){
                var $d = $.Deferred();
                setTimeout(function(){
                    console.log('t2');
                    $d.resolve();
                },1200);
                return $d.promise();
            }

            //3
            var task3 = function(){
                var $d = $.Deferred();
                setTimeout(function(){
                    console.log('t3');
                    $d.resolve();
                },1200);
                return $d.promise();
            }

            //4
            var task4 = function(){
                var $d = $.Deferred();
                setTimeout(function(){
                    console.log('t4');
                    $d.resolve();
                },1200);
                return $d.promise();
            }
task1().then(function(){
                return task2()
            }).then(function(){
                return task3()
            }).then(function(){
                return task4()
            }).then(function(){
                console.log('ok');
            })Ï