Jquery 01
2019/12/2 9:06:19
介绍
Jquery是一个快速简单的JavaScript框架, 是一个JavaScript的代码库.
使用步骤
1. 下载Jquery.js
https://cdn.bootcss.com/jquery/3.4.1/jquery.js
https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
- 编写script标签, 将下载的js引入到HTML中
<script src="js/jquery.js"></script>
或者, 使用如下的cdn 进行引入文件:
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
onload *
格式:
$(函数);// 传入的函数, 在网页加载完毕时执行.
Jquery对象
Jquery 将网页中的元素 封装为了Jquery对象.
我们可以使用Jquery对象, 更简单的完成原JS的dom操作.
Jquery对象与Dom对象的关系, 可以简单的理解为: Jquery对象 是 DOM对象的集合.
DOM对象转换为Jquery对象
格式: var $obj = $(dom对象);
Jquery对象转换为DOM对象
格式: var dom对象 = $obj.get(下标);
查找Jquery对象
Jquery中查找元素对象 使用了CSS的选择器技术.
选择器使用格式
var $obj = $("选择器");
基本选择器 ****
1. id选择器
var $obj = $("#id");
2. class选择器
var $obj = $(".class值");
3. 元素名称选择器
var $obj = $("元素名称");
筛选选择器 *
- 根据下标筛选:
var $obj = $("选择器:eq(下标)");
- 根据内容筛选
var $obj = $("选择器:contains('包含的文字')");
- 排除筛选选择器
var $obj = $("选择器1:not(选择器2)");
- 可见筛选选择器
var $obj = $("选择器:visible");
- 隐藏筛选选择器
var $obj = $("选择器:hidden");
- 表单筛选选择器 (根据input标签的type属性进行筛选)
var $obj = $("选择器:type值");
- 属性筛选选择器
筛选存在属性: var $obj = $("选择器[属性名]");
筛选属性值等于某值: var $obj = $("选择器[属性名='值']");
筛选属性值不等于某值: var $obj = $("选择器[属性名!='值']");
显示隐藏函数 熟悉
- 基本显示隐藏函数
- 显示: $obj.show();
- 隐藏: $obj.hide();
- 切换: $obj.toggle();
-
左上折叠淡入淡出隐藏函数
- 显示: $obj.show(毫秒);
- 隐藏: $obj.hide(毫秒);
- 切换: $obj.toggle(毫秒); -
上下折叠显示隐藏函数(作用于图片时, 需要指定固定的宽度.)
- 显示: $obj.slideDown(毫秒);
- 隐藏: $obj.slideUp(毫秒);
- 切换: $obj.slideToggle(毫秒); -
淡入淡出函数
- 淡入: $obj.fadeIn(毫秒);
- 淡出: $obj.fadeOut(毫秒);
修改属性函数
普通属性的修改: *
回顾JS:
属性赋值: 元素对象.属性名 = 值;
属性取值: 元素对象.属性名;
Jquery中使用attr函数 操作属性.
格式1:
用于一次操作单个属性:
属性赋值: $obj.attr("属性名","属性值");
属性取值: $obj.attr("属性名");
格式2.
用于一次操作多个属性
属性赋值: $obj.attr(对象);
例如给所有的img设置图片地址以及title属性:
$("img").attr({"src":"images/1.jpg","title":"这是一张图片"});
特殊属性的修改 *
1. class属性
格式:
- 添加Class
$obj.addClass("值");
- 删除Class
$obj.removeClass("值");
- 替换Class (值不存在则添加, 值存在则删除)
$obj.toggleClass("值");
-
innerHTML属性:
格式1:
使用html函数操作元素的内容:
设置内容:
$obj.html("内容");
获取内容:
var 变量 = $obj.html();格式1: 使用text函数操作元素的内容: 设置内容: $obj.text("内容"); 获取内容: var 变量 = $obj.text();
-
value属性 :
使用attr函数 获取输入框的value属性值, 得到的都是初始值.
随着用户的输入, 通过attr获取的值不会改变.
原因是: Jquery对象不是我们在查找时.创建的,其实是在网页加载完毕时就创建完毕了. 我们使用选择器查找, 只是取出使用.为了处理这个问题, Jquery提供了val函数, 用于操作输入框的内容. 获取值: $input.val(); 设置值: $input.val("值");
常见面试题 *****
Jquery中 text函数 和 html函数的区别: 两个函数都是用于获取与设置元素的内容. 区别是: html函数在获取内容时, 会获取到html标签内容. text函数在获取内容时, 会忽略html标签内容
例如如下div的获取: <div>锄禾<b>日</b>当午</div> html函数: 锄禾<b>日</b>当午 text函数: 锄禾日当午
样式函数 熟悉
作用: 用于修改元素的style属性值
格式1. 一次操作单个样式的值:
$obj.css("样式名","样式值");
格式2. 一次操作一组样式的值:
$obj.css(对象);
案例:
<script>
var width = 200;
function x1(){
width = width*1.1;
$("img").css("width",width+"px");
}
$(function(){
$("img").css({
"border":"2px solid red",
"box-shadow":"0px 0px 3px 3px #999"
});
});
</script>
动画函数 了解
格式: $obj.animate(style,time,[function]);
参数的含义: 参数1. 目标样式. 是一个对象, 描述的是动画执行完毕的样式. 参数2. 从当前样式 到 目标样式的所需时长. 参数3. 可选参数, 当动画执行完毕后, 执行的事件监听函数.
案例:
<style type="text/css">
div{
position: absolute;
top:300px;
left:-200px;
}
span{
display: inline-block;
transition:transform 999s;
transform: rotate(0deg);
}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("div").animate({
"left":"600px"
},2000,x1);
});
function x1(){
$("div").animate({
"font-size":"80px",
"left":"200px"
},1000,x2);
$("span").attr("style","transform:rotate(1000000deg)");
}
function x2(){
$("div").animate({
"font-size":"16px",
"left":"600px"
},1000,x3);
}
function x3(){
$("div").animate({
"font-size":"80px",
"left":"200px"
},1000,x2);
}
</script>
<title></title>
</head>
<body>
<div>
<span>锄</span>
<span>禾</span>
<span>日</span>
<span>当</span>
<span>午</span>
<span>,</span>
<span>汗</span>
<span>滴</span>
<span>禾</span>
<span>下</span>
<span>土</span>
</div>
</body>
事件 *
JS事件使 视图代码html 与 逻辑代码js 混合, 不利于后期的扩展和维护.
使用Jquery的事件指定方式, 可以很好的对JS和HTML进行分离. 更利于后期代码的扩展.
事件的绑定 与 解绑 掌握
格式:
- 绑定事件 , 一个元素可以绑定多个同类事件.
$obj.bind("事件类型",函数);
- 解绑事件 , 一次解绑同类的所有事件
$obj.unbind("事件类型");
例如:
$("button.class1").bind("click",x1);
$("button.class1").bind("click",x2);
$("button.class1").bind("click",x2);
下述的按钮, 点击时,就会执行x1和两次x2函数
<button class="class1"></button>
事件函数 *
格式:
$obj.事件类型(函数);
例如: 给id为but1 的元素添加点击事件
$("#but1").click(x1);
模拟触发事件函数
$obj.事件类型();
setInterval(function(){
$("button:eq(0)").click();
},10);
组合事件函数 hover
格式:
$obj.hover(in,out);
参数1. 鼠标移入时 执行的函数
参数2. 鼠标移出时 执行的函数
案例:
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<style type="text/css">
img{
width:200px;
}
</style>
<title></title>
</head>
<body>
<img src="images/27.jpg" /><img src="images/28.jpg" /><img src="images/29.jpg" /><img src="images/30.jpg" />
<script type="text/javascript">
var imgpath1 = ["images/27.jpg","images/28.jpg","images/29.jpg","images/30.jpg"];
var imgpath2 = ["images/27.gif","images/28.gif","images/29.gif","images/30.gif"];
$("img").hover(function(){
var src = $(this).attr("src");
var index = 0 ;
switch(src){
case imgpath1[0]:
index = 0;
break;
case imgpath1[1]:
index = 1;
break;
case imgpath1[2]:
index = 2;
break;
case imgpath1[3]:
index = 3;
break;
}
$("img:eq(" +index+ ")").attr("src",imgpath2[index]);
},function(){
var src = $(this).attr("src");
var index = 0 ;
switch(src){
case imgpath2[0]:
index = 0;
break;
case imgpath2[1]:
index = 1;
break;
case imgpath2[2]:
index = 2;
break;
case imgpath2[3]:
index = 3;
break;
}
$("img:eq(" +index+ ")").attr("src",imgpath1[index]);
});
</script>
</body>
</html>
事件类型指的是?
例如: onclick 的事件类型是: click
onblur 的事件类型是: blur
...