2.JQuery第二天

简介: 2.JQuery第二天

JQuery第二天


1.学习目标

Jquery学了哪些东西? 
  1.找标签
    $('div')
    $(window)
  2.加事件
    .click()
    .mouseover()
    .mouseout()
  3.修改: 样式,内容,属性
    修改样式: .css()  单值: 传两个值,  多值: 传一个对象
    修改内容: .html()  .text()  .val()
    修改属性: .attr()  .prop() 用来设置特殊的属性值, checked selected (值为布尔类型)
  4.加动画(属性变化加时间)
    常规动画: 显示隐藏, 上拉下拉, 淡入淡出
    自定义动画: 传入变化的属性+时间
  5.节点操作
    增加,删除,修改内容


2.知识讲解


1.加动画


//显示隐藏
show()
hide()
toggle()
//上拉下拉
slideDown()
slideUp()
slideToggle()
//淡入淡出
fadeIn()
fadeOut()
fadeTo()
fadeToggle()
//自定义动画(需要加定位)
animate({},时间)  //注意参数写法很多,都带引号总没错 ,注意,只能修改数值类型的,颜色不能. 
stop()      停止动画(所有的动画之前都加一个stop,避免动画重复执行,显示隐藏动画除外.)
delay()     延迟动画

2.位置大小操作

//获取left值和top值, 相对于视口(浏览器)的距离
标签.offset().left
标签.offset().top
//获取滚动距离 ----滚动事件 scroll()
标签.scrollTop()
标签.scrollLeft()
//获取宽高
标签.width()
标签.height()

3.节点操作

empty()  清空(只清空内容)
remove()  移除(标签和内容一起移除)
clone()   克隆(复制节点)
after()  标签之后插入
before() 标签之前插入
prepend()  前面追加(第一个子元素)
append()  标签内最后追加内容(最后一个子元素)-----如果追加的元素在原文档树中存在,会移除之前的.
appendTo() 将某个标签添加到父标签中

4.事件监听和绑定

on()  off()
可以一次添加多个事件
标签.on(事件类型,回调函数); 可以添加多个事件
$('.box').on('click',function(){});
//添加单击和鼠标移入事件
$('button').eq(0).click(function() {
    $('.box').on('click mouseover', function() {
        console.log('鼠标点击和移入');
    })
})
//移除单击事件
$('button').eq(1).click(function() {
    $('.box').off('click');
})

5.each方法

each() 方法也叫迭代,简单点就是循环。
注意: Jquery中有隐式迭代,不需要我们再进行遍历某些元素操作,但是不一样的操作需要自己实现。
例如: 批量给标签添加事件,但是每个标签的内容不一样,就可以使用each()方法
总结: 你可以认为each就是一个简单的for循环。
$("#uu>li").each(function (index,element) {               
  $(element).css("opacity",(index+1)/10);
});

7.PC端特效制作

1.开关灯

$('button').click(function() {
    $('body').toggleClass('black');
})

2.购物车下拉菜单

$('.box').hover(function() {
  $('.box .menu').stop().slideToggle();
})

3.侧边二级菜单

$('.nav .subnav').hide();
$('.nav .item').click(function() {
    $(this).children('ul').slideDown();
    $(this).siblings('.item').children('ul').slideUp()
})

4.轮播图圆点


$('li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
})


5.全选,反选

$('button').eq(0).click(function() {
    $('input:checkbox').prop('checked', true)
})
$('button').eq(1).click(function() {
    $('input:checkbox').prop('checked', false)
})
$('button').eq(2).click(function() {
    $('input:checkbox').each(function(index, el) {
        $(this).prop('checked', !$(this).prop('checked'));
        // if ($(this).prop('checked')) {
        //     $(this).prop('checked', false);
        // } else {
        //     $(this).prop('checked', true);
        // }
    })
})

6.页面滚动动画

$(window).scroll(function() {
    var num = $(this).scrollTop();
    if (num > 100) {
        $('.nav').css('opacity', 1);
    } else {
        $('.nav').css('opacity', 0.1);
    }
})

7.回到顶部动画


$('.toTop').click(function() {
    $('html,body').animate({
    'scrollTop': '0'
    }, 500);
})


8.tab菜单

$('.box .title li').click(function(){
    //自己排它
    $(this).addClass('active').siblings().removeClass('active');
    $('.box .content div').eq($(this).index()).addClass('current').siblings().removeClass('current');
})

9.模态框

  //添加单击和鼠标移入事件
$('button').eq(0).click(function() {
    $('.box').on('click mouseover', function() {
        console.log('鼠标点击和移入');
    })
})
//移除单击事件
$('button').eq(1).click(function() {
    $('.box').off('click');
})

10.后台点击侧边菜单显示


//点击translate(进行切换)


11.发布新浪微博


//功能1: 点击文本域,获得焦点,失去焦点,修改边框颜色
$('.box textarea').focus(function() {
    $(this).css('border', '1px solid orange');
})
$('.box textarea').blur(function() {
    $(this).css('border', '1px solid #ccc');
})
//功能2: 监听文本域的键盘弹起事件,获得文本域长度,添加提示文字个数
$('.box  textarea').keyup(function() {
    //获得文本域内容,判断长度
    var num = $(this).val().length;
    if (num > 120) {
        $('.box .row span').text(`您已经多输入了${num-120}个字了`).css('color', 'red');
    } else {
        $('.box .row span').text(`您还可以输入${120-num}个字`).css('color', '#ccc');
    }
})
//功能3: 点击发布按钮
//3.1 如果内容为0, 提示重新输入
//3.2 如果内容大于120,提示重新输入
//3.3 否则发布微博,先添加,然后隐藏,再slideDown()动画显示
//3.4 清空文本域内容
$('.box button').click(function() {
    var num = $('.box textarea').val().length;
    if (num <= 0) {
        alert('您输入的内容为空')
    } else if (num > 120) {
        alert('你输入的内容大于120,请重新输入')
    } else {
        //发布微博
        //先添加
        $('.news ul').prepend(
            `<li><a href="#">${$('.box textarea').val()}</a><span>删除</span></li>`);
        $('.news ul li').eq(0).hide().slideDown();
        $('.box textarea').val('');
    }
})
//功能4: 点击删除一行上的元素,但是不能检测到动态添加的元素
//点击删除---不能给动态的元素添加事件
// $('.news li span').click(function() {
//     $(this).parent().slideUp(function() {
//         $(this).remove();
//     })
// })
//监听整个页面中的 .news li span的元素,添加事件
$(document).on('click', '.news li span', function() {
    $(this).parent().slideUp(function() {
        $(this).remove();
    })
})


4.今日练习

5.今日总结

相关文章
|
11月前
|
SQL JavaScript 关系型数据库
学习jQuery笔记
学习jQuery笔记
45 0
|
JavaScript 前端开发 API
jquery笔记
jQuery是一个JS库 所谓的库实际上就是一个JS文件,里面封装了很多预定义的函数,目的是在使用时直接调用,不需要重复定义,简化了JS的编程
94 0
|
JavaScript
3.JQuery第三天
3.JQuery第三天
109 0
|
JavaScript
1.JQuery第一天
1.JQuery第一天
78 0
|
JavaScript 前端开发 API
|
前端开发 JavaScript 容器
|
3天前
|
SQL 容灾 关系型数据库
[版本更新] PolarDB-X V2.4 列存引擎开源正式发布
[版本更新] PolarDB-X V2.4 列存引擎开源正式发布!
[版本更新] PolarDB-X V2.4 列存引擎开源正式发布
|
3天前
|
存储 关系型数据库 分布式数据库
数据管理的艺术:PolarDB开源版详评与实战部署策略(二)
PolarDB-PG是阿里云的一款云原生关系型数据库,100%兼容PostgreSQL,支持Oracle语法,采用Shared-Storage存储计算分离架构,提供极致弹性、毫秒级延迟的HTAP能力。具备高可用、高可靠和弹性扩展特性,支持单机、存储计算分离和X-Paxos三节点等多种部署形态。通过Docker可快速部署实例,包括单节点、一主一备和HTAP(一主两备)实例。此外,文章还介绍了在ECS上使用ESSD云盘搭建PolarDB-PG的详细步骤,适合开发和测试环境。
100004 11
|
3天前
|
运维 监控 Cloud Native
如何设计与构建 FinOps 流程、团队、体系与目标
企业 FinOps 实施不是一蹴而就的项目,如果您正在推进企业云原生 FinOps 落地,除了选择合适的技术手段,企业内部的流程和体系建设也尤为重要。
162147 10
|
3天前
|
分布式计算 Java API
Java8 Lambda实现源码解析
Java8的lambda应该大家都比较熟悉了,本文主要从源码层面探讨一下lambda的设计和实现。
162552 8

相关课程

更多