JQuery学习-2020.9.14

获取CSS

1. 获取样式

$(function(){
//css()方法：设置/获取样式

//1.获取样式：css()方法设置参数为要获取值的样式名.
$('#getBtn').click(function(){
    //1.1 获取id为div1这个元素的样式.
    console.log($('#div1').css('width'));
    console.log($('#div1').css('border'));
    //在IE浏览器中，要获取边框这样的样式值，一定要记得给一个准确的边框.
    console.log($('#div1').css('border-top-border'));
    
    //1.2获取标签为div的元素们的样式
    //获取包含了多个dom元素的JQuery对象的样式，只能获取到第一个dom对象的样式.
     console.log($('#div').css('border-top-border'));
});
   //2.设置样式:css(样式名。样式值）;
   $('#SetBtn').click(function(){
      //2.1给id为div1的这个元素设置样式.
      //设置单样式
      $('#div1').css('width','300px');
      $('#div1').css('height',300);
      //设置多样式
       $('#div1').css({
         width:300,
         'heigth':'300px',
         'backgroud-color':'green',
         'border-top-width':'10px solid pink'
       });
       //2.2 给标签为div的元素们设置样式.
        $('div').css({
         width:300,
         'heigth':'300px',
         'backgroud-color':'green'
         'border-top-width':'10px'
         marginTop:10.
       });
});      
});

jquery选择器
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。
注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。(查看jQuery文)
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

总结：跟css的选择器用法一模一样

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

总结：跟css的选择器用法一模一样

过滤选择器

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

总结：这类选择器都带冒号

·筛选选择器(方法)

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
mouseover 事件在鼠标移动到选取的元素及其子元素上时触发。
mouseenter 事件旨在鼠标移动到选取的元素上时触发。
以后如果有鼠标移入事件，请使用mouseenter，而不是mouseover，离开用mouseleave，而不使用mouseout

Class类操作

    //1.1添加一个类
    $('li').addClass('now');
    //1.2添加多个类
    $('li').addClass('now past');
    //2.1删除一个类
    $('li').removeClass('now');
    //2.2移除多个类
    $('li').removeClass('now past');
    //3.3移除所有类
    $('li').removeClass();
    //3.切换一个类  有就删除没有就添加
    $('li').toggleClass('now');
    //4.匹配一个类  判断是否包含某个类  如果包含返回true否知返回false
    $('li').hasClass('now');

动画

 /*注意：动画的本质是改变容器的大小和透明度*/
//1.显示 show（）
//参数1：代表执行动画的时长 毫秒数,也可以代表时长的字符串 fast 200 normal 400 slow 600
//参数2：代表动画执行完毕后的回调函数
$('#show').click(function(){
  //给id为div1的元素动画显示。
  //1.1如果show()这个方法没有参数，那就没有动画效果
  //1.2如果想要动画效果，就应该给他参数
  $('#div1').show(2000);
  $('#div1').show(fast);//200毫秒
  //如果代表时长的单词写错了就相当于写了一个normal
  //1.3回调函数
  $('#div1').show(2000,function(){
   alert('动画执行完毕了...'); 
   });
 //2.隐藏
 $('#hide').click(function(){
  $('#div1').hide(2000);
  $('#div1').hide(2000,function(){
   alert('动画隐藏完毕了...'); 
   });
 //3.切换展示和隐藏
 $('#toggle').click(function(){
  $('#div1').toggle(2000);
   });
 });
 //4.滑入 slideDown(参数1，参数2)；
 //参数1：动画执行的时长
 //参数2：动画执行完毕后的回调函数
 $('#slideDown').click(function(){
  $('#div1').slideDown();//不给参数有默认时长
   });
 });
 //5.滑出 slideUp(参数1，参数2);
 $('#slideUp').click(function(){
  $('#div1').slideUp();//不给参数有默认时长
   });
 });
 //6.切换 slideToggle(参数1，参数2);
 $('#slideToggle').click(function(){
  $('#div1').slideToggle();//不给参数有默认时长
   });
 });
 //7.淡入
 $('#fadeIn').click(function(){
  $('#div1').fadeIn();//不给参数有默认时长
   });
 });
 //8.淡出
 $('#fadeOut').click(function(){
  $('#div1').fadeOut();//不给参数有默认时长
   });
 });
 //9.切换
 $('#fadeToggle').click(function(){
  $('#div1').fadeToggle();//不给参数有默认时长
   });
 });
 //10.淡入到哪里
 $('#fadeTo').click(function(){
  $('#div1').fadeTo(1000,0.5);//不给参数有默认时长
   });
 });
 //11.自定义动画
    
    //参数1：需要做动画的属性
    //参数2：需要执行动画的总时长
    //参数3：执行动画的时候的速度
    //参数4：执行动画完成之后的回调函数
    
    $('#div1').animate({left:800},5000);
    $('#div1').animate({left:800},5000,'linear');
    $('#div1').animate({left:800},5000,'swing',function () {
        console.log('动画执行完成');
    });
 //12.动画队列
  /*jQuery中有个动画队列的机制。
  当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，
  等前面的动画完成后再开始执行。
  可是用户的操作往往都比动画快，
  如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，影响到效果。*/
    //1.停止当前动画  如果动画队列当中还有动画立即执行
    //$('div').stop();
    //2.和stop()效果一致  说明这是默认设置
    //$('div').stop(false,false);
    //3.停止当前动画  清除动画队列
    //$('div').stop(true,false);
    //4.停止当前动画并且到结束位置  清除了动画队列
    //$('div').stop(true,true);
    //5.停止当前动画并且到结束位置  如果动画队列当中还有动画立即执行
    $('div').stop(false,true);

节点操作

//1.创建节点
//1.1html()
//获取到元素的所有内容
console.log($('#div1').html());
//设置内容，会把原来的内容覆盖，如果设置的内容中包含了标签，会把标签解析出来的
$('#div1').html('我是设置的内容<a href="http://www.baidu.com">百度一下</a>');
//2.$()
 var $a = $('<a href="http://www.baidu.com" target="_blank">百度一下</a>');
//3.追加节点
 $('#div1')append($a);
     /*追加自身的最后面  传对象和html格式代码*/
    $('#box').append('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>');
    $('#box').append($('a'));
    /*追加到目标元素最后面  传目标元素的选择器或者对象*/
    $('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>').appendTo($('#box'));
    $('a').appendTo('#box');
    
    prepend();//作为第一个子元素添加
    prependTo();
    after();//元素A.after(元素B);把元素B插入到A后面，作为兄弟元素添加
    before();//元素A.before(元素B);把元素B插入到A前面，作为兄弟元素添加
//4.移除节点
    //4.1.清空ul1里面的元素
    $('#ul1').empty();
    //4.2.删除某个元素
    $('#box').remove();//“自杀”
//5.克隆节点
    0//如果想克隆事件  false  true克隆事件
    var $cloneP = $('p').clone(true);