强烈建议多看jquer方法,有个印象:点我
以下是工作中用到的
1. attr(),设置或返回被选元素的属性值
<input type="text" class="layui-input" id="outData" name="discountEndDate" value="{$data.discountEndDate}">
data.discountEndDate = '修改';
$('#outData').attr('value',data.discountEndDate);
2. html():返回或设置被选元素的内容。
let option = '<option value="">全部</option>';
$('#operator').html(option);
如果该方法未设置参数,则返回被选元素的当前内容。
示例:点我
3. append():在被选元素的结尾(仍然在内部)插入指定内容
<div>
<button type="button" style="" class="layui-btn add_btn">新增套餐</button>
<p class="test-btn"></p>//每点一下‘新增套餐’,就会新增‘htmladd’的压缩html
</div>
<script>
let htmladd = '<div style="margin-top:5px;margin-bottom: 15px;"><div class="layui-inline"><label class="layui-form-label">运营商</label><div class="layui-input-block"><select name="search_charge_type"lay-verify=""><option>全部</option></select></div></div';
$(".test-btn").append(htmladd);
</script>
示例:点我
4. $(’#seriesByOperator’).val;获取改id的value
5. val() ,返回或设置被选元素的值。
$("#add").val("Hello Kitty");//将id为add的输入框内的值,更改为‘Hello Kitty’
let data = $('#add').val();//获取id为add输入框的值
$(’#seriesByOperator’).val;获取改id的value
6. remove() ,empty()
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
两者区别
如,对如下DOM树:
<body>
<div>this is header<div>
this is main.
<div>this is footer</div>
</body>
执行$("div").empty()后结果为:
<body>
<div><div>
this is main.
<div></div>
</body>
div里的内容被清空了,但是节点还留住DOM树上。
执行$("div").remove()后的结果为:
<body>
this is main.
</body
另外remove还可以加参数
还有一点,那就是remove()支持一个参数:remove([expr]),其中expr为可选项,可填可不填,用来进一步筛选要删除的目标。如:
<body>
<div class="hello">Hello</div>
how are
<div>you?</div>
</body>
执行$("div").remove(".hello")后结果为:
<body>
how are
<div>you?</div>