本节内容
什么是jQuery?
write less,do more.
jQuery是一个快速，小巧，功能丰富的JavaScript库。
它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。
通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。
关于jQuery的相关资料：
-
官网API文档：http://api.jquery.com/
-
汉化API文档：http://www.css88.com/jqapi-1.9/
学习jQuery的目的
学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的API。（什么是API呢?）
这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
下载jQuery
到官网下载：http://jquery.com/
jQuery的两大特点
1、链式编程：比如.show()和.html()可以连写成.show().html()。
2、隐式迭代：意思是在方法内部进行循环遍历，而不是我们自己在进行遍历，简化操作。
jQuery的使用步骤
1、引包
2、入口函数
3、功能实现代码 (事件处理)
注意：导包的代码一定要放在js代码的最上面。
jQuery的入口函数和$符号
入口函数
原生js的入口函数指的是：window.onload = function(){ };
window.onload = function(){
//window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
//如果不写window.onload() 代码的执行顺序 从上到下
var oDiv = document.getElementById('box');
console.log(oDiv);
jQuery的入口函数有以下几种写法：
//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(document).ready(function () {
alert(1);
})
//2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(function () {
alert(1);
});
//3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
$(window).ready(function () {
alert(1);
})
jQuery的入口函数与js的入口函数的区别
区别一：书写个数不同：
-
Js 的入口函数 window.onload 不能同时编写多个，如果有多个window.onload方法，只会执行一个，覆盖。
-
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。
区别二：执行时机不同：
-
Js的入口函数 window.onload 是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
-
jQuery的入口函数 $(document).ready() ，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
文档加载的顺序：从上往下，边解析边执行。
jQuery的$符号
jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。
jQuery占用了两个变量：$ 和 jQuery。
<script src="jquery-3.3.1.js"></script>
<script> console.log($);
console.log(jQuery);
console.log($===jQuery); </script>
打印结果：
$实际上表示一个函数名：
$(); // 调用上面我们自定义的函数$ $(document）.ready(function(){}); // 调用入口函数 $(function(){}); // 调用入口函数 $(“#btnShow”) // 获取id属性为btnShow的元素 $(“div”) // 获取所有的div标签元素
如上方所示，jQuery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。
jQuery这个js库，除了$ 之外，还提供了另外一个函数：jQuery。jQuery函数跟 $ 函数的关系：jQuery === $。
js中的DOM对象和jQuery对象的比较
二者的区别
通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：
针对下面这样一个div结构：
<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
通过原生 js 获取这些元素节点的方式是：
var myBox = document.getElementById("app"); //通过 id 获取单个元素
var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组
var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组
通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）
//获取的是数组，里面包含着原生 JS 中的DOM对象。
console.log($('#app'));
console.log($('.box'));
console.log($('div'));
设置当前div的样式：
$('div').css({
'width': '200px',
'height': '200px',
"background-color":'red',
'margin-top':'20px'
})
由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。
总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。
二者的相互转换
1、DOM对象转换为jQuery对象：
$(js对象);
2、jQuery对象转换为DOM对象：
jquery对象[index]; //方式1（推荐） jquery对象.get(index); //方式2
jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：
$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';
总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。
jQuery的选择器
基础选择器
1、id选择器
2、标签选择器
3、类选择器
4、通配符选择器
<!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" rel="external nofollow" rel="external nofollow" >学校2</a></li>
<li class="li3">学校3</li>
<li>学校4</li>
<li>学校5</li> </ul>
</body>
<script src="jquery-3.3.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>
示例
层级选择器
<!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" rel="external nofollow" rel="external nofollow" >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.3.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>
示例
基本过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本过滤选择器</title>
</head>
<body>
<ul>
<li>哈哈哈哈，基本过滤选择器</li>
<li>嘿嘿嘿</li>
<li>天王盖地虎</li>
<li>小鸡炖蘑菇</li> </ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript"> $(function(){
//获取第一个 :first ,获取最后一个 :last //奇数
$('li:odd').css('color','red');
//偶数
$('li:even').css('color','yellow'); //选中索引值为1的元素 *
$('li:eq(1)').css('font-size','100px'); //大于索引值1
$('li:gt(1)').css('font-size','50px'); //小于索引值1
$('li:lt(1)').css('font-size','12px');
})
</script>
</html>
示例
属性选择器
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$("li[id]").css('color','red') //[attr=value] 匹配给定的属性是某个特定值的元素
$('li[class=what]').css('font-size','30px') //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('color','darkgreen')//匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','red')//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','yellow')//匹配给定的属性是以包含某些值的元素
$("button[class*='btn']").css('background','#0000FF')
<!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 name="username1111" type='text' value="1">
<input name="username2222" type='text' value="1">
<input name="username3333" type='text' value="1">
<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.3.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>
示例
筛选选择器
//获取第n个元素 数值从0开始
$('span').eq(0).css('font-size','30px')//first()获取第一个元素
$('span').first().css('background','red')//last()获取最后一个元素//.parent() 选择父亲元素
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'})//.siblings()选择所有的兄弟元素
$('.list').siblings('li').css('color','red')//.find()
//查找所有的后代元素
$('div').find('button').css('background','#313131')
<!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.3.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>
示例
