大佬教程收集整理的这篇文章主要介绍了jQuery基础，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
格式：<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
})
1.基本选择器
元素名选择器，类选择器，id选择器，多元素选择器，*选择器
a.元素名选择器
$("div") – 匹配所有的div元素
$("#b1").click(function(){
$("div").css("BACkground","#FF69B4");
});
b.class选择器
$(".c1") – 匹配所有class值为c1 的元素
$("#b3").click(function(){
$(".c1").css("BACkground","#FF0033");
});
$("div.c1") – 匹配所有class值为c1的div元素
$("#b3").click(function(){
$("div.c1").css("BACkground","#FF0033");
});
c.id选择器
$("#d1") – 匹配所有id值为d1的元素
$("#b2").click(function(){
$("#d1").css("BACkground","#9ACD32");
});
$("div#d1") – 匹配所有id值为d1的div元素
$("#b2").click(function(){
$("div#d1").css("BACkground","#9ACD32");
});
4.*号匹配符
$("*") – 匹配所有的元素
$("#b4").click(function(){
$("*").css("BACkground","#FDF5E6");
});
5.多元素选择器
$("div,span,#d1,.c1") – 匹配所有的div/span元素以及id 值为d1的元素和class值为c1的元素。。。
$("#b6").click(function(){
$("span,#two,#one,.mini").css("BACkground","#006400");
});
2.层级选择器
如果想通过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。
$("div span") – 匹配div下所有的span元素
$("#b1").click(function(){
$("body div").css("BACkground","#F08080");
});
$("div>span") – 匹配div下所有的span子元素
$("#b2").click(function(){
$("body>div").css("BACkground","#FF0033");
})
$("div+span") – 匹配div后面紧邻的span兄弟元素
$("#b3").click(function(){
$("#one+div").css("BACkground","#0000FF");
});
$("div~span") – 匹配div后面所有的span兄弟元素
$("#b4").click(function(){
$("#two~div").css("BACkground","#9ACD32");
});
$("#two").siblings("div")--匹配d 为 two 的元素所有 <div> 兄弟元素
$("#b5").click(function(){
$("#two").siblings("div").css("BACkground","#FF6347");
});
3.基本过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的
DOM元素,该选择器都以 ":" 开头
$("div:first") – 匹配所有div中的第一个div元素
$("#b2").click(function(){
$("div:first").css("BACkground","#9ACD32");
});
$("div:last") – 匹配所有div中的最后一个div元素 $("div:even") – 匹配所有div中索引值为偶数的div元素，0开始
$("#b2").click(function(){
$("div:last").css("BACkground","#9ACD32");
});
$("div:odd") – 匹配所有div中索引值为奇数的div元素，0开始
$("#b2").click(function(){
$("div:odd").css("BACkground","#9ACD32");
});
$("div:eq(n)") – 匹配所有div中索引值为n的div元素，0开始
$("#b2").click(function(){
$("div:eq(n)").css("BACkground","#9ACD32");
});
$("div:lt(n)") – 匹配所有div中索引值小于n的div元素，0开始
$("#b2").click(function(){
$("div:lt(n)").css("BACkground","#9ACD32");
});
$("div:gt(n)") – 匹配所有div中索引值大于n的div元素，0开始
$("#b2").click(function(){
$("div:gt(n)").css("BACkground","#9ACD32");
});
$("div:not(.onE)") – 匹配所有class值不为one的div元素
$("#b2").click(function(){
$("div:not(.onE)").css("BACkground","#9ACD32");
});
4.内容选择器
$("div:contains(‘abc‘)") – 匹配所有div中包含abc内容的 div元素
如: <div>xxxabcxx</div>
$("#b1").click(function(){
$("div:contains(‘id‘)").css("BACkground-color","#FF6347");
});
$("div:has(p)") – 匹配所有包含p元素的div元素如: <div><p></p></div>
$("div:empty") – 匹配所有内容为空的div元素如: <div></div>
$("div:parent") – 匹配所有内容不为空的div元素如: <div>xxxxx</div>
5.可见选择器
$("div:hidden") – 匹配所有隐藏的div元素
$("div:visible") – 匹配所有可见的div元素
6.属性选择器
$("div[id]") – 匹配所有具有id属性的div元素
$("div[id=‘d1‘]") – 匹配所有具有id属性并且值为d1的div元素
$("div[id!=‘d1‘]") – 匹配所有id属性值不为d1的div元素 $("div[id^=‘d1‘]") – 匹配所有id属性值以d1开头的div元素
$("div[id$=‘d1‘]") – 匹配所有id属性值以d1结尾的div元素
7.子元素选择器
$("div:nth-child(n)") – n从1开始,匹配div中第n个子元素。
$("div:first-child") –匹配div中第1个子元素。
$("div:last-child") –匹配div中最后一个子元素。。。
8.表单选择器
$(":input") – 匹配所有的input文本框、密码框、单选框、复选框、SELEct框、textarea、button。
$(":password") – 匹配所有的密码框
$(":checked") – 匹配所有的被选中的单选框/复选
框/option
$("input:checked") – 匹配所有的被选中的单选框/复选框
$(":SELEcted") – 匹配所有被选中的option选项
以上是大佬教程为你收集整理的jQuery基础全部内容，希望文章能够帮你解决jQuery基础所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。