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.今日总结