未分类

jQuery问题与解答

阅读数量:次

1.选择筛选元素
2.增加&移出元素
3.页面无操作是定时
4.按钮冻结指定时间
5.setTime函数带多个参数
6.传递select的值(赋值)
7.手机电话号码验证
8.通过自定义属性定位
9.复选框
10.data-id使用
11.配置

选择筛选元素

1
2
3
4
5
6
7
8
9
$(".div1").children().css("font-size", "40px");//所有子元素(第一级)
$(".div2").children(":eq(1)").css("color", "red");//第二个子元素
$(".div3").find("*").css("color", "red");//每个后代元素(包括子代的后代)
$(".div4").find("li:last").css("color", "red");//所有中最后一个li
$("li").parents().css("color", "red");//所有li的父元素
$("span").parent();//元素的的直接父元素(只上一级)
$("span").next();//紧跟的下一个元素
$("span").prev();//紧跟的上一个兄弟元素
$("span").siblings();//所有同辈元素(不包括自己)

增加&移出元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("p").detach();//移出p元素，但不删除p的事件
$("p").remove();//会删除事件
$("p").append();//在元素内部的最后添加
$("p").prepend();//在元素内部的开头添加
$("p").after();//在元素外部的后面
$("p").before();//在元素外部的前面

$("button").bind("click", {sid: this.id}, function (event) {
    onefunction(event.data.sid);
    //綁定带参数的方法
});

$("button").prop("onclick", null).off("click");//卸载点击事件
$("button").trigger("click");//触发点击事件

页面无操作是定时

1
2
3
4
5
6
//方法一
var renovate = setInterval("xxfunction();", 3000);
$("body").click(function () {
    window.clearInterval(renovate);
    renovate = setInterval("xxfunction();", 3000);
});

按钮冻结指定时间

1
2
3
4
5
6
7
8
$("button").click(function () {
    $("button".attr("disabled", true));
    var de = setTimeout("disabledTime()", 1000);
});

function disabledTime() {
    $("button").attr("disabled", false);
}

setTime函数带多个参数

1
2
3
setTimeout(function () {
    xxfunction(id, name, sex)
}, 3000);

传递select的值(赋值)

1
2
3
4
5
6
7
var allOption = document.getElementById("editSex").options;
for (var i = 0; i < allOption.length; i++) {
    if (allOption[i].id == theon.sex)//根据id来判断
    {
        allOption[i].selected = true;
    }
}

手机电话号码验证

1
2
3
4
5
function checkTel(tel) {
    var mobile = /^1[3|5|8]\d{9}$/;
    phone = /^0\d{2,3}-?\d{7,8}$/;
    return mobile.test(tel) || phone.test(tel);//test:检测一个字符串是否匹配某个模式
}

通过自定义属性定位

1
2
3
var ss = data.nodeId;
var tt = $('ul li[data-nodeid="' + ss + '"]');
console.log(tt);//包含所有的data-nodeid

复选框

1
2
$(this).is(':checked') == true;//复选框点击确认
$("#ch").prop({checked: true});//复选框赋值

data-id使用

1
2
3
4
5
6
7
8
9
10
<div id = "user" data-uid = "12345" data-uname = "愚人码头" > </div>
user . getAttribute ( 'site' ) ;
user . setAttribute ( 'site' , 'http://www.css88.com' ) ;
// 读取标签定义属性 data-[key] = [value]
$("#id").data("key");
// 设置标签定义属性
//注意：无需$("#id").data('data-chid');
$("#changeModalData").data('chid');
 $("#changeModalData").data('chid', ss);
$("#id").data("key", "value");

配置

webstrom配置less

webstorm配置Autoprefixer

分享到