一、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的链式编程。