text/javascript
text/cssy
text/html
mime格式 : 大类型/小类型
jQuery是一个库, 使用前应该先引入.
引入jQuery字库的,也就是引入jQuery文件
<script src="lib/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
JQuery下载地址 : http://www.jq22.com/jquery-info122
JQuery文档 : http://jquery.cuishifeng.cn/
加载事件
1. $(document).ready(function(){});
2. $(function(){}); 推荐
jquery 就是 $ , $ 就是代表了jquery
源码: window.jQuery = window.$ = jQuery;
获取选择器
JS
var d1 = document.getElementById('h1') ;
JQ
var d1 = $('.d1');
jq对象.css('attr','value') jq对象具有的css方法能够方便的设置标签对象的样式
d1.css('background-color','red');
d1.css('backgroundColor','gold');
JQ
id选择器 : 选中id名为h1的标签,并直接调用css函数,对字体颜色进行设定
$('#h1').css('font-size','150px');
$('#h1').css('color','green');
通过类名获取具体的元素对象的操作和CSS一样
其中后代选择器:注意空格
$('.d1 .p1').css('color','yellow');
$('.d1 .p2').css('fontSize','30px');
+ 表示紧接下一个兄弟元素
~ 该元素后面所有的兄弟节点 不包括该元素
小于号 : < 大于号 : >
eq() 方法返回被选元素中带有指定索引号的元素。
eq是equals(相等/等于)
$('li:eq(4)').css('color','red');
$('li:eq(5)').css('color','blue');
$('li:eq(5)').css('font-size','45px');
表示li 里面索引值为4的 颜色改为红色
表示li 里面索引值为5的 颜色改为蓝色
gt(大于) : greeter than : 比...多
lt(小于) : lesss than : 比...少
$('li:gt(8)').css('color','white');
$('li:lt(2)').css('color','green');
表示 li中 索引值大于8的 颜色改为白色
表示 li中 索引值小于2的 颜色改为绿色 0 1
odd : 名词奇数 : 选择每个相隔的（奇数）元素： 按索引值的奇数或偶数来展示
$('li:odd').css('fontSize','110px');
even : 名词偶数 : 选择每个相隔的（偶数) 元素：
$('li:even').css('backgroundColor','yellow');
这里切记！！！！ li:even 不能有空格
first : 第一个
$('li:first').css('fontSize','60px');
last : 最后一个
$('li:last').css('backgroundColor','red') ;
filter : 过滤器 : 选中符合指定条件的所有li对象
$('li').filter('.test').css('color','red') ;
表示 是test排除 其他颜色都改为红色
not : filter的反面
$('li').not('.test').css('backgroundColor','pink') ;
具备[xx]属性的标签
$('p[title]').css('fontSize','30px');
具备[xx]属性,并且属性值为".." 的标签
$('p[title="p2"]').css('backgroundColor','pink');
siblings : 获得匹配元素集合中所有元素的同辈元素
$('.li3').siblings().css('backgroundColor','green');
在这里表示除了li3以外的所有同辈元素 背景色改为绿色 而li3不变
children 只能选择直接孩子节点,只选中子辈,没有选中孙子辈
children/find 如果不写具体类型,则选中所有的孩子节点
$('.box').children().css('width','350px');
$('.box').children('div').css('width','250px');
find 从所有的后代元素中找到符合条件的,包括孙子辈标签
$('.box').find('div').css('opacity','.3');
JQ点击事件
jq绑定方法 不需要on,而且click接受的参数为 函数类型
JQ mouseen事件
$('.box').mouseenter(function(){
$('.innerBox').css('background-color','yellow');
});
mouseenter表示鼠标触发外部box 里面子类 innerbox的背景色改变
$('.box').mouseleave(function(){
$('.innerBox').css('background-color','green');
});
mouseleave表示鼠标离开外部box 里面子类 innerbox的背景色改变
css设定值
通过css对象设定多个值
$('.d1').css({
width:'500px',
height:'400px',
backgroundColor: 'purple'
}) ;
其中backgroundColor 大写字母
然后 单引号里面写改的内容
attr() 函数返回选择元素的属性值。
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
hasClass()- 判断是否存在类,如果不写参数
toggleClass() - 对被选元素进行添加/删除类的切换操作
siblings() 除了自己以外的所有的兄弟节点
next() 下一个兄弟
nextAll() 后面所有的兄弟
nextUntil() 后面所有的兄弟直到…
prev() 前面的一个兄弟
prevAll() 前面所有的兄弟
prevUntil() …
parent() 直接父节点
parents() 所有的父节点
parentsUntil()
> 选中直接子标签,不能选中孙子类标签
回调函数 :
animate : 英语 : 使有生气===>>制成动画 ====>>> JQ : 自定义动画
animate() 方法执行 CSS 属性集的自定义动画
stop(stopAll,goToEnd) 默认停止所有动画,直接回到最初
prop() 方法设置或返回被选元素的属性和值
bom : 浏览器对象模型 了解
1.offset家族
offetWidth/offsetHeight 元素宽高 包括padding+border
offsetTop/offsetLeft 元素距离父类定位元素(body)的距离
2.scroll家族
scrollWidth/scrollHeight 元素宽高 不包括border 指的元素内容的宽高
scrollTop/scrollLeft 元素被卷进去的高度/宽度
- 可以被赋值
3.clientWidth/clientHeight 客户端(可视区域)的宽高