jQuery学习:选择器

$

$其实就是一个函数，用();

参数不同，功能就不同

三种用法：

参数是一个function，入口函数

        $(function(){

        });
        console.log(typeof $);

$(domoj) 把dom对象转换成jQuery对象

        $(document).ready(function(){

        });

参数是一个字符串，用来找对象

$("div") 
$("div ul") 
$(".current")

console.log(typeof $); //function

基本选择器

jQuery设置样式 .css(name,value); name:样式名,value:样式值

id选择器 $("#id");
类选择器: $(".id");
标签选择器: $("div");

        
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
        

        111
        111
        111
        111

        $("#four").css("backgroundColor", "red");
        $(".green").css("backgroundColor", "green");
        $("li").css("color","yellow");
        // 并集
        $("#four,.green").css("backgroundColor","blue");
        // 交集
        $("li.green").css("backgroundColor", "blue");
        $(".green.yellow").css("backgroundColor", "blue");

子类选择器和后代选择器

并集选择器
$("s1,s2")
后代选择器
$("s1 s2")
子代选择器
$("s1>s2")
交集选择器
$("s1s2")
子类选择器
$("#father>p").css("backgroundColor","red");
后代选择器
$("#father p").css("backgroundColor","red");

过滤选择器

index() 方法

        
            我是链接
            我是链接
            我是链接
            我是链接
            我是链接
            我是链接
            我是链接
            我是链接

案例：隔行变色


        
            我是第1个li
            我是第2个li
            我是第3个li
            我是第4个li
            我是第5个li
            我是第6个li
            我是第7个li
            我是第8个li
            我是第9个li
            我是第10个li

案例：淘宝精品

案例：下拉菜单

案例：突出展示

案例：手风琴

jQuery学习:选择器

基本选择器

子类选择器和后代选择器

过滤选择器

index() 方法

你可能感兴趣的:(jQuery学习:选择器)