1.简介
1.jQuery是一个js的框架 写的越少 做的越多
2.版本：1.x 2.x 3.x 使用1.x
3.引入jQuery的方式有两种 1.本地引入 2.引入网络中的js
4.jQery的书写格式
1.
(
d
o
c
u
m
e
n
t
)
.
r
e
a
d
y
(
f
u
n
c
t
i
o
n
(
)
)
在
加
载
页
面
的
时
候
就
会
执
行
，
并
且
比
o
n
l
o
a
d
事
件
的
速
度
要
快
2.
(document).ready(function(){}) 在加载页面的时候就会执行，并且比onload事件的速度要快 2.
(document).ready(function())在加载页面的时候就会执行，并且比onload事件的速度要快2.(selector).action(function(){})选择指定标签做一些动作的时候可以使用
5.如果jquery中使用document.write,在原生的js中使用document则不会被执行
2.安装引用
使用 HTML 的
<script src="jquery-1.10.2.min.js"></script>
//百度 CDN
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
//新浪 CDN
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
//Google CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
// Microsoft CDN
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
3.jQuery的书写格式
<body onload="load()">
<script type="text/javascript">
//当页面加载的时候就可以执行
$(document).ready(function () {
alert("jQuery的写法");
});
$(function () {
alert("jQuery的简化写法");
});
//2.针对于指定标签做指定动作的时候可以使用这种写法
//$(selector).action();
</script>
</body>
1.jQuery执行的速度要比onload事件触发的时机要早一些
2.如果jQuery已经占用了document对象了，就不能通过原生写法再使用document了
<body onload="load()">
<script type="text/javascript">
function load() {
//alert("onload函数")
document.write("onload函数");
};
$(document).ready(function () {
//alert("jQuery");
document.write("jQuery");
});
</script>
</body>
4. jQuery事件
1.click()
当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
1.显示与隐藏
hide()
您可以使用 hide() 将元素隐藏
show()
您可以使用show()将元素显示
<body>
<div id="box">这是一个div</div>
<input type="button" value="显示" id="btn1"/>
<input type="button" value="隐藏" id="btn2"/>
<script type="text/javascript">
//纯jQuery的写法
$(function () {
$("#btn1").click(function () {
//想要box显示
$("#box").show();
});
$("#btn2").click(function () {
$("#box").hide();
});
});
</script>
</body>
2.鼠标事件
mouseover()
当鼠标指针穿过元素时，会发生 mouseover 事件。
mouseout()
当鼠标指针离开元素时，会发生 mouseout 事件。
focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
blur()
当元素失去焦点时，发生 blur 事件。
<html>
<head>
<title>Title</title>
<%--1.先引入jQuery--%>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box">this is a div</div>
<form id="form1" action="#" method="post">
用户名：<input type="text" name="username" id="username"/><br/>
密码：<input type="password" name="pwd" id="pwd"/><br/>
<input type="submit"value="提交">
</form>
<script type="text/javascript">
$(function () {
$("#box").mouseover(function () {
$(this).css("backgroundColor","green");
});
$("#box").mouseout(function () {
$(this).css("backgroundColor","pink");
});
});
//为什么要在事件外面套一个${function} 当页面加载的时候则先初始化好这个时间
//当根据特定的动作触发事件的时候，事件直接执行
$(function () {
$("#form1 input").focus(function () {
$(this).css("backgroundColor","yellow");
});
$("#form1 input").blur(function () {
$(this).css("backgroundColor","blue");
});
});
</script>
</body>
</html>
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
<body>
<table id="tab" width="500px" height="300px" border="1px" cellspacing="0px">
<tr >
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr >
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
</table>
<script type="text/javascript">
$(function () {
$("#tab tr").mousedown(function () {
$(this).css("backgroundColor","pink");
});
$("#tab tr").mouseup(function () {
$(this).css("backgroundColor","blue");
});
//hover(参数1：鼠标悬浮的时候的操作，参数2：鼠标移出的时候的操作
$("#tab tr").hover(function () {
$(this).css("backgroundColor","green");
},function () {
$(this).css("backgroundColor","write");
});
});
</script>
</body>
3.图片事件
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
0透明1不透明
slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们
<body>
<img src="img/1.jpg" width="150px" height="120px" id="img1"/>
<img src="img/2.jpg" width="150px" height="120px" id="img2"/>
<input type="button" value="淡入" id="btn1"/>
<input type="button" value="淡出" id="btn2"/>
<input type="button" value="淡入淡出" id="btn3"/>
<input type="button" value="改变透明度" id="btn4"/>
<input type="button" value="淡入淡出" id="btn5"/>
<input type="button" value="向下滑动" id="btn6"/>
<input type="button" value="向上滑动" id="btn7"/>
<input type="button" value="滑动" id="btn8"/>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$("#img1").fadeIn(2000);
});
$("#btn2").click(function () {
$("#img1").fadeOut(2000);
});
$("#btn3").click(function () {
$("#img1").fadeToggle(5000);
});
//fadeTo改变透明度，图片位置保留
$("#btn4").click(function () {
$("#img1").fadeTo(3000,0); //0透明1不透明
});
$("#btn5").click(function () {
$("#img1").fadeTo(3000,1);//0透明1不透明
});
$(function () {
$("#btn6").click(function () {
$("#img2").slideDown(5000);
});
$("#btn7").click(function () {
$("#img2").slideUp(5000);
});
$("#btn8").click(function () {
$("#img2").slideToggle(5000);
});
});
});
</script>
</body>
扫一扫
935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
