jQuery常用方法合集(1)

选择器
基本选择器、层级选择器、属性选择器 与CSS类似，这里不再细说，详细猛戳这里。

基本筛选器

复制代码

$(‘li:first’) //第一个元素
$(‘li:last’) //最后一个元素

$(“tr:even”) //索引为偶数的元素，从 0 开始
$(“tr:odd”) //索引为奇数的元素，从 0 开始

$(“tr:eq(1)”) //给定索引值的元素
$(“tr:gt(0)”) //大于给定索引值的元素
$(“tr:lt(2)”) //小于给定索引值的元素

$(":focus") //当前获取焦点的元素
$(":animated") //正在执行动画效果的元素

复制代码
内容选择器

$(“div:contains(‘nick’)”) //包含nick文本的元素
$(“td:empty”) //不包含子元素或者文本的空元素
$(“div:has§”) //含有选择器所匹配的元素
$(“td:parent”) //含有子元素或者文本的元素
表单选择器

复制代码

$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域

$(“input:checked”) //所有选中的元素
$(“select option:selected”) //select中所有选中的option元素

复制代码

筛选器
过滤

$(“p”).eq(0) //当前操作中第N个jQuery对象,类似索引
$(‘li’).first() //第一个元素
$(‘li’).last() //最后一个元素
$(this).hasClass(“test”) //元素是否含有某个特定的类,返回布尔值
$(‘li’).has(‘ul’) //包含特定后代的元素
查找

复制代码

$(“div”).children() //div中的每个子元素,第一层
$(“div”).find(“span”) //div中的包含的所有span元素,子子孙孙

$(“p”).next() 　　　//紧邻p元素后的一个同辈元素
$(“p”).nextAll() //p元素之后所有的同辈元素
$("#test").nextUntil("#test2") //id为"#test"元素之后到id为’#test2’之间所有的同辈元素,掐头去尾

$(“p”).prev() //紧邻p元素前的一个同辈元素
$(“p”).prevAll() //p元素之前所有的同辈元素
$("#test").prevUntil("#test2") //id为"#test"元素之前到id为’#test2’之间所有的同辈元素,掐头去尾

$(“p”).parent() //每个p元素的父元素
$(“p”).parents() //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2") //id为"#test"元素到id为’#test2’之间所有的父级元素,掐头去尾

$(“div”).siblings() //所有的同辈元素,不包括自己

复制代码

三、属性操作
基本属性操作
复制代码

$(“img”).attr(“src”); 　　　　　　 //返回文档中所有图像的src属性值
$(“img”).attr(“src”,“test.jpg”); //设置所有图像的src属性
$(“img”).removeAttr(“src”); 　　　//将文档中图像的src属性删除

$(“input[type=‘checkbox’]”).prop(“checked”, true); //选中复选框
$(“input[type=‘checkbox’]”).prop(“checked”, false);
$(“img”).removeProp(“src”); 　　 //删除img的src属性

复制代码
CSS类
$(“p”).addClass(“selected”); 　　//为p元素加上 ‘selected’ 类
$(“p”).removeClass(“selected”); //从p元素中删除 ‘selected’ 类
$(“p”).toggleClass(“selected”); //如果存在就删除,否则就添加
HTML代码/文本/值
$(‘p’).html(); 　　　　　　　　　　 //返回p元素的html内容
$(“p”).html(“Hello nick!”); //设置p元素的html内容
$(‘p’).text(); 　　　　　　　　　　 //返回p元素的文本内容
$(“p”).text(“nick”); 　　　　　　　//设置p元素的文本内容
$(“input”).val(); 　　　　　　　　 //获取文本框中的值
$(“input”).val(“nick”); 　　　　 //设置文本框中的内容

四、CSS操作
样式
$(“p”).css(“color”); //访问查看p元素的color属性
$(“p”).css(“color”,“red”); //设置p元素的color属性为red
$(“p”).css({ “color”: “red”, “background”: “yellow” }); //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）