jQuery基础——选择器

前言

• jQuery中的选择器和css及js的选择器非常类似
• 有标签选择器
• 类选择器
• id选择器
• 后代选择器
• 非常多… …

使用jQuery的准备工作

• 首先要引入jQuery.js文件，可以下载，也可以直接引用线上的
• 在书写jQuery前要先添加一个：

jQuery(document).ready(function(){
// 代码写在这里面
})
// 两种方法都可以：下面的是上面的简写形式
// 或者：
$(function(){
// 代码写在这里面
}

jQuery的一些基本的选择器：

// 比如：
$(function(){
	// jquery的语法是:
		$()
        // 选择所有的div标签
        console.log($("div"));
        // 选择所有的class名为test的
        console.log($(".test"));
        // 选择id为box的元素
        console.log($("#box"));
        // 选择所有的标签，包括html body...
        console.log($("*"));
        // 群组选择
        console.log($("p,#box"));

        // 后代选择器
        console.log($("div span"));
        // 父元素最近一层的子元素
        console.log($("div > span"));
        // 元素1同级离得最近的下面的同级元素
        console.log($("div + div"));
        console.log($("div + p"));
        // 选中元素1同级下面的所有的元素2
        console.log($("div~div"));

        // 选中所有标签中的第一个
        console.log($("div p:first"));
        // 选择第一个元素
        console.log($("div p:first-child"));
        // 选中除了，not括号里的标签
        console.log($("div:not(.test)"));
        // 选中所有索引为偶数的元素
        console.log($("div:even"));
        // 选择指定索引的元素
        console.log($("div p:eq(1)"));
        // 选择所有标题元素
        console.log($(":header"));
        // 选中内容里有1的元素
        console.log($("p:contains('1')"));
        // 选择所有内容为空，或没有子元素的元素
        console.log($("div:empty"));
        // 选择所有的 内部元素有span的div
        console.log($("div:has(span)"));
        // 选择所有含有子元素或者文本的元素
        console.log($("div:parent"));
        // 选择所有有class属性的元素
        console.log($("[class]"));
        console.log($("[class^=a]"));

        // 选择所有的表单元素
        console.log($(":input"));
        // 选择所有的单选按钮
        console.log($(":radio"));

        console.log($("div:nth-of-type(1)"));
        console.log($("div:nth-child(5)"));
    });