jQuery基础知识（一）

　　虽然jQuery现在应用已少，但理解它，了解其源码对深入javascript有很大用处，下面来分别介绍。

　　一、基础知识

　　1. $对象

　　$它是jQuery最明显的标志，而使用$()包装的对象就是jQuery对象，与jQuery对象相对应的就是DOM对象，DOM对象其实就是DOM元素节点对象，这两者不能串着使用。如下：

window.onload = function () { };
$(document).ready(function () { });

　　二、Query中常用的方法

　　1. 获取DOM元素，可以通过jQuery选择器来进行选择$([selector],[context])。

　　选择器是jQuery的基础，它的写法和css的写法十分类似，但作用效果不一样。css选择器找到元素后添加样式，而jQuery选择器找到元素后添加行为，根据选择器类型快速获取需要的元素。

　　基础选择器：它是jQuery中最常用选择器，通过元素的id，class和标签名来查找DOM元素。有id选择器，类选择器，元素选择器，通配符选择器，群组选择器。

    <script src="jquery/dist/jquery.js"></script>
    <div id="center" class="box">测试</div>
    <span>群组</span>
    <script>
      $("#center").css("color", "red");
      $(".box").css("font-size", "50px");
      $("div").css("font-style", "italic");
      $("*").css('margin','0');
      $(".box,span").css('line-height','60px');

     /*  document.getElementById("center").style.color = "red"; */
    </script>

　　层级选择器：可以通过DOM元素的层级关系来获取特点的元素。

    <script src="jquery/dist/jquery.js"></script>
    <ul class="listOne">
      <li>1</li>
      <li>2</li>
    </ul>
    <ul class="listTwo">
      <li class="three">3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      //后代选择器：$('ancestor descendant')选择给定元素的所有后代元素，并返回集合元素
      $(".listOne li").css("background", "lightblue");
      //子元素选择器：$('parent > child')选择所有指定parent元素中指定的chlid的直接子元素，并返回集合元素
      $(".listTwo > .three").css("background", "lightpink");
      //兄弟选择器：$('prev ~ siblings')选择prev元素后的所有同级的siblings元素，并返回集合元素
      $(".three~li").css("background", "lightyellow");
      console.log($(".three~li").length); //2
      //兄弟选择器：$('prev+next')选择所有紧跟在prev元素后的next元素，并返回集合元素
      $(".three + li").css("color", "red");
      console.log($(".three + li").length); //1
    </script>

 　　jQuery对于传统的css中大部分选择器都支持，还支持一些自己独有的。如下：

　　:eq(index)：选择器选取索引为index的元素,返回集合元素

　　:lt(index)：选择器选取索引小于index的元素，返回集合元素

　　:gt(index)选择器选取索引大于index的元素，返回集合元素

    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    <span>span4</span>
    <script src="jquery/dist/jquery.min.js"></script>
    <script>
      $("span:eq(2)").css("background","pink");
      $("span:lt(2)").css("color", "orange");
      $("span:gt(2)").css("color", "green");
    </script>

　　节点之间的关系属性：用jQuery选择器获取的元素，我们一般设置变量名的时候以$开始。filter()，children()，find()，siblings()，prev()，prevAll()，next()，nextAll()等等。

    <ul>
      <span>jquery</span>
      <li>1</li>
      <ul class="box">
        <li>2</li>
        <li class="list">3</li>
      </ul>
      <ul>
        <li>4</li>
      </ul>
      <li>5</li>
    </ul>
    <script src="jquery/dist/jquery.js"></script>
    <script>
      let $box = $(".box");
      $box.children("li").css("color", "red"); //获取子元素
      $box.find(".list").css("color", "yellow");//获取对应的后代元素
      $("ul").filter(".box").css("background", "purple"); //同级筛选 在所有的ul中筛选出具有class为box样式类的ul 
      //children find filter 三大筛选方法
      $box.prevAll().css("color", "lightpink"); //获取所有的哥哥
      $box.prev("li").css("color", "lightblue"); //获取标签名为li的哥哥
      $box.nextAll().css("color", "orange"); //所有弟弟
      $box.next("li").css("color", "purple"); //获取标签名为li的弟弟
      $box.siblings().css("background", "lightyellow"); //获取所有的兄弟
      //还可以在设置选择器二次筛选
      console.log($box.index()); //2 获取索引
     $('.list').parent().css('background','lightgreen');//获取父元素
     $('.list').parents().css('background','lightblue');//获取所有的祖先元素，到document
    </script>

　　2. DOM的增删改

　　　　DOM增加：对于DOM元素的增加如果是原生js要用到createElement和appendElement方法，或者用到innerHTHML.而用jQuery一般可以直接用append方法。更加的简洁和方便。

   <ul class="list"><li>1</li></ul>
    <script src="jquery/dist/jquery.js"></script>
    <script>
      //原来增加DOM元素的方法
      //方法一：
      /*  
       //1.先创建
        let div = document.createElement('div');
        div.id='box';
        div.className="box";
        //2。再增加
        document.body.appendChild(div); 
        */
      //方法二：字符串拼接
      /* 
      //1.字符串
      let str = `<div id = "box" class = "box"></div>`;
      //2.增加
      document.body.innerHTML = str; //这个把body的 所有内容都换成了str了
      */
      //运用jQuery
      //1.先创建
      let str = `<div id = "box" class = "box">2</div>`;
      //2.再添加到末尾
      $('body').append(str);
      $('body').html(str);//等价于innerHTML
      $('body').html()//如果不传参，它代表的是获取body中的html内容
    </script>

　　也可以用到insertBefore或者是insertAfter这两个方法进行插入，使用这两个方法的时候要注意元素是否已经存在。

    <script>
      //已经有的元素
      $A.insertBefore($B); //把$A放到$B的前面 insertAfter放到后面。需要注意的是：$A$B都是页面中已经存在的元素
      //需要创建的元素
      $(`<div id ='box' class = 'box'>davina</div>`).insetBefore($A); //需要把新增加元素放到$A前面，需要把字符串用$()包起来，相当于创建了一个元素
      $A.appendTo($B); // $B.append($A) 在$B容器的末尾追加$A
      $A.prependTo($B); //$B.prependTo($A) 在$B容器的开头追加$A
    </script>

　　元素的克隆与删除。clone()，remove().

    <button>点我</button>
    <button class="remove">删除</button>
    <script src="jquery/dist/jquery.js"></script>
    <script>
      /*  
      $A.clone(); //实现元素的克隆
      $A.remove(); //实现元素的删除
     */
      //克隆一个一模一样的按钮
      $("button").click(function () {
        $(this).clone(true).insertAfter(this);
      });
      //删除克隆的那个按钮
      $("button").click(function () {
        $(this).remove(".remove");
      });
    </script>

　　3、操作表单和操作自定义属性。在操作自定义属性的时候要注意可以批量进行设置。

  <input type="text" class="input" value="" />
    <div class="box"></div>
    <script src="jquery/dist/jquery.js"></script>
    <script>
      /*  
      $inp.val(); //获取表单内容
      $inp.val("aaa"); //设置表单内容
      html和text方法是操作非表单元素内容的 
      */
      $inp = $(".input");
      $inp.val("aaa"); //设置表单内容
      console.log($inp.val()); //aaa] 获取表单内容
      $inp.prop("checked");

      $box = $(".box");
      $box.attr("data-type", "B");
      console.log($box.attr("data-type")); //B
      //也可以批量的设置
      $box.attr({
        sex: "male",
        age: 18,
      });
      //移除自定义属性
      $box.removeAttr("data-type");

      //表单元素操作内置或者是自定义属性一般用prop&removeProp
      $radio.prop("checked");
      $radio.prop("checked,true");
    </script>

　　4、操作css样式。css()，addClose()，removeClass()，hasClass()等等

//设置样式（两种方式：设置行内样式，通过className来进行）
$box.css("width", 200); //css方法是设置或者批量设置样式（原理是设置style行内样式） 
$box.addClass("active"); //设置样式类（原理是对className的操作）
//removeClass是移除 hasClass验证是否存在样式，toggleClass之前有就是移除，没有就是新增
$box.css("width"); //不设置值的时候就是获取（原理是getComputedStyle,所有经过计算的样式都是可以获取的
$box.offset(); //当前元素距离body左偏移和上偏移
$box.position(); //当前元素距离父参照物的偏移
// $box.innerWidth/.innerHeight/.outerWidth/.outerHeight()=>clientWidth/Height和offsetWidth/Height
$(document).scrollTop([val]); //可以获取或者设置scrollTop的信息，对应的方法.scrollTop

　　5、常用的事件处理方法

　　on：$元素.on([event type],[function])、off：$元素.off([event type],[function])、bind：$元素.bind()、unbind：$元素.unbind()、delgate：$元素.delegate()、click：$元素.click()等等。

　　bind()方法：为被选择的元素添加一个或者是多个事件处理程序且规定事件发生时运行的函数，它类似于原生javascript的addEventListener()方法。其语法如下：

　　$(selector).bind(event,[data],function)其中event表示添加一个或多个事件，data可选，传递到函数的值，function 运动函数。

    <button id="btn">按钮</button>
    <script src="jquery/dist/jquery.js"></script>
    <script>
        let $btn = $('#btn');

        /*
        $btn.bind('click', function () {
                    alert('day day up!');
                })
        */
        //也可以使用简化用法click()
        $btn.click(function () {
            alert('day day up!');
        })
    </script>

　　unbind()是bind()事件的对应事件，从元素上删除一个理函数。每个用bind()方法绑定的事件处理函数可以使用unbind()移除。若unbind()方法没有任何参数，可以删除元素上所有绑定的函数。

    <button id="btn">按钮</button>
    <button class="remove">删除</button>
    <script src="jquery/dist/jquery.js"></script>
    <script>
        let $btn = $('#btn'),
            $remove = $('.remove');
        $btn.bind({
            click:function(){
                alert(1);
            },
            mouseenter:function(){
               $btn.css("background","red");
            }
        });
        $remove.click(function(){
            $btn.unbind('mouseenter');
        })
    </script>

　　delegate()方法为所有匹配选择器的元素绑定一个或多个事件处理函数，基于指定元素的子集。

    <button id="btn">按钮</button>
    <script src="jquery/dist/jquery.js"></script>
    <script>
        let $body = $('body');
            $body.delegate('#btn', 'click', { name: 'davina' }, function (event) {
                alert(event.data.name);
            })
    </script>

　　on()方法可以看成是bind()方法和delegate()方法的升级版本，off()方法就是on()方法对应的解绑事件方法

    <button id="btn">按钮</button>
    <button class="remove">解绑</button>
    <script src="jquery/dist/jquery.js"></script>
    <script>
        let $btn = $('#btn'),
            $remove = $('.remove');
        $btn.on({
            'click': function () {
                alert('day day up!');
            },
            'mouseover': function () {
                $(this).css('background', 'lightblue');
            },
            'mouseout': function () {
                $(this).css('background', 'lightpink');
            }
        })
        $remove.on('click',function(){
            $btn.off();
        })
    </script>

　　6.jQuery还提供了许多其它的方法，常见和常用的有：$.ajax()，$each()，$extend()......

　　$.ajax(): ajax() 方法通过 HTTP 请求加载远程数据。$.ajax() 返回其创建的 XMLHttpRequest 对象。最简单的情况下，$.ajax() 可以不带任何参数直接使用。

$.ajax({
    url: 'json/product.json',//地址
    date: 'name=davina&age=20',//数据
    method: 'GET',//传输方式 get post 
    async: false,
    dataType: 'json',
    success: result => {
        //result：当请求成功执行success函数，result就是从服务器获取的结果
        _DATA = result;
    }
})

　　$each(): each()方法规定为每个匹配元素规定运行的函数。

    <script src="jquery/dist/jquery.js"></script>
    <script>
        /*
        $.each([数组，类数组，对象]，function(index,item){
      //遍历数组中的第一项：index 索引 item:当前循环这一项（对象：index是属性名 item属性值）
        })
        */
        let json = {
            url: 'json/product.json',
            date: 'name=davina&age=20',
            method: 'GET',
            async: false,
            dataType: 'json',
            success: result => {
                //result：当请求成功执行success函数，result就是从服务器获取的结果
                _DATA = result;
            }
        };
        $.each(json,function(index,item){
            console.log(index+item);
        })
    </script>

　　$extend(): 用于将一个或者多个对象的内容合并到目标对象。是在写插件的过程中常用的方法。

    <script src="jquery/dist/jquery.js"></script>
    <script>
        let obj1 = { name: 'list' },
            obj2 = { age: 18 };
        let newOptions = jQuery.extend(obj1, obj2);
        console.log(newOptions);
    </script>

　　还有很多很多其它的方法，详细的解释可以查看jQuery的API文档。