jQuery学习笔记01

• jQuery官方网站：http://jquery.com/ 下载地址：https://code.jquery.com/
• 第一个jQuery程序

1.window.onload加载

<script type="text/javascript">        /* window.onload加载 */        window.onload = function() {            alert("Hello World!----->window.onload加载==");        }        //赋值操作，会覆盖之前的onload        window.onload = function(){            alert("Hello World!----->window.onload加载====");        }</script>

2.jQuery的ready加载

<!-- 在当前页面引入jquery的js文件 --><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><script type="text/javascript">        /*        jQuery() 是jQuery的核心函数，可以把这个函数理解为一个工厂，产生出来的一个jQuery对象        例如：jQuery(document):把document转换为jQuery对象        jQuery(document).ready(回调函数);        ready(回调函数):这个方法的作用是DOM载入就绪后，立即执行回调函数(优先window.onload执行)        */    //执行完第一个ready()之后，返回的还是jQuery对象，故可以再调用jQuery对象方法--->链式操作(链式编程)    jQuery(document).ready(function() {        alert("Hello World!-----jQuyer的ready加载-");    }).ready(function(){        alert("Hello World!-----jQuyer的ready加载---");        alert("${pageContext.request.contextPath }");    });    //不会覆盖之前的ready    jQuery(document).ready(function(){        alert("Hello World!-----jQuyer的ready加载------");    });    //结论：先按顺序执行jQuery的每一个ready事件，最后执行最后一次绑定的window.onload事件</script>

3.window.onload和jQuery的ready区别

1).执行时机不同       

window.onload 会在DOM（Document Object
Model：文档对象模型）载入就绪（整个文档的架子已加载完成，可以获取到所有的DOM节点），
并且DOM中的所有内容全部加载完毕后才执行，举个典型的例子：当页面中有大量的图片时，浏览器会先载入 DOM，而当DOM载入完成时，DOM中的window.onload的执行时机在大多数情况下不是我们想要的。而jQuery
提供的jQuery(document).ready(回调函数);会在页面 DOM
加载就绪后，回调函数便会立即执行！因此，jQuery的ready会先于window.onload执行。

2).编写个数不同

window.onload采用js中的赋值操作，为其指定了一个函数：window.onload=function(){…};当再次为window.onload赋值一个新的函数时，之前的函数会被新的函数覆盖，因此window.onload的方式只能编写一个加载事件,而jQuery采用其特有的ready方法，可以同时编写多个加载事件，不会产生覆盖的问题，而且会按照编写的顺序依次执行！

4.jQuery的别名$

• 为了简化代码，jQuery定义了一个全局的变量作为别名来代替jQuery，即=jQuery，是jQuery的别名例如，jQuery(document).ready(回调函数);可以简写为(document).ready(回调函数);

<title>jQuery的别名:$</title><!-- 引入jQuery的js文件 --><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><script type="text/javascript">    jQuery(document).ready(function() {        alert("jQuery的别名$");    });    /* $=jQuery */    $(document).ready(function(){        alert("jQuery的别名$----");    });</script>

5.jQuery的核心函数

1).jQuery的核心函数一：$(callback)--->DOM加载完成时要执行的函数

<title>jQuery的核心函数一：$(callback):DOM加载完成时要执行的函数</title><!-- 引入jQuery的js文件 --><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><script type="text/javascript">    /*         核心函数一：        $(callback):DOM加载完成时要执行的函数        jQuery(document).ready()--->$(document).ready()--->$(callback)    */    $(function(){        alert("DOM加载完成时要执行的函数！");    });    //为了防止当前页面中其他框架也使用$,通常写成：    jQuery(function($){        alert("在调用jQuery函数的时候，传递了一个匿名函数，这个函数会在jQuery方法中进行调用，在调用这个函数的时候，jQuery把自身作为参数传递给了这个函数，因此，在这个函数中，参数就表示jQuery对象");    });    //如下写法也是可以的(不常写)    $(function($){        alert("test");    })</script>

2).jQuery核心函数二：$(html代码)--->将html代码片段转换为jQuery对象

<title>jQuery核心函数二：$(html代码)：将html代码片段转换为jQuery对象</title><!-- 引入jQuery的js文件 --><script type="text/javascript"    src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><script type="text/javascript">    /*         jQuery核心函数二：        $(html代码)：将html代码片段转换为jQuery对象     */    $(function() {        //$(html代码)：将html代码片段转换为jQuery对象        var $div = $("<div>将html代码片段转换为jQuery对象</div>");        alert($div.html());    });</script>

3).jQuery核心对象三：$(selector)--->根据选择器获取页面中元素

<title>jQuery核心对象三：$(selector):根据选择器获取页面中元素</title><!-- 引入jQuery的js文件 --><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><script type="text/javascript">    /*         jQuery核心对象三：        $(selector):根据选择器获取页面中元素     */    jQuery(function($) {        var $mydiv = $("#mydiv");    //id选择器        //alert($mydiv.html());        var $mydiv = $(".cl");   //类选择器        //alert($mydiv.html());        var $mydiv = $("div");   //标签选择器        alert($mydiv.html());    });</script></head><body>    <div class="cl" id="mydiv">根据选择器获取页面中元素</div></body>

4).jQuery的核心函数四：$.holdReady(hold)--->暂停或恢复ready事件的执行

<title>jQuery的核心函数四：$.holdReady(hold)：暂停或恢复ready事件的执行</title><!-- 引入jQuery的js文件 --><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><script type="text/javascript">    /*         jQuery核心对象四：        $.holdReady(hold)：暂停或恢复ready事件的执行        用法：此方法不要写在ready事件中，直接写在javascript标签中     */    jQuery(function($) {        //jQuery加载完成事件的代码        alert("jQuery的核心函数四：$.holdReady(hold)：暂停或恢复ready事件的执行");    });    //阻止jQuery的ready事件的执行    jQuery.holdReady(true);</script></head><body>    <div class="cl" id="mydiv" onclick="jQuery.holdReady(false)">jQuery的核心函数四：$.holdReady(hold)：暂停或恢复ready事件的执行</div></body>

6.JQuery对象和DOM对象

1).JQuery对象和DOM对象区别：    

• 什么是jQuery对象？

jQuery对象是jQuery框架独有的，通过jQuery的核心函数$(selector)获取。selector也可以是一个DOM对象，jquery会把DOM对象转换为jQuery对象

• 什么是DOM对象？

DOM的全称是“Document Object Model”，即文档对象模型，而DOM对象指的是某个或某些具体的节点对象，通过document.getElementXXX()获取。

• 两者之间的区别？

jQuery对象只能使用jQuery对象的属性和方法，不能直接使用DOM对象的属性和方法；同样，DOM对象只能使用DOM对象的属性和方法，不能直接使用jQuery对象的属性和方法。两种对象的属性和方法不通用！jQuery对象在使用其属性和方法的时候，实际上底层使用的依然是DOM对象中的属性和方法。那么，在页面中如何区分jQuery对象和DOM对象呢？在开发中有个约定：在jQuery对象的前面加$，例如：

var $mydiv = $(“#mydiv”); // $mydiv是jQuery对象var mydiv = document.getElementById(“mydiv”); // mydiv是DOM对象

2).JQuery对象和DOM对象相互转换：

<title>JQuery对象和DOM对象相互转换</title><!-- 引入jQuery的js文件 --><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><script type="text/javascript">    jQuery(function($) {        //1.DOM对象--->jQuery对象        //先获取DOM对象        var mydiv = document.getElementById("mydiv");        alert("mydiv.innerHTML:" + mydiv.innerHTML);        /*             DOM对象不能使用jQuery对象中的属性和方法            如下两行报错:Uncaught TypeError: mydiv.html is not a function         */        //alert(mydiv.html());      //Uncaught TypeError: mydiv.html is not a function        // alert(mydiv.text());     //Uncaught TypeError: mydiv.html is not a function        //$=jQuery, $(mydiv):将DOM对象转换为jQuery对象        var $mydiv = $(mydiv);        alert($mydiv.html());        alert($mydiv.text());        /*             jQuery对象不能使用DOM对象中的属性和方法            总结：jQuery对象和DOM对象的属性和方法不能直接相互调用         */        //alert($mydiv.innerHTML); //没有该属性，但不会报错        //jQuery对象--->DOM对象        //方式一：获取jQuery对象中指定索引的DOM对象        var mydiv = $mydiv[0];        alert(mydiv.innerHTML);        //方式二：获取jQuery对象中指定索引的DOM对象        var mydiv = $mydiv.get(0);        alert(mydiv.innerHTML);        //方式三：真正将jQuery对象转为DOM对象的数组,        //上述两种方式只适于jQuery中只匹配一个元素的jQuery对象转换        var domArr = $mydiv.get();        alert(domArr[0].innerHTML);    });</script></head><body>    <div id="mydiv" class="abc">        <span>jQuery对象和DOM对象相互转换</span>    </div></body>

7.案例

<title>改变div中的内容为"单骑飘尘"，分别使用传统js方式和jQuery方式</title><!-- 引入jQuery的js文件 --><script type="text/javascript"    src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><script type="text/javascript">    jQuery(function($) {        //需求：改变div中的内容为"单骑飘尘",分别使用传统js方式和jQuery方式        //1.传统js方式改变并获取div中的内容 (html内容,text内容)        var mydiv = document.getElementById("mydiv");        //所有浏览器都支持        mydiv.innerHTML = "单骑飘尘innerHTML";        //所有ie和新版本标准浏览器，老版本标准浏览器不支持innerText属性        mydiv.innerText = "单骑飘尘innerText";        //所有标准浏览器和新版本ie(9及以上)才支持        mydiv.textContext = "单骑飘尘textContext";        //为了解决兼容问题，通常innerText和textContext指定相同的内容        mydiv.innerText = "单骑飘尘";        mydiv.textContext = "单骑飘尘";        //连续赋值操作，执行顺序：从右往左执行        mydiv.innerText = mydiv.textContext = "单骑飘尘...";        /* html和text的区别？         * html会解析内容中html标签，而text会将给定的html内容原样显示在页面中         * 如果要使用html输出html内容，需要进行转义，例如如果要输出文本"&nbsp;",         * 需要进行转义："&amp;nbsp;"，比较麻烦，这种情况下可以使用text来完成！         * 在书写html参考文档时，使用text比较合适！         */        // 让div显示:<font color="red">如何改变文字的颜色</font>        //mydiv.innerHTML="<font color='red'>如何改变字体的颜色</font>"; //html解析了html中的内容：如何改变字体的颜色        mydiv.innerHTML="&lt;font color='red'&gt;如何改变字体中的颜色&lt;/font&gt;";  //<font color='red'>如何改变字体中的颜色</font>        mydiv.innerText="<font color='red'>如何改变字体的颜色</font>";   //<font color='red'>如何改变字体的颜色</font>        //2.jQuery方式改变和获取div的内容和文本        //jQuery提供了针对html和文本相应的方法，分别是html方法和text方法        //若要将指定的内容原样输出，得使用text        $("#mydiv").text("单骑飘尘jQuery...text");        //让浏览器解析指定的html内容        $("#mydiv").html("<font color='red'>如何改变文字的颜色_jquery的html方法</font>");        $("#mydiv").text("<font color='red'>如何改变文字的颜色_jquery的text方法</font>");        //jQuery 在调用方法的时候，有个规律：给参数就是设置，不给参数就是获取        alert($("#mydiv").text());        alert($("#mydiv").html());    });</script></head><body>    <dir id="mydiv"></dir></body>