Jquery 基础知识 第二章

<script>
    // 属性操作
    // 自带属性
    // 获取语法：$(选择器).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切换类名触发
</script>