jQuery的选择器

一、什么是jQuery？

1、jQuery特点

轻量级:封装后的库只有不到100k，下载的时候很快

强大选择器:方便快速查找DOM元素

隐式遍历(迭代):一次操作多个元素
读写合一:读数据/写数据用的是一个函数
链式调用:可以通过.不断调用jQuery对象的方法事件处理
DOM操作(CUD)·样式操作
动画
浏览器兼容

丰富的插件支持

2、如何使用jQuery

1. 引入jQuery文件
2. 入口函数
3. 功能实现

jQuery的入口函数： 

<script>
    // $相当与jQuery
    // 第一种写法
    $(document).ready(function(){

    });
    // 第二种写法
    $().ready(function(){

    });
    // 第三种写法
    $(function(){
        // 编写功能代码实现
    });
</script>

jQuery入口函数与js入口函数的对比： 

1. JavaScript的入口函数要等到页面中的所有资源（包括图片、文件）加载完成才开始执行。
2. jQuery的入口函数只会等待文档加载完成就开始执行，并不会等待图片，文件的加载

二、基本选择器的使用

1、基本选择器

名称	用法	描述
ID选择器	$("#id");	获取指定ID的元素
类选择器	$(".classname");	获取同一类class的元素
标签选择器	$("div");	获取同一类标签的所有元素
并集选择器	$("div,p,span");	使用逗号分隔，只要符合条件之一就可
交集选择器	$("div.list");	获取class为list的div元素

//jquery如何设置样式
//css(name，value)
//name:属性名 value:属性值 
//id选择器
$("#one").css("background", "brown");
//class选择器
$(".two").css("background" , "green");
//标签选择器
$("li").css("border" , "5px solid #fff");
//并集选择器
$ ("div,p").css("background" , "red");
//交集选择器
$("div.box" ).css("background" , "#orange");

 案例效果图：