jquery.doc

1 jQuery是一个javascript函数库，报以下特性 HTML元素选取 HTML元素操作 CSS操作HtmL事件函数 javascript特效和动画 HtML dom遍历和修改Ajax utilities2 添加jQuery库，必须位于head标签中3 下载jquery在jQ 下载 jquery-1.7.2.min.js在代码中加入这个或者直接引用使用 Google 的 CDN使用 Microsoft 的 CDN使用语法jQuery 元素选择器$（this）.hide() 隐藏当前的HTML元素$（#test）.hide() 隐藏 id=test的元素$（p）.hide(); 隐藏所有的元素$（.test）.hide(); 隐藏所有class=test的元素$（p.test） 隐藏所有 class=test的段落JQuery属性选择器 $(href) 选取所有带有href属性的元素$(href=#) 选取所有带有href=#的元素$(href！=#) 选取所有带有href！=#的元素$(href$=jsp) 选取所有带有href值以jsp结尾的元素jQuerycss选择器$(p).css(background-color.red);其他的选择器$(this) 当前html元素$(ul li:first) 每个的第一个元素$(div#intro .head)id=intro 的 元素中的所有 class=head 的元素文档就绪函数$（document）.ready(function(); 这是为了防止文档在完全加载之前运行jQuery代码var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号Jquery效果通过hide（）和show() 两个函数，jQuery支持对HTML元素的隐藏与显示$(#hide).click(function()$(p).hide(););$(#show).click(function()$(p).show(););该元素有两个参数 speed ,callbackSpeed 规定显示和隐藏的速度 可以设置 Slow fast normalCallback 在hide或show函数完成之后被执行的函数名称jQuery 切换 Toggle(speed ,callback)用来切换HTML元素的可见状态JQuery滑动函数-slideDown,slideUp,slideToggle这些函数必须和css连在一起用 比如123点击Div .panelDisplay:none;$(.flip).click(function() $(.panel).slideDown(slow););JQuery Fade函数 fadeIn() fadeOut() fadeTo（）前者 淡入 后两者淡出jQuery自定义动画 $().animate(left:100px,) Callback使用方法：$(p).hide(1000,function()Alert(The paragraph is now hidden););JQuery 操作Html$().html() 相当于 调用innerHTML$(p).html(W3School);$().append(content) 想所匹配的html内部追加内容，不空行放After() 空行放到后面Before 空行放到前面$().css(name,value)$().css(properties)$().css(name)jQuery 设置尺寸$().height(value)$().width(value)JQuery操作Ajax$().load(/query.test1.txt，data,callback)导入文本$.get(url,data,callback,type)$.post(url,data,callback,type)$.getJSON(url,data,callback)$.getScript(url,callback);补漏：last 该元素的最后一个:even 该元素的偶数个：odd 该元素的奇数个Ul li:eq(index) ul 的第index个liUlli:gt(index) ul 的第index三个以后所有的li :Lt(idnex) input :not(:empty) 所有不为空的input元素$(:header) 所有标题元素-$(：animated) 所有动画元素$(:contains(W3School) 包含指定字符串的所有元素$(:hidden)所有隐藏的元素$(:text) 所有type=text的input元素$(:password) 所有type=password$(:radio) $(:checkbox) $(:submit) $(:reset)$(:button) $(:image) $(:file)$(:enabled) $(:disabled) $(:selected)$(:checked)jQuery 能做的事情：取得页面中的元素修改页面的外观改变页面的内容响应用户的页面操作为页面增加动态效果无须刷新页面即可获得信息采取的策略：利用Css的优势支持扩展 采用插件形式抽象浏览器不一致性总是面向集合将多重操作集于一行3具体实例.addClass(emphasized) 其中emphasiezd是css样式表中的 类选择器 与此相反的是 removeclass();该函数 必须满足 $(类选择器).addClass(类选择器名（即不需要前面的那个点）)4$() 能够消除使用for循环访问一组元素的需求5 $(#a li) 等价于查找ID为selected-plays的元素的子元素中所有的列表项自定义选择符就是采用上面的addClass 通过和css联合一起使用来改变显示效果 $(tr:odd).addClass(odd); 等价于$(tr).filter(odd).addClass(odd); $(tr:even).addClass(even); $(tr:contains(2).addClass(high); Dom操作Parent ()取一个普通的父元素，即最靠近的一个父元素Next()取最接近的下一个同辈元素取得包含henry的单元格，然后取得该单元格的所有同辈元素 $(td:contains(henry).siblings().addClass();取得包含henry的单元格，再取得他的父元素，然后找到该元素中包含的所有编号大于0的单元格$(td:contains(henry).parent().find(td:gt(0).addClass();取得包含Henry的单元格，再取得他的父元素，找到该元素中包含的所有单元格，然后过滤这些单元格排除包含henry的那个$(td:contains(henry).parent().find(td).not(:contains(henry).addClass();使用如下方法可以获得指定的元素 var myTag=$(th).get(0).tagName; alert(myTag);如果ID中包括了时间或冒号必须要使用转义字符比如 myID.div1 -myID.div1对于类选择器 如果一个元素还有多个类，必须都匹配才行 比如 class=myclass class=myclass,otherclass匹配第二个时必须是 $(myclass,otherclass) 如果是$myclass 则两个都匹配如果要匹配多个 类选择器，使用逗号隔开选择器直接子元素prev+next 匹配所有紧接在prev元素后的next元素Prevsibling 匹配所有紧接在prev元素后的同辈元素Html() 获得dom对象的内容$(Hello).appendTo(body);将前者添加到后者中Window.onload 和$(document).ready();区别后者在页面框架下载完毕后执行 前者必须在页面全部加载后才能完成执行数量不同：后者可以重复写多个，并且每次执行结果不同。 而前者尽管可以执行多个，但仅输出最后一个执行结果$(document).read(function()可以简写成$(function()经典例题:script type=$(function()$(.divTitle).click(function()$(this).addClass(divCurrColor).next(.divContent).css(display,block);var tDiv=$(.divTitle);var cDiv=tDiv.html();var d=$(.d);d.html(cDiv););$(#Button1).click(function() var oTxtValue=$(#Text1).val(); var oRdoValue=$(#Radio1).is(:checked)?男:女; var oChkValue=$(#Checkbox1).is(:checked)?已婚:未婚; $(#divTip).css(display,block).html(oTxtValue+oRdoValue+oChkValue);); $(#divTip).click(function() $(this).toggle(flow); ); $(.divDefault).click(function() $(this).toggleClass(divClick).html(点击后的样式); );); .divFrame width:260px; border:1px solid #666; font-size:10px; .divTitle background-color:#eee; padding:5px; .divContent padding:5px; display:none; .divTip width:244px; border:1px solid #666; padding:8px; font-size:9pt; marign-top:5px; display:none; .txtCss border:1px solid #ccc; .divBtn padding-top:5px; .divBtn .btnCss border:1px solid #535353; width:60px; .divDefault width:260px; font-size:10pt; padding:5px; .divClick width:260px; border:1px solid #666; 点击前的样式 主题 姓名: 性别:男 女 婚否: div span ,Divspan , div+span ,divspan div.siblings的区别我是这样理解的第一个是指 div中所有的span元素 （全部儿子，孙子）第二个是指div中所有的子span元素（全部儿子）第三个是指div后面的相邻的span元素（span邻居）第四个是指div后面的所有span元素（后邻，后邻儿子孙子）第五个是值div的所有(前面也算)相邻的span元素（邻居）Has(元素)：显示含有span元素的元素$(div:parent)显示憨厚子元素或文本的元素实例2 导航新建网页 6$(function()$(.clsHead).click(function() if($(.clsContent).is(:visible) $(.clsHead span img).attr(src,images/2.jpg); $(.clsContent).css(display,none); else $(.clsHead span img) .attr(src,images/0001.gif); $(.clsContent).css(display,block); );$(.clsBot a).click(function() if($(.clsBota).text()=简化) $(ul li:gt(4):not(:last).hide(); $(.clsBota).text(更多); else $(ul li:gt(4):not(:last).show().addClass(GetFocus); $(.clsBota).text(简化); );); body font-size:13px; #divFrame border:1px solid #666; width:301px; overflow:hidden; #divFrame .clsHead background-color:#eee; padding:8px; height:18px; cursor:hand; #divFrame .clsHead h3 padding:0px; margin:0px; float:left; #divFrame .clsHead span float:right; margin-top:3px; #divFrame .clsContent padding:8px; #divFrame .clsContent ul list-style-type:none; margin:0px; padding:8px; #divFrame .clsContent ul li float:left; width:95px; height:23px; line-height:23px; #divFrame .clsBot float:right; padding-top:5px; .GetFocus background-color:#eee; 图书分类 小说（1110） 文艺（230） 青春（1430） 少儿（1560） 生活（870） 社科（1460） 管理（1780） 计算机（930） 教育（3450） 工具书（980） 引进版（3230） 其他类（1450）简化 Html() text(),val()Val() 可以用在表单多选择框时获得值（multiple）；$(select).change(function() var strSel=$(select).val().join(,); $(#content).html(strSel); ) )Jquery中 其中数组 元素名：元素值代表对象创建节点元素Var $div=$(Write Less); $(body).append($div);DOM转化为JQuery对象Var cr=document.getElementById(cr);Var $cr=$(cr) 这里$cr 是为了区别dom约定写成的jQuery对象转化为domVar $cr=$(#cr);Var cr=$cr.get(0) 或则var cr=$cr0;并且dom对象只能用dom方法，jquery对象只能用JQuery方法对于单选框之类的用onchange 通过 val（）可以获得其value值，使用html可以打印出来使用val（）.join(,) 可以获得多选框的值验证表单是否为空可以通过使用val（）=来判断使用$().append().show();可以实现不停的复制功能替换节点：$(选择器）.replaceWith(content);$(content).replaceAll(选择器）；复选框全选和图片放大：$(function()$(table tr:even).css(background-color,#eee);$(#chkAll).click(function()if(this.checked)$(table tr td inputtype=checkbox).attr(checked,true);else$(table tr td inputtype=checkbox).attr(checked,false);); $(#btnDel).click(function()var intL=$(table tr td input:checked:not(#chkAll).length;if(intL!=0)$(table tr td inputtype=checkbox:not(#chkAll).each(function(index)if(this.checked)$(table trid=+this.value+).remove(););var x=5;var y=15;$(table tr td img).mousemove(function(e)$(#imgTip).attr(src,this.src).css(top:(e.pageY+y)+px,left:(e.pageX+x)+px)Styles.cssbodyfont-size:12px;tablewidth:360px;border-collapse:collapse;table tr th,tdborder:1px solid #666;text-align: center;table tr td imgborder:1px solid #ccc;padding:3px;width:42px;height:60px;cursor: hand;table tr td spanfloat:left;padding-left:12px;table tr thbackground-color: #ccc;height:32px;.clsImgposition: absolute;border:1px solid #ccc;ListAndManage.html:Insert title here 选项 编号 封面 购书人 性别 购书价1001李小明男35.60元1002刘明明男37.80元1003张小星女45.60元1004李小明男42.60元 全选 事件被触发一般分为两个阶段：一个是捕获，另外一个是冒泡冒泡事件就是点击内部事件，然后触发了它外面的事件，形成一个向外扩散的状态,解决冒泡问题：Function（event）event.stopPropagation();2 还可以通过 return false;绑定bind可以有两种方式：Bind(click,data(可选)，function();Bind(click:function(),focus:function();切换事件：一是hover（）另一种是方法toggle()区别：后者切换的顺序是以前后顺序依次出现JQuery转dom对象：JQuery包装集市一个集合，可以通过索引器访问其中的某一个元素Var domObject=$(#testDiv)0;$(#testDiv).each(function()Alert(this);$(this).html(););$(#testDiv)=jQuery(#testDiv);$(element).length(size():获得某个对象在html上的数量$(element).get()获取某个元素在html页面上的集合以数组方式构建$(Element).get(index);获取数组中第index个的值$(element).get().reverse()将获得的数组进行反向$(element).index($(element);搜索index中所获得的元素在匹配对象元素中的索引值jQuery插件机制：$.extend( Max:function(num1,num2)return num1num2？Num1:num2;Min:function(num1,num2)return num1p 父子关系Div+p 后面紧跟着前面Divp div后面的所有跟屁虫$(element:contains(text)匹配元素对象中的文本是否包含某个字母或字符串$(element:empty) 匹配对象元素不包含文本或字元素$(element:parent）与上者完全相反$(element:has(selector) 匹配还有某个元素是否包含某个元素$(:input)能匹配的类型有 input button select textarea$(:checkbox).click(function() var str=;$(name=xuechecked).each(function()str+=$(this).val()+t;)alert(str); )$(button).click(function()X=$(li).toArray();For(i=0;ix.length;i+)Alert(xi.innerHTML);查找遍历，获取，修改$(body).find(p).each(function(i)$(this).html($(this).html()+ibm+i);)$(document).ready(function() $(#faq).find(dd).hide().end().find(dt).click(function() var answer = $(this).next(); if (answer.is(:visible) answer.slideUp(); else answer.slideDown(); ););使用 $(form1.elements)可以获得所有表单元素使用get()和eq()区别前者得到的是dom对象，后者得到的是jQuery对象使用index获得的是索引After()用于在后面添加对应的事件比如 $(a).after($(test); 相当于在a 后面添加test如果前面存在test 则删除前面的-类似有：before而append相当于在元素内部添加比如$(a).append(#pp) 那么pp会添加在这里中类似有 appendTo();Empty() 用于清空其所有的子节点Prepend（）相当于在内部最前面插入Remove()移除匹配对象Warp（html）将匹配对象包含在给出的html里add(expr)在原对象的基础上在附加符合指定表达式的jquer