1. 常用选择器

2. 样式设置

(1) $('p').css('属性名','属性值')

// 先写个入口函数 再写样式和方法

$(() => {

$('.dom1').css({

'background': '#f00',

'color': '#fff'

});

})

(2) 隐式迭代: 给匹配所有元素内部时行遍历循环,给每个元素添加CSS样式

3. 筛选选择器

(1) 获取第 1 个 li 元素: $('li:fist')

(2) 获取最后 1 个 li 元素: $('li:last')

(3) 获取li 元素且索引号为2的: $("li:eq(2)")

(4) 获取li 元素且索号为奇数: $("li:odd")

(5) 获取li 元素且索号为偶数: $("li:even")

4. 筛选方法

(1) 查找父级: $("li").parent();

(2) 亲儿子[$("ul>li")]: $("ul").children("li");

(3) 后代[$("ul li")]: $("ul").find("li");

(4) 查找兄弟节点,不包括自己: $(".first").siblings("li");

(5) 查找当前元素之后所有同辈元素: $(".first").nextAll();

(6) 查找当前元素之前所有同辈元素: $(".last").prevAll();

(7) 查找当前元素是否含有某个特定的类返回布尔值: $('div').hasClass("protected"); -> 相当于$("li:eq(2)"): $("li").eq(2);

// 找关系最简方法不用一级一级向上找

var p = $(this).parent().parent().siblings().children("span").html();

// 可以直接这样写

var p = $(this).parents().siblings().children("span").html();

// 用jQuery来完成鼠标移入显示 / 移出隐藏效果 [先写个入口函数]

$(() => {

//鼠标移入

$(".nav>li").mouseover(function() {

$(this).children("ul").show();

});

//鼠标移出

$(".nav>li").mouseout(function() {

$(this).children("ul").hide();

});

});

5. 排他思想

//排他思想

// jQuery 函数入口

$(() => {

// 隐式迭代 给所有元素都绑定点击事件

$("button").click(function() {

//当前元素发生改变

$(this).css({

'background': '#90f',

'color': '#fff'

});

// 其它元素发生改变

$(this).siblings("button").css({

'background': '#000',

'color': '#c0ff00'

});

})

});

6. 样式操作

(1) $(".dom").css({"background": "#f00", "color": "#fff"})

(2) 添加类名: $("div".addClass(".Rita"))

(3) 移除类: removeClass()

(4) 切换类: toggleClass()

7. 层级选择器

8. 属性选择器

(1) $('p li[class]').css()

(2) $('p li[title = blue]').css()

(3) $('p li[title != blue]').css() -> 取反

(4) $('p li[title |= css]').css() -> 前缀css-用横杠隔开

(5) $('p li[id ^= color]').css() -> 以属性值开始不需要隔开

(6) $('p li[id $= color]').css()

(7) $('p li[lang *= cn]').css()

(8) $('p li[lang ~= cn]').css()

(9) $('p li[lang = cn] [name = kaivon]').css()

9. 基础过滤器

(1) $('.demo li:eq(1)').css() -> 等于索引

(2) $('.demo li:gt(2)').css() -> 大于索引

(3) $('.demo li:lt(3)').css() -> 小于索引

(4) $('.demo li:not(p li:eq(2))').css ->

(5) $('.demo li:even').css -> 偶

(6) $('.demo li:odd').css -> 奇

(7) $('.demo li:first').css -> 第一个

(8) $('.demo li:last').css -> 第一个

(9) li:lang(en) -> li:target(tar) -> :root -> :header

0. 子元素过滤器

(1) $("#demo p:first-child").css()

(2) $("#demo p:last-child").css()

(3) $("#demo span:first-of-type").css()

(4) $("#demo span:last-of-type").css()

(5) $("#demo p:nth-child(2)").css()

(6) $("#demo p:nth-of-type(2)").css()

(7) $("#only p:only-child").css()

(8) $("#only1 p:only-of-type").css()

A. 内容过滤

(1) $("#page:container(kavion)").css()

(2) $("#page:empty").css()

(3) $("page1:has(p)").css()

(4) $("page:parent").css()

B. 表单过滤

(1) $(":button").css()

(2) $("#sex input:checkbox").wrap("").parent().css()

(3) $(":checked").wrap("").parent().css()

C. jQuery 强大的选择器功能

(1) $('ul li:nth-child(1)')

(2) $('ul li:first-child')

(3) $('.caset li:first-child + li')

(4) $('li[name = blue]')

(5) li.css('color', '#f00');

(6) $('.todo').html('eating fish').css().width(100).height(100) -> 添加文本内容

D. 内容选择器

(1) 找到没内容也没子元素 -> $("div:empty");

(2) 找到有文本内容或有子元素 -> $("div:parent")

(3) 选择所有包含指定文本的元素 -> $("div:contains("动画")");

(4) 选择子元素包含span -> :has(span)