您的位置：首页 > Web前端 > JQuery

jQuery入门02--第一个程序

2016-09-23 12:12 429 查看

一段典型jQuery代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 10px;
background-color: black;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function () {
$('<div/>').appendTo('body').on({
mouseenter: function (e) {
$(this).css('backgroundColor', 'red').animate({
width: '+=100'
}, 500);
},
mouseleave: function (e) {
$(this).css('backgroundColor', 'black').animate({
width: '-=100'
}, 500);
}
});
});
</script>
</head>
<body>

</body>
</html>




代码解析

$()

可以看到上面代码中有多处$(),$()是通向jQuery世界的钥匙，$()将返回一个jQuery对象，这样我们就能使用jQuery对象特有的方法和属性了。

$是jQuery的别名，这里所有 $()可以写成jQuery(),这是等价的。

其他JavaScript框架中也可能使用$标识符，为了避免冲突，jQuery提供了方法放弃$：

// 在jQuery代码开头加上， jq()替代 $()
var jq = jQuery.noConflict();


ready事件

js代码中开头是$(document).ready(function () {…});这句的意思是文档准备好时执行function内的代码。

如果这里只写function中的代码，那么上图效果就出不来，原因是执行这段代码的时候body元素没有“准备”好。当然如果把这段代码写在body结束标签之后也是可以正常执行的。

ready事件可以出现多次并且都会执行；如果文档已经准备好再监听ready事件那么会立即触发执行。

ready的其他写法：
$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

其中第一种写法是简写形式，即
$(function () {
...
});
$().ready()形式中第一个()的内容并没有什么作用，不要被迷惑。


操作DOM

$('<div/>').appendTo('body')


创建一个包含div元素的jQuery对象并追加到body元素中。

如果这样写：$(‘div’)，则是选中文档中所有的div元素。

事件

on()监听事件，这里监听了$(‘div’)上的mouseenter和mouseleave这两个鼠标事件，即鼠标移上、移出这个div时会分别触发相对应的function进行处理。

操作元素属性

$(this).css('backgroundColor', 'red')


将当前div元素的style属性中的background-color设置为red

特效

animate({width: '+=100'}, 500);


立即执行一段动画:元素宽度增加100px,执行时间是500ms

总结

到这里我们掌握了jQuery的一些基本知识，比如$和ready，并且领略了一些jQuery提供的功能，比如选择元素、操作DOM，操作元素属性、特效、事件，当然这里没有体现ajax这个jQuery封装的重要功能。

这里是可以说是一个概览，之后会循序渐进学习。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航