jQuery的用法

首先要知道JQ就是一个封装好的方法库，提供了各种常用的方法;JQ 提供的方法 我们不用考虑兼容性问题.

在之前都用原生的方法获取和操作DOM元素,今天学习一些常用的使用JQ来操作DOM元素的方法.

在jQuery中$和jQuery是一样的意思

JQ获取DOM元素  $("css选择器",上下文) 获取的结果 都是一个集合；

  let oDiv = document.querySelector('div');
  let oDiv2 = $('div');
  let $oDiv = $('#app');
  var $box2 = $('ul .box');
  var $ul = $('.ul_box');
  var $box3 = jQuery('.box',$ul);
  var $box4 = jQuery('.box:last-child',$ul);
  var $box5 = jQuery('.box:nth-child(2)',$ul);
  var $a = $('#app a');
  var $a = $('#app>a');
  var $a = $oDiv.children('a');// 获取子代中的a标签
  var $a = $oDiv.find('a');// 获取后代中的a标签
  var $lis = $('ul li');
  var $li = $lis.filter('[qqq=123]');// 从这些获取到的li中筛选出  有qqq属性的哪个元素
  console.log($li.prev())// 上一个元素标签
  console.log($li.next()) // 下一个元素标签
  console.log($li.prevAll()) // 上边所有的标签
  console.log($li.nextAll()) // 下边所有元素标签
  console.log($li.siblings())// 所有的兄弟
  console.log($li.parent()) // 父标签；
  console.log($li.index()) // 获取当前元素的索引

**通过$获取的元素 都是 JQ 对象JQ 对象转成原生对象 **

  // JQ 对象转成原生对象 通过 索引的方式
  // 原生对象转成JQ对象  $(原生DOM对象)
  $oDiv[0].style.color = 'red';
  $($oDiv[0]);
  
   var str  = `<h2>你好</h2>`;
   $oDiv.html(str); ///相当于 用str的内容 替换 $oDiv的原有结构；
   $oDiv.append(str); // div.appenChild(li)  把str对应的结构 塞到$oDiv的末尾

val

  var $inp = $('input');
  // val方法用于表单元素
  // $inp.val()  不传参数 就是获取input对应的内容
  //             传参数 就是设置input框的内容
  console.log($inp.val())
  $inp.val('66666');

attr和css

  //$().attr()  操作行内属性用的
  // 一个参数的时候 是获取对应属性名的属性值
  // 两个参数的时候 是设置对应属性
  // 若需要设置多个属性的时候 我们可以传递一个对象
  console.log($inp.attr('type'))
  console.log($inp.attr('class','qqq'))
  console.log($inp.attr({
    q:123,
    w:123,
    e:345
  }))
  $inp.attr('style','color:red');
  $inp.removeAttr('class');// 移除对应的行内属性；
  
  // JQ 操作css 有对应的css方法；
  $inp.css('color');// 一个参数的时候 是用来获取属性名对应的属性值的
  $inp.css('width',200);// 两个参数是设置；
  $inp.css({
    height:50,
    fontSize:20,
    paddingLeft:10
  })// 若传一个对象 就是批量设置

JQ 操作类名的方法

  console.log($inp.hasClass('www')); // 判断对应的元素有没有对应的类名 有就返回true; 没有就返回false;
  $inp.addClass('box box2 box2');// 添加类名
  $inp.removeClass('box2');// 移除相应的类名；
  $inp.toggleClass('qqq'); // 若元素有这个类名 就把这个类名删除； 若没有 就把这个类名加上

$().on(事件绑定,回调函数)

    $('button').on('click', function () {
    //如果是多个元素的话也不需要加for循环,JQ会自己给每一个绑定上
        $('body').toggleClass('bodyBox');
    });

ajax

    $.ajax({
        url: 'data.json', //接口就是 路径(地址)
        method: 'get',
        success: function (data) {
            //请求成功的回调函数
            console.log(data);
        }
    });
    
    
    $.get('data.json',//接口就是 路径(地址)
        function (params) {
            //请求成功的回调函数
            console.log(params);
        });
    
    
    $.post('data.json',//接口就是 路径(地址)
        function (data) {
            //请求成功的回调函数
            console.log(data);
        });