最近在公司做项目的过程中，涉及到写前端部分，因为之前一直很少写前端，所以不是很熟悉，所以，在此写一下自学jQuery的过程，以及中途遇到的坑。
首先，要想使用jQuery必须先引入jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> </head>
<body> <script type="text/javascript">
/*
alert(222)
window.onload = function(){
//window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
//如果不写window.onload() 代码的执行顺序 从上到下
var oDiv = document.getElementById('box');
console.log(oDiv);
}
*/ </script> <div id="box"> </div> </body>
<script src="./jquery-3.2.1.js"></script>
<script type="text/javascript"> //如果没有引入jquery ：$ is not defined
console.log($)
//jquery是js的一个库文件，既然是库文件，那么就会抛出来一个构造函数或者对象 //$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕
//书写jquery的方式 入口函数
$(document).ready(function(){
alert(111)
}) //等价
$(function(){
alert(222);
})
</script> </html>
对，没错，就上面那个<script src="./jquery-3.2.1.js"></script>那个
如果说没有引入jQuery使用$就会报错，没有定义，如上面的代码。
$(document).ready(function(){
alert(111)
})
这个一般用在初始化界面的时候调用，比如修改内容的时候，原来什么东西是隐藏的，就用这个，因为他是从页面加载的时候就存在的。
而下面的$(function){})就是上面的简写方式。
——————————————————————————————————————————————————————————————————————
下面是jQuery的选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*#brother{
color: red;
font-size:24px;
}*/
</style>
</head>
<body>
<ul>
<li id="brother">你大爷1</li>
<li><a href="https://www.luffycity.com">你大爷2</a></li>
<li class="li3">你大爷3</li>
<li>你大爷4</li>
<li>你大爷5</li> </ul>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数
$(document).ready(function(){ //基础选择器
//1.id选择器
console.log($('#brother')); $('#brother').css('color','red'); //2.标签选择器
//设置一个值
// $('a').css('color','yellow')
// 设置多个值 设置多个值得时候使用对象存储 key:value
$('a').css({'color':'yellow','font-size':'24px'}); //3.类选择器 $('.li3').css('background','green'); //4.通配符选择器 * 使用不是很频繁 console.log($('*'));
//清空整个界面的dom元素
$('*').html(''); }) </script>
</html>
选择器的种类如上所示：分为ID选择器，标签选择器，类选择器，通配符选择器；当然这些是一种基础类型的选择器。
所需要注意的是，当一个选择器想要设置多个元素的时候采用{}的形式。
$('a').css('color','yellow')单个
$('.li3').css('background','green');
$('a').css({'color':'yellow','font-size':'24px'});多个
下面是层级选择器的使用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*#brother{
color: red;
font-size:24px;
}*/
</style>
</head>
<body>
<ul>
<li id="brother">你大爷1</li>
<li><a href="https://www.luffycity.com">你大爷2</a></li>
<li class="li3">你大爷3</li>
<li>你大爷4</li>
<li>你大爷5</li> </ul> <div id="box">
<p id="father">天王盖地虎</p>
<p>我是你老母</p>
<p>宝塔镇河妖</p>
<p>蘑菇放香蕉</p>
<div id="box2">
<p>小鸡炖蘑菇</p>
</div> </div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数
$(document).ready(function(){ //1.后代选择器 div p $('#box p').css('color','red'); //2.子代选择器 div > p $('#box>p').css('color','yellow') //3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 +
$('#father+p').css('font-size','30px'); //4.兄弟选择器 ~
$('#father~p').css('background','blueviolet'); console.log($('li')); //5.获取第一个元素
$('li:first').css('font-size','50px'); //6.获取最后一个元素 $('li:last').css('font-size','50px'); $('li:eq(3)').css('font-size','50px'); }) </script>
</html>
子代选择器('div>p ')和后代选择器（'div p'）的最大区别就是在于子代是只选择儿子辈，后代是子子孙孙无穷尽。
而兄弟选择器('#father~p')和毗邻选择器('#father+p')最大区别在于兄弟是选择同一层级下的所有，而毗邻只是同一层级下的一个。
而
$('li:eq(3)').css('font-size','50px');
用的最多
属性选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<!--<p class="p1">我是一个段落</p>-->
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li> </ul> <form action="" method="post"> <input name="username" type='text' value="1" checked="checked"></input>
<input name="username1111" type='text' value="1"></input>
<input name="username2222" type='text' value="1"></input>
<input name="username3333" type='text' value="1"></input>
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button> </form>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> $(function(){
// 标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red'); //匹配给定的属性是what值得元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('font-size','50px'); // 匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','gray');
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','greenyellow'); //匹配给定的属性是以包含某些值的元素
$('button[class*=btn]').css('background','red') }) </script>
</html>
筛选选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> //获取第n个元素 数值从0开始
$('span').eq(1).css('color','#FF0000'); //获取第一个元素 :first :last 点语法 ：get方法 和set方法
console.log($('span').last());
$('span').last().css('color','greenyellow'); console.log($('span').parent('.p1'))
$('span').parent('.p1').css({"width":'300px',height:'400px',"background":'red'}); //.siblings()选择所有的兄弟元素
$('.list').siblings('li').css('color','red') //.find()
//查找所有的后代元素
$('div').find('button').css('background','yellow') </script>
</html>
筛选选择器的区别在于他是先选中之前的条件再去选择之后的条件：属于链式调用