JQuery 用法总结

阅读目录

• 1、隐藏与显示，用于div等等
• 2、匹配元素
• 3、更改标签的属性和值。
• 4、锁死input框，disabled的属性
• 5、each遍历
• 6、选中单选框，获取单选框的选中值
• 7、修改form的action，并提交
• 8、添加、删除class
• 9、当文档载入完毕再执行
• 10、用jQuery写一段代码，查找id为content的下一个兄弟节点里面class为line的所有DOM元素，并让这些DOM依次隐藏（间隔50毫秒）
• 11、给class为A1增加居中属性
• 12、去掉空白
• 13、弹出框(与JQuery无关)

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属性的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); 

//$(":contains(text)") text 为规定要查找的文本。
$("p:contains('cang')"); //匹配所有包含 cang 文本内容的 p 元素
$("p:contains('cang')[innerHTML='cang']"); //contains 方式精确查找，只查找文本内容为 cang 的。

回到顶部

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

//更改id=A1的onclick属性
$("#A1").attr("onclick", "javascript:void(0);");
document.getElementById("A1").setAttribute("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");

回到顶部

4、锁死input框，disabled的属性

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

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

回到顶部

5、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() {
});

回到顶部

6、选中单选框，获取单选框的选中值

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

回到顶部

7、修改form的action，并提交

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

回到顶部

8、添加、删除class

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

回到顶部

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("请输入昵称!")