jQuery知识总结

标签: jquery 知识 总结 | 发表时间:2013-04-13 11:14 | 作者:iTech
分享到:
出处:http://www.cnblogs.com/itech/

转自: http://www.cnblogs.com/oec2003/archive/2013/04/13/3017731.html

原作者:  oec2003(水杯) 
出处:     http://oec2003.cnblogs.com/ 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则 保留追究法律责任的权利。

 

一 jQuery简介

简介

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多)。 jQuery在2006年1月由美国人 John  Resig在纽约的barcamp发布,吸引了来自世界各地的众多javascript高手加入,现在由Dave Methvin率领团队进行开发。如今, jQuery已经成为最流行的 javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery 。【摘自百度百科】

下载地址

http://jquery.com/

源码地址

https://github.com/jquery/jquery

可以通过 git clone git://github.com/jquery/jquery.git 来获取源码。

在线文档

http://www.ostools.net/apidocs/apidoc?api=jquery

http://www.ostools.net/上有各种在线工具,在此推荐下。

使用jQuery

使用jQuery首先需要在页面中进行引用,如下:

<script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script>

使用的代码如下:

$(document).ready(function () {    $("#div1").html("hello world");});$(function () {    $("#btnOK").bind("click", function () {         });});

上面的代码相当于window.onload,不过跟window.onload还是有一些区别,后面会以表格的形式来展现他们的区别。在jQuery中到处可以见到$符号,这是jQuery里的一种简写,$("#btnOK")和jQuery("#btnOK")是等价的。

window.onload和$(document).ready()的区别

 

window.onload

$(document).ready()

执行时间

网页所有内容加载完后执行

DOM结构加载完后就执行,效率更高

编写个数

1个

多个,多个的执行顺序取决于函数的顺序以及引用文件的顺序

是否支持简写

不支持

简写形式为:$(function(){});

 

 

二  DOM对象和jQuery对象转换

获取DOM对象代码如下:

//获取DOM对象var div1 = document.getElementById("div1");div1.innerHTML = "oec2003";

获取jQuery对象代码如下:

//获取jQuery对象var div1 = $("#div1");div1.html("oec2003");

jQuery对象转DOM对象

//因为ajQuery对象是一个数组对象,所以转换为DOM对象时要用索引的形式var $div1 = $("#div1"); //jQuery对象var div1 = $div1[0]; //转换为了DOM对象var div2 = $div1.get(0); //和上面一行效果一样div1.innerHTML = "oec2003";

DOM对象转jQuery对象

//DOM对象转jQuery只需用$包装即可var div1 = document.getElementById("div1");var $div1 = $(div1); //转换为了jQuery对象$div1.html("oec2003");

解决冲突

有时会有jQuery和其他的库或自己写的一些公共脚本文件一起使用的场景,就有可能会出现$冲突的问题,冲突的解决分两种情况:

1、jQuery库在其他库之后引用,如下所示:

<script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script><script type="text/javascript" src="Scripts/common.js"></script>

在common.js中有对$重新定义,代码如下:

function $(id) {    return document.getElementById(id);}

下面是在jQuery中解决冲突的代码,有四种方式:

//方式1jQuery.noConflict(); //将$控制权移交出去,以前使用$的地方都改用jQueryjQuery(document).ready(function () {    alert(jQuery("#span1").html());});window.onload = function () {    $("span1").innerHTML = "oec2003";}//方式2var $j=jQuery.noConflict(); //定义快捷方式$j(document).ready(function () {    alert($j("#span1").html());});window.onload = function () {    $("span1").innerHTML = "oec2003";}//方式3jQuery.noConflict(); //在函数内部继续使用$jQuery(function ($) {    alert($("#span1").html());});window.onload = function () {    $("span1").innerHTML = "oec2003";}//方式4jQuery.noConflict(); //在函数内部继续使用$另一种方式(function ($) {    $(function(){        alert($("#span1").html());    });})(jQuery);window.onload = function () {    $("span1").innerHTML = "oec2003";}

2、jQuery库在其他库之前使用

//如果先引用jQuery脚本,可以不使用noConflict//jQuery.noConflict(); jQuery(document).ready(function () {    alert(jQuery("#span1").html());});window.onload = function () {    $("span1").innerHTML = "oec2003";}

 

三 选择器

基本选择器

<body>    <div>        <div id="div1">            aaaaaaaaaaa</div>        <div class="c1">            bbbbbbbbb</div>        <span>ccccccccc</span>    </div></body>
$(function () {    $("#div1").html("hello world 1"); //根据id匹配元素(a)    $(".c1").html("hello  world 2"); //根据Yclass匹配元素(b)    $("span").html("hello world 3"); //根据元素名称匹配 (c)    $("span,div.c1").html("hello world 4"); //匹配页面所有的span 和class=c1的div(b c)    $("*").html("hello world 5"); //匹配页面所有元素,也包含body});

层级选择器

<body>    <span id="span1">        aaaaaaaaa</span>    <span class="c1">        bbbbbbbbb</span>    <div>        ccccccccc        <span>ddddddddd</span>    </div>    <div>eeeeeeeee</div></body>
$(function () {    $("body span").html("hello world 1"); //选取body中所有的span(a b d)    $("body>span").html("hello world 2"); //选取body元素的子span元素(a b)    $("span.c1+div").html("hello world 3"); //选取class为c1的span的下一个div元素,注意是同级元素    $("span.c1").next().html("hello world 3"); //跟上行效果相同 (c)    $("span.c1~div").html("hello world 4"); //选取class为c1的span的后面的所有div    $("span.c1").nextAll().html("hello world 4"); //跟上行效果相同(c e)});

基本过滤选择器

<body>    <h1>header1</h1>    <h2>header2</h2>    <h3>header3</h3>    <span id="span1">aaaaaaaaa</span>    <span class="c1">bbbbbbbbb</span>    <div>        ccccccccc        <span>ddddddddd</span>    </div>    <div>eeeeeeeee</div></body>
$(function () {    $("div:first").html("hello world 1"); //选取所有div中的第一个div    $("span:last").html("hello world 2"); //选取所有span中的最后一个    $("span:not(.c1)").html("hello world 3"); //选取除class为c1的span外的所有span    $("span:even").html("hello world 4"); //选取索引为偶数的span,索引从0开始    $("span:odd").html("hello world 5"); //选取索引为奇数的span,索引从0开始    $("span:eq(2)").html("hello world 6"); //选取指定索引的span,索引从0开始    $("span:gt(0)").html("hello world 7"); //选取大于指定索引的span,不包含指定索引    $("span:lt(2)").html("hello world 8"); //选取小于指定索引的span,不包含指定索引    $(":header").html("hello world 9"); //选取页面中所有的标题元素 h1 h2 h3...});

内容过滤选择器

<body>    <span id="span1">aaaaaaaaa</span>    <span class="c1">bbbbbbbbb</span>    <span></span>    <div>        ccccccccc        <span id="span2" class="c2">ddddddddd</span>    </div>    <div>eeeeeeeee</div></body>
$(function () {    $("span:contains(aa)").html("hello world 1"); //选取内容包含aa的span元素    $("span:empty").html("hello world 2"); //选取空的span元素    $("div:has(span)").html("hello world 3"); //选取包含span的div元素    $("span:parent").html("hello world 4"); //选取包含子元素的span元素,包含文本});

属性过滤选择器

<body>    <span id="span1">aaaaaaaaa</span>    <span class="c1">bbbbbbbbb</span>    <span></span>    <div>        ccccccccc        <span id="span2" class="c2">ddddddddd</span>    </div>    <div>eeeeeeeee</div></body>
$(function () {    $("span[id]").html("hello world 1"); //选取有属性id的span元素    $("span[id=span2]").html("hello world 2"); //选取属性id等于span2的span元素    $("span[id!=span2]").html("hello world 3"); //选取属性id不等于为span2的span元素    $("span[id^=span]").html("hello world 4"); //选取属性id以span开始的span元素    $("span[id$=2]").html("hello world 5"); //选取属性id以2结尾的span元素    $("span[id*=an]").html("hello world 6"); //选取属性id包含an的span元素    $("span[id*=an][class$=2]").html("hello world 6"); //选取属性id包含an并且class以结尾的span元素});

子元素过滤选择器

<body>   <div class="c1">        <span>aaaaaaaa</span><span>cccccccc</span><span>dddddddd</span>   </div>   <div class="c1">        <span>aaaaaaaa</span><span>cccccccc</span><span>dddddddd</span>   </div>   <div class="c1">        <span>aaaaaaaa</span>   </div></body>
$(function () {    $("div.c1 :nth-child(1)").html("hello world 1"); //选取class等于c1的div的指定索引子元素    $("div.c1 :nth-child(even)").html("hello world 2"); //选取class等于c1的div的偶数子元素    $("div.c1 :nth-child(odd)").html("hello world 3"); //选取class等于c1的div的奇数子元素    $("div.c1 :first-child").html("hello world 4"); //选取class等于c1的div的第一个子元素    $("div.c1 :last-child").html("hello world 5"); //选取class等于c1的div的最后一个子元素    $("div.c1 :only-child").html("hello world 6"); //选取class等于c1的div只有一个子元素的子元素});

表单选择器

<body>  <form id="form1" action="#">    <input type="button" value="button1" />    <input type="text" value="text1" />    <input type="text" value="text2" />    <textarea rows="8" cols="40"></textarea><br />    <input type="checkbox" name="chk" />篮球    <input type="checkbox" name="chk" />足球    <input type="password" />    <input type="hidden" /><br />    <select multiple="multiple">        <option selected="selected">武汉</option>        <option selected="selected">黄冈</option>        <option >麻城</option>    </select>    <input id="n" type="radio" name="s"/>男    <input type="radio" name="s"/>女<br />    <input type="submit" /><input type="reset" />  </form></body>
$(function () {    //表单中的表单元素    $("#form1 :input").val("hello world 1");    //表单中的input元素    $("#form1 input").val("hello world 1");    $(":text").val("hello world 2");    $(":password").val("hello world 3");    //男的单选框被选中    $(":radio[id=n]").attr("checked", true);    $(":checkbox[name=chk]").length;    $(":submmit").val("提交");    $(":reset").val("重置");    $(":button").val("hello world 4");    $(":hidden").val("hello world 5");});

表单对象属性过滤选择器

<body>  <form id="form1" action="#">    <input type="text" disabled="disabled" value="禁用1" />    <input type="text"  value="启用1" />    <input type="text" disabled="disabled" value="禁用2" />    <input type="text"  value="启用2" />    <input type="checkbox" name="chk" value="篮球" checked="checked"/>篮球    <input type="checkbox" name="chk" value="足球" />足球    <input type="checkbox" name="chk" value="编程" checked="checked"/>编程    <input type="checkbox" name="chk" value="旅游" checked="checked"/>旅游    <select multiple="multiple">        <option selected="selected">武汉</option>        <option selected="selected">黄冈</option>        <option >麻城</option>    </select>  </form>
$(function () {    $("#form1 input:enabled").val("hello world 1"); //选取form表单中没有禁用的文本框    $("#form1 input:disabled").val("hello world 2"); //选取form表单中没有禁用的文本框    $("#form1 input:checked").attr("checked",false); //选取form表单中选的复选框    $("select option[selected]").each(function () {        alert($(this).val());    });});

使用选择器要注意的地方

<body>    <div id="div#1">aaaaaaaaaaa</div>    <div class="c[1]">bbbbbbbbb</div>    <div class="c1">        <div name="div">ccccccccc</div>        <div name="div">ddddddddd</div>        <div name="div">eeeeeeeee</div>        <div class="c1" name="div">fffffffff</div>    </div>    <div class="c1" name="div">gggggggg</div>    <div class="c1" name="div">hhhhhhhh</div></body>
$(function () {    //有时在id或是class中有一些特殊字符如 [等,需要用反斜杠进行转义    $("#div\\#1").html("hello world 1");    $(".c\\[1\\]").html("hello world 2");    //有没有空格的区别    //有空格是选取class等于c1的div里面的name等于div的div(c d e f)    $(".c1 [name=div]").html("hello world 3");    //没有空格是选取class等于c1并且name等于div的div (f g h)    $(".c1[name=div]").html("hello world 4");});

几个简单的示例

折叠效果,很常用的一个功能,在写博客插入代码时,有些就支持代码折叠。实现代码如下:

<body>   <div id="div">    <h3>jQuery简ò介é</h3>    <div id="content">        jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多)。         jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多javascript高手加入,        现在由Dave Methvin率领团队进行开发。如今,jQuery已经成为流行的javascript库,        在世界前10000个访问最多的网站中,有超过55%在使用jQuery 。    </div>   </div></body>
$(function () {    //方法1    $("#div h3").bind("click", function () {        if ($("#content").is(":visible")) {            $("#content").hide();        } else {            $("#content").show();        }    });    //方法2    $("#div h3").toggle(function () { $("#content").hide(); }, function () { $("#content").show(); });});

斑马线,这个在列表中非常常见。

<table id="tbl" cellpadding="0" cellspacing="0">    <tr>        <th>第一季度</th>        <th>第二季度</th>        <th>第三季度</th>        <th>第四季度</th>    </tr>    <tr>        <td>5444</td>        <td>3453</td>        <td>453</td>        <td>5656</td>    </tr>    <tr>        <td>5454</td>        <td>7676</td>        <td>4454</td>        <td>333</td>    </tr>    <tr>        <td>333</td>        <td>556</td>        <td>44</td>        <td>55</td>    </tr></table>
<script type="text/javascript">    $(function () {        //实现单双行以不同的颜色间隔        $("#tbl tr:odd").addClass("trOdd");        //实现点击行,改变好行的背景色        $("#tbl tr").click(function () {            $(this).addClass("trOdd").siblings().removeClass("trOdd");        });          });</script><style type="text/css">    #tbl{width:300px; border:solid 1px #666; background-color:#eee;}    #tbl tr{ line-height:25px;}    #btl tr th{ background-color:#ccc;color:#fff;}    #tbl .trOdd{ background-color:#fff;}</style>

CheckBox全选,列表中很常用的功能。

<table id="tbl" cellpadding="0" cellspacing="0">    <tr>        <th><input id="chkAll" type="checkbox" /></th>        <th>第一季度</th>        <th>第二季度</th>        <th>第三季度</th>        <th>第四季度</th>    </tr>    <tr>        <td><input name="chk" type="checkbox" /></td>        <td>5444</td>        <td>3453</td>        <td>453</td>        <td>5656</td>    </tr>    <tr>        <td><input name="chk" type="checkbox" /></td>        <td>5454</td>        <td>7676</td>        <td>4454</td>        <td>333</td>    </tr></table>
<script type="text/javascript">    $(function () {        $("#chkAll").bind("click", function () {            $("input[name='chk']").attr("checked", $(this).attr("checked") == undefined ? false : true);        });        $("input[name=chk]").each(function () {            $(this).bind("click", function () {                $("#chkAll").attr("checked", $("input[name=chk]:checked").length == $("input[name=chk]").length);            });        });        });</script><style type="text/css">    #tbl{width:300px; border:solid 1px #666; background-color:#eee;}    #tbl tr{ line-height:25px;}    #btl tr th{ background-color:#ccc;color:#fff;}    #tbl .trOdd{ background-color:#fff;}</style>

 

四 jQuery-Ajax

传统的实现方式

$(function () {    var xmlHttp = null;    $("#btn").bind("click", function () {        if (window.ActiveXObject) {            xmlHttp = new ActiveXObject("MicroSoft.XMLHTTP");        } else if (window.XMLHttpRequest) {            xmlHttp = new XMLHttpRequest();        }        xmlHttp.open("GET", "JQueryAjax.ashx?name=oec2003", true);        xmlHttp.onreadystatechange = requestCallback;        xmlHttp.send(null);    });    var requestCallback = function () {        if (xmlHttp.readyState == 4) {            if (xmlHttp.status == 200) {                $("#div").html(xmlHttp.responseText);            }        }    }});

$.load

<body>    <input type="button" id="btn" value="Ajax" /><br />    <div id="div"></div></body>
$(function () {    //加载AjaxWebForm.aspx页面的id为adiv1的部分,参数以get形式传递    $("#div").load("AjaxWebForm.aspx?name=oec2003 #div1", function () { });    //加载AjaxWebForm.aspx页面的id为div2的部分,参数以post形式传递    $("#div").load("AjaxWebForm.aspx #div2", { name1: "oec2003", age: "30" }, callBack);    function callBack(responseText, status, xmlHttpObject) {        alert(responseText);        alert(status);        alert(xmlHttpObject);    }});

$.get和$.post

$(function () {    //$.get参数以json格式收集,最终在url上进行传递    $("#btn").bind("click", function () {        $.get("JQueryAjax.ashx", { name: "oec2003", age: "30" }, callBack);    });    //data的格式可以是html xml json    function callBack(data, status) {        $("#div").html(data);    }    //$.post    $("#btn").bind("click", function () {        $.post("JQueryAjax.ashx", { name: "oec2003", age: "30" }, callBack);    });    //data的格式可以是html xml json    function callBack(data, status) {        $("#div").html(data);    }});

$.ajax

<body><form id="form1" action="#">    姓名:<input name="name" type="text" id="txtName" /><br />    年龄:<input  name="age" type="text" id="txtAge" /><br />    <input type="button" id="btn" value="Ajax" /><br /></form><div id="div"></div></body>
$(function () {    $("#btn").bind("click", function () {        $.ajax({            type: "GET",            url: "JQueryAjax.ashx",            async:true, //同步还是异步,默认为异步            dataType: "html",            //使用serialize进行数据收集,根据type类型决定传递方式            data: $("#form1").serialize(),            beforeSend: function () {                if ($("#txtName").val() != "oec2003") {                    alert("姓名必须为aoec2003");                    return false;                }            },            complete: function () {                //请求成功或失败均调用            },            success: function (data) {                $("#div").html(data);            },            error: function () {                $("#div").html("出错啦!");            },            global:true   //默认为atrue 表示是否出发Ajax全局事件        });    });});

 

五 jQuery插件

jQuery有非常丰富的插件,插件可以更高效帮助我们去完成特定的功能,下面列举的是我用到过的很常用的一些插件:

validate

http://plugins.jquery.com/validate/

form

http://www.malsup.com/jquery/form/

uploadify

http://www.uploadify.com/download/

autocomplete

http://plugins.jquery.com/ui.autocomplete/

jQuery UI

http://jqueryui.com/

jQuery EasyUI

http://www.jeasyui.com/index.php

  

完!

本文链接

相关 [jquery 知识 总结] 推荐:

jQuery知识总结

- - 博客园_iTech's Blog
转自: http://www.cnblogs.com/oec2003/archive/2013/04/13/3017731.html. 原作者:  oec2003(水杯) . 出处:     http://oec2003.cnblogs.com/ . 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则 保留追究法律责任的权利.

Jquery 入门知识

- - Web前端 - ITeye博客
    1、JQuery的优点:. 1)体积小(导入的js文件小的有50多KB,大点的一百多KB);. 2)速度快(Js和JQuery 整体的速度相比,JQuery的速度要快于js);. 3)屏蔽浏览器之间的差异(例如:js写ajax时要判断一下浏览器);. 4)运用广泛有很多插件支持(例如Tree插件);.

JQuery经典总结

- - CSDN博客Web前端推荐文章
jQuery是一个js框架(其实就是一个.js文件),它的特点是使用选择器查找要操作的节点,并且将这些节点封装成一个jQuery对象. 封装的目的是为了更好地兼容不同的浏览器之间的差异,同时也会简化代码. 选择器是jQuery借鉴css选择器的语法而创建的一种查找要操作的节点的语法格式. 比如  $('#id');.

jquery选择器总结[初步]

- - CSDN博客推荐文章
  Jquery是继prototype之后又一个优秀的Javascript框架. 它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器. jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互. jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可.

Jquery zTree演示程序Demo总结

- - CSDN博客Web前端推荐文章
最近的项目需要用到zTree树,于是想将zTree树总结一下. 前段时间一直没有时间总结,趁国庆还有这么点时间,总结一下. zTree树控件是基于Jquery的,官方提供了很好的API文档和Demo. 用户可以从如下地址下载:http://www.ztree.me/hunter/zTree.html.

分布式知识的总结(V1.0)

- - 龙浩的blog
    Web服务无法同时满足以下3个属性. Consistency(一致性),数据一致更新,所有数据变动都是同步的. Availability(可用性),每个操作都必须以可预期的响应结束. Partition tolerance(分区容错性),即使出现单个组件无法可用,操作依然可以完成.     在任何数据库设计中,一个Web应用至多只能同时支持上面的两个属性,不可能三者兼顾.

JS的event对象--知识点总结

- - CSDN博客推荐文章
Event描述:event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等. 需要注意的是:event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义. 比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义.

JavaScript性能优化小知识总结

- - 码农网
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 一直在学习javascript,也有看过《犀利开发Jquery内核详解与实践》,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解.

2010年,工作面试总结(二),知识篇

- pacinoson - Otbzi
本文着重于介绍我工作面试中涉及到的一些知识,以及我本人认为可以供大家参考的一些资料. 这本是大部头,很多人都看不完. 我本人也并没有看完,它跟了我这么多年,完全是属于常看常新的牛书. 比如,以前并不知道求K位数或者中位数有平均为O(n)复杂度的算法. 看到了别的地方的参考资料,才知道,原来《算导》上专门有一小节讲这个内容.

JavaScript开发中几个常用知识点总结

- - JavaScript - Web前端 - ITeye博客
一、三种声明函数的方式. function functionName(arg1, arg2) {alert(arg1+arg2);}2、匿名函数. var functionName1 = new Function("arg1", "arg2", "alert(arg1 + arg2)");3、直接量函数.