Jquery

一、jq简介

jq其实就是js的一个文件。

二、jq书写步骤

1、先引入jq文件（min的文件）

<script type="text/javascript" src="file:///C|/jquery/jquery-3.3.1.min.js"></script>

2、换新的一行写js代码

<script type="text/javascript" src="file:///C|/jquery/jquery-3.3.1.min.js"></script>

<script type="text/javascript">

jquery书写的内容。。。。。。
</script>

3、按照jq的语法写代码

三、入口函数的不同

js的入口函数只能有一个，如果写了多个，它只执行最后一个。

jq的入口函数可以有多个，可以顺序执行每一段

注意：入口函数有一个就够了，不用写很多

四、对象

jquery对象   使用$('')从页面中得到的元素，就是jq对象

DOM对象      使用document从页面中得到的元素，就是DOM对象

区别：

jq:苹果手机   ios系统 不能双卡双待 不能换电池

DOM:安卓手机 安卓系统 可以双卡双待 可以换电池

结论：DOM对象和jq对象的方法是不可混用的

五、对象转换

jq转DOM：[0]或者.get(0)

DOM转jq：$(box)

六、jq控制css

单属性修改：.css('属性名','属性值');

多属性修改：.css({'属性名1':'属性值1','属性名2':'属性值2',.......})

单属性获取：.css('属性名');

七、jq控制HTML标签属性

语法同上：.attr()

八、jq控制html内容

设置：.html('设置的内容');

获取：.html();

九、jq的对角线动画

.show(1000)   显示

.hide(1000)     隐藏

.toggle(1000)  切换

注意：如果只写了以上这些方法，是不会有动画效果的，不需添加时间参数才会出现动画效果。

十、jq滑动动画

.slideUp()        滑动隐藏

.slideDown      滑动显示

.slideToggle()  滑动切换

注意：这组动画，不加时间参数也可以有动画效果

十一、jq基本选择器

1、$('#id')：id选择器

2、$('div')：标签选择器

3、$('.myClass')：类选择器，返回所有class="myClass"的元素

4、$('*')：返回所有元素，多用于结合上下文搜索

5、$('div,span,p,myClass')：多条件选择器，返回所有查到的元素

6、$('.ul01 .li02')：后代选择器

7、$('.ul01 .li02>li')：表示子代选择器，只能选择第一级的后代

8、$('.ul01 .li02+li')：表示选中指定标签后面紧挨着的一个同级标签

9、$('.ul01 .li02~li')：表示选中指定标签后面的所有同级的某种标签

十二、jq过滤选择器

:first     选中第一个

$('.ul01 li:first').css('background','pink')

:last     选中最后一个 

$('.ul01 li:last').css('background','pink')

:not()    除了哪一个其他的。。。

$('.ul01 li:not(.myClass01)').css('background','pink')

:eq()     选中某一个

$('.ul01 li:eq(0)').css('background','pink')

:gt()      大于某一个

$('.ul01 li:gt(2)').css('background','pink')

:lt()        小于某一个

$('.ul01 li:lt(2)').css('background','pink')

十三、筛选选择器

重点：所有的筛选选择器写在选择函数外

三巨头：父、子、兄

$('div').parent()    选中父级元素

$('div').children()  选中子集元素

$(this)                   代表当前对象（跟js里面的this一样）

$(this).$siblings$()  最牛的筛选选择器 免除所有的排他工作，可以选出除了自己以外的所有同级元素。 

$('div').find(p)   搜索所有div中的后代 p元素.

十四、jq的动画排队机制

在jq如果多次出发动画，那么这些动画就会排队等待执行，而这些效果，往往不是我们想要的，所以我们可以在动画的方法之前添加一个.stop()方法来解决此排队问题。

十五、hover方法

.hover(function(){

//鼠标移入事件

},function(){

//鼠标移出事件

})

注意：如果只写了一个匿名函数，代表移入和移出执行的代码一样

十六、索引值

在jq中用选择器选出来元素都有一个index()，可以返回这个元素在父级元素中的索引值（自己家孩子排大小，跟隔壁家没关系）

十七、jq控制class

在jq中，使用attr()方法可以将控制calss，但是jq中专门准备了一系列方法空值class的值。

1、添加类                         addClass('类名')

2、删除类                         removeClass('类名')

3、判断是否有某一个类    hasClass('类名')

4、切换某一个类               toggleClass('类名')

注意：这些类名不用再加     '.'

十八、jq中的链式编程

在jq中如果是针对“同一目标”进行的操作，都可以使用“.”语法来连续书写，这叫jq的链式编程。