jQuery的常见选择器和筛选器

关于jQuery是前端方法库
特点：
1 优质的选择器和筛选方法
2 好用的饮食迭代
3 强大的链式编程
jQuery向外暴露两个变量：jQuery和$ (jQuery === $)

选择器

//  jQuery选择器 $(选择器) 返回元素集合
  // id选择器
  console.log($('#li3')); // jQuery.fn.init(1)
  // 类选择器
  console.log($('.c1'));
  // 标签选择器
  console.log($('li'));
  // 特殊选择器
    // 第一个元素
    console.log($('li:first'));
    // 最后一个元素
    console.log($('li:last'));
    // 获取第4个元素(索引是3)
    console.log($('li:eq(3)'));
    // 索引奇数个
    console.log($('li:odd'));

筛选器

对选择器元素进行二次筛选

jQuery筛选器
  // .first() 第一个
  console.log($('li').first());
  // .last() 最后一个
  console.log($('li').last());
  // eq(n) 选择第n个
  console.log($('li').eq(3));
  // next()
  console.log($('#li3').next());
  // prev()
  console.log($('#li3').prev());
  // prevALl() 上面所有
  console.log($('#li3').prevAll());
  // nextALl() 下面所有
  console.log($('#li3').nextAll());
  // parent()父元素
  console.log($('#li3').parent());
  // parents()上级所有元素
  console.log($('#li3').parents());
  // find('.c1') 在所有后代元素中查找类名未c1的元素
  console.log($('ul').find('.c1'));
  // siblings() 查找所有的兄弟元素
  console.log($('.c1').siblings());
  // index() 获取元素的索引
  console.log($('.c1').index());

属性操作

attr() 和 removeAttr() 可操作自定义和原生属性

// 1 获取 第4个li的id属性
  console.log($('li').eq(3).attr('id')); // li3
  console.log($('li').eq(3).attr('index')); // 3
  // 2 设置 属性名和属性值
  $('li').eq(1).attr('id','c1')
  // 3 删除元素属性
  $('li').eq(1).removeAttr('id')

prop()和removeProp()

  // 1 可获取原生属性，不可获取通过attr设置的属性，和自定义属性
  console.log($('li').eq(3).prop('id')); // li3
  console.log($('li').eq(3).prop('index')); // undefined
  // 2 设置属性，可设置原生和自定义属性，自定义属性不在标签中展示，存储在对象属性中
  $('li').eq(3).prop('id','2333') //element结构中可查看
  $('li').eq(3).prop('data-id','2444') // 可获取
  console.log($('li').eq(3).prop('data-id'));//2444 可获取
  // 3 removeProp()不能删除原生属性和标签自带的属性，能删除props设置的属性
  $('li').eq(3).removeProp('id') //原生id属性删除失败
  $('li').eq(3).removeProp('index') //自带的index属性删除失败
  $('li').eq(3).removeProp('data-id')
  console.log($('li').eq(3).prop('data-id')) // undefined 删除prop成功

类名操作

 类名操作
  // 1 添加类名 addClass(类名)
  $('div').addClass('cls3')
  // 2 判断类名是否存在
  console.log($('div').hasClass('cls3')); // true
  // 3 移除类名
  $('div').removeClass('cls2')
  // 4 类名切换，toggleClass() 类名存在则移除，不存在则添加
  setInterval(function(){
    $('div').toggleClass('cls2')
  },1000)

文本操作

// 元素文本操作
  // 1 获取元素的`超文本内容`
  console.log($('div').html()); //     <p>我是p元素</p>
  // 2 设置超文本内容
  $('div').html('233')
  $('div').html('<span>haha</span>')
  // 3 设置获取元素文本内容 text()
  console.log($('div').text()); // 我是p元素
  $('div').text('我是text') //设置文本内容
  // 4 获取表单标签的内容 val()
  // console.log($('input').val()); //名字
  $('input').val('年龄')

元素样式操作

// 元素样式操作
  // 1 获取元素样式
  console.log($('div').css('background-color')); // rgb(255, 192, 203)
  // 2 设置样式 css(样式名，样式值)
  $('div').css('border','10px solid skyblue')
  // 3 css(对象) 批量设置样式
  $('div').css({
    border:'5px dashed blue',
    // 'border-radius':'50%', //或者下面这种写法
    borderRadius:'50%'
  })

事件绑定

  // 1 on(s事件类型，函数处理)
      $('#box1').on('click',function(){
        console.log('box1');
      })
      $('#box2').on('click',function(){
        console.log('box2');
        return false; // 目的是阻止事件冒泡 
      })
      $('a').on('click',function(){
        console.log('点击链接事件');
        return false; //阻止链接默认转跳
      })
  // 2 on(事件类型，委托元素，处理函数)//从box2委托过来的click事件才能处理，直接点击box1不做处理
      $('#box1').on('click','#box2',function(){
        console.log('box2的点击事件委托给box1');
      })
  // 3 on(事件类型，数据，处理函数)
      $('#box1').on('click',100,e => {
        console.log(e.data);
      })
  // 4 one()事件绑定，传参和on()一样，只是one只触发一次
  // 5 off(事件类型) 取消事件类型的所有处理函数
    // off(事件类型，事件处理函数)
    function f1(){
      console.log('box1');
    }
    function f2(){
      console.log('box2');
      return false; // 目的是阻止事件冒泡 
    }
    $('#box1').on('click',f1)
    $('#box2').on('click',f2)
    $('#box1').off('click')
  // 6 trigger(事件类型) 自动触发事件
    $('#box1').on('click', ()=>{
      console.log('box1');
    })
    setInterval(() => {
      $('#box1').trigger('click')
    },2000)

页面加载

// 1 页面加载事件,可绑定多次；页面加载完毕后就触发
  $(window).ready(function(){
    console.log('load');
  })
  // 页面加载事件简写
  $(function(){
    console.log(66);
  })
  // 2 特殊事件，hover(移入处理，移出处理)
  $('div').hover(function(){
    // 移入处理
    console.log('移入');
  },function(){
    // 移出处理
    console.log('移出');
  })

隐式迭代
获取到的元素集合，调用jQuery方法，默认遍历集合，给每一个元素都添加方法

// 隐式迭代:
  // 获取所有div元素并绑定事件
  $('div').on('click',function(){
    console.log(this); //this是原生DOM对象（类似<div>haha</div>）
  })

绑定jq中的方法：原生DOM转为jq集合

$('div').on('click',function(){
    console.log(this);
    // this.css('border','10px solid green') //  this.css is not a function因为只有jQ的集合才能调用jq方法其他不可
    // 解决办法：原生DOM转为jq集合 ====> $(原生DOM对象)
    $(this).css('border','10px solid green')
  })

jq对象转为原生DOM

// jq对象转为原生DOM
  console.log($('div').eq(0)); // jq集合对象
  console.log($('div').eq(0)[0]); // 原生DOM对象

链式编程
只有前面的方法返回的是jq集合才可继续链式编程

// 链式编程
  $('div').css('width','400px')
  console.log($('div').css('width','400px'));//jq集合调用方法后返回的还是jq集合
  // 链式编程:只有前面的方法返回的是jq集合才可继续链式编程
  $('div').css('width','400px').click(()=>{
    console.log('点击');
  }).height(400)

元素操作
创建元素

// 1 创建标签元素
  let p = $('<p>我是p元素</p>')
  console.log(p);

1 添加元素（父子关系）

// jQuery元素操作
  
  // （父子关系）
  // 2 将元素B添加到元素A末尾
  $('.d1').append(p)
  // 3 将元素B添加到元素A最前面
  $('.d1').prepend(p)
  // 4 将元素A添加到元素B内部的最后面
  p.appendTo($('.d1'))
  // 4 将元素A添加到元素B内部的最后面
  p.prependTo($('.d1'))

2 添加元素（兄弟关系）

// (兄弟关系)
  // 5 将元素B添加到元素A后面  A.after(B)
  $('.d1').after(p)
  // 6 将元素B添加到元素A前面  A.before(B)
  $('.d1').before(p)
  // 7 将元素B添加到元素A后面  B.insertAfter(A)
  p.insertAfter($('.d1'))
  // 8 将元素B添加到元素A前面   B.insertBefore(A)
  p.insertBefore($('.d1'))

3 替换

  // (替换)
  // A.replaceWith(B) 元素B将元素A替换
  $('span').replaceWith(p)
  p.replaceAll($('span'))

4 删除

  // 删除元素
  // 1 A.empty() 将元素A中所有后代子节点清除
  $('.d1').empty()
  // 2 A.empty() 将元素自己移除
  $('span').remove()

5 克隆

  // 克隆元素 A.clone() 返回克隆的元素A
  // 参数1：是否克隆元素A的事件，默认false，不克隆
  // 参数2：子元素是否克隆自身事件，默认跟随参数1
  $('.d1').click(function(){
    $(this).css('background-color','pink')
  })
  let d2 = $('.d1').clone() //d2没有继承事件
  let d2 = $('.d1').clone(true) //d2继承事件
  $('body').append(d2)

元素尺寸

// 元素的尺寸
  // 1 获取元素宽高width() 和 height() 是内容宽高，不包括padding和border、margin
  console.log($('div').width()); // 200
  console.log($('div').height());
  // $('div').height(400) // 设置

  // 2 innerWidth() 和 innerHeight() 获取元素内容宽高+padding，不包括border和margin
  console.log($('div').innerWidth()); // 220
  console.log($('div').innerHeight()); // 220
  // $('div').innerHeight(300)

  // 3 outerWidth() 和 outerHeight() //获取元素宽高
  // 参数为false或者不传，（内容+padding+border）
  // 参数为true，（内容+padding+border+margin）
  console.log($('div').outerWidth()); // 230
  console.log($('div').outerHeight()); // 230
  console.log($('div').outerWidth(true)); // 270
  console.log($('div').outerHeight(true)); // 250
  // $('div').outerWidth(600) // 设置

元素的位置

// 元素的位置
  // 1 offset() 获取元素相对于页面的定位
  console.log($('.d1').offset()); // {top: 20, left: 48}
  console.log($('.d2').offset()); // {top: 40, left: 50}
  // offset({}) 设置元素位置,相对页面
  $('.d2').offset({
    top:10,
    left:10
  })

  // 2 相对于父元素的定位
  console.log($('.d2').position()); // {top: 20, left: 10}

jq中的动画
1 基本动画

// 1 基本动画，显示、隐藏
  // show()
  // 参数1：时间 非必填
  // 参数2：运动曲线 swing linear 非必填
  // 参数3：动画结束后执行的函数、 非必填
  $('button').click(()=>{
    $('div').show(1000,'linear',function(){ // 显示div
      console.log(this);
    })
  })
  // hide() 隐藏
  $('button').click(()=>{
    $('div').hide(1000,'linear',() => {
      console.log(this);
    })
  })
  // toggle() 元素显示隐藏的切换 参数和show一样
  $('button').click(() => {
    $('div').toggle(1000) // 显示和隐藏的切换
  })

2 折叠动画

// 2 折叠动画 （下拉显示 收起隐藏）
  // slideDown() 效果：显示下拉动画 参数和show方法一样,
  $('button').click(()=>{
    $('div').slideDown(1000,()=>{
      console.log(123);
    })
  })
  // slideUp() 效果：收起隐藏 参数和show方法一样
  $('button').click(()=>{
    $('div').slideUp(1000)
  })
  // slideToggle() 效果：点击button，切换div显示和隐藏状态，
  $('button').click(()=>{
    $('div').slideToggle(1000)
  })

3 淡入淡出的动画

  // 3 淡入淡出的效果
  // fadeIn() 淡入 （透明度从0-1） 参数和show一样
  $('button').click(()=>{
    $('div').fadeIn()
  })
  // fadeOut() 淡出 （透明度从1-0） 参数和show一样
  $('button').click(()=>{
    $('div').fadeOut()
  })
  // fadeTo()  参数1:时间； 参数2：指定透明度； 参数3：swing或者linear；参数4：结束后处理函数
  $('button').click(()=>{
    $('div').fadeTo(1000,0.3)
  })
  // fadeToggle()  效果：淡入淡出的切换效果，参数和show一样
  $('button').click(()=>{
    $('div').fadeToggle(1000)
  })

自定义动画

  // jq自定义动画
  // animate(运动目标效果对象{样式}，时间，运动曲线，运动结束后的执行函数)
  // 不可改变颜色
  $('.start').click(() => {
    $('div').animate({
      top:100,
      left:200,
      width:200,
      height:200,
      borderRadius:'50%',
      backgroundColor:'pink' //没有效果
    },500,'linear',function(){
      console.log(this);
    })
  })
  // stop() 暂停动画
  // finished() 停止动画,直接到目标效果
  $('.stop').click(function(){
    $('div').stop()
  })

jq-ajax-get-post请求

// jq中ajax请求-post-get
// $.get(agr) $.post(agr)
// 参数1:请求地址 必填
// 参数2:需要携带的数据,对象或查询字符串 选填
// 参数3:回调函数 选填
// 参数4:返回的数据格式,取值json xml text 默认是text 选填
$('button').click(function(){
  $.get('http://localhost:8888/test/first',function(res){
    console.log(res);
  })
})
$('button').click(function(){
  $.get('http://localhost:8888/test/third',{name:'kelly',age:18},function(res){
    console.log(res);
  },'json')
})
// post请求
$('button').click(function(){
  $.post('http://localhost:8888/test/fourth',{name:'kelly',age:18},function(res){
    console.log(res);
  },'json')
})

jQuery的综合ajax请求

// jQuery的综合ajax请求
// 语法:$.ajax(参数)
// 参数是一个对象,对象中的数据都是此次请求的配置
// url
// data 查询字符串或对象
// type 请求方式 默认get 
// dataType 期望返回的数据格式
// async 默认true
// error 请求失败的回调
// success 请求成功的回调
// timeout 请求超时设置的时间
// context 设置回调函数中this指向 默认this指向ajax
// status {} 状态回调码
$('button').click(function(){
  $.ajax({
    url:'http://localhost:8888/test/fourth',
    type:'post',
    data:'name=kelly&age=18',
    // timeout:1,//模拟请求超时 请求需要在1毫秒内完成,否则报错
    success(res){
      // console.log(res);
      // console.log(this); // 未设置context时,this指向ajax对象;否则指向context对象
    },
    error(xhr,error){
      console.log('请求失败');
      console.log(xhr);
      console.log(error);
    },
    // context:{name:'kelly',age:18}
  })
})

多库共存

// 多库共存
// 引入的jqJS文件,有两个变量暴露在外面,分别是$ 和 jQuery
// 若引入的js文件,除了jQuery外,还有别的方法库也暴露了$ 和 jQuery的话,会产生变量冲突
// jQuery可将$符的控制权交出
console.log($); // ƒ ( selector, context ) 
jQuery.noConflict();
console.log($); // undefined

// jQuery可将jQuery符的控制权交出
console.log(jQuery); // ƒ ( selector, context ) {
jQuery.noConflict(true)
console.log(jQuery); //undefined

// jQuery和$的控制权交给jq
let jq = jQuery.noConflict(true)
console.log(jQuery); //undefined
console.log($); //undefined
console.log(jq); // ƒ ( selector, context ) {

插件扩展

// 插件扩展
// jq中有一些方法是没有的
// 比如
let max =  Math.max(1,5,9);
console.log(max); //9
// 通过$.extend(参数)  给$和jQuery添加方法
// 参数就是一个对象,对象中的方法就是扩展 给$和jQuery使用的函数
// 将getMax方法扩展给$
$.extend({
  getMax(...arg){
     return Math.max(...arg)
  }
})
console.log($.getMax(1,2,8,4,5,6)); // 8


// 给$的元素集合添加方法 $.fn.extend(参数)
// 参数也是对象,对象中的方法就是元素集合的对象
// 给jq的元素集合(input)添加一个全选方法
// 如果想调用完自定义的扩展方法后可以继续进行链式编程,需要在自定义的方法中返回jq元素集合
$.fn.extend({
  fx(){
    // console.log(this);
    return this.each((i,value) => {
      if($(value).prop('checked')){
        $(value).prop('checked',false)
      }else{
        $(value).prop('checked',true)
      }
    })
  }
})
$('button').click(function(){
  $('input').fx().css({width:20,height:20})
})

// each() 遍历jq的元素集合
$('input').each((index,item) => {
  console.log(index,item);
})