jQuery

来源：互联网发布：竞彩分析软件绿色编辑：程序博客网时间：2024/05/17 20:31

什么是jQuery?

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery工作原理:

jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块。在构造jQuery对象模块中，如果在调用构造函数jQuery()创建jQuery对象时传入了选择器表达式，则会调用选择器Sizzle（一款纯JavaScript实现的CSS选择器引擎，用于查找与选择器表达式匹配的元素集合）遍历文档，查找与之匹配的DOM元素，并创建一个包含了这些DOM元素引用的jQuery对象。浏览器功能测试模块提供了针对不同浏览器功能和bug的测试结果，其他模块则基于这些测试结果来解决浏览器之间的兼容性问题。在底层支持模块中，回调函数列表模块用于增强对回调函数的管理，支持添加、移除、触发、锁定、禁用回调函数等功能；异步队列模块用于解耦异步任务和回调函数，它在回调函数列表的基础上为回调函数增加了状态，并提供了多个回调函数列表，支持传播任意同步或异步回调函数的成功或失败状态；数据缓存模块用于为DOM元素和Javascript对象附加任意类型的数据；队列模块用于管理一组函数，支持函数的入队和出队操作，并确保函数按顺序执行，它基于数据缓存模块实现。在功能模块中，事件系统提供了统一的事件绑定、响应、手动触发和移除机制，它并没有将事件直接绑定到DOM元素上，而是基于数据缓存模块来管理事件；Ajax模块允许从服务器上加载数据，而不用刷新页面，它基于异步队列模块来管理和触发回调函数；动画模块用于向网页中添加动画效果，它基于队列模块来管理和执行动画函数；属性操作模块用于对HTML属性和DOM属性进行读取、设置和移除操作；DOM遍历模块用于在DoM树中遍历父元素、子元素和兄弟元素；DOM操作模块用于插入、移除、复制和替换DOM元素；样式操作模块用于获取计算样式或设置内联样式；坐标模块用于读取或设置DOM元素的文档坐标；尺寸模块用于获取DOM元素的高度和宽度

一）jQuery的九类选择器及应用：
（1）基本选择器

<body>    <div id="div1ID">div1</div>    <div id="div2ID">div2</div>    <span class="myClass">span</span>    <p>p</p>    <script type="text/javascript">        //1)查找ID为"div1ID"的元素个数        alert($("#div1ID").size());//1        //2)查找DIV元素的个数        alert($("div").length);//2        //3)查找所有样式是"myClass"的元素的个数        alert($(".myClass").size());//1        //4)查找所有DIV,SPAN,P元素的个数        alert($("DIV,span,p").size());//4        //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数        alert($("#div1ID,.myClass,p").size());//3    </script></body>

（2）层次选择器

<body>    <form>        <input type="text" value="a" />        <table>            <tr>                <td><input type="checkbox" value="b" /></td>            </tr>        </table>    </form>    <input type="radio" value="ccccccccc" />    <input type="radio" value="d" />    <input type="radio" value="e" />    <script type="text/javascript">        //1)找到表单form里所有的input元素的个数        alert( $("form input").size() );//2        //2)找到表单form里所有的子级input元素个数        alert( $("form>input").size() );//1        //3)找到表单form同级第一个input元素的value属性值        alert( $("form+input").val() );//ccccccccc        //4)找到所有与表单form同级的input元素个数        alert($("form~input").size());//3    </script></body>

（3）增强基本选择器

<body>    <ul>        <li>list item 1</li>        <li>list item 2</li>        <li>list item 3</li>        <li>list item 4</li>        <li>list item 5</li>    </ul>    <input type="checkbox" checked />    <input type="checkbox" checked />    <input type="checkbox" />    <table border="1">        <tr>            <td>line1[0]</td>        </tr>        <tr>            <td>line2[1]</td>        </tr>        <tr>            <td>line3[2]</td>        </tr>        <tr>            <td>line4[3]</td>        </tr>        <tr>            <td>line5[4]</td>        </tr>        <tr>            <td>line6[5]</td>        </tr>    </table>    <h1>h1</h1>    <h2>h2</h2>    <h3>h3</h3>    <p>p</p>    <script type="text/javascript">        //1)查找UL中第一个LI元素的内容        //html()要用于html/jsp，不能用在xml        //text()既能用于html/jsp，且能用于xml        alert($("ul li:first").text());//list item 1        //2)查找UL中最后个元素的内容        alert($("ul li:last").text());//list item 5        //4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始        alert($("table tr:odd").size());//3        //5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始        alert($("table tr:even").size());//3        //6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式        //html()：强调的是标签中的内容，即便标签中的子标签，也会显示出来        //text()：强调的是标签中的文本内容，即便标签中的子标签，也只会显示出文本内容，不会显示子标签        alert($("table tr:eq(1)").text());//line2[1]        //7)查找表格中第二第三行...的个数，即索引值是1和2...，也就是比0大        alert($("table tr:gt(0)").size());//5        //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小        alert($("table tr:lt(2)").size());//2        //9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色        $(":header").css("background-color", "red").css("color", "blue");        //10)查找所有[未]选中的input为checkbox的元素个数        alert($(":checkbox:not(:checked)").size());//1    </script></body>

（4）内容选择器

<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.8.2.js"></script><style type="text/css">    .myClass {        font-size: 44px;        color: blue    }</style></head><body>    <div>        <p>John Resig</p>    </div>    <div>        <p>George Martin</p>    </div>    <div>Malcom John Sinclair</div>    <div>J. Ohn</div>    <div></div>    <p></p>    <p></p>    <script type="text/javascript">        //1)查找所有包含文本"John"的div元素的个数        alert($("div:contains('John')").size());//2        //2)查找所有p元素为空的元素个数        alert($("p:empty").size());//2        //3)给所有包含p元素的div元素添加一个myClass样式        $("div:has(p)").addClass("myClass");        //4)查找所有含有子元素或者文本的p元素个数,即p为父元素        alert($("p:parent").size());//2    </script></body>

（5）可见性选择器

<body>    <table border="1" align="center">        <tr style="display:none">            <td>Value 1</td>        </tr>        <tr>            <td>Value 2</td>        </tr>        <tr>            <td>Value 3</td>        </tr>    </table>    <script type="text/javascript">        //1)查找隐藏的tr元素的个数        alert($("table tr:hidden").size());//1        //2)查找所有可见的tr元素的个数        alert($("table tr:NOT(:hidden)").size());//2        alert($("table tr:visible").size());//2    提倡    </script></body>

（6）属性选择器

<body>    <div>        <p>Hello!</p>    </div>    <div id="test2"></div>    <input type="checkbox" name="newsletter" value="Hot Fuzz" />    <input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />    <input type="checkbox" name="newsaccept" value="Evil Plans" />    <script type="text/javascript">        //1)查找所有含有id属性的div元素个数        alert($('div[id]').size());//1        //2)查找所有name属性是newsletter的input元素，并将其选中        $("input[name='newsletter']").attr("checked", "checked");        //3)查找所有name属性不是newsletter的input元素，并将其选中        $("input[name!='newsletter']").attr("checked", "true");        //4)查找所有name属性以'news'开头的input元素，并将其选中        $("input[name^='news']").attr("checked", "checked");        //5)查找所有name属性以'letter'结尾的input元素，并将其选中        $("input[name$='letter']").attr("checked", "checked");        //6)查找所有name属性包含'news'的input元素，并将其选中        $("input[name*='news']").attr("checked", "checked");        //7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中        $("input[id][name$='letter']").attr("checked", "true");    </script></body>

（7）子元素选择器

<body>    <ul>        <li>John</li>        <li>Karl</li>        <li>Brandon</li>    </ul>    <ul>        <li>Glen</li>        <li>Tane</li>        <li>Ralph</li>    </ul>    <ul>        <li>Marry</li>    </ul>    <ul>        <li>Jack</li>    </ul>    <script type="text/javascript">        //1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始        $("ul li:first-child").each(function() {            alert($(this).text());        });        //2)迭代每个ul中最后1个li元素中的内容,索引从1开始        $("ul li:last-child").each(function() {            alert($(this).text());        });        //3)迭代每个ul中第2个li元素中的内容,索引从1开始        $("ul li:nth-child(2)").each(function() {            alert($(this).text());        });        //4)在ul中查找是唯一子元素的li元素的内容        $("ul li:only-child").each(function() {            alert($(this).text());        });    </script></body>

（8）表单选择器

<body>    <form>        <input type="button" value="Input Button" /><br />         <input type="checkbox" /><br />         <input type="file" /><br />         <input type="hidden" name="id" value="123" /><br />        <input type="image" src="../images/lb.jpg" width="25px" height="25px" /><br />         <input type="password" /><br />         <input type="radio" /><br />         <input type="reset" /><br />         <input type="submit" /><br />         <input type="text" /><br />         <select>            <option>Option</option>        </select><br />        <textarea></textarea><br />        <button>Button</button><br />    </form>    <script type="text/javascript">        //1)查找所有input元素的个数        alert($("input").size());//10，找input标签        alert($(":input").size());//13，找input标签和select/textarea/button        //2)查找所有文本框的个数        alert($(":text").size());//1        //3)查找所有密码框的个数        alert($(":password").size());//1        //4)查找所有单选按钮的个数        alert($(":radio").size());//1        //5)查找所有复选框的个数        alert($(":checkbox").size());//1        //6)查找所有提交按钮的个数        alert($(":submit").size());//2        //7)匹配所有图像域的个数        alert($(":image").size());//1        //8)查找所有重置按钮的个数        alert($(":reset").size());//1        //9)查找所有普通按钮的个数        alert($(":button").size());//2        //10)查找所有文件域的个数        alert($(":file").size());//1        //11)查找所有input元素为隐藏域的个数        alert($(":input:hidden").size());//1    </script></body>

（9）表单对象属性选择器

<body>    <form>      <input type="text" name="email" disabled="disabled" />      <input type="text" name="password" disabled="disabled" />      <input type="text" name="id" />      <input type="checkbox" name="newsletter" checked="checked" value="Daily" />      <input type="checkbox" name="newsletter" value="Weekly" />      <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />      <select id="provinceID">          <option value="1">广东</option>          <option value="2" selected="selected">湖南</option>          <option value="3">湖北</option>      </select>    </form>    <script type="text/javascript">        //1)查找所有可用的input元素的个数        alert( $("input:enabled").size() );//4         //2)查找所有不可用的input元素的个数        alert( $("input:disabled").size() );//2         //3)查找所有选中的复选框元素的个数        alert( $(":checkbox:checked").size() );//2         //4)查找所有未选中的复选框元素的个数        alert( $(":checkbox:NOT(:checked)").size() );//1         //5)查找所有选中的选项元素的个数         alert( $("select option:selected").size() );//1         alert( $("#provinceID option:NOT(:selected)").size() );//2    </script>  </body>

二）jQuery常用Method-API
目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查
（1）DOM简述与分类

（A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML)（B）DOM是跨平台(window/linux/unix)，跨语言(javascript/java)，跨浏览器(ie/firefox/Chrome)的标准规则    （C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程（D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS（E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等

（2）DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用

each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象append()：追加到父元素之后prepend()：追加到父元素之前after()：追加到兄弟元素之后before()：追加到兄弟元素之前 attr(name)：获取属性值attr(name,value)：给符合条件的标签添加key-value属性对 $("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本    remove()：删除自已及其后代节点  val()：获取value属性的值val("")：设置value属性值为""空串，相当于清空text()：获取HTML或XML标签之间的值text("")：设置HTML或XML标签之间的值为""空串 clone()：只复制样式，不复制行为clone(true)：既复制样式，又复制行为replaceWith()：替代原来的节点removeAttr()：删除已存在的属性addClass()：增加已存在的样式removeClass()：删除已存在的样式hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式toggleClass()：如果标签有样式就删除，否则增加样式offset()：获取对象的left和top坐标offset({top:100,left:200})：将对象直接定位到指定的left和top坐标width()：获取对象的宽width(300)：设置对象的宽height()：获取对象的高height(500)：设置对象的高children()：只查询子节点，不含后代节点next()：下一下兄弟节点prev()：上一下兄弟节点siblings()：上下兄弟节点show()：显示对象hide()：隐藏对象fadeIn()：淡入显示对象fadeOut()：淡出隐藏对象slideUp()：向上滑动slideDown()：向下滑动slideToggle()：上下切换滑动，速度快点面试题--find("9类选择器")：查询指定的节点和多重each()迭代//使用jquery弹出奇数的tr标签下的td里的值var $tr = $("table tr:lt(4):even");$tr.each(function(){//tr中查找td标签,$(this)表示trvar $td = $(this).find("td");$td.each(function(){//$(this)表示tdvar txt = $(this).text();alert(txt);});});

三）jQuery常用Event-API

目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化ready和onload同时存在时，二者都会触发执行，ready快于onloadchange：当内容改变时触发focus：焦点获取select：选中所有的文本值keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同mousemove：在指定区域中不断移动触发mouseover：鼠标移入时触发mouseout：鼠标移出时触发submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台click：单击触发dblclick：双击触发blur：焦点失去

阅读全文

0 0