我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
--- jQuery functions go here----
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
jQuery 事件
下面是 jQuery 中事件方法的一些例子:
Event 函数 | 绑定函数至 |
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
JQuery HTML 就是通过jquery 对原先写好的html样式进行修改,,,和js一样的感觉,
JQuery 遍历 感觉和之前学的数据结构中的树的遍历一样 通过已知节点来找我们需要的节点然后对其进行样式的改变。
jquery 看到这儿, 我自己感觉就是还是通过元素选那择器 对元素进行css的改变 。
jquery 的动画效果用css3 也是可以实现的。
贴一下自己学习时候敲的demo。网页就不展示了,,,动态图不好贴,想看效果的同学可以把我的demo粘贴到自己的sublime text 上在浏览器中打开。 如果没有的话可以点击下方链接 我百度云里面有。
链接:http://pan.baidu.com/s/1kV4Z49L 密码:gmyd
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script src="E:/web/jquery/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("#p1").hide();
});
$("#show").click(function(){
$("#p1").show();
});
$("#button1").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("#button2").click(function(){
$("#div4").fadeOut();
$("#div5").fadeOut("slow");
$("#div6").fadeOut(3000);
});
$("#button3").click(function(){
$("#div7").fadeToggle();
$("#div8").fadeToggle(5000);
$("#div9").fadeToggle("slow");
});
$("#button4").click(function(){
$("#div10").fadeTo("slow",0.15);
$("#div11").fadeTo("slow",0.4);
$("#div12").fadeTo("slow",0.7);
});
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
$("#button5").click(function(){
var div=$(".div1");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({fontSize:'3em'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({fontSize:'1em'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
#div13{
margin-top: 116px;
}
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button id="button1">点击这里,使三个矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
<p>演示带有不同参数的 fadeOut() 方法。</p>
<button id="button2">点击这里,使三个矩形淡出</button>
<br><br>
<div id="div4" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div5" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div6" style="width:80px;height:80px;background-color:blue;"></div>
<p>演示带有不同参数的 fadeToggle() 方法</p>
<button id="button3">点击这里,使三个矩形淡出淡入</button>
<br><br>
<div id="div7" style="width:80px;height:80px;background-color:red;" ></div>
<br>
<div id="div8" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div9" style="width:80px;height:80px;background-color:blue;"></div>
<p>演示带有不同参数的 fadeTo() 方法。</p>
<button id="button4">点击这里,使三个矩形淡出</button>
<br><br>
<div id="div10" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div11" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div12" style="width:80px;height:80px;background-color:blue;"></div>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
<button id="button5">开始动画</button>
<p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div class="div1" style="background:#98bf21;height:100px;width:100px;position:absolute;">QWQ</div>
<div id="div13">
<button id="stop">停止滑动</button>
<div id="flip">点击这里,向下滑动面板</div>
<div id="panel">Hello world!</div>
</div>
</body>
</html>