首页 > 代码库 > JQuery

JQuery

2024-09-19 17:50:52   219人阅读

1.1JQuery的简介

1.1.1流行的JavaScript类库

  • 为了简化JavaScript的开发，一些JavaScript类库诞生了。JavaScript库封装了很多预定义的对象和实用函数。能帮助实用者建立有高难度交互的web2.0特性的富客户端页面，并且兼容各大浏览器。
  • 当前流行的JavaScript类库有：JQuery、MooTools、Prototype、Dojo、YUI、ExT_JS、DWR等。
  • 目前市面上用的比较多个两个框架：JQuery和Ext_JS。
  • JQuery Vs Ext_JS
    • JQuery比较适合做一些互联网的应用（12306.com、蘑菇街、美丽说、聚美商城）。
    • ExT_JS比较适合做后台管理系统（电商（订单管理）、银行、电信）。　　

1.1.2JQuery的简介

  • JQuery是继Prototype之后又一个优秀的JavaScript类库，是一个由John Resig创建于2006年1月的开源项目。
  • 现在的JQuery团队主要包括核心库、UI和插件等。
  • JQuery凭借着简介的语法和跨平台的兼容性，极大地简化了JavaScript开发人员查找元素、操作DOM、处理事件、执行动画和开发AJAX的操作。

 

1.2 JQuery的优势

JQuery的宗旨是--write less，do more，写更少的代码，做更多的事情。

  • 轻量级：jQuery非常轻巧。
  • 强大的选择器：JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及JQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。
  • 出色的DOM操作的封装：JQuery封装了大量常用的DOM操作，使得开发者在编写DOM操作相关程序的时候能够得心应手。
  • 可靠的事件处理机制：吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得JQuery在处理事件绑定的时候非常可靠。在预留退路、循环渐进一级非入侵式编程思想方面，JQuery做的非常不错。
  • 完善的AJAX：使得开发者处理AJAX的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
  • 不污染顶级变量：JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下。
  • 出色的浏览器兼容性：JQuery修复了一些浏览器之间的差异，使得开发者不必在项目前建立浏览器兼容库。
  • 链式操作方式：JQuery中最有特色的莫过于它的链式操作方法--即对发生在同一个JQuery对象上的一组动作，可以直接连写而无需重复获取对象。
  • 隐式迭代。
  • 行为层与结构层的分离：开发者可以使用JQuery选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使的JQuery开发人员和HTML或其他页面开发人员各司其职，摆脱开发冲突或个人单干的开发模式。
  • 丰富的插件支持，后期扩展非常方便：JQuery的易扩展性，吸引了来自全球的开发者编写JQuery的扩展插件。目前已经有超过几百种的官方插件支持，而且还不断有新插件面世。
  • 完善的文档。JQuery的文档非常丰富。

 

1.3 DOM对象和JQuery对象区别与联系

1.3.1DOM对象

  • ＤＯＭ解析HTML页面，将页面元素解释为元素节点、属性节点和文本节点。
  • 通过DOM解析HTML页面元素，所得到的DOM元素就是DOM对象。
  • DOM对象可以使用JavaScript中的方法。

 

1.3.2JQuery对象

  • JQuery对象就是通过JQuery包装DOM对象后产生的对象。
  • JQuery对象是JQuery独有的。
  • 虽然JQuery对象是包装DOM对象产生的，但是JQuery无法使用DOM对象的任何方法，同理DOM对象也无法使用JQuery里的方法。
  • 约定：如果获取的是JQuery对象，那么要在变量前面加上$。

 

1.3.3DOM对象VsJQuery对象

  • DOM代码--页面加载的代码
<script type="text/javascript">
    window.onload = function(){
        
    }
</script>
  • JQuery代码--页面加载的代码
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){
        
    });
</script>

 

  • DOM代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){
        $("#domButton").click(function(){
            var username = document.getElementById("username").value;
            alert(username);
        });
    });
</script>

</head>
<body>

    <input type="text" id="username"/>
    <input type="button" id="domButton" value="http://www.mamicode.com/dom vs Jquery"/>

</body>
</html>
  • JQuery代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){
        $("#domButton").click(function(){
            /* var username = document.getElementById("username").value;
            alert(username); */
            var username = $("#username").val();
            alert(username);
        });
    });
</script>

</head>
<body>

    <input type="text" id="username"/>
    <input type="button" id="domButton" value="http://www.mamicode.com/dom vs Jquery"/>

</body>
</html>

 

1.3.4ＤＯＭ对象转换成JQuery对象

  • 对于一个已经是DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个JQuery对象了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){
        $("#domButton").click(function(){
            var username = document.getElementById("username");
            var $username = $(username).val();
            alert($username);
        });
    });
</script>

</head>
<body>

    <input type="text" id="username"/>
    <input type="button" id="domButton" value="http://www.mamicode.com/dom vs Jquery"/>

</body>
</html>

 

1.3.5JQuery对象转化成DOM对象

  • JQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){
        $("#domButton").click(function(){
            //JQuery对象
            var $username = $("#username");
            //DOM对象
            var username = $username[0];
            alert(username.value);
        });
    });
</script>

</head>
<body>

    <input type="text" id="username"/>
    <input type="button" id="domButton" value="http://www.mamicode.com/dom vs Jquery"/>

</body>
</html>
  • JQuery本身提供，通过get(index)方法，得到相应的DOM对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){
        $("#domButton").click(function(){
            //JQuery对象
            var $username = $("#username");
            //DOM对象
            var username = $username.get(0);
            alert(username.value);
        });
    });
</script>

</head>
<body>

    <input type="text" id="username"/>
    <input type="button" id="domButton" value="http://www.mamicode.com/dom vs Jquery"/>

</body>
</html>

 

1.4JQuery的选择器

1.4.1什么是JQuery选择器

  • JQuery中的选择器完全集成了CSS的风格。
  • 利用JQuery选择器，可以非常便捷和快速的找出特定的DOM元素。
  • 学会使用选择器是学习JQuery的基础。

 

1.4.2JQuery选择器的优势

  • 写法：
    • $()函数在很多JavaScript类库中都被作为一个选择器函数来使用，在JQuery中也不例外。
  • 支持CSS1到CSS3选择器：
    • JQuery选择器支持CSS1、CSS2的全部和CSS3的部分选择，同时拥有少量的独有的选择器。
  • 完善的处理机制。　　

 

1.4.3基本选择器

  • 基本选择器是JQuery中最常用的选择器，也是最简单的选择器，它通过元素id,class和标签名来查找DOM元素（在网页中id只能使用一次，class允许重复使用）。

　

  • #id --id选择器 
    • 用法：$("#myDiv"); 返回值：单个元素的组成的集合。
    • 说明：这个就是直接选择HTML中的id="myDiv"。 　
  • Element --元素（标签）选择器
    • 用法：$("div"); 返回值:集合元素。
    • 说明：element的英文翻译就是“元素”，所以element其实就是HTML已经定义的标签元素，例如：div,input等。
  • class --类选择器
    • 用法：$(".myClass");返回值：集合元素。
    • 说明：这个标签是直接选择HTML代码中class="myClass"的元素或元素组（因为在同一个HTML页面中class是可以存在多个同样值的）。
  • * --通配符选择器
    • 用法：$("*");返回值：集合元素。
    • 说明：匹配所有元素，多用于结合上下文来搜索。
  • selector1,selector2,selector3 --组合选择器
    • 用法：$("div,span,p,.myClass,#myDiv");返回值：集合元素。
    • 说明：将每一个选择匹配到的元素合并后一起返回，你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

 

1.4.4层次选择器

  • 如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器。

 

  • ancestor descendant --祖先后代元素选择器
    • 用法：$("form input");返回值：集合元素。
    • 说明：在给定的祖先元素下匹配所有后代元素。
<form action="" method="post">
        姓名：<input type="text" name="username"/>
        <div>
            <input type="submit" value="提交"/>
        </div>
    </form>
    • $("form input");匹配的是姓名和提交的input元素。　　

 

  • parent>child --父子元素选择器
    • 用法：$("from>input");返回值：集合元素。
    • 说明：在给定的父元素下匹配所有子元素。
<form action="" method="post">
        姓名：<input type="text" name="username"/>
        <div>
            <input type="submit" value="提交"/>
        </div>
    </form>
    • $("from>input");匹配的是姓名元素。　　

 

  • prev+next　--相邻元素选择器
    • 用法：$("div+input");返回值：集合元素。
    • 说明：匹配所有紧接着prev元素后的第一个next元素。
<form action="" method="post">
        姓名：<input type="text" name="username"/>
        <div>
            <input type="submit" value="提交"/>
        </div>
    </form>
    <div id="name"></div>
    <div id="age"></div>
    • $("form+div");匹配的是id="name"的元素。

 

  • prev~sibling --兄弟元素选择器
    • 用法：$("div~input");返回值：集合元素。
    • 说明：匹配prev元素之后的所有sibling元素。
<form action="" method="post">
        姓名：<input type="text" name="username"/>
        <div>
            <input type="submit" value="提交"/>
        </div>
    </form>
    <div id="name"></div>
    <div id="age"></div>
    • $("input~div");匹配的是id="name"和id="age"的元素。

 

1.4.5过滤选择器　　

  • 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，该选择器都以":"开头。
  • 按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤器。　　　　

　　

1.4.6基本过滤选择器

  • ：first
    • 用法：$("tr:first");返回值：单个元素。
    • 说明：匹配找到的第一个元素。
<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>
    • 例如：$(‘li:first‘);
    • 结果：<li>list item 1</li>

 

  • ：last
    • 用法：$("tr:last");返回值:单个对象。
    • 说明：匹配找到的最后一个元素，与:first相对应。
<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>
    • 例如：$(‘li:last‘);
    • 结果：<li>list item 5</li>。

 

  • ：not(selector)
    • 用法：$("input:not(:checked)");返回值：集合元素。
    • 说明：去除所有与给定选择器匹配的元素，有点类似于“非”，意思是没有被选中的input元素。
<input name="apple" />
<input name="flower" checked="checked" />
    • 例如：$("input:not(:checked)");
    • 结果：<input name="apple" />。

 

  • :even
    • 用法：$("tr:even");返回值：集合元素。
    • 说明：匹配所有索引值为偶数的元素，从0开始计数，js的数组都是从0开始计数的。
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
    • 例如：$("tr:even");
    • 结果：<tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr>。

 

  • :odd
    • 用法：$("tr:odd");返回值：集合元素。
    • 说明：匹配所有索引值为奇数的元素，和:even相对应。从0开始计数。
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
    • 例如：$("tr:odd");
    • 结果：<tr><td>Value 1</td></tr>。

 

  • eq(index)
    • 用法：$("tr:eq(0)");返回值：集合元素。
    • 说明：匹配一个给定索引值的元素。eq(0)就是获取第一个tr元素。括号内的是索引值，而不是元素排列数。
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
    • 例如：$("tr:eq(1)");
    • 结果：<tr><td>Value 1</td></tr>。

 

  • gt(index)
    • 用法：$("tr:gt(0)");返回值：集合元素。
    • 说明：匹配所有大于给定索引值的元素。
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
    • 例如：$("tr:gt(0)");
    • 结果：<tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr>。

 

  • :lt(index)
    • 用法：$("tr:lt(2)");返回值：集合元素。
    • 说明：匹配所有小鱼给定索引值的元素。
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
    • 例如：$("tr:lt(2)");
    • 结果：<tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr>。

 

  • :header
    • 用法：$(":header");返回值：集合元素。
    • 说明：匹配如h1,h2,h3之类的标题元素，这个是专门用来获取h1,h2之类的标题元素。
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
    • 例如：$(":header").css("background", "#EEE");
    • 结果：<h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2>。

 

  • :animated 
    • 用法:$(":animated");返回值：集合元素。
    • 说明：匹配所有正在执行动画效果的元素。
<button id="run">Run</button><div></div>
    • 例如：
$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

 

1.4.7内容过滤选择器

  • 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上。

 

  • :contains(text)
    • 用法：$("div:contain(‘John‘)");返回值：集合元素。
    • 说明“匹配包含给定文本的元素，这个选择器比较有用，当我们要选择的不是DOM标签元素时，它就派上了用场了，它的作用是查找被标签“围”起来的文本内容是否符合指定的内容的。
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
    • 例如：$("div:contains(‘John‘)");
    • 结果：<div>John Resig</div>, <div>Malcom John Sinclair</div>。

 

  • :empty
    • 用法：$(":empty");返回值：集合元素。
    • 说明：匹配所有不包含子元素或者文本的空元素。
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
    • 例如：$("td:empty");
    • 结果：<td></td>, <td></td>。

 

  • :has(selector)
    • 用法：$("div:has(p)");返回值：集合元素。
    • 说明：匹配含有选择器所匹配的元素的元素。
<div><p>Hello</p></div>
<div>Hello again!</div>
    • 例如：$("div:has(p)").addClass("test");
    • 结果：<div class="test"><p>Hello</p></div>。 

  • :parent
    • 用法：$("td:parent");返回值：集合元素。
    • 说明：匹配含有子元素或者文本的元素，和:empty相反。
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
    • 例如：$("td:parent");
    • 结果：<td>Value 1</td>, <td>Value 2</td>。

 

1.4.8可见性过滤选择器

 

　　　　

 

　　 

 

　　　　

　　

 

　　 

 

　　

 

　　

 

　　

 

　　　　
　

　　

　　

 

　　

　　　　　　　　　　　

 

JQuery


联系
我们