7.JQuery（一）

jq是JS库，对象获取和对象定义（这里是整个库的范畴不是JS中数据类型那种对象，）
DOM对象是我们用传统的方法（javascript）获得的对象，jQuery对象就是用jQuery的类库选择器获得的对象。
JQuery对象就是通过jQuery包装DOM对象后产生的对象。
JQ优势在于，单纯用JS代码写要写很多句代码，用JQ的话用一句就行，比如KaTeX parse error: Expected 'EOF', got '#' at position 2: (#̲id名)就可以使用id操作，不…（function（）{
KaTeX parse error: Expected 'EOF', got '#' at position 3: （”#̲btn2“）（给按钮绑定事件）…（”#username“）.val（）（获取input框的值）
alert（in）
}）}）
JQ的使用
一、JQ函数（$括号内的都是会变成JQ对象）
1、作为一般函数使用，当文件加载完毕之后，执行此回调函数
$（function（））jquery（function（））两种语法都可以，表示$和jquery的关键字一样，$===jquery（全等于）
$：1、可以做为函数使用，带括号去调用
2、还可以做为对象使用，通过 $ . 去调用内部函数
2、参数为选择器字符串的时候，可以用来查找所有匹配的标签，并且封装为JQ对象，然后后面就可以添加其他方法来使用
$（”#btn（ID名的选择器）“）.click（function（）{console.log（this.innerHTML（作为参数选择器的标签本身，再加innerHTML是获取他的文本内容））}）
（这里的点击方法不是用onclick，而是用click）
3、参数为dom对象（网页中选择到的对象），会将一个dom对象转为JQ对象
KaTeX parse error: Expected 'EOF', got '#' at position 3: （”#̲btn“）.click（fun…（this）.html（））}）
4、参数为html标签整个字符串，创建标签对象并封装为JQ对象
案例1、点击按钮，显示按钮的文本，显示到一个新的输入框
特征：内部的代码需要等文档的所有都加载完毕之后才会执行
（要注意，标签的双引号会与$（”“）中的双引号冲突，所以当html标签的字符串是双引号的时候，$中的引号用单引号，反之用双引号）
$（function（）{
$（”#btn“）.click（function（）{
$（”<input type=”“。。。id=”mg“。 “）.appendTo（传回到盒子里的方法）（“div”）；
KaTeX parse error: Expected 'EOF', got '#' at position 3: （”#̲mg“（该对象在这里属于被赋v…（this）.html（））
（传入相应的参数就可以让value复制了）；
}）
}）
案例2、遍历输出数组中所有元素
var arr=【1，55，7】先创建数组
$.each（arr，function（i,n）（形参第一个是索引值，第二个是索引值对应的数据））alert（i+”：“+n））案例3、统计一共有多少个按钮（包括没有写选择器名的）方式为console.log($(“button”).length（查看封装个数的方法))这里简单的方式可以写入button标签
如果没写选择器名，又要取出第二个按钮的文本内容
方法为var btn=$(“button”）；
console.log(btn[1])这里可以利用数组的列表特性来使用索引值来获取
这里通过btn[1]下标获取的元素是一个dom对象，所以要取他的文本内容还要加innerHTML
console.log(btn[1].innerHTML)这里btn[1]也可以用btn.get（1）来代替，都是dom对象

案例4、输出所有按钮的文本
（这里each不是通过JQ对象调用的，这里是通过JQ对象的元素集合调用，所以可以不用传第一个参数，
$没有参数，btn代表参数，所以第一个参数的不用写，直接写回调函数即可）
btn.each（function（index，element（这里不写i，n，规范性正规））{
console.log（index+”“+element.innerHTML+”=“）
只用thisconsole.log（this.innerHTML）就可以完全获取到了，（this起回调作用，比i和n方便，可以完全获取对象信息）
}）

案例5、输出第三个按钮是所有按钮里的第几个
console.log（$（”#btn“）.index（））中index（）方法可知道索引值
只能获取所在兄弟元素的下标

二、JQ对象（执行$（）返回的对象）

KaTeX parse error: Expected 'EOF', got '#' at position 3: （”#̲btn“）JQ对象中调用的选择…（）并且将选择器作为参数传入才可以有作用，如$（”#btn“）
根据选择器规则在整个页面中查找所有匹配的标签数组，并且封装成JQ对象（JS库存）返回

案例1、选择id为box的元素，并且设置颜色（JQ对象可以直接操作css，当方法来用）
$（”#box“）.css（”background“，“red”或{”background“：“red”}）（写一个属性中间用，隔开 ，写多个属性的话用大括号括起）
$（”div，span“）里面也可以写复合选择器，设置所有行内容和盒子还能用交集选择器$（”div#box“）和全匹配$（”*“）

案例2、
1、选中无序列表ul下的所有span
这里JQ对象用选择器可以用到后代选择器等方式
$（”ul span（空格隔开）“）.css（”background“，“red”）
2、选中ul下的所有子元素span
$（”ul>span“）.css（”background“，“red”）这里找的是ul的子代元素，用>隔开，不包括孙代
3、选中class=sku的下一个li
$（”.sku+li“）.css（”background“，“red”）（+下一个）
4、选中ul下class=sku的后面所有兄弟元素
$（”ul .sku_{“）.css（”background“，“red”）（}后面所有兄弟元素）

案例3、过滤器选择器
1、选中第一个div
$（”div：frist“）.css（”background“，“red”）
2、选中最后一个div
$（”div：last“）.css（”background“，“red”）
3、选中class属性不为box
$（”div：not（.box）“）.css（”background“，“red”）
4、选中第二个和第三个标签
$（”li：lt（3）：gt（0）“）.css（”background“，“red”）
这里要先执行从后找再从前面找，因为从前面找完再执行从后找，会重新以找出来的几个为参考对象
5、选中第二个li
$（”li：eq（1）“）.css（”background“，“red”）
$（”li“）.eq（1）.css（”background“，“red”）这样也可以使用，格式也是对象用方法的定义
eq为找索引对应值的方法
6、选中内容为py学院的li
$（”li：contains（py学院）“）.css（”background“，“red”）
7、选择有class属性为sku的li
$（”li[class=sku]“）.css（”background“，“red”）

JQ绑定事件
案例1、给一级菜单设置鼠标移入事件，二级菜单显示
$（”.wrap>ul>li“）.mouseover(function（）{
$（this）（先获取li对象，这里获取的li是一个dom对象）.children（”ul“）
.css（”display“，”block“（这里是属性和属性值，中间由逗号隔开，JQ规则要求））display改成显示
为了方便，可以将css这项换成 .show（） 可以省很多事
show为显示函数，本质上还是更改display属性值为block（display默认为none）
})
给一级菜单设置鼠标移出事件，二级菜单隐藏
$（”.wrap>ul>li“）.mouseout(function（）{
$（this）.children（”ul“）.hide（） （hide为隐藏函数，也是可以省去给display设置none的）
})

当获取的dom对象是a标签时（因为指定的是a标签，所以当鼠标移出a标签的一级菜单时，就算是移出，所以二级菜单被隐藏）
给一级菜单设置鼠标移入事件，二级菜单显示
$（”.wrap>ul>li>a“）.mouseover(function（）{
$（this）.slblings（”ul“）.show（）（slblings是找兄弟元素的方法）
})
给一级菜单设置鼠标移出事件，二级菜单隐藏
$（”.wrap>ul>li>a“）.mouseout(function（）{
$（this）.slblings（”ul“）.hide（）
})

mouseover和mouseout在鼠标移入或者移出选定元素和子元素上时触发（子元素到选定元素或选定元素再到子元素会重新触发）
要解决整个问题，让鼠标移入或逸出选定元素上时才触发用mouseenter移入，和mouseleave移出

python里没有数组概念，所以JS在python中用var获取class对象时，因为只有ID值才是唯一的，class不是唯一的，所以即使class的值只有一个时
提取到的class只有一个值的那个值也是要用索引值才能使用，因为他不是一个数组了，只要用dom取了非id的元素值就返回伪数组对象