JQuery基础-DAY1 - 爱码网

是一个轻量级的js框架/库，其宗旨是write less do more。

jQuery对象

js的对象叫做dom对象

使用jQuery框架产生的对象是jQuery对象，是对dom对象的包装。jQuery下的对象方法和dom对象方法不能混用，只能各用个的。

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$

//基本语法
$(selector).action()      //即选择器选择生成对象，对象调用方法

jQuery中文手册：http://jquery.cuishifeng.cn/

对象转换

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]    jquery对象按索引取出来的是dom对象，如：     
　　$("#msg").html()
　　$("#msg")[0].innerHTML

查找操作对象

选择器

查找要操作的标签，生成jquery对象

基本选择器

$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p >PPP</p>
<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div>
<span class="d1">SPAN</span>
<span class="c2">SPAN</span>
<a href="">AAAA</a>

<script src="jquery-3.2.1.js"></script> //导入jquery文件
<script>
    //    基本选择器
    $("#p1").css("color","red") //按照id选择
    $(".d1").css({"color":"green","fontSize":"50px"}) //按照class选择
    $("div").css({"color":"yellow","fontSize":"35px"}) //按照标签名div选择
    //$("*").css({"color":"blue","fontSize":"30px"}) //body下的所有标签
    $(".c2,a").css({"color":"gray","fontSize":"30px"}) //多个条件用空格隔开


</script>
</body>
</html>

基本选择器示例