// 属性操作
// 自带属性
// 获取语法:$(选择器).prop(属性名)
// 设置语法:$(选择器).prop(属性名,属性值)
// eg:
// $("div").prop("id","mydiv")
// $("div").prop("id")
// 自定义属性
// 获取语法:$(选择器).attr(属性名)
// 设置语法:$(选择器).attr(属性名,属性值)
// eg:
// $("div").attr("index",1)
// $("div").attr("index")
// 文本内容
// 普通元素
// 1.获取语法:$(选择器).html()
// 2.获取语法:$(选择器).text()
// 如果需要设置内容,只需要在方法里面传参就行了
// eg:$("div").text("我是div")
// 表单元素
// 3.获取语法:$(选择器).val()
// 元素遍历
// 语法:$(选择器).each(回调函数) 参数:1.索引 2.dom对象
// eg:
// $("div").each(function(index,domEle){
// console.log(index);
// console.log(domEle);
// 循环发生,对象数组的索引有几个,就循环几次
// })
// 数据遍历
//语法: $.each(遍历的对象,回调函数) 参数:1.索引 2.对象
// eg:
// var arr = [ "red","green","purple"]
// $.each(arr,function(index,ele){
// console.log(index);//0,1,2
// console.log(ele);//"red","green","purple"
// })
// var obj ={
// name:"zs",
// sex:"男",
// age:"18"
// }
// $.each(obj,function(index,ele){
// console.log(index);//name,sex,age
// console.log(ele);//"zs","男","18"
// })
// 元素操作
// 1.创建
// 语法:$("标签")
// eg: var mydiv = $("<div>我是创建的</div")
// 2.添加
// 2.1往什么里面添加 $("父元素").append(子元素)
// $("li").append(mydiv)//在li里面后面追加
// $("li").prepend(mydiv)//在li里面前面追加
// 2.2在什么周围添加
// $("li").before(mydiv) //在li后面添加
// $("li").after(mydiv)//在li前面添加
// 3.删除
// $("标签").remove() 会将自身都删除
// $("标签").empty() 清空自己的子元素
// $("标签").html("") 清空自己的子元素
// 尺寸方法
// 从里往外:
// 内容:$("标签").width()
// 内容+padding:$("标签").innerWidth()
// 内容+padding+border:$("标签").outerWidth()
// 内容+padding+border+margin:$("标签").outerWidth(true)
// 位置方法
// 获取语法:$("标签").offset()
// // 效果:获取距离文档的上方,左侧距离
// 上方:$("标签").offset().top
// 左侧:$("标签").offset().left
// 设置语法:
// $("标签").offset({
// left:400
// })
// 语法:$("标签").position()
// 效果:获取带有定位父元素的偏移值,类似源生js中的offsetLeft(),只能获取,不能设置
// 上方:$("标签").position().top
// 左侧:$("标签").position().left
// 滚动方法
// 事件注册:$("标签").scroll(回调函数)
// 卷去的头部:$("标签").scrollTop()
// 页面卷去头部的写法:$(document).scrollTop()
// 页面滚动到400,eg:
// $("html,body").scroll(0,400)
// 页面优雅的滚动到400,eg:
// $("body,html").stop().animate({
// scrollTop:400
// })
// 购物车案例梳理:
// 思路:
// 1.通过全选按钮控制单选按钮
// 答:点击的时候将全选按钮的状态赋值给所有的单选按钮
// 2.通过单选按钮控制全选按钮
// 答:判断已选的数量是否等于所有的数量 $('小按钮:checked').length == $('小按钮').length ?
// 3.绑定+-按钮的点击事件,让输入框的值随之变动,同时修改商品的小计
// 通过$(this)的siblings()找到输入框,通过val获取值,进行加减,同时进行计算小计,因为价格有¥,记得substr,又因为有两位小数,记得toFixed(2)
// 4.输入框内容发生变化时,修改商品的小计
// 绑定change事件,进行第三部操作
// 5.修改商品数量的时候,计算总量和总价 -> 方法封装()
// 在点击事件里面调用方法,获取所有的小计,进行求和
// 6.添加删除事件(当前行,选中,全部)
// 当前行:通过$(this).parents(行的类名)进行remove就行
// 选中:$(小按钮:checked).parents(行的类名)进行remove就行
// 全部:$(行的类名)进行remove就行
// 7.选择变色
// 写在小按钮点击事件中,change的时候进行当前行变色,如果是全选,就全部变色
// 电梯导航案例:
// 核心思路:点击小Li找到对应的大盒子
// 1.页面滚动到某个位置,展示电梯导航
// 2.点击小li找到对应的大盒子,通过索引号
// 3.让页面滚动到大盒子的位置,滚动的距离就是大盒子的offset().top
// 4.排他思想,实现小li变色
// 5.页面滚动,小li跟随变色
// $(大盒子).each(
// 判断页面卷取头部的距离+1>=每个盒子的offset().top?
// 对应索引的li添加类名
// )
// 6.节流阀
// 当点击li的时候,关闭flag,不让滚动事件中小li切换类名触发