jQuery入门02--第一个程序

最新推荐文章于 2021-07-21 19:39:29 发布

luoxiaoluoxiao__

最新推荐文章于 2021-07-21 19:39:29 发布

阅读量306

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/sexyandiknow/article/details/52636928

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一段典型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封装的重要功能。

这里是可以说是一个概览，之后会循序渐进学习。

luoxiaoluoxiao__

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门02--第一个程序

一段典型jQuery代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> div { width: 100px; height: 100px; margin: 10px;
复制链接

扫一扫