您的位置:首页 > Web前端 > JQuery

JQuery的一些用法

2016-09-28 16:51 369 查看

1、隐藏与显示,用于div等等

//隐藏id=myTab下的所有li标签
$("#myTab li").hide();

//动画隐藏,1秒内隐藏该对象
$("#myTab li").hide(1000);

//显示class=loginp下的第三个span标签
$(".loginp span:eq(2)").show();

//隐藏ul下的第一个li标签
$("#myTab").find("li:eq(0)").css("display", "none");
$("#myTab").find("li:first").css("display", "none");

//隐藏ul下的最后一个li标签
$("#myTab").find("li:last").css("display", "none");


2、更改标签的属性和值。

//更改id=A1的onclick属性
$("#A1").attr("onclick", "javascript:void(0);");

//更改id=A1的href属性
$("#A1").attr("href", "javascript:getcc();");

//更改id=A1的span标签的值
$("#A1 span").html("Hello World");

//更改id=A1的td的值
$("#A1").html("<span style=\"color: red;font-size:large;align=center;\">Hello World</span>");

//更改class=A1的div的值
$(".A1").html("Hello World");

//更改textarea标签的值
$("#textatrea1").val("Hello World");


3、锁死input框,disabled的属性

//锁死id=A1的input
$("#A1").attr("disabled", "disabled");

//打开
$("#A1").attr("disabled", false);


4、each遍历

//遍历所有
$("*").each(function() {
});

//遍历所有Class=ssss的
$(".ssss").each(function() {
//判断td的值=
if ($.trim($(this).text())=="Hello World") {
    //查找td的上一级,然后找到并修改第2个td的值
    $(this).parent().find("td:eq(1)").text("Hello World Too");
}
});

//遍历所有type=text
$(":text").each(function() {
});

//遍历所有div
$("div").each(function() {
});


5、选中单选框,获取单选框的选中值

//选中第一个值
$("input[name=IS_PGXM]").get(0).checked = true;
//获取选中的值
var type = $("input[name='type']:checked").val();


6、修改form的action,并提交

$("#Form1").attr("action","/Home/Index");
$("#Form1").submit();


7、添加、删除class

//直接添加class属性
$(’#id’).addClass(’demo’);
//先隐藏再删除class属性
$(’#id’).hide().removeClass(’demo’);


8、匹配元素

//匹配包含给定属性的元素
//查找所有含有ID属性的div元素
$("div[id]")

//匹配给定的属性是某个特定值的元素
//name属性值为basketball的input元素选中
$("input[name='basketball']").attr("checked",true);

//匹配给定的属性是不包含某个特定值的元素
//name属性值不为basketball的input元素选中
$("input[name!='basketball']").attr("checked",true);
//此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])
$("input:not(input[name='basketball'])").attr("checked",true);

//匹配给定的属性是以某些值开始的元素
//查找所有 name 以 'foot' 开始的 input 元素
$("input[name^='foot']").attr("checked",true);

//匹配给定的属性是以包含某些值的元素
//查找所有 name 包含 'sket' 的 input 元素
$("input[name*='sket']").attr("checked",true);

//复合属性选择器,需要同时满足多个条件时使用
//找到所有含有 id属性,并且它的 name属性是以 ball结尾的
$("input[id][name$='ball']").attr("checked",true);


9、当文档载入完毕再执行

//当文档载入完毕再执行
$(function(){ }


10、用jQuery写一段代码,查找id为content的下一个兄弟节点里面class为line的所有DOM元素,并让这些DOM依次隐藏(间隔50毫秒)

var $lines = $("#content").next().find(".line");
for (var i = 0; i <  $lines.length; i++) {
(function($this,i){
setTimeout(function(){
$this.hide();
},i*50)
})($($lines[i]),i)
}


11、给class为A1增加居中属性

$(".A1").css("text-align", "center");


12、去掉空白

$.trim("  abc ")  //结果:abc

function trim(str) {
return str.replace(/(^\s+)|(\s+$)/g, "");
}
trim("  abc ")    //结果:abc


13、弹出框(与JQuery无关)

window.prompt("请输入昵称!")
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: