jQuery(一)jQuery的认识和使用

jQuery(一)

一、jQuery介绍

1、js库

了解决一些通用的功能需求,把相关的方法封装在一个 js 文件中,我们称为 js 库

例如:fastClick;flexiable.js; zy.media.js; swiper.js…

2、js 框架

框架和库没有太明显的区别,只是框架的封装的功能更全更大

3、认识 jQuery

封装了一系列操作原生 dom 元素的功能库,比如获取元素,给元素做动画等

document.querySelector(‘div’) [不兼容] $(‘div’)

4、jQuery 的好处

(1) 轻量级,核心文件几十kb,不影响页面加载速度

(2) 跨浏览器兼容

(3) 链式编程和隐式迭代,大大提升了开发效率

(4) 对事件、样式、动画的支持,大大简化了 DOM 操作

(5) 丰富的插件生态圈,如树形菜单、轮播图、日期控件等

(6) 免费、开源

二、jQuery入口

1、下载jQuery

[国内CDN] https://www.bootcdn.cn/

[国外] https://jquery.com/download/

2、jQuery 中的页面加载完成事件

好处: 1、 操作元素的JS可以写在页面的任意位置
2、 提供了作用域, 入口函数中写的变量不会冲突

// $(document).ready(function() {
        //     $('div').hide();
        // })


$(function() {
      $('div').hide()
      console.log($);
    });

3、jQuery顶级对象

  • $ 符号是 jQuery 的别称,是同一个函数
  • $ 是 jq 中的顶级对象,它可以把原生 DOM 对象转成 jquery 对象, 从而使用 jquery 相关方法

4.DOM对象和jQuery对象

4.1 区别

  • 使用原生 WebApi 方法获取的元素就是 原生DOM 对象
  • 使用 $(参数) 方法获取的就是 jquery 对象, 本质上是把原生对象做了一层包装
    • $()获取到的所有jq对象都是伪数组,支持索引,支持遍历,不支持push
    • 只有 jquery 对象才能使用相关快捷地操作方法;原生 DOM 对象不可以
		$('div').hide();
        //div.hide()//直接报错
        div.style.display = 'none'

4.2 把单个 jq 对象转成原生的 DOM 对象:

jq对象[0] 或 jq对象.get(0)

		console.log($('li')[0]);
        console.log($('li')[2]);
        console.log($('li').get(1));

4.3 把原生的 DOM 对象转成 jq 对象:

$(dom对象)

 		 var div = document.querySelector('div');
        console.log($(div).hide()); //这里的div是变量,不用加引号

二、jQuery选择器

1、获取元素 $(‘选择器’)

 $(function() {
            // 1. 根据类名来获取元素
            console.log($('.box'));
            // 2. 根据 id 来获取元素
            console.log($('#foo'));
            // 3. 根据标签名来获取元素
            console.log($('ul'));
            // 4. 根据子代选择器获取元素
            console.log($('ul>li'));
            // 5. 根据后代选择器获取元素
            console.log($('ul .current'));
            // 6. 属性选择器  [属性=属性名]
            console.log($('[name=uname]'));
        })

2、隐式迭代

  • 原生 DOMAPI 操作方法:

    事件绑定、修改样式、修改属性都只能对单个元素进行操作

  • jquery 内部会循环遍历所有的 DOM 元素进行样式、属性、事件绑定等的操作

3、jQuery筛选选择器

**注意:**是放在 $(‘jq选择器’) 里进行使用

		// 1. 获取第一个子元素
        console.log($('span:first'));
        // 2. 获取最后一个子元素
        console.log($('span:last'));
        // 3. 获取第 index 个子元素 (jq 当中元素的索引 index 从 0 开始)
        console.log($('span:eq(1)'));
        // 4. 获取索引号为奇数 odd的元素
        console.log($('span:odd'));
        // 5. 获取索引号为偶数 even 的元素
        console.log($('span:even'));

4、jq事件绑定

jq对象.事件名称(function () {})

function中的this指向jq对象

注意:(1) jq对象 (2) 事件名称不加 on

jquery 的事件处理函数中不推荐使用 es6 中的箭头函数,原因:箭头函数会改变this指向,this 指向window

5、jq 获取元素的相关方法

        // 1. 获取父元素 
console.log($('ul').parent());
        // 2. 获取指定元素的祖先元素 
console.log($('ul').parents('.box'));
        // 3. 获取所有的子元素 
console.log($('ul').children());
        // 4. 查找获取所有的后代元素(包括子孙元素) 
console.log($('.box').find('.foo'));
        // 5. 获取所有的兄弟元素(不包括自己) 
console.log($('.bar').siblings());   console.log($('.bar').siblings('.foo')); //查找中类名为foo的兄弟元素

6、其他筛选方法

 // 1. 获取上一个元素 prev()
    console.log($('.foo').prev());
        // 2. 获取前面所有的元素
    console.log($('.foo').prevAll());
        // 3. 获取下一个元素 next()
    console.log($('.foo').next());
        // 4. 获取后面所有的元素
    console.log($('.foo').nextAll());
// 5. 判断某个元素是否包含某个特定的类名
  console.log($('.foo').hasClass('foo')); //true
 // 6. (重要) 获取第 n 个子元素 (元素索引 n 从 0 开始)
   console.log($('li').eq(2));

7、链式编程

// 链式编程是为了节省代码量,看起来更优雅。
$(this).css('color', 'red').sibling().css('color', ''); 

三、jQuery样式修改

1、css修改样式

  • 获取css(‘属性名’)
 console.log($('.box').css('width'));
  • 修改css属性:css(‘属性名’, ‘属性值’)
 $('.box').css('width', 300);
 $('.box').css('color', 'purple');

注意:(1) 属性名一定要加 引号

(2)数字型的属性值可以省略单位 px和引号

  • 修改 css 多个样式属性:css({

    ​ 属性名 1:‘属性值 1’,

    ​ 属性名 2:‘属性值 2’

    ​ })

2、class类修改样式

  • 添加类名 addClass()
  • 移除类名 removeClass()
  • 切换类名 toggleClass() 含义: 让类名从有到无,或从无到有
  • 判断是否有某个属性 hasClass()
$('.box').addClass('red');
$('.box').removeClass('red');
$('.box').toggleClass('red');

3、jQuery的显示和隐藏

  • 显示某个元素 show()
  • 隐藏某个元素 hide()
  • 切换显示和隐藏某个元素 toggle()

括号中:

​ (1) speed: 动画执行速度 ‘fast’ || ‘slow’ || ‘normal’ || 毫秒数 400

​ (2) easing: [默认]动画效果 swing(缓动效果) || linear(匀速效果)

​ (3) fn: 回调函数,动画结束后执行

4、js 动画效果

  • 下拉显示某个元素 slideDown()
  • 上拉隐藏某个元素 slideUp()
  • 切换上拉显示和下拉隐藏元素 slideToggle()
  • 鼠标经过和离开的切换事件 hover([overFn], [outFn])
  动画排队:多个动画同时调用会产生一个排队的效果, 会导致动画一直在触发
            解决方法: 使用 stop() 方法可以解决动画排队的问题, 每次只有一个动画在执行
$(function() {
   $('.nav>li').hover(function() {
  $(this).children('ul').stop().slideToggle()
            })
        })

注意:只写一个 function ,鼠标经过和鼠标离开都会调用这个处理函数

5、淡入、淡出动画

  • 缓慢显示某个元素(淡入, 显示元素) fadeIn()
  • 缓慢隐藏某个元素(淡出, 隐藏元素) fadeOut()
  • 切换淡入和淡出效果 fadeToggle()
$('button').eq(2).click(function() {
   $('.box').stop().fadeToggle(1000);
        });
  • 让元素过渡到指定的透明度 fadeTo(speed, opacity, [easing], [callback])
$('button').eq(3).click(function() {
      $('.box').stop().fadeTo('slow', .5);
        });

5、 自定义动画效果

  • 语法: animate(动画对象, [speed], [easing], [callback])
  • 参数:
(1) 动画对象: 指定要进行动画的css属性, 属性名必须遵循驼峰式命名, 属性值一般只支持数字型的
(3) speed: 动画的时长
(4) easing: 动画的速度曲线
(5) callback: 动画执行完成后的回调函数

	$('button').click(function() {
            $('.box').animate({
                width: 150,
                height: 150,
                left: 200,
                top: 100,
                borderRadius: '50%',
                fontSize: 50
            }, 700, function() {
                console.log('完成');
            })
        })
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页