Jquery

最新推荐文章于 2024-11-12 06:39:19 发布

LXH_辉

最新推荐文章于 2024-11-12 06:39:19 发布

阅读量89

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/qq_53942010/article/details/127696782

版权

什么是JQuery？

JQuery语法

jQuery 入口函数与 JavaScript 入口函数的区别

	window.onload	$(document).ready()
执行时机	必须等待网页全部加载完毕(包括图片等)，然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码
执行次数	只能执行一次，如果有第二次，那么第一次的执行会被覆盖	可以执行多次，第N次都不会被上次覆盖
简写方案	无	$(function(){ })

JQuery选择器

基本选择器

获取id比较特殊，也是获取多个

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素
交集选择器（标签指定式选择器）	$(“div.redClass”);	注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

过滤选择器

	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”,”red”);等于2的 $(“li:lt(3)”).css(“color”,”red”);小于3的 $(“li:gt(3)”).css(“color”,”red”);大于3的 le 小于等于 ge大于等于	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”,”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”,”red”);	获取到的li元素中，选择索引号为偶数的元素

筛选选择器

JQuery事件

事件语法

Jquery.css方法

css方法

两个参数，设置值

$("p").css("background-color","yellow");

一个参数，获取值
```
$("p").css("background-color");
```
一个参数，传对象，那就是设置对象中的所有属性
```
$("p").css({"background-color":"yellow","font-size":"200%"});
```

addClass() 添加类

$("button").click(function(){ 
$("h1,p").addClass("blue");
$("div").addClass("important"); 
});

removeClass()删除类

$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });

JQuery动画（重点）

隐藏显示
1. hide() 隐藏
2. show() 显示
淡入淡出
1. fadeOut() 淡出可见元素
2. fadeIn() 淡入已隐藏元素
3. fadeToggle() 切换
4. fadeTo() 变成某个透明色
滑动
1. slideDown
2. slideUp
自定义动画

animate() 用于创建自定义动画，可选的callback参数是动画完成后所执行的而函数名称(回调函数)
1. 参数1：对象，改变的css属性值
2. 参数2：改变完成的时间
3. 参数3：完成后执行的函数(回调函数)
```
$('button').click(function(){
$('li').animate({
    opacity : '0.5'
    height : '300px'
    width : '300px'
},3000,function(){console.log('动画结束')})
})
```
stop方法

停止动画，但是会清除掉overflow:hidden

JQuery事件机制