一、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';