jquery 总结
jQuery知识总结
jQuery一直都在用,但都是在用时查查手册,并没有系统的学过,最近组内做jQuery交流,花了几天时间系统了学习了下,做了个PPT,本文是根据PPT总结而来,有些地方做了些补充。希望对jQuery初学者有些帮助。
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中解决冲突的代码,有四种方式:
//方式1 jQuery.noConflict(); //将$控制权移交出去,以前使用$的地方都改用jQuery jQuery(document).ready(function () {alert(jQuery("#span1").html()); }); window.onload = function () {$("span1").innerHTML = "oec2003"; }//方式2 var $j=jQuery.noConflict(); //定义快捷方式 $j(document).ready(function () {alert($j("#span1").html()); });window.onload = function () {$("span1").innerHTML = "oec2003"; }//方式3 jQuery.noConflict(); //在函数内部继续使用$ jQuery(function ($) {alert($("#span1").html()); }); window.onload = function () {$("span1").innerHTML = "oec2003"; }//方式4 jQuery.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 jsonfunction callBack(data, status) {$("#div").html(data);}//$.post$("#btn").bind("click", function () {$.post("JQueryAjax.ashx", { name: "oec2003", age: "30" }, callBack);});//data的格式可以是html xml jsonfunction 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/
下面链接是我10年写的一篇关于uploadify的博客,虽然现在已经跟换了很多个版本,但还是有一定的参考价值。
http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html
autocomplete
http://plugins.jquery.com/ui.autocomplete/
jQuery UI
http://jqueryui.com/
jQuery EasyUI
http://www.jeasyui.com/index.php
转载于:https://www.cnblogs.com/mysunny/p/4565603.html
jquery 总结相关推荐
- Ajax接收Java异常_java – 处理来自Servlet的Jquery AJAX响应中的异常
我的servlet代码是 try{ //something response.setStatus(201); out.print("Data successfully saved" ...
- Jquery DIV滚动至浏览器顶部后固定不动代码
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 效果例1 代码如下复制代码 <scr ...
- jquery.raty评星插件
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
- jquery autocomplete demo
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择. jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquer ...
- 在Ant-design-pro框架中引入jQuery和jQuery-ui步骤
1.安装jQuery和jQuery-ui npm i jquery s npm i jquery-ui s yarn install 2.在vue.config.js中进行配置 // webpack ...
- 火狐浏览器允许ajax,解决火狐浏览器发送jquery的ajax请求无效的问题
今天遇到这样一个问题: 页面在chrome下发送ajax的请求是没有问题的,但是在firfox下无效. 代码大致如下: //前面省略 ..... 生成成绩 查询成绩 ...... ...... fun ...
- jquery 监听的案例
jQuery 简介 jQuery 是一个 JavaScript 库. jQuery 使用 可以下载一个,也可以使用Staticfile CDN.百度.又拍云.新浪.谷歌和微软的服务器都存有 jQuer ...
- 网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
- 利用 jquery 获取某个元素下的所有图片并改变其属性
HTML代码 <div id="mochu"> <p>内容....<./p> <p><img src="xxxx.p ...
- 通过jQuery调用ASP.NET的AJAX
传统上,在ASP.NET页面中实现AJAX的方法是拖放一个ScriptManager控件,并进行一系列的设置和相关编程.但事实上,这并不是理想的解决方案.使用jQuery来调用ASP.NET后台的方法 ...
最新文章
- 第七章 Shell文本处理三剑客之sed
- [python数据分析] 简述幂率定律及绘制Power-law函数
- SAP PP常用表(重要)
- [Android] 检讨书生成器1.0
- 第12天学习Java的笔记(数组小练习,数组与方法)
- J2EE搭建Dynamic web SpringMVC工程404错误分析(一)
- python可以调用windows资源吗_如何在Windows上用Python调用WinRar?还有问题吗
- 高可用性(HA),会话复制,多VM Payara群集
- python 等值面 插值_利用numpy/scipy从三维阵列计算等值面
- creating server tcp listening socket 127.0.0.1:6379: bind No error
- python是什么意思怎么读-python怎么读(python怎么读中文)
- android学习笔记25——事件处理Handler
- 三相全控tc787触发电路_单相逆变三相交流电源怎么办?变频器的三相交
- FTP和SSH的区别
- presscad图层LIsp_presscad2010免费版
- AE、PR视频压缩导出mp4、mov格式插件:AfterCodecs1.6.1汉化破解版
- 方立勋jdbc mysql视频_java视频教程 Java自学视频整理(持续更新中...)
- 为什么Java编程语言用一种咖啡名做名字
- 【中科三方】什么是云解析DNS?云解析DNS有必要购买吗?如何购买云解析DNS?
- OpenStack——nove组件部署
热门文章
- 简述基于EDA技术的FPGA设计
- 《Ansible权威指南》一1.7 Ansible的安装部署
- 一分钟了解ArrayList和Vector的区别
- cygwin是一个在windows平台上运行的unix模拟环境,下载与安装
- 尝试为文件附加自动命名的数据库,但失败。已存在同名的数据库,或指定的文件无法打开或位于 UNC 共享目录中...
- 通过系统回顾的方法来发展循证的管理知识*。
- 如何用word帮别人改文章呢?
- 2018 blockchain innovation final round of the chain valley
- school‘s movie demonstration
- 命令前面加一个!的意思如!python