jquery总结

1.获取div中的内容

<div class="box">123</div>
<script>
    $(".box").html()
</script>

2.获取input中的内容

<input type="text" value="123" class="input">
<script>
	$(".input").val()
</script>

3.获取id属性

<div id="1" class="box"></div>
<script>
    $(".box").attr("id")
</script>

4.设置div中的内容

<div class="box"></div>
<script>
    $(".box").html(“123”)
</script>

5.设置input中的内容

<input type="text" value="" class="input">
<script>
	$(".input").val("123")
</script>

6.设置属性

<div class="box"></div>
<script>
    $(".box").attr("id",1)
</script>

7.内容添加

append() - 在被选元素的结尾插入内容 (常用)
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

8.删除元素

remove()  删除被选元素
empty()  清空被选元素内容

9.设置class类

addClass() 添加一个新的class类
removeClass() 删除一个class类 
toggleClass() 添加或删除一个class类

10.jquery遍历

**祖先**
parent() 方法返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
**后代**
children() 返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
**同胞**
siblings() 返回被选元素的所有同胞元素。
next() 返回被选元素的下一个同胞元素。
nextAll() 返回被选元素的所有跟随的同胞元素。
nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
prev() 返回被选元素的上一个同胞元素。
prevAll() 返回被选元素的所有之前跟随的同胞元素。
prevUntil() 返回介于两个给定参数之间的所有之前跟随的同胞元素。

11 .单选
html

    <div class="checkbox">
        <div class="gnum" id="1">360ml</div>
        <div class="gnum" id="2">800ml</div>
        <div class="gnum" id="3">600ml</div>
        <div class="gnum" id="4">600ml</div>
        <div class="gnum" id="5">600ml</div>
        <div class="gnum" id="6">600ml</div>
    </div>

css

.gnum{
    width:2rem;
    height:0.7rem;
    background:rgba(230,230,230,1);
    border-radius:0.2rem;
    font-size:0.3rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height:0.7rem;
    text-align: center;
    margin-right: 0.2rem;
    overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}
.check{
    width:2rem;
    height:0.7rem;
    background:linear-gradient(90deg,rgba(245,69,69,1),rgba(245,119,69,1));
    border-radius:0.2rem;
    font-size:0.3rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:0.7rem;
}

js

  $(".gnum").on("click",function () {
        var gid = $(this).attr("id") // 获取选中的规格的id
        console.log(gid)
        $(this).siblings(".gnum").removeClass("check")
        $(this).addClass("check")
    })

12 .选中不选中 input

<input type='checkbox' name='star' id='selectStar' onclick='checkStar()' class='star'>
<script>
	let checkStatus=$("#selectStar").prop("checked");
    console.log(checkStatus)
</script>

13.onclick传参和接参 字符串

<div class='delbtn' onclick='del(\""+item.orderid+"\")'>删除订单</div>
<script>
	function del(id){
		console.log(id)
	}
</script>

14.js获取当前url的信息
js获取当前url的信息