jQuery 简单介绍
jQuery
1.什么是jQuery
jQuery：是一个轻量的、免费的 JS 函数库，极大的简化了 JS 代码。
轻量的：如果在项目中用到了一个技术，那么项目对该技术的依赖程度越低（耦合性越低），这个技术越轻。
2.jQuery的优势（了解）
可以极大的简化 JS
可以像 CSS 选择器一样方便的获取元素
可以操作 CSS 属性控制页面的效果（样式）
可以兼容常用的浏览器（有的不兼容）
但是 jQuery 提供了对应功能的函数比如：( 左边为jQuery提供的函数 )
text() 对应 innerText属性
remove() 对应 removeNode()
replaceWith() 对应 replaceNode()
常用浏览器：谷歌，IE，火狐，苹果浏览器，欧朋浏览器
3.符合介绍（$）
$ 等价于 jQuery
调用 $() 函数等价于调用 jQuery();
该函数用于返回一个 jQuery 对象，该对象中会包含若干html元素,比如: $(“div”) 可以选中当前文档所有的 div 元素,会通过 jQuery 对象的形式将所有div返回 $(“div” )
//给元素设置css属性
$("div").css({
"border" : "2px solid red",
"font-size" : "26px",
"text-align" : "center"
});
//删除元素
$("div").remove();
4.文档就绪事件函数：
文档就绪事件函数会在文档内容加载完毕后执行函数 :
简写 :
$(function(){
...
});
完整写法 :
$(document).ready(function(){
...
});
JS中类似的函数 :
window.οnlοad=function () {
...
}
文档就绪事件函数一般用于获取元素，当获取元素的代码执行的时间，比元素加载早或获取不到元素
二.jQuery选择器
1.基础选择器:
jQuery绑定点击事件:
$("#b1").click(function () {
$("div").css("background-color","red");
});
$("#b1")获取 id 为 b1 元素对象
click(); 绑定点击事件；
$("div")获取所有元素名为 div 的元素对象
1.元素名(标签名)选择器：
$("#b1").click(function () {
$("div").css("background-color","red");
});
$("#b1")获取 id 为 b1 元素对象
click(); 绑定点击事件；
$("div")获取所有元素名为 div 的元素对象
2.ID选择器：
根据元素的 id 属性值，匹配具有特定 id 的元素
// 2.改变 id 为 one 的元素的背景色
$("#b2").click(function () {
$("#one").css("background-color","blueviolet");
});
3.类选择器：（存在问题）
根据元素的 class 属性，匹配所有 class 值相同的元素
// 3.改变class为mini的元素的背景色
$("#b3").click()(function () {
$(".mini").css("background-color","yellow");
});
4.属性选择器：
1. 属性名称选择器
* 语法： $("A[属性名]") 包含指定属性的选择器
2. 属性选择器
* 语法：
$("A[属性名='值']") 指定属性等于指定值的选择器
$("A[属性!='值']") 指定属性不等于指定值的选择器
$("A[属性名^='值']") 指定属性以指定值开头的选择器
$("A[属性名$='值']") 指定属性以指定值结尾的选择器
$("A[属性名*='值']") 指定属性包含指定值的选择器
3. 复合属性选择器
* 语法： $("A[属性名1='值1'][属性名2='值2']...") 包含多个属性条件的选择器
2.高级选择器:
1.层级选择器:
- 后代选择器及子选择器:
//改变 div 内所有的 span 元素的背景色
$("#b1").click(function () {
// $("div span") 选择div中的所有span
$("div span").css("background-color","red");//后代
// $("div > span") 选择div中的所有span的子元素(子选择器)
});
2.相邻兄弟选择器
<body>
<p>p>
<div id="a1">div>
<span>span>
<div id="a2">div>
<p>p>
<p>p>
body>
选中 id 为 a2 元素后面紧邻的p元素：$(" #a2+p ") 或 $(" #a2 ").next(" p ")
//改变 id 为two的div的下一个兄弟节点（div）的背景色
$("#b3").click(function () {
//方法一
$("#two+div").css("background-color","#028ce4");
//方法二
//$("#two").next("div").css("background-color","#028ce4");
// .next("div") 后一个
// .prev("div") 前一个
});
选择前(后)所有的兄弟节点(元素)
//改变 id 为two的div的后面的所有兄弟节点（div）的背景色
$("#b4").click(function () {
//方法一
$("#two~div").css("background-color","#9e04e4");
//方法二
//$("#two").nextAll("div").css("background-color","#9e04e4");
// .nextAll() 选择后面的所以兄弟节点(元素) .prevAll()选择前面所有
// 可以带参数查找后面的指定兄弟节点(元素)
});
选择所有的兄弟节点(元素)
//改变 id 为two的div的所有兄弟节点(div)的背景颜色
$("#b5").click(function () {
// siblings() 选择所以兄弟节点(元素),可以带参指定元素
$("#two").siblings("div").css("background-color","#e4ad0f");
});
3基本过滤选择器
1. 首元素选择器
* 语法： :first 获得选择的元素中的第一个元素
2. 尾元素选择器
* 语法： :last 获得选择的元素中的最后一个元素
3. 非元素选择器
* 语法： :not(selector) 不包括指定内容的元素
4. 偶数选择器
* 语法： :even 偶数，从 0 开始计数
5. 奇数选择器
* 语法： :odd 奇数，从 0 开始计数
6. 等于索引选择器
* 语法： :eq(index) 指定索引元素
7. 大于索引选择器
* 语法： :gt(index) 大于指定索引元素
8. 小于索引选择器
* 语法： :lt(index) 小于指定索引元素
9. 标题选择器
* 语法： :header 获得标题（h1~h6）元素，固定写法
部分案例：
// 改变第一个div的背景颜色
$("#b1").click(function () {
$("div:first").css("","");
});
// 改变最后一个div的背景颜色
$("#b2").click(function () {
方式一
$("div:last").css("","");
方式二
let length = $("div").length-1;
$("div:eq("+length+")").css("","");//有空格回出错
});
// 改变指定下标的div的背景颜色(包含前面兄弟节点内部的div也要算)
$("#b3").click(function () {
$("div:eq(3)").css("","");
});
4.表单过滤选择器：
1. 可用元素选择器
* 语法： :enabled 获得可用元素
2. 不可用元素选择器
* 语法： :disabled 获得不可用元素
3. 选中选择器
* 语法： :checked 获得单选/复选框选中的元素
4. 选中选择器
* 语法： :selected 获得下拉框选中的元素
5. 表单选择器
* 语法： :input 获得所有的input和select,textarea
方法：
方法：
.show() 将元素设置为显示状态
.hide() 将元素设置为隐藏状态
.toggle() 将元素设置为本身显示或隐藏相反的状态，加入参数（数字）控制开关的时间
.parent() 获取元素的父元素
.parents() 获取元素的所有上级元素（父，父父...）加入参数找指定的元素
.find() 获取元素的所有下级元素（子，子子...）加入参数找指定的元素
.css('','') 设置单个属性（opacity 透明度属性）
.css({
''：'',''：'',''：''}) 设置多个属性
.attr() 获取元素某属性的属（包含自定义属性）
.prop() 获取元素上某个固有属性或为元素设置固有属性的值（加参数指定属性）
案例：( .prop() .attr() )
function f() {
console.log(1);
// 1.获取第一个复选框在状态
// attr() 获取元素某属性的属性值
// prop() 获取元素上某个固有属性的属性值
let attr = $(".in1").prop("checked");//返回布尔类型（true为选中状态）
console.log(attr);
// 2.把状态赋给其他复选框
$(".in2").prop("checked",attr)
console.log(2);
}
3.jQuery创建元素
1.$("
") -- 创建table元素,返回 table 元素对象
2.$("...
") -- 创建一个包含内容的table元素,返回 table 元素对象
3.父类对象.append(子类对象) -- 父元素中添加子元素(添加在末尾)
4.元素对象.remove() -- 删除元素
5.元素对象.replaceWith("<元素名>...") -- 替换元素(参数可以是元素对象)
4.设置元素隐藏或显示
(1)使用css方法设置display 属性
$( "div").css("display" , "none") --将所有div设置为隐藏
$( "div" ).css( "display", "block") --将所有div设置为隐藏
$( "div:visible") --匹配所有可见的div元素
$( "div:hidden") --匹配所有隐藏的div元素
(2)使用show或者hide函数.
$( "div" ).show() --将所有div设置为显示状态
$( "div" ).hide() --将所有div设置为隐藏状态
$( "div" ).toggle() --切换所有div的显示状态
5.获取父子元素
.parent() 获取元素的父元素
.parents() 获取元素的所有上级元素（父，父父...）加入参数找指定的元素
.find() 获取元素的所有下级元素（子，子子...）加入参数找指定的元素
6. val() html() text()
(1)val() 函数 --获取或设置表单元素的value值
// 绑定点击事件,获取所有 input 的 value 值
$("#b1").click(function () {
$("input").each(function () {
// each() 用来遍历元素对象
let value1 = this.value;
let val = $(this).val();// val() 只能获取第一个元素的 value 值,所有需要each()遍历
})
});
val() 函数带上参数则为是为value赋值
(2)html() 函数 --获取或设置div的所有内容
// 绑定点击事件,获取所有 div 的所有内容
$("#b2").click(function () {
// 获取div里面的内容
let html1 = $("div").html();
// 设置div里面的内容
let s = new Date().toLocaleString();
let html2 = $("div").html(s);//带上参数就是设置div里面的内容
});
(3)text() 函数 --获取或设置div的所有文本内容
// 绑定点击事件,获取所有 div 的所有文本内容
$("#b3").click(function () {
// 获取所有 div 的所有内容
let text1 = $("div").text();
// 设置div里面的文本
let s = "XXXX";
let text2 = $("div").text(s);//带上参数就是设置div里面的文本内容
});
三.dom操作
1.内容操作
1.html(); js中的innerHTML -- 包含子标签
2.text(); js中的innerText -- 只获取文本内容，不关注子标签
3.val(); js中的value
无参，get获取 ； 有参， set赋值
2.属性操作
1.通用属性的操作
1.attr(); 一个参数：属性名，表示获取某个属性名对应的属性值；两个参数：属性名和属性值，表示为某个属性赋值
2.removeAttr();一个参数，表示删除某个属性
3.prop(); 同 attr()
4.removeProp();同removeAttr()
attr和prop的区别：
1.attr通常操作自定义属性，prop操作固有属性
2.属性值为boolean,就使用prop,如：selected checked enabled disabled
2.class属性的操作
1.addClass();参数为class的属性值，表示添加class的属性值
2.removeClass();参数为class的属性值，表示移除class的属性值
3.toggleClass();参数为class的属性值，表示切换class的属性值，如果存在，则删除该属性值，如果不存在，则添 加属性值，相当于切换调用addClass和removeClass。
3.dom操作
一.父元素和子元素之间
1.append 父元素.append(子元素) 把子元素追加到父元素内部末尾
2.appendTo 子元素.appendTo(父元素) 把子元素追加到父元素内部末尾
3.prepend 父元素.prepend(子元素) 把子元素追加到父元素内部最前面
4.prependTo 子元素.prependTo(父元素) 把子元素追加到父元素内部最前面
二.兄弟元素之间
1.before 元素1.before(元素2) 把元素2放到元素1的前面
2.insertBefore 元素2.insertBefore(元素1) 把元素2放到元素1的前面
3.after 元素1.after(元素2) 把元素2放到元素1的后面
4.insertAfter 元素2.insertAfter(元素1) 把元素2放到元素1的后面
三.删除自己和清空后代
1.remove 元素对象.remove(); 把自己删除
2.empty 父元素对象.empty(); 把自己所有的后代清空，不会删除自己和自己的属性
3.clone 元素对象.clone(); 返回元素对象的副本