开始jQuery的学习

最新推荐文章于 2024-07-24 11:13:53 发布

滑稽之霸

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量102

点赞数

文章标签：前端 jQuery js

本文链接：https://blog.csdn.net/qq_42926749/article/details/81874771

版权

今天开始进入jQuery的学习，最大的感受就是方便，特别的方便，至少在学了js之后是这么感觉的。很简单的例子，就是js如果想要做一个滑动或者渐入渐出的效果，要自己动手封装一个函数，获取元素，获取对应的效果，判断等等。但是用jQuery的话直接用对应的方法就好了，里面都是封装好的东西，相当于是一个“高级版的common.js”。用的时候，和引用js文件一样，如同下面所展示：

<script src="js/jquery-1.12.4.js"></script>

另外附一个简单的例子，点击第一个按钮显示几个块，点击第二个按钮在每个块里显示文字：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background: greenyellow;
            display: none;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<input type="button" value="展示" id="btn1">
<input type="button" value="设置内容" id="btn2">
<div></div>
<div></div>
<div></div>
</body>
</html>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/common.js"></script>
<script>
    //文档准备好了，可以执行了，把函数作为参数穿进去
    $(document).ready(function () {
        //1、找按钮节点
        $('#btn1').click(function () {
            //jquery不用遍历
            //jquery；有一个特点叫隐式迭代，会自动遍历，不需要我们遍历
            $('div').show(1000);//显示
        })
        $('#btn2').click(function () {
            $('div').text('emmm？');
        })
    })

    /*
    * 1、jQuery拥有隐式迭代的特性，不需要遍历
    * 2、完全没有兼容性问题
    * 3、实现动画非常简单，功能强大
    * 4、不会覆盖
    * 5、代码简单粗暴
    * */
</script>

滑稽之霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
开始jQuery的学习

今天开始进入jQuery的学习，最大的感受就是方便，特别的方便，至少在学了js之后是这么感觉的。很简单的例子，就是js如果想要做一个滑动或者渐入渐出的效果，要自己动手封装一个函数，获取元素，获取对应的效果，判断等等。但是用jQuery的话直接用对应的方法就好了，里面都是封装好的东西，相当于是一个“高级版的common.js”。用的时候，和引用js文件一样，如同下面所展示：&lt;scrip...
复制链接

扫一扫