<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="div1">我是東方閃電</div>
<div class="div1">我是東方閃電2號</div>
<div class="div1">我是東方閃電2號</div>
<div id="div2">我是東方閃電2號
<p>div2我是p標籤</p>
<p>div2我是p標籤</p>
<div>
<p>我是p標籤div</p>
<p>我是p標籤div</p>
</div>
</div>
<div class="div3">我是東方閃電3號</div>
<div class="div3">我是東方閃電3號</div>
<div class="div3">我是東方閃電3號</div>
<p>鴻運當頭</p>
<script>
// $是jQuery對象的簡寫；
$(function(){ // 執行一個匿名函數
var div1 = $("#div1") // 根據id獲取元素
div1.css({"height":"100px","width":"100px","background":"blue"})// 使用 .css對象方式設置行內樣式
div1.css("border","1px solid red").css("color","red") // 鏈式方式設置樣式
})
// 延遲的加載模式：js方式：window.onload = function(){}
// onload 必須要等待網頁全部加載完畢包括圖片，然後再執行包裹代碼；只執行一次；如果執行第二次，那麼此一次的會被覆蓋
// jQuery方式： $(document).ready(function(){})
// $(document).ready(function(){}) 只需要等待dom加載完畢了就執行包裹的代碼
// 簡寫方式$(function(){}) 相當於 jQuery(function(){})
// jQuery對象轉換成原生對象的方法： get() 或者 [index]
var all_id_div1 = $("#div1").get() // 獲取id是div1的元素並轉換成 js對象
var all_class_div1 = $(".div1").get()// 獲取class是div1的元素並轉換成 js對象; .get(0) 是獲取第一個
$(".div1")[0] //獲取第一個元素
// jQuery.noConflict();// 將$所有的權限剔除；
// var $$ = jQuery; // 將jQuery對象賦值給 $$;
//jQuery中選擇器的使用
// 1,id選擇器
$('#div2').css("font-size","20px");// 使用id選擇器獲取元素並設置樣式
// 2，class選擇器
$(".div3").css("color","red");// 使用class選擇器獲取元素並設置樣式
$(".div3").get(1).style.color = "orange";// 使用class選擇器獲取元素並設置第二個元素樣式（其中get() 讓jQuery對象轉爲js對象）
$(".div3").get(2).style.fontWeight = 600;// 使用class選擇器獲取元素並設置第二個元素樣式（其中get() 讓jQuery對象轉爲js對象）
// 3，元素選擇器
$("p").css("background","skyblue");// 使用元素選擇器選取元素並設置樣式
// 可以使用jquery中的 length 獲取size()查看返回的元素的個數
// 4,子選擇器
$("#div2 > p").css('color','red');
</script>
</body>
</html>
