jQuery学习笔记01

来源：互联网发布：百度网盘mac版怎么用编辑：程序博客网时间：2024/06/05 12:59

1:使用js的缺点

1.代码比较麻烦，需要遍历，可能还需要嵌套
2.找对象比较麻烦，还长
3.会有兼容性问题，低版本火狐浏览器不支持innerText,支持textContent
4.想要实现简单的动画，需要animate
5.js注册事件会被覆盖需要用addEventListener(有兼容性)

例子：DIV动态展示与设置内容

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>js的缺点</title>        <style>            div{                height: 200px;                margin-bottom: 10px;                background-color: red;                display: none;            }        </style>        <script>        //等待页面加载完成后才会执行        window.onload = function(){            //找对象            var btn1 = document.getElementById("btn1");            var btn2 = document.getElementById("btn2");            var divs = document.getElementsByTagName("div");            //显示            btn1.onclick = function(){                for(var i = 0;i<divs.length;i++){                    divs[i].style.display = "block";                }            }            //设置内容            btn2.onclick = function(){                for (var i = 0;i<divs.length;i++) {                    //低版本火狐浏览器不支持innerText,支持textContent                    divs[i].innerText = "我是内容";                }            }        }        /*window.onload = function(){            console.log("hehe");        }*/    </script>    </head>    <body>        <input type="button" value="显示" id="btn1"/>        <input type="button" value="设置内容" id="btn2"/>        <div></div>        <div></div>        <div></div>    </body></html>

2：jQuery初体验

优点：
1.查找元素的方法多种多样，非常灵活
2.拥有隐式迭代特性，不需要写for循环
3.完全没有兼容性问题
4.实现动画非常简单，功能更加强大
5.代码简单，粗暴

要点：
1.需要引入jQuery文件
2.入口函数
3.功能实现（注册事件，把on去掉，是一个方法）

例子：DIV动态展示与设置内容

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>jQuery初体验</title>        <style>            div{                height: 200px;                margin-bottom: 10px;                background-color: red;                display: none;            }        </style>        <script src="js/jquery-1.8.3.js"></script>        <script>            $(document).ready(function(){                //注册事件，把on去掉，是一个方法                $("#btn1").click(function(){                    //隐式迭代：偷偷的遍历，jquery会自动进行遍历，不需要我们进行遍历                    $("div").slideDown(3000);                });                //测试是否覆盖                /*$("#btn1").click(function(){                    console.log("哈哈");                });*/                $("#btn2").click(function(){                    $("div").text("我是内容");                });            });        </script>    </head>    <body>        <input type="button" value="显示" id="btn1"/>        <input type="button" value="设置内容" id="btn2"/>        <div></div>        <div></div>        <div></div>    </body></html>

3：什么是jQuery（write less,do more）

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

4:jQuery版本问题

If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use jQuery 1.12.

压缩版适用于生产环境（服务器上-对用户开放-不能有bug）
未压缩版适用于开发环境（自己的电脑）
测试环境（服务器上-对测试人员开放-可以有bug）

5:jQuery入口函数的解释

1.js的入口函数执行要比jQuery入口函数执行的晚
2.jquery入口函数会等待页面的加载完成才执行，但是不会等待图片的加载完成
3.js入口函数会等待页面的加载完成才执行，也会等待图片的加载完成

例子：入口函数

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>jQuery入口函数的写法</title>        <script src="js/jquery-1.8.3.js"></script>        <script>            window.onload = function(){                console.log("我是js的入口函数");            }            $(document).ready(function(){                console.log("jquery入口函数的第一种写法")            });            $(function(){                console.log("jQuery入口函数的第二种写法");            });        </script>    </head>    <body>        <img src="http://img.daimg.com/uploads/allimg/160324/1-160324232117.jpg">        <img src="http://img.daimg.com/uploads/allimg/160318/1-16031P01P0.jpg">        <img src="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg">        <img src="http://img.daimg.com/uploads/allimg/160608/1-16060R35630.jpg" alt="">        <img src="http://img.daimg.com/uploads/allimg/160531/1-160531224303.jpg" alt="">    </body></html>

6：jq对象与DOM对象的区别与联系

1.什么是DOM对象（js对象）：使用js的方式获取到的元素就是js对象(DOM对象)
2.什么是jq对象：使用jquery方式获取到的对象就是jquery对象
3.jq对象与js对象的联系(jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆的js对象)
4.jq对象不能调用DOM对象的方法，DOM对象也不能调用jq对象的方法，因为是两个不同的对象。
5. jq对象与DOM对象相互转换

 DOM==>jq :  $(DOM) jq ==> DOM : $li[0];              get(1);

7:隔行变色

8:$符号的实质

$其实就是一个函数，以后用$的时候记得加（）
参数不同，功能不同，3中用法
1.参数是一个function,入口函数

$(function(){    console.log("jQuery入口函数的第二种写法");});

2.$(dom)，把dom对象转换为jquery对象

$(document).ready(function(){                console.log("jquery入口函数的第一种写法")            });

3.参数是一个字符串$(“”); 用来找对象
$("div")，$("#btn"),$(".cloth")

例子：$符号的实质是一个函数

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>        <script>            $(function(){                console.log(typeof $);                //function            });        </script>    </head>    <body>    </body></html>

阅读全文

0 0