一、jq簡介

一、jq的書寫

1、在導入jq源碼的時候，就可以用jq的方法了

<script src="./01-jquery簡介/js/jquery-3.4.1.js"></script>

用jq的方法必須在前面加上jQuery，我們可以試試打印出jQuery,得到的結果爲

當然爲了簡化，我們用$來代替，我們也可以試試Jquery是否等於$結果爲true，所有爲了簡寫我們通常寫成$

console.log(jQuery===$)//結果爲true

2、jq的簡化歷程
在沒有使用jq之間，我們選中一個標籤非常麻煩，例如

<div id="box">123</div>

要是我們選中這個div，用

var div =document.getElementById('box');
var div=document.getElementsByTagName('div')[0];
var div=document.querySelector('div');

但是看着就非常的麻煩，而且還要很多約束，但是我們引入了jq後，我們的代碼就在一步一步的減少，接下來就是jq的不斷簡化的過程

$(document).ready(function(){
			var box=document.getElementById('box');

簡化：document可以不用寫

$().ready(function(){
			var box=document.getElementById('box');

再簡化：.read可以不用寫

$(function(){
		var box=document.getElementById('box');
})

現在最終的簡化寫法

$('#box')

從上面的過程就可以看出，jq在我們對代碼的簡化起到了很大的作用，讓學代碼可以用最短的代碼來完成複雜的作用
例：我們來寫一個點擊一個按鈕就在頁面生成一個寬高爲100的，背景顏色爲green的小方塊
原生js

var btn = document.getElementById('btn');
	btn.onclick = function () {
	var div = document.createElement('div');
	div.style.height = '100px'
	div.style.width = '100px'
	div.style.background = 'green'
	document.body.appendChild(div)
}

jq寫法

		$('#btn').click(function () {
			$('div').css({
				width: '100px',
				height: '100px',
				background: 'green'

			}).appendTo('body');
		});

這樣看着就極其簡介和方便

二、強大的選擇器

這裏由於太多了，我又寫了一遍文章來深度講解jq的強大選擇器
詳細的jq選擇器
簡單的幾個jq選擇器如下：

$('ul li:nth-child(1)')//選中ul下面第一個子元素，並且第一個子元素必須是li
$('#ulId li:first-child')//第一個子元素必須是li
$('.ulClass li:first-child + li')//選中第二個子元素必須是li
$('li[name=blue]')//選中li上面屬性爲name=blue的元素

三、鏈式操作

$('.text').html('###')
.css('border','1px solid #000').width(200).height(200)
.css('background','grey');//.html是給元素添加文本內容

四、原生js獲取到的對象與jquery取到的對象的對比

var h1=document.querySelector('h1');
	h1.style.color='red';
	//h1.css('color','pink');//報錯，原生的對象不使用jquery裏的方法

var $h1=$('h1');
	$h1.css('color','green');
	//$h1.style.color='pink';//報錯，jquery的對象也不能使用原後的方法

爲了相互使用，可以把原生轉成js，js轉成jq

//原生轉jquery
$(h1).css('color','blue');

//jquery轉原生
$h1[0].style.color='purple';