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(); }) })
