jquery入门
1.什么是jquery？
优秀的JavaScript库，封装了JavaScript的常用功能，直接调动
语法简洁：$('选择器').方法()
*/特点*/
jQuery强调的理念是写得少，做得多（write less, do more），jQuery独特的选择器、链式操作、事件处理机制和封装完善的ajax都是其他库望尘莫及的。概括起来，jQuery有以下优势。
● 轻量级。
● 强大的选择器。
● 出色的DOM操作的封装。
● 可靠的事件处理机制。
● 完善的ajax。
● 不污染顶级变量。
● 出色的浏览器兼容性。
● 链式操作方式。
● 隐式迭代。
● 行为层和结构层分离。
● 丰富的插件支持。
● 完善的文档。
● 开源。
2.jquery的引入
1.jquery实际上就是一个.js文件，获取jQuery库文件有两种方式：
1.去官方网站下载：http//jquery.com/
中文网 https://www.jquery123.com/
2.去CDN下载：https://www.bootcdn.cn/jquery
<!-- 1.引入网上 CDN(内容分发网) -->
<!-- <script src='http://libs.baidu.com/jquery/1.11.1/jquery.min.js'></script> -->
<!-- 2.引入本地 -->
<script src="jquery-3.4.1.js"></script>
2.版本
最新版本3.4.1
jQuery从2.0版本以后不再兼容IE，公司开发中使用2.0以下版本
压缩版本：用于项目开发
未压缩版本：用于学习，研究
3.$与jQuery的关系
$就是jquery对象的别名,$是jQuery的简写
window.jQuery = window.$ = jQuery;
$("button").click(function () {
alert("Fd");
});
jQuery("button").click(function () {
alert("Fd");
});
就相当于var a = 10;
var b = c = a;
4.页面加载
$(document).ready(function () {
alert("1");
});
$().ready(function () {
alert("2");
});
$(function () {
alert("3");
});
window.onload和ready方法的区别？
window.onload:
等文档和资源都加载完成后调用（必须等网页中所有的内容加载完毕后才能执行，包括图片）
会覆盖，后面的会覆盖前面
没有简写形式
ready：
等文档加载完成后就调用（网页中所有DOM结构绘制完毕就可以执行，可能DOM元素相关的内容并没有加载完）
不会覆盖，会叠加
可以简写$(function(){});
5.jQuery对象与DOM对象的关系
<!--
jq和js的关系：可以共存，不能混用
jquery对象和DOM对象的互换
jquery对象转DOM对象，直接加下标获取$("#box")[0]
DOM对象转jquery对象，直接在外面加$(); $(Div);
-->
<div id="box"></div>
<script src="jquery.js"></script>
<script>
//js
var oDiv = document.getElementById("box");
oDiv.style.width = "200px";
oDiv.style.height = "200px";
//jq
$("#box").css("background","green");
//可以共存，不能混用 $("#box").style.background = "red";
//DOM对象： id tagname className
var dom = document.getElementById("box");
console.log(dom); //<div id="box"></div> DOM对象
//jquery对象：$(选择器)
console.log($("#box")); //init [div#box, context: document, selector: "#box"]
//互换
//1.jquery对象转DOM对象，直接加下标获取$("#box")[0]
$("#box")[0].style.background = "red";
//2.DOM对象转jquery对象，直接在外面加$(); $(Div);
$(dom).css("background","pink");
</script>
6.选择器
所有的css选择器都可以在jq中使用 id 元素 类 后代 相邻 通配符 伪类
没有优先级，以先后顺序为主
(1)基本选择器
| #box | 获取标签中id名为box的标签 |
|---|---|
| .box | 获取所有class名为box的标签 |
| $(“标签名”) | 获取所有对应标签名的标签 |
//1.id选择器 #
$("#box").css("background","red");
//2.类选择器 .box 所有类名叫box的标签
$(".box").css("background","pink");
//3.元素选择器 $("标签名")
$("div").css("background","green");
//自动给所有选中的标签添加事件，自动循环
$("div").click(function(){
console.log(this); //<div></div> dom
$(this).css("background","red");
//this： this是dom对象，需要转换
});
//下标，每一个对象，都会有一个方法index(选择器);
//index:给当前元素的父元素的所有子元素添加的下标
var index = $(this).index(); //index:给当前元素的父元素的所有子元素添加的下标
var index = $(this).index("li"); //指定添加下标的子元素
(2)层次选择器
| $(“ul li”) | 获取ul标签中的所有li标签 |
|---|---|
| $(“ul>li”) | 获取ul标签中的直接子元素li |
| $(“div+span”) | 获取div标签的下一个兄弟span元素 |
| $(“div~span”) | 获取div标签后面的所有兄弟span元素 |
//后代选择器 只要包含就行
$("div span").css("background","red");
//子代选择器 直系
$("div>span").css("background","blue");
//相邻选择器 $("#box+li") 紧跟在后面的元素，下一个兄弟元素
$("#box+li").css("background","green");
//$("#box~li") 兄弟选择器 后面所有的兄弟
$("#box~li").css("background","orange");
//方法
$("#box").next().css("background","pink"); //下一个
$("#box").nextAll().css("background","pink"); //下面所有的
$("#box").prev().css("background","skyblue");//前一个
$("#box").prevAll().css("background","skyblue");//前面所有的
//所有的兄弟
$("#box").siblings().css("background","yellow");
(3)基本过滤选择器
| $(“ul li:first”) | 获取ul中第一个li元素 |
|---|---|
| $(“ul li:last”) | 获取ul中最后一个li元素 |
| $(“li:not(‘.box’)”) | 获取除.box元素外的所有li元素 |
| $(“li:even”) | 获取下标为偶数的li元素 |
| $(“li:odd”) | 获取下标为奇数的li元素 |
| $(“li:eq(下标)”) | 获取li中对应下标的元素， $(“li”).eq(下标) |
| $(“li:gt(2)”) | 获取下标大于2的li元素 |
| $(“li:lt(2)”) | 获取下标小于2的li元素 |
//第一个 先获取选择器中所有的标签，在其中找第一个
$("li:first").css("background","#ccc");
//最后一个 先获取选择器中所有的标签，在其中找最后一个
$("li:last").css("background","green");
//第几个
$("li:nth-child(3)").css("background","red");
//通过下标获取li:eq(下标) 下标从0开始
//$("li:eq(4)").css("background","pink");
var n = 4;
$("li:eq("+n+")").css("background","pink");
$("li").eq(n).css("background","orange");
//:not(选择器) 排除 除了
$("li:not(.box)").css("background","red");
//奇 偶
$("li").css("background","#fff");
$("li:odd").css("background","red"); //奇
$("li:even").css("background","green");//偶
//gt(下标)：下标大于某个值选中的标签 lt(下标)
$("li").css("background","#fff");
$("li:lt(3)").css("background","red");
$("li:gt(2)").css("background","gray");
(4)内容过滤选择器
| E：contains() | 获取包含特定内容的E元素，不考虑层级 |
|---|---|
| E：empty | 获取不包含任何内容的E元素，包括空格、换行、文本 |
| E：has(span) | 获取包含特定标签的E元素 |
| E：parent | 获取包含内容的E元素 |
// E：contains() 获取包含特定内容的E元素，不考虑层级
//$("div:contains(星期)").css("background","red");
//E：has(选择器) 获取包含特定标签的E元素
$("div:has(span)").css("background","red");
//E：empty 获取不包含任何内容的E元素
$("div:empty").css("background","green");
//E：parent 获取包含内容的E元素 找是父元素的div
$("div:parent").css("background","pink");
(5)可见性过滤选择器
根据元素可见和不可见状态来选择相应的元素
| $(“li:hidden”) | 获取不可见元素，不包含display:none的元素 |
|---|---|
| $(“li:visible”) | 获取可见元素 |
$("li:hidden").show(3000);
$("li:visible").css("background","red");
(6)属性过滤选择器
| E[attr] | 获取属性为attr的E元素 |
|---|---|
| E[attr=value] | 获取属性为attr并且值为value的E元素 |
| E[attr!=value] | 获取属性为attr并且值不为value的E元素 |
| E[attr^=value] | 获取属性为attr并且以value开头的E元素 |
| E[attr$=value] | 获取属性为attr并且以value结尾的E元素 |
| E[attr*=value] | 获取属性为attr并且值中包含value的E元素 |
// E[attr] 获取属性为attr的E元素 所有具有type属性的input标签
$("input[type]").css("width",200);
//E[attr=value] 获取属性为attr并且值为value的E元素 获取所有具有type属性并且值为text的input标签
$("input[type=text]").css("display","block");
//E[attr!=value] 获取属性为attr并且值不为value的E元素
$("input[type!=text]").css("background","pink");
//E[attr^=value] 获取属性为attr并且以value开头的E元素
//E[attr$=value] 获取属性为attr并且以value结尾的E元素
//E[attr*=value] 获取属性为attr并且值中包含value的E元素
$("input[class*=o]").css("background","red");
(7)子元素过滤选择器
nth-child():括号中可以是数字，add，even，公式
| :nth-child（） | 获取对应下标的元素 number，even odd 3n+1 |
|---|---|
| :first-child（） | 获取父元素中的第一个子元素 |
| :last-child（） | 获取父元素中的最后一个子元素 |
//:first : 先获取所有选择器选中的标签，在其中找第一个
//:last ：先获取所有选择器选中的标签，在其中找最后一个
$(".box1 li:first").css("background","red");
$(".box1 li:last").css("background","red");
//:first-child : 在父元素中找第一个子元素
//:last-child
//:nth-child() : 数字 odd even 2n
$(".box2 li:first-child").css("background","green");
$(".box2 li:nth-child(4n)").css("background","pink");
(8)表单属性选择器
| :enabled | 获取所有可用元素 |
|---|---|
| :disabled | 获取所有不可用元素 |
| option:selected | 获取select选中项 |
| ：checked | 获取选择框中被选中的项 单选 多选 |
(9)表单选择器
| $(":input") | 选取所有input,textarea,select,button元素 |
|---|---|
| $(":text") | 所有单行文本框，即：type=“text” |
| $(":password") | 密码框 |
| $(":radio") | 单选框 |
| $(":checkbox") | 复选框 |
| $(":submit") | 提交按钮 |
| $(":reset") | 重置按钮 |
| $(":button") | 普通按钮 |
| $(":file") | 上传域 |
//1.表单选择器
console.log($(":input").length); //7
console.log($(":input"));//获取表单元素
console.log($(":text")); //文本框
console.log($(":radio"));
console.log($(":checkbox"));
//2. :checked 获取被选中的input框
console.log( $(":radio:checked"));
console.log($(":checkbox:checked"));
//option:selected
console.log($("option:selected"))
7.jquery中的循环
(1)$.each()
(2)$.map()
//1.循环数组
var arr = ["今天下雪","明天下钱","后天下冰雹","下课"];
//$.map(循环对象,function(value,index){})//index:下标 key value：值
var arr1 = $.map(arr,function(value,index){
console.log(index,value);
return value+"哈哈哈"; //可以有返回值，返回的内容会组成一个新的数组
});
//$(循环对象).map(function(){}) 这个更常用
$(arr).map(function(index,value){
console.log(index,value);
})
//each : 没有返回值
$.each(arr,function(index,value){
console.log(index,value);
});
$(arr).each(function(index,value){
console.log(index);
})
//2.循环对象
//$.map: 有返回值 $.map(遍历的对象，function(value,index){})
//$.each(遍历的对象，function(index,value){})
var obj = {
"name":"翠花",
"age":18,
"height":160,
"weight":88
}
$.each(obj,function(key,value){ //对象名一定要放在括号里
console.log(key); //name age height weight
console.log(value);//翠花 18 160 88
})
//3.循环标签
$("div").each(function(index,elem){
console.log(index);
console.log(elem);//<div>3</div> DOM元素
})
8.$.extend()
$.extend()方法用于将一个或多个对象的内容合并到目标对象
简单来说就是将多个对象的属性复制到其他对象
语法：$.extend(deep,目标对象，复制对象…)
deep：是否为深拷贝，深拷贝true,浅拷贝false,默认是浅拷贝
var obj1 = {
"user1":{
"name":"苗苗"
}
}
var obj2 = {
"age":18,
}
var obj = $.extend(true,{},obj1,obj2); //返回复制好的新对象
深拷贝与浅拷贝
//1.浅拷贝: 复制的是地址，只要其中一个改了，一改全改
var arr1 = [1,2,3,4];
var arr2 = arr1; //复制的是地址 arr2 = arr1的地址
arr2.push(5);
console.log(arr1); //[1, 2, 3, 4, 5]
//2.深拷贝：拷贝的是值
var arr3 = [1,2,3,4];
var arr4 = [];
for(var i = 0;i<arr3.length;i++){
arr4[i] = arr3[i];
}
console.log(arr4);[1,2,3,4]
arr3.push(5);
console.log(arr3);[1,2,3,4,5]
console.log(arr4);[1,2,3,4]
来源：CSDN
作者：LuckyGirl_L
链接：https://blog.csdn.net/LuckyGirl_L/article/details/103571065