jQuery常用的API
1:jQuery的选择器
$(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号
属性 | 描述 | 使用 |
---|---|---|
ID选择器 | 获取指定ID的元素 | $("#id") |
全选选择器 | 匹配所有元素 | $("*’’) |
类选择器 | 获取同一类class的元素 | $(".class") |
标签选择器 | 获取同一类标签的所有元素 | $(“div”) |
并集选择器 | 选取多个元素 | s(“div,p,li”) |
交集选择器 | 交集元素 | $(“Ii.current”) |
子代选择器 | 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素 | $(“ul>li”); |
后代选择器 | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 | $(“ul li”); |
2:jQuery隐式迭代
遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。
jQuery的样式不可以使用style
jQuery的样式设置:
$('div').css('属性','值');
3:jQuery筛选选择器
属性 | 使用 | 描述 |
---|---|---|
:first | $("li:first’) | 获取第一个li元素 |
:last | $("li:last’) | 获取最后一个li元素 |
:eq(index) | $(“li:eq(2)”) | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd | $(“Ii:odd”) | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“Ii:even”) | 获取到的li元素中,选择索引号为偶数的元素 |
4:jQuery筛选方法
属性 | 使用 | 描述 |
---|---|---|
parent() | $(“li”).parent(); | 查找父级 |
children(selector) | $(“ul” ).children(“li”) | 相当于$(“ul>li”),最近一级(亲儿子) |
find(selector) | $(“ul” ).find(“li”); | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $( “.first” ). siblings(“li”); | 查找兄弟节点,不包括自己本身 |
nextAll([expr]) | $(".first"). nextAl1() | 查找当前元素之后所有的同辈元素 |
prevtAll([expr]) | $(".last") . prevAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $( 'div ’ ).hasClass(“protected”) | 检查当前的元素是否含有某个特定的类,如果有,则返回true |
eq(index) | $(“li”).ea(2); | 相当于$(“li:eq(2)” ) , index从0开始 |
【叨叨】
突 然 发 现 , 可 以 变 化 字 体 突然发现,可以变化字体 突然发现,可以变化字体
突然发现,可以变化字体
m e r r y c h r i s t m a s . merry christmas. merrychristmas.
merry christmas
<body>
<div class="test"></div>
<div></div>
</body>
<script>
var flag = $('div:first').hasClass('test');
console.log(flag);
//结果返回true
</script>
5:jQuery 的排他思想
<script>
//先全局函数
$(function () {
//点击li,让li添加底下内容
// 1:变化li的背景色
$(".tab_list li").click(function () {
$(this).addClass('current').siblings().removeClass('current');
// 2:变化底下的内容
// 获取被点击li的索引号
var index = $(this).index();
$(".tab_con .item").eq(index).show().siblings().hide();
})
})
</script>