简介
==以下全文JQuery简称为JQ==
JQuery 是一个轻量级的(js文件才几十kb)、兼容多浏览器,是对javascript的封装,使得js语句更加简洁.
JQuery的安装
下载链接：jQuery官网，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。
中文文档：jQuery AP中文文档
[^1] 一般线上都是压缩版的3.x版本,能尽量提高页面加载速度且支持最新的浏览器。线下压缩与否无所谓
jQuery的引入方式
[^1] ==引入的时机是在body标签的后面==
[^2]再文件中写入JQ代码,需要在script引入JQ文件的基础上,后面再写一个script标签,用来专门写JQ代码,否则你的JQ代码在页面加载不出来
1.直接下载文件到本地（最常用），从本地中导入
2.使用文件的网络地址，就像我们img标签里面的那个src的用法差不多。
==jQuery对象和dom对象的互相转换==
[^1] dom对象和jq对象不是同一个对象,所以使用的方法也不一样,可以转换对象类型,再使用对方的方法
jquery对象转换成dom对象:
b[0]
//jquery对象[0] 就变成了dom对象
jquery对象[0].style.backgroundColor = 'red'dom对象转换成jquery对象:
$(a)
//$符号,和()号,参数是dom标签对象
$(DOM对象).css('background-color','red')// dom对象不用加""声明一个变量
var $iable = jQuery对像
var iable = DOM对象
$variable[0]//jQuery对象转成DOM对象，通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了，DOM对象转换成jQuery对象：$(DOM对象)，通过$符号包裹一下就可以了查找标签
基本选择器(与css的方法差不多)
id选择器
$("#id")标签选择器：
$("div")class选择器：
$(".classname")配合使用：
$("div.c1")
// 找到拥有类名是c1的div标签所有元素选择器:
$("*")组合选择器：
$("#id, .className, div")属性选择器:
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于// 示例,多用于input标签
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签层级选择器(跟css差不多)
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y(通过+找到向下相邻的同级兄弟,也叫毗邻选择器)
$("x ~ y")// x之后所有的兄弟y 筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素,相当于css用下标取值(数组[0])
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)$("ul li:first") //找到ul标签下的第一个li标签
$("ul li:eq(1)") //找到ul标签下的下标为1的 li 标签 #下标从0计数
$("div:has(h1)")// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)")// 找到所有后代中有c1样式类（类属性class='c1'）的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签表单选择器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button$(":checkbox") //找到所有的checkbox表单对象属性:
:enabled //可用的标签(就是用户可以点击还能输入,默认就是该属性)
:disabled //不可用的标签(用户不能选中并输入内容的标签)
:checked //被选中的选项
:selected //下拉框中被选中的选项
注意:
在表单选择器中,如果同时存在复\单选框,和select下拉框,找标签时最好不要直接写checked选中标签,原因是会将select选择的和单复框的选择内容都选中; 选中input的标签: $("input:checked");选中select的标签:select:checked找到可用的input标签:
$("input:enabled") // 找到可用的input标签找到被选中的option：
$(":selected") // 找到所有被选中的option内置筛选器方法
从自己的索引位置,往下面找兄弟标签
$("#id").next() //找到id标签的下一个兄弟标签
$("#id").nextAll() // 找到id标签的所有兄弟标签(从自己的索引位置,往下面找兄弟标签)
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它从自己的索引位置,往上面找兄弟标签(跟上面的相对)
$("#id").prev() //找到id标签的上一个兄弟标签
$("#id").prevAll() // 找到id标签的所有兄弟标签(从自己的索引位置,往上面找兄弟标签)
$("#id").prevUntil("#i2")从自己的索引位置寻找父亲元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 同级别的兄弟们，不包含自己; .siblings('#id')，可以在添加选择器进行进一步筛选查找
$("div").find("p") 等价于$("div p")筛选
$("div").filter(".c1") 等价于 $("div.c1")
// 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素操作标签
样式操作
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。$("p").css("color", "red"); //将所有p标签的字体设置为红色位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移，不能设置位置
$(window).scrollTop() //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向左移动的距离[^1] .offset()方法允许我们检索一个元素相对于文档,整个窗口的位置（document）的当前位置。
[^2] 而(相对于注释1).position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。
//通过offset设置位置偏移
$(".c2").offset({top:100,left:200})尺寸函数
height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
width()
innerHeight() //内容content高度 + 两个padding的高度
innerWidth()
outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
outerWidth()事件
click 鼠标单击后,触发...
dblclick 鼠标双击后,触发..
//例子: $("p").click(function(){alert("段落被点击了。");});
mouseenter 当鼠标指针经过或悬停在被选元素时,触发...
mouseleave 当鼠标指针离开被选元素时，会发生 mouseleave 事件。
keypress 键被按下
keydown 键按下的过程
keyup 键被松开
hover 鼠标指针悬停在被选元素上时要运行的两个函数。方法触发mouseenter和mouseleave事件(实际上是对这俩方法的封装)
submit() 当提交表单时,触发...
change() 当元素的值改变时(仅适用于表单字段),触发...
focus() 当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时）触发...(该方法通常与blur()方法一起使用)
blur 当元素失去焦点时,触发...
resize 当调整浏览器窗口大小时，触发...
scroll 当用户滚动指定的元素时，触发...
添加文本和取值
HTML代码：
html()// 获得第一个匹配元素的html内容，包含标签内容
html(val)// 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果文本操作：
text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)// 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去html和text函数的区别
$("#d1").text("百度")
//text不能识别参数内容为标签,只能识别文本
$("#d1").html("百度")
//html可以识别参数内容为标签,会将标签内容显示为标签样式值的操作
val() // 取得第一个匹配元素的当前值
val(val) // 设置所有匹配元素的值
val([val1, val2]) // 设置多选的checkbox、多选select的值//html代码:
篮球
足球
//jq语句 设置值:(被设置后,页面就会勾选中该vaule选项)
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])示例：获取被选中的checkbox或radio的值
==虽然能找到两个对象,但是取值的时候只能返回第一个的值,所以需要循环的一个一个取值==
//html文件代码
//jq代码正确方法:循环取值
for (var i in $("input:checked")){console.log($("input:checked").eq(i).val())}
//只取第一项,可以这样写
$("input:checked").val() //这样写,只能获取到一个值,想获取全部,要用循环取值
注意:
JQ中,选择多个对象中的一个,用eq(下标) 进行获取.设置值
input radio --> $("input:radio").val([1,])
checkbox --> $(":checkbox").val([0,1,2])
//val的参数,是input的value的值,如果没有设置value,就无法生效,需要用prop("checked",true)来设置查看用户选择的值
input radio $("radio:checked").val()
input checkbox $("input:checkbox:checked").val()JQ语言的 for 循环取值
方法一(用下标取值):
for (var i=0;i<$("input:checkbox:checked").length;i++){console.log($("input:checkbox:checked").eq(i).val())}
方法二(用each()方法):
$("input:checkbox:checked").each(function(k,v){console.log(k,v.value)})each 方法
each() 方法规定为每个匹配元素规定运行的函数。
语法:$(数组).each(function(index,element))
注释:index - 选择器的index位置
element - 当前的元素（也可使用 "this" 选择器）属性操作
attr() 给标签设置属性
attr(attribute) 查看该属性的值 //attribute [əˈtrɪbju:t] 属性
attr(attribute, "xx")// 设置一个属性值
attr({k1: v1, k2:v2})// 设置多个属性值
removeAttr("属性")// 从每一个匹配的元素中删除一个属性prop() 查看,设置属性的状态(主要应用于:checked,selected,disabled)
prop("checked")
prop("checked",true) //设置为选中
prop("checked",false) //取消选中插入标签和删除标签
往标签内部添加
末尾添加
$(A).append(B)//将b添加到a标签里面
$(A).appendTo(B)//与上面的相反前置添加
$(a).prepend(b) //前置添加
$(a).prependTo(b)往标签外部添加(就是设置个同级别的标签)
外部末置
$(a).after(b) //将后者放到前者的后面
$(a).insertAfter(b) //把前者放到后者的后面外置前置
$(a).before(b) // 将后者放到前者的前面
$(A).insertBefore(B) //把前者放到后者的前面移除和清空元素
$("#l1").remove()
remove() //删除标签的所有内容(就是将该标签从页面完全清除)
$("#l1").empty()
empty() //删除标签中的子节点(自己的文本内容也会被删除)，但是标签本身不会删除,样式还会保留替换
replaceWith()
$(a).replaceWith(b)//前者被后者所取代(替换)
replaceAll()
$(a).replaceAll(b) //前者取代后者(替换)克隆
clone() //克隆的是内容,
clone(true)//可以克隆事件
本章练习
左侧菜单
左侧菜单示例
下拉事件
Title
顶部
返回顶部
Title
顶部
for (var i in $("input:checkbox:checked")){
console.log($("input:checkbox").eq(i).prop("checked",''));
}