jQuery基础自学笔记DAY2

jQuery基础自学笔记DAY2

• jQuery CSS样式操作
• jQuery 效果
• jQuery 属性操作
• jQuery 文本值
• 练习：购物车模块 car.js

---

---

---

一、 jQuery 样式操作

1.1 操作样式之CSS方法

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式

1.1.1 参数只写属性名，则返回属性值

 console.log($('div').css('width')); //返回 200px

1.1.2 参数是属性名，属性值，逗号分隔。是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$('div').css('width', '300px'); //$('div').css('width', 300);

1.1.3 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性名可以不用加引号`

	$('div').css({
		height: 100,
		width: 100,
		backgroundColor: 'pink'
     // 如果是复合属性必须采用驼峰命名法
     // 如果值不是数字必须加引号
	});

1.2.设置类样式

1.2.1 添加类 addClass()

	$('div').click(function () {
		$(this).addClass('current');
	});

1.2.2 删除类 removeClass()

	$('div').click(function () {
		$(this).removeClass('current');
	});

1.2.3 切换类 toggleClass()

// 点一下添加类，点一下删除类
	$('div').click(function () {
		$(this).toggleClass('current');
	});

二、jQuery 效果

// 显示隐藏 show() hide() toggle()
// 滑动 slidDown() slideUp() slideToggle()
// 淡入淡出 fadeIn() fadeOut() fadeToggle() fadeTo()
// 自定义动画 animate()

2.1 显示隐藏效果

显示隐藏 show() hide() toggle()

	显示语法
	show([speed],[easing],[fn])
	显示参数
	(1)参数都可以省略，无动画直接显示。
	(2)speed:三种预定速度之一的字符串（'slow','normal','fast'）或者表示动画时长的毫秒数字(1000).
	(3)easing:(Optional)用来指定切换效果，默认'swing' ,可用参数'linear'
	(4)fn;回调函数，在动画完成时执行的函数 ，每个元素执行一次
	$('button').eq(0).click(function () {
		$('div').show(1500, 'linear', function () {
		alert('show结束');
		});
	})
	隐藏语法
	hide([speed],[easing],[fn])
	隐藏参数
	同上
	$('button').eq(1).click(function () {
		$('div').hide(1500, function () {
		alert('hide结束');
		});
	})
	切换语法
	toggle([speed],[easing],[fn])
	如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
	切换参数
	同上
	$('button').eq(2).click(function () {
		$('div').toggle(1000);
	})

2.2 滑动

滑动 slidDown() slideUp() slideToggle()

	滑动效果
	与显示隐藏参数一样
	(1)参数都可以省略，无动画直接显示。
	(2)speed:三种预定速度之一的字符串（'slow','normal','fast'）或者表示动画时长的毫秒数字(1000).
	(3)easing:(Optional)用来指定切换效果，默认'swing' ,可用参数'linear'
	(4)fn;回调函数，在动画完成时执行的函数 ，每个元素执行一次
	$('button').eq(0).click(function () {
		// 下滑动
		$('div').slideDown();
		// 上滑动
		$('div').slideUp();
		// 切换滑动
    	$('div').slideToggle();
	})
         

2.3 事件切换 hover

事件切换 hover

	1.事件切换 hover 就是鼠标经过和离开的复合写法 选择器.hover(function(){},function(){})

	$('.nav>li').hover(function () {
		$(this).children('ul').slideDown(200);
	}, function () {
		$(this).children('ul').slideUp(200);
	});
	2.事件切换 hover 如果只写一个函数，那么鼠标经过和离开都会触发这个函数
	$('.nav>li').hover(function () {
		$(this).children('ul').slideToggle(100);
	});
	3.动画队列及其停止排队方法
		1.1动画或效果队列
			动画或效果一旦触发就会执行，如果多次触发，就造成多个动画或效果排队执行。
		1.2.停止排队stop([clearQueue],[jumpToEnd])
		stop() 停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
		$('.nav>li').hover(function () {
			$(this).children('ul').stop().slideToggle(100);
		});

2.4 淡入淡出

淡入淡出 fadeIn() fadeOut() fadeToggle() fadeTo()

	(1)参数都可以省略，无动画直接显示。
	(2)speed:三种预定速度之一的字符串（'slow','normal','fast'）或者表示动画时长的毫秒数字(1000).
	(3)easing:(Optional)用来指定切换效果，默认'swing' ,可用参数'linear'
	(4)fn;回调函数，在动画完成时执行的函数 ，每个元素执行一次
	$('button').eq(0).click(function () {
		$('div').fadeIn(2000);
	})
	$('button').eq(1).click(function () {
		$('div').fadeOut(2000);
	})
	$('button').eq(3).click(function () {
	把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
		//fadeTo([[speed],opacity,[easing],[fn]])
		// opacity:一个0至1之间表示透明度的数字。
		// 这个速度 和 透明度 必须写
		$('div').fadeTo(1000, 0.5);
	})
	$('button').eq(2).click(function () {
		$('div').fadeToggle(2000);
	})

2.5 自定义动画

自定义动画 animate()

	自定义动画 animate
	1.语法 animate(params,[speed],[easing],[fn])
	(1)params:想要更改的样式属性，以对象形式传递，必须写，属性名可以不带引号，如果是复合属性则需要采用驼峰命名法borderLeft
	(2)speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
	(3)easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
	(4)fn:在动画完成时执行的函数，每个元素执行一次。
	$('button').eq(3).click(function () {
		$('div').animate({
			left: 200,
			top: 300,
			opacity: 0.4,   //不透明度
			width: 5,
			height: 5
		}, 500);
	})

三、 jQuery 属性操作

3.1 element.prop(“属性名”) 获取元素固有的属性值

	<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
	<input type="checkbox" name="" id="" checked>
	<div index="1" data-index="2">我是div</div>
	<span>123</span>
	<script>
	$(function () {
		console.log($("a").prop("href"));//读取
		$("a").prop("title", "我们都挺好");//赋值
		$("input").change(function () {
			console.log($(this).prop("checked"));
		});
	})
	</script>

3.2 元素的自定义属性 我们通过 attr()

	console.log($("div").attr("index"));
	$("div").attr("index", 4);
	console.log($("div").attr("data-index"));

3.3 数据缓存 data() 这个里面的数据是存放在元素的内存里面

	$("span").data("uname", "andy");
	console.log($("span").data("uname"));

这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型

	console.log($("div").data("index"));

四、 jQuery 文本值

4.1 获取设置元素内容 html()

相当于innerHtml

	console.log($("div").html());
	// $("div").html("123");

4.2 获取设置元素文本内容 text()

相当于innerText

	console.log($("div").text());
	$("div").text("123");

4.3 获取设置表单值 val()

	console.log($("input").val());
	$("input").val(123);

五、练习

$(function () {
  // 1. 全选 全不选功能模块
  // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
  // 事件可以使用change
  $(".checkall").change(function () {
    // console.log($(this).prop("checked"));
    $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
    // 如果选中所有商品加背景色，让所有的商品添加 check-cart-item 类名
    if ($(this).prop("checked")) {
      $(".cart-item").addClass("check-cart-item");
    } else {
      $(".cart-item").removeClass("check-cart-item");
    }
    // check-cart-item 移除
  });
  // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
  $(".j-checkbox").change(function () {
    // if(被选中的小的复选框的个数 === 3) {
    //     就要选中全选按钮
    // } else {
    //     不要选中全选按钮
    // }
    // console.log($(".j-checkbox"));
    // console.log($(this));
    if ($(".j-checkbox").length === $(".j-checkbox:checked").length) {
      $(".checkall").prop("checked", true);
    } else {
      $(".checkall").prop("checked", false);
    }
    // console.log($(".j-checkbox:checked").length);
    // $(".j-checkbox").length 这个是所有的小复选框的个数
    if ($(this).prop("checked")) {
      // $(".cart-item").addClass("check-cart-item");  直接选不行
      $(this).parents(".cart-item").addClass("check-cart-item");
    } else {
      $(this).parents(".cart-item").removeClass("check-cart-item");
    }
  });
  // 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
  $(".increment").click(function () {
    // 得到当前兄弟文本框的值
    var n = $(this).siblings(".itxt").val();
    // console.log(n);
    n++;
    $(this).siblings(".itxt").val(n);
    // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计
    var p = $(this).parents(".p-num").siblings(".p-price").html();
    // 当前商品的价格 p
    p = p.substr(1);
    // 小计模块

    $(this)
      .parents(".p-num")
      .siblings(".p-sum")
      .html("￥" + (p * n).toFixed(2));
    getSum();
    // toFixed(2) 可以让我们保留2位小数
  });
  $(".decrement").click(function () {
    // 得到当前兄弟文本框的值
    var n = $(this).siblings(".itxt").val();
    if (n == 0) {
      return false;
    }
    n--;
    $(this).siblings(".itxt").val(n);

    var p = $(this).parents(".p-num").siblings(".p-price").html();
    // 当前商品的单价 去掉￥ p
    p = p.substr(1);
    // 小计模块

    $(this)
      .parents(".p-num")
      .siblings(".p-sum")
      .html("￥" + (p * n).toFixed(2));
    getSum();
  });
  //  4. 用户修改文本框的值 计算 小计模块
  $(".itxt").change(function () {
    // 先得到文本框的里面的值 乘以 当前商品的单价
    var n = $(this).val();
    // 当前商品的单价
    var p = $(this).parents(".p-num").siblings(".p-price").html();
    // console.log(p);
    p = p.substr(1);
    $(this)
      .parents(".p-num")
      .siblings(".p-sum")
      .html("￥" + (p * n).toFixed(2));
    getSum();
  });
  // 5. 计算总计和总额模块
  getSum();

  function getSum() {
    var count = 0; // 计算总件数
    var money = 0; // 计算总价钱
    $(".itxt").each(function (i, ele) {
      count += parseInt($(ele).val());
    });
    $(".amount-sum em").text(count);
    $(".p-sum").each(function (i, ele) {
      money += parseFloat($(ele).text().substr(1));
    });
    $(".price-sum em").text("￥" + money.toFixed(2));
  }
  // 6. 删除商品模块
  // (1) 商品后面的删除按钮
  $(".p-action a").click(function () {
    // 删除的是当前的商品
    $(this).parents(".cart-item").remove();
    getSum();
  });
  // (2) 删除选中的商品
  $(".remove-batch").click(function () {
    // 删除的是小的复选框选中的商品
    $(".j-checkbox:checked").parents(".cart-item").remove();
    getSum();
  });
  // (3) 清空购物车 删除全部商品
  $(".clear-all").click(function () {
    $(".cart-item").remove();
    getSum();
  });
});