jQuery的基本介绍

jQuery特点
1 优质的选择器和筛选器
2 方便的隐式迭代
3 强大的链式编程
基于以上特点：很多时候我们要做的事情被 “一行代码解决”
必须下载并导入jQuery包。也就是 : jquery.js 或者 jquery.min.js静态资源库

选择器 — 用来获取DOM元素的方法：

Id选择器 $("#box");
Class选择器 $(".box");
标签选择器 $(“span”);
包含选择器 $("#box p");
子选择器 $("#box>p");
群组选择器 $("#box,.cont,p");
属性选择器 $(“input[type=button]”);

1
    
2
    
3
    
4
    
5
    
6
    

        
link1
        
link2
        
link3
        
link4
        
link5
        
link6
    
    

        

            
二级标题1
            
二级标题2
        
        
二级标题3
        
二级标题4
    
    7
    8
    9
    
    
    

    id
    $("#box").css("background","red");

    class
    $(".cont").css("background","red");

    标签
    $("span").css("background","red");

    属性
    $("input[abc=hello][qwe]").css("background","red");

    包含：后代
    $(".msg h2").css("background","red");

    群组：
    $("#box,.cont,span").css("background","red");

    包含：子
    $(".msg>h2").css("background","red");

筛选器方法 — 对选择器获取到的一组标签对象进行筛选
— 便于链式编程

.first()            匹配第一个
.last()             匹配最后一个
.eq()              匹配指定下标
.find()            匹配指定的后代元素
.children()     匹配指定的子元素
.prev()           匹配上一个兄弟
.prevAll()       匹配上面所有的兄弟
.next()           匹配下一个兄弟
.nextAll()       匹配下面所有兄弟
.siblings()      匹配所有兄弟,不管上下
.parent()        匹配直接父级
.parents()      匹配所有父级
.end()            匹配链式编程选择器的上一级

   $(".cont:eq(1)").css("background","red");

    $(".list li:eq(2)").css("background","red");

    第一个或最后一个
    $(".list li:first").css("background","red");
    $(".list li:last").css("background","red");

    $(".list li:odd").css("background","red");
    $(".list li:even").css("background","red");

    $(".msg").children("h2").css("background","red");

    $(".msg").find("h2").css("background","red");

    $(".list").children("li").first().css("background","red");
    $(".list").children("li").last().css("background","red");
    $(".list").children("li").eq(3).css("background","red");
    
    $(".msg").next("span").css("background","red");
    $(".msg").nextAll("span").css("background","red");

    $(".list").prev(".cont").css("background","red");
    $(".list").prevAll(".cont").css("background","red");

    $(".list").siblings().css("background","red");

    $(".xbox").parent().css("border","solid 1px black");
    $(".xbox").parents().css("border","solid 1px black");

    $(".list").children("li").eq(3).end().css("background","red");

jQuery的属性操作
.prop()方法
标签对象.prop(属性) —— 获取指定属性的属性值
标签对象.prop(属性 , 属性值)—— 设定属性和属性值
标签对象.prop(自定义属性 , 属性值) —— 设定自定义属性和属性值
注意：
设置内置属性时，可以直接显示在标签上，为 可见的内置属性
设置自定义属性时，不会直接显示在标签上，为 不可见的自定义属性

.removeProp()方法
标签对象.removeProp(属性) 删除指定的属性，多用于自定义属性

.attr()方法
标签对象.attr(属性) 获取指定属性的属性值
标签对象.attr(属性 , 属性值) 设定属性和属性值
标签对象.attr(自定义属性 , 属性值) 设定自定义属性和属性值
注意：
设置属性时，直接显示在标签上，为 可见的内置 或 自定义
.removeAttr()方法
标签对象.removeAttr(属性) 删除指定的属性

jQuery的样式操作
常用操作方式
标签对象.css(属性) —— 获取指定属性的属性值
标签对象.css(属性 , 属性值) —— 设定属性以及属性值
标签对象.css({属性 : 属性值}) —— 以对象的形式,设定属性以及属性值也
可以同时设定多个属性属性定义的方式比较灵活

 $("#box").css({
        width:"100px",
        height:200,
        background:"red",
        opacity:0.5,
        fontSize:30,
        lineHeight:"100px"
    });
    console.log($("#box").css("width"));
    console.log($("#box").css("background-color"));
    console.log($("#box").css("font-size"));
    console.log($("#box").css("border"));

.hasClass() 判断标签是否具有某个class，返回布尔值
.addClass() 给标签添加class，可以添加多个
.removeClass() 删除标签的class，可以删除多个
.toggleClass() 判断当前标签是否具有某个class，有就删除，没有就添加