jQuery基本使用

一. jQuery的基础知识
  1. 源文件


    jQuery文件

    min是压缩过的版本。
    区别:在开发过程中,我们使用未压缩的版本,或者压缩的。
    项目上线的时候,我们要使用压缩过的版本。

  2. 版本问题
  • 1.***版本 jQuery-1.11.1.js
  • 2.***版本 不再支持IE6,7,8
  1. 引包
  • 我们要把jQuery源文件拿到我们项目里面来
  • 在我们的页面中引用jQuery源文件
jQuery引用

4 问题

问题

如果遇到这种问题,那肯定是没有引用我们的jQuery源文件。
用jQuery之前,先引入jQuery,然后,再去写我们的jQuery代码。

二.jQuery基本使用

1 入口函数

        //方法一
    $(document).ready(function () {
        
    })
        //方法二
        $(function () {
            
        })

2 事件处理程序
1)事件源

      //js方式
document.getElementById("id")
      //jQuery方式
$(" #id ")

2)事件

         //js方式
document.getElementById("id").onclick
         //jQuery方式
$(" #id ").click

3)事件处理程序

             //Js 书写方式:
document.getElementById(“id”).onclick = function(){
    // 语句
}

            //jQuery方式
$("#id").click(function(){
            //语句
})

案例演示(当点击按钮时,隐藏div)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            height: 200px;
            background-color: aqua;
        }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#bt").click(function () {
                $("div").hide();
            });
        });
    </script>
</head>
<body>
<input type="button" value="点击" id="bt">
<div>
</div>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容