JQuery部分用法总结

简单记录！方便以后查找！

1、获取对象

// $("#对象id")
let o = $("#id");

// 获得input标签中name='userName'的元素对象
$("input[name='username']") 

// 获得样式class的名字是.abc的元素对象
$(".abc") 

// 标签选择器 选择所有的div元素
$("div") 

// 表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
$("#a,.b,span")

// ID号是a的并且使用了 b样式的 所有的p元素
$("#a .b p")

2、data属性存取数据

• 存数据

<!-- 把值统一封装在data中，方便js提取-->
<span id="abc" 
    data-d1 = "v1" 
    data-d2 = "v2"
    data-d3 = "v3"
    hidden></span>

• 取数据

// 获取对象
let o = $("#abc");
// data数据；使用data()方法时，不用"data-"前缀
let d1 = o.data("d1"); // v1
let d2 = o.data("d2"); // v2
let d3 = o.data("d3"); // v3

• 修改data值

// attr()修改的只是html源码中显示的值，并非data真实的值；
// 再用data()获取值时，得到的还是原来的data值
// attr("data-d1",新的显示值)；需要加"data-"
o.attr("data-d2", "v22"); // o.data("d2"); 值还是v2，不是v22
// 可以连写
o.attr("data-d2", "v22").attr("data-d3", "v33");

// ----------------------------------------------------
// 使用data()方法修改时，再次获取时，就是新的值
o.data("d2", "v22"); // o.data("d2"); 值是v22
// 可以连写
o.data("d2", "v22")..data("d3", "v33");

// ------------------------- 综合写法 --------------------
// 把两种写法都用上，可以应对部分浏览器的兼容问题
o.attr("data-d2", "v22").data("d2", "v22"); 

3、input 存取数据

<input type="hidden" id="user_id">

// --------------------- 赋值 ---------------------
// 为 input 赋值
$("#user_id").val("123");

// --------------------- 获取 ---------------------
// 获取 input 值
let value = $("#user_id").val();

4、checkbox 存取数据

<input id="role_1" type="checkbox" name="role" value="角色1">
<input id="role_2" type="checkbox" name="role" value="角色2">
<input id="role_3" type="checkbox" name="role" value="角色3">
<input id="role_4" type="checkbox" name="role" value="角色4">
<input id="role_5" type="checkbox" name="role" value="角色5">

// --------------------- 赋值 ---------------------
// 选中2、4复选框
let codes = [2,4];
for (code of codes) {
    $("#role_" + code + "").attr("checked", "checked");
}

// --------------------- 获取 ---------------------
// 获取选中状态的复选框值，存入数组中
let ches = $('input:checkbox:checked');
// 定义一个数组，接收选中的值
var chk_value = [];
// 遍历；向数组中添加每一个值
ches.each(function () {
   // 将选中的值添加到数组chk_value中
   chk_value.push($(this).val());
});


// --------------------- 复位 ---------------------
// 清空选中状态；当复选框要复用时，再次使用前要先清空
// 清除 id 以 role_ 开头所有复选框的选中状态
$("input[id^='role_']").removeAttr("checked");

5、select 存取数据

<select id="sel_id">
    <option value="v1"> A1 </option>
    <option value="v2"> A2 </option>
    <option value="v3"> A3 </option>
    <option value="v4"> A4 </option>
    <option value="v5"> A5 </option>
</select>

// --------------------- 赋值 ---------------------
// 使用attr()和prop()的结合写法，可以应对浏览器的兼容问题
// 使值为 v3 的项为选中项
let value = "v3";
$("#sel_id").find("option[value= '" + value + "']")
    .attr("selected", true)
    .prop("selected", true);

// --------------------- 获取 ---------------------
// 获取选中项的值
var sel_val = $("#sel_id").find("option:selected").val(); // v3

// --------------------- 复位 ---------------------
// 使每一项都是未选中状态
$("#sel_id option").attr("selected", false);

6、radio 存取数据

<input type="radio" name="radio_name" id="redio_1" checked value="0"/>                                       id="flexRadioDefault3" checked value="0">
<label for="redio_1">收入</label>

<input type="radio" name="radio_name" id="redio_2" value="1"/>                                       id="flexRadioDefault3" checked value="0">
<label for="redio_2">支出</label>

// --------------------- 获取 ---------------------
// 获取选中项的值
let type = $("input[name='radio_namee']:checked").val();


// ------------------- 复位/赋值 -------------------
// 使redio_1为选中状态
$("#redio_1").attr("checked", true).prop("checked", true);
// 使redio_2为未选中状态
$("#redio_2").attr("checked", false).prop("checked", false);

7、显示与隐藏

<span id="span_1" style="display:inline"></span>

<span id="span_2" style="display:none"></span>

// 隐藏：动画300毫秒
$("#span_1").hide(300);
// 显示：动画500毫秒
$("#span_2").show(500);