菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
0
0

JQuery 用法总结

原创
05/13 14:22
阅读数 186

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
functiontrim(str) {
  return str.replace(/(^s+)|(s+$)/g, "");
}
trim("  abc ")    //结果:abc

13、弹出框(与JQuery无关)

window.prompt("请输入昵称!")

发表评论

0/200
0 点赞
0 评论
收藏