jQuery Study.docx
《jQuery Study.docx》由会员分享，可在线阅读，更多相关《jQuery Study.docx（24页珍藏版）》请在冰豆网上搜索。
jQueryStudy
jQuery入门汇总
jQuery入门[1]－构造函数
jQuery优点
◦体积小（v1.2.315kb）
◦丰富的DOM选择器（CSS1-3+XPath）◦跨浏览器（IE6,FF,Safari,Opera）
◦链式代码
◦强大的事件、样式支持
◦强大的AJAX功能
◦易于扩展，插件丰富
jQuery的构造函数接收四种类型的参数：
jQuery（expression,context）
jQuery（html）
jQuery（elements）
jQuery（fn）
第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。
DEMO:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
jQuerybasictitle></p><p><styletype="text/css"></p><p>.selected</p><p>{</p><p>background-color:</p><p>Yellow;</p><p>}</p><p>style></p><p><scriptsrc="../scripts/jquery-1.2.3.intellisense.js"type="text/javascript">script></p><p>head></p><p><body></p><p><h3>jQuery构造函数h3></p><p><ul></p><p><li>jQuery（expression,context）li></p><p><li>jQuery（html）li></p><p><li>jQuery（elements）li></p><p><li>jQuery（fn）li></p><p>ul></p><p><scripttype="text/javascript"></p><p>script></p><p>body></p><p>html></p><p>将以下jQuery代码加入文末的脚本块中：</p><p>jQuery（"ul>li:</p><p>first"）.addClass（"selected"）;</p><p>页面运行效果如下：</p><p>其中jQuery（）可替换为快捷方式$（），如果$被其它对象占用，可使用jQuery.noConflict（）函数取消快捷方式。</p><p>"ul>li:</p><p>first"中ul>li表示所有位于ul下的li元素（为CSS表达式，XPath方式可用ul/li），:</p><p>first表示其中的第一个。</p><p>addClass（）为jQuery对象用来添加CSS样式类的函数，相反的函数为removeClass（）。</p><p>再加入以下代码：</p><p>$（'ul'）.append（$（'</p><p>newitem'））;</p><p>运行效果如下：</p><p>其中$（'</p><p>newitem</p><p>'）将其中的字符串转换为DOM对象，然后通过append（）函数加入ul对象的最后。</p><p>接下来：</p><p>$（document）.ready（function（）{</p><p>$（'ul'）.css（'color','red'）;</p><p>}）;</p><p>则效果如：</p><p>jQuery构造函数中还可以真接传入DOM对象，如document，或jQuery对象（当然就没什么意义）。</p><p>ready（）函数为document添加事件处理函数，将ul的颜色设为红色。</p><p>$（document）.ready（）由于应用场景众多，所以可以直接用$（fn）来代替，fn表示处理函数。</p><p>（ready处理函数貌似在文档内容载入完成后执行，无需等待相关其它图片等资源载入完成，所以比load事件要更早执行，对于这点，没有具体证实）</p><p>$（function（）{</p><p>alert（'welcometojQuery'）;</p><p>}）;</p><p>以上代码的效果是页面一载入，就弹出一个对话框。</p><p>jQuery1.2选择器</p><p>jQuery1.2选择器</p><p>以下的文档根据官网1.2选择器汉化，并做相应的调整及加入了部份示例。</p><p>由于实际使用中选择器在IE和非IE下会有不同的效果，请参照红色的字样。</p><p>如有错误请及时联系我。</p><p>绯雨汉化：</p><p>基本选择器</p><p>#myid</p><p>返回:</p><p>对象></p><p>匹配一个id为myid的元素。</p><p>element</p><p>返回:</p><p>对象>数组</p><p>匹配所有的element元素</p><p>.myclass</p><p>返回:</p><p>对象>数组</p><p>匹配所有class为myclass的元素</p><p>*</p><p>返回:</p><p>对象>数组</p><p>匹配所有元素。</p><p>该选择器会选择文档中所有的元素，包括html，head，body</p><p>selector1,selector2,selectorN</p><p>返回:</p><p>对象>数组</p><p>匹配所有满足selector1或selector2或selectorN的元素</p><p>层次选择</p><p>elementParentelementChild</p><p>返回:</p><p>对象>数组</p><p>匹配elementParent下的所有子元素elementChild。</p><p>例如：</p><p>$（"divp"）选择所有div下的p元素</p><p>elementParent>elementChild</p><p>返回:</p><p>对象>数组</p><p>匹配elementParent下的子元素elementChild。</p><p>例如：</p><p>$（"div>p"）选择所有上级元素为div的p元素</p><p>prev+next</p><p>返回:</p><p>对象>数组</p><p>匹配prev同级之后紧邻的元素next。</p><p>例如：</p><p>$（"h1+div"）选择所有div同级之前为h1的元素（）</p><p>prev~siblings</p><p>返回:</p><p>对象>数组</p><p>匹配prev同级之后的元素siblings。</p><p>例如：</p><p>$（"h1~div"）可以匹配（）</p><p>基本滤镜</p><p>:</p><p>first</p><p>返回:</p><p>对象></p><p>匹配第一个元素</p><p>:</p><p>last</p><p>返回:</p><p>对象></p><p>匹配最后一个元素</p><p>:</p><p>not（selector）</p><p>返回:</p><p>对象>数组</p><p>匹配不满足selector的元素</p><p>:</p><p>has（selector）</p><p>返回:</p><p>对象>数组</p><p>匹配包含满足selector的元素。</p><p>此选择器为1.2新增</p><p>:</p><p>even</p><p>返回:</p><p>对象>数组</p><p>从匹配的元素集中取序数为偶数的元素。</p><p>:</p><p>odd</p><p>返回:</p><p>对象>数组</p><p>从匹配的元素集中取序数为奇数的元素。</p><p>:</p><p>eq（index）</p><p>返回:</p><p>对象>数组</p><p>从匹配的元素集中取第index个元素</p><p>:</p><p>gt（index）</p><p>返回:</p><p>对象>数组</p><p>从匹配的元素中取序数大于index的元素</p><p>:</p><p>lt（index）</p><p>返回:</p><p>对象>数组</p><p>从匹配的元素中取序数小于index的元素</p><p>:</p><p>header</p><p>返回:</p><p>对象>数组</p><p>匹配所有的标题元素，例如h1，h2，h3……hN。</p><p>此选择器为1.2新增</p><p>:</p><p>animated</p><p>返回:</p><p>对象>数组</p><p>匹配正在执行动画的元素。</p><p>此选择器为1.2新增</p><p>:</p><p>empty</p><p>返回:</p><p>对象>数组</p><p>匹配所有没有子元素（包括文本内容）的元素</p><p>:</p><p>parent</p><p>返回:</p><p>对象>数组</p><p>匹配包含子元素（包含文本内容）的所有元素</p><p>:</p><p>contains（text）</p><p>返回:</p><p>对象>数组</p><p>匹配所有含有text的元素</p><p>:</p><p>hidden</p><p>返回:</p><p>对象>数组</p><p>匹配所有隐藏的元素，包含属性type值为hidden的元素</p><p>:</p><p>visible</p><p>返回:</p><p>对象>数组</p><p>匹配所有非隐藏的元素</p><p>子元素滤镜</p><p>E:</p><p>nth-child（index/even/odd/equation）</p><p>返回:</p><p>对象>数组</p><p>匹配所有E在其父元素下满足（index/even/odd/equation）条件的集合。</p><p>注：</p><p>下标从1开始</p><p>E:</p><p>first-child</p><p>返回:</p><p>对象>数组</p><p>匹配所有E在其父元素下是第一个子元素的集合。</p><p>例如：</p><p>HTML（"），使用$（"p:</p><p>first-child"），选取：</p><p>E:</p><p>last-child</p><p>返回:</p><p>对象>数组</p><p>匹配所有E在其父元素下是最后一个子元素的集合。</p><p>例如：</p><p>同上的HTML，使用$（"p:</p><p>last-child"），选取：</p><p>E:</p><p>only-child</p><p>返回:</p><p>对象>数组</p><p>匹配所有E是其父元素的唯一子元素的集合。</p><p>例如：</p><p>同上的HTML，使用$（"p:</p><p>only-child"），选取：</p><p>表单滤镜</p><p>:</p><p>input</p><p>返回:</p><p>对象>数组</p><p>匹配所有的input、textarea、select、button</p><p>:</p><p>text</p><p>返回:</p><p>对象>数组</p><p>匹配文本域。</p><p>注：</p><p>在IE浏览器下，选择的对象是所有type属性为text的元素，在非IE浏览器下，选择的对象是input元素type属性为text的元素</p><p>:</p><p>password</p><p>返回:</p><p>对象>数组</p><p>匹配密码域。</p><p>注：</p><p>在IE浏览器下，选择的对象是所有type属性为password的元素，在非IE浏览器下，选择的对象是input元素type属性为password的元素</p><p>:</p><p>radio</p><p>返回:</p><p>对象>数组</p><p>匹配单选按钮。</p><p>注：</p><p>在IE浏览器下，选择的对象是所有type属性为radio的元素，在非IE浏览器下，选择的对象是input元素type属性为radio的元素</p><p>:</p><p>checkbox</p><p>返回:</p><p>对象>数组</p><p>匹配复选框。</p><p>注：</p><p>在IE浏览器下，选择的对象是所有type属性为checkbox的元素，在非IE浏览器下，选择的对象是input元素type属性为checkbox的元素</p><p>:</p><p>submit</p><p>返回:</p><p>对象>数组</p><p>匹配提交按钮。</p><p>注：</p><p>在IE浏览器下，选择的对象是所有type属性为submit的元素，在非IE浏览器下，选择的对象是input元素type属性为submit的元素和button元素type属性为空或为submit的元素</p><p>:</p><p>image</p><p>返回:</p><p>对象>数组</p><p>匹配图像域。</p><p>注：</p><p>在IE浏览器下，选择的对象是所有type属性为image的元素，在非IE浏览器下，选择的对象是input元素type属性为image的元素</p><p>:</p><p>reset</p><p>返回:</p><p>对象>数组</p><p>匹配重置按钮。</p><p>注：</p><p>在IE浏览器下，选择的对象是所有type属性为reset的元素，在非IE浏览器下，选择的对象是input或button元素type属性为reset的元素</p><p>:</p><p>button</p><p>返回:</p><p>对象>数组</p><p>匹配按钮。</p><p>注：</p><p>在IE浏览器下，选择的对象是所有type属性为button的元素和元素名为button的元素，在非IE浏览器下，选择的对象是input元素type属性为button的元素和元素名为button的元素</p><p>:</p><p>file</p><p>返回:</p><p>对象>数组</p><p>匹配文件域。</p><p>注：</p><p>在IE浏览器下，选择的对象是所有type属性为file的元素，在非IE浏览器下，选择的对象是input元素type属性为file的元素</p><p>:</p><p>enabled</p><p>返回:</p><p>对象>数组</p><p>匹配所有可用的元素。</p><p>注：</p><p>即:</p><p>not（:</p><p>disabled），参考:</p><p>disabled的注释</p><p>:</p><p>disabled</p><p>返回:</p><p>对象>数组</p><p>匹配所有禁用的元素。</p><p>注：</p><p>在非IE浏览器下，选择的对象是禁用的表单元素</p><p>:</p><p>checked</p><p>返回:</p><p>对象>数组</p><p>匹配所有被选中的表单。</p><p>注：</p><p>在IE浏览器下，选择的对象是含有checked属性的所有元素</p><p>:</p><p>selected</p><p>返回:</p><p>对象>数组</p><p>匹配所有选择的表单。</p><p>注：</p><p>在IE浏览器下，选择的对象是含有selected属性的所有元素</p><p>属性滤镜</p><p>[attribute]</p><p>返回:</p><p>对象>数组</p><p>匹配拥有attribute属性的元素</p><p>[attribute=value]</p><p>返回:</p><p>对象>数组</p><p>匹配属性attribute为value的元素</p><p>[attribute!</p><p>=value]</p><p>返回:</p><p>对象>数组</p><p>匹配属性attribute不为value的元素</p><p>[attribute^=value]</p><p>返回:</p><p>对象>数组</p><p>匹配属性attribute的值以value开始的元素</p><p>[attribute$=value]</p><p>返回:</p><p>对象>数组</p><p>匹配属性attribute的值以value结尾的元素</p><p>[attribute*=value]</p><p>返回:</p><p>对象>数组</p><p>匹配属性attribute的值包含value的元素</p><p>[selector1][selector2][selectorN]</p><p>返回:</p><p>对象>数组</p><p>匹配满足属性选择器selector1、selector2、selectorN的元素</p><p>热榜</p><p>这个热榜展示了最常用选择器的排名，数据是根据使用jQuery的著名网站分析得来的。</p><p>热榜中的选择器已被归类（如，'divspan'和'ulli'都是'tagtag'形式）。</p><p>红色部分表示与W3C规范不兼容。</p><p>%Used一栏表示选择器使用百分比（#ofUses一栏表示选择器使用次数）。</p><p>只用过一次的选择器没在热榜中罗列。</p><p>Selector</p><p>%Used</p><p>#ofUses</p><p>#id</p><p>51.290%</p><p>1431</p><p>.class</p><p>13.082%</p><p>365</p><p>tag</p><p>6.416%</p><p>179</p><p>tag.class</p><p>3.978%</p><p>111</p><p>#idtag</p><p>2.151%</p><p>60</p><p>tag#id</p><p>1.935%</p><p>54</p><p>#id:</p><p>visible</p><p>1.577%</p><p>44</p><p>#id.class</p><p>1.434%</p><p>40</p><p>.class.class</p><p>1.183%</p><p>33</p><p>*</p><p>0.968%</p><p>27</p><p>#idtag.class</p><p>0.932%</p><p>26</p><p>#id:</p><p>hidden</p><p>0.789%</p><p>22</p><p>tag[name=value]</p><p>0.645%</p><p>18</p><p>.classtag</p><p>0.573%</p><p>16</p><p>[name=value]</p><p>0.538%</p><p>15</p><p>tagtag</p><p>0.502%</p><p>14</p><p>#id#id</p><p>0.430%</p><p>12</p><p>#idtagtag</p><p>0.358%</p><p>10</p><p>tag[name$=value]</p><p>0.323%</p><p>9</p><p>#id:</p><p>checkbox</p><p>0.323%</p><p>9</p><p>#id#id:</p><p>selected</p><p>0.287%</p><p>8</p><p>.classtag.class</p><p>0.287%</p><p>8</p><p>tag#id>tag</p><p>0.287%</p><p>8</p><p>tag,tag</p><p>0.251%</p><p>7</p><p>tag.classtag</p><p>0.251%</p><p>7</p><p>tag.class</p><p>0.215%</p><p>6</p><p>:</p><p>radio</p><p>0.215%</p><p>6</p><p>#id,#id,#id</p><p>0.215%</p><p>6</p><p>#id.classtag</p><p>0.215%</p><p>6</p><p>:</p><p>text</p><p>0.215%</p><p>6</p><p>tag,tag,tag</p><p>0.215%</p><p>6</p><p>.class.class.class</p><p>0.215%</p><p>6</p><p>#idtag[name=value]</p><p>0.179%</p><p>5</p><p>:</p><p>checkbox</p><p>0.179%</p><p>5</p><p>tag[name*=value]</p><p>0.179%</p><p>5</p><p>#id,#id</p><p>0.179%</p><p>5</p><p>tag.classtag.classtag</p><p>0.143%</p><p>4</p><p>tag.class.class</p><p>0.143%</p><p>4</p><p>tag:</p><p>selected</p><p>0.143%</p><p>4</p><p>.class.class.classtag</p><p>0.143%</p><p>4</p><p>.class.class</p><p>0.143%</p><p>4</p><p>tag:</p><p>file</p><p>0.143%</p><p>4</p><p>tag,tag[name=value]</p><p>0.143%</p><p>4</p><p>#id,tag[name$=value]</p><p>0.143%</p><p>4</p><p>tag[name!</p><p>=value]</p><p>0.143%</p><p>4</p><p>.class.classtag+.class</p><p>0.108%</p><p>3</p><p>.class.classtag:</p><p>gt</p><p>（2）</p><p>0.108%</p><p>3</p><p>tag:</p><p>submit,tag:</p><p>image,tag:</p><p>submit</p><p>0.108%</p><p>3</p><p>tag.classtag.classtag.classtag.classtag.classtag.class</p><p>0.108%</p><p>3</p><p>#idtagtag.classtag.classtag</p><p>0.108%</p><p>3</p><p>:</p><p>input</p><p>0.108%</p><p>3</p><p>tag.classtag.class</p><p>0.108%</p><p>3</p><p>.class.classtag:</p><p>has（tag[name^=value]）</p><p>0.108%</p><p>3</p><p>#idtag.classtag</p><p>0.108%</p><p>3</p><p>tag:</p><p>eq（0）</p><p>0.108%</p><p>3</p><p>#id:</p><p>input</p><p>0.108%</p><p>3</p><p>tag#idtag#idtag</p><p>0.108%</p><p>3</p><p>.class,.class</p><p>0.108%</p><p>3</p><p>tag:</p><p>eq</p><p>（1）</p><p>0.108%</p><p>3</p><p>tag#idtag</p><p>0.108%</p><p>3</p><p>.classtag#id</p><p>0.072%</p><p>2</p><p>#idtag:</p><p>first</p><p>0.072%</p><p>2</p><p>#idtagtag[name!</p><p>=value]</p><p>0.072%</p><p>2</p><p>.class#idtagtag</p><p>0.072%</p><p>2</p><p>tag#idtag.class</p><p>0.072%</p><p>2</p><p>tag:</p><p>filled</p><p>0.072%</p><p>2</p><p>tag:</p><p>first</p><p>0.072%</p><p>2</p><p>.classtagtag.class</p><p>0.072%</p><p>2</p><p>#idtag.classtagtag.class</p><p>0.072%</p><p>2</p><p>tag.classtag.classtag.class</p><p>0.072%</p><p>2</p><p>#id#id#idtag.class</p><p>0.072%</p><p>2</p><p>tag[name$=value],#id</p><p>0.072%</p><p>2</p><p>tagtagtag</p><p>0.072%</p><p>2</p><p>:</p><p>submit,tag:</p><p>image</p><p>0.072%</p><p>2</p><p>.class.classtag</p><p>0.072%</p><p>2</p><p>[name=value]:</p><p>first</p><p>0.072%</p><p>2</p><p>.class.class,#id</p><p>0.072%</p><p>2</p><p>#id.classtag.class</p><p>0.072%</p><p>2</p><p>.class#id.class</p><p>0.072%</p><p>2</p><p>#id#idtagtag</p><p>0.072%</p><p>2</p><p>tag[name]</p><p>0.072%</p><p>2</p><p>tag,tag,tag,tag</p><p>0.072%</p><p>2</p><p>tag#idtag#idtag.class</p><p>0.072%</p><p>2</p><p>tag:</p><p>unchecked</p><p>0.072%</p><p>2</p><p>#id.class.class</p><p>0.072%</p><p>2</p><p>#idtag.classtag>tag</p><p>0.072%</p><p>2</p><p>.classtagtagtag</p><p>0.072%</p><p>2</p><p>tag.class:</p><p>first</p><p>0.072%</p><p>2</p><p>.classtag.classtag</p><p>0.072%</p><p>2</p><p>tag#idtag.class:</p><p>first</p><p>0.072%</p><p>2</p><p>#idtag.classtag.classtag</p><p>0.072%</p><p>2</p><p>.classtagtag</p><p>0.072%</p><p>2</p><p>#id.classtagtag</p><p>0.072%</p><p>2</p><p>#idtagtag#id</p><p>0.072%</p><p>2</p><p>tag.class>tag</p><p>0.072%</p><p>2</p><p>#id.class*</p><p>0.072%</p><p>2</p><p>:</p><p>input:</p><p>visible</p><p>0.072%</p><p>2</p><p>#id.class.class</p><p>0.072%</p><p>2</p><p>#id>tag>tag>tag>tag>tag</p><p>0.072%</p><p>2</p><p>#idtag.classtagtag:</p><p>gt（0）</p><p>0.072%</p><p>2</p><p>.class,.class,.class</p><p>0.072%</p><p>2</p><p>#id#id*</p><p>0.072%</p><p>2</p><p>#id>*:</p><p>not（#id）</p><p>0.072%</p><p>2</p><p>#idtag[name^=value]</p><p>0.072%</p><p>2</p><p>.classtag.class</p><p>0.072%</p><p>2</p><p>tag:</p><p>blank</p><p>0.072%</p><p>2</p><p>jQuery入门[2]－选择器</p><p>jQuery之所以令人爱不释手，在于其强大的选择器表达式令DOM操作优雅而艺术。</p><p>jQuery的选择符支持id,tagName,css1-3expressions,XPath，参见：</p><p>DEMO:</p><p>DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:</p><p>//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><htmlxmlns="http:</p><p>//www.w3.org/1999/xhtml"></p><p><head></p><p><title>Selectortitle></p><p><scriptsrc="../scripts/jquery-1.2.3.intellisense.js"type="text/javascript">script></p><p>head></p><p><body></p><p><inputvalue="1"/>+</p><p><inputvalue="2"/></p><p><inputtype="button"value="="/></p><p><label>label></p><p><scripttype="text/javascript"></p><p>$（"input[type='button']"）.click（function（）{</p><p>vari=0;</p><p>$（"input[type='text']"）.each（function（）{</p><p>i+=parseInt（$（this）.val（））;</p><p>}）;</p><p>$（'label'）.text（i）;</p><p>}）;</p><p>$（'input:</p><p>lt</p><p>（2）'）</p><p>.add（'label'）</p><p>.css（'border','none'）</p><p>.css（'borderBottom','solid1pxnavy'）</p><p>.css（{'width':</p><p>'30px'}）;</p><p>script></p><p>body></p><p>html></p><p>运行效果如下：</p><p>代码分解：</p><p>$（"input[type='button']"）用于找到type属性为button的input元素（此为CSS表达式，IE7才开始支持，所以在IE6中通常用jQuery的这种表达式代替CSS代码设置样式）。</p><p>click（）函数为button添加click事件处理函数。</p><p>在button_click时，$（"input[type='text']"）找出所有输入框，each（）函数遍历找出来的数组中的对象的值，相加后设到label中。</p><p>$（'input:</p><p>lt</p><p>（2）'）</p><p>.add（'label'）</p><p>两行代码意为：</p><p>所有input中的前面两个（lt表示序号小于）再加上label对象合并成一个jQuery对象。</p><p>.css（'border','none'）</p><p>.css（'borderBottom','solid1pxnavy'）</p><p>.css（{'width':</p><p>'30px'}）;</p><p>以上三行代码都是针对之前的jQuery对象设置CSS样式，如果一次需要设置多个CSS值，可用另一种形式，如：</p><p>.css（{'border':</p><p>'none','borderBottom':</p><p>'soli</p>
</div>
<div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;"><span class="btn-readmore" style="background-color:transparent;"><em style=" font-style:normal">展开</em>阅读全文<i></i></span></div>
<script>
function showmore()
{
$(".readmore").hide();
$(".detail-article").css({
"height":"auto",
"overflow": "hidden"
});
}
$(document).ready(function() {
var dh = $(".detail-article").height();
if(dh >100)
{
$(".detail-article").css({
"height":"100px",
"overflow": "hidden"
});
}
else
{
$(".readmore").hide();
}
});
</script>
</div>
<script>
var defaultShowPage = parseInt("5");
var id = "29088412";
var total_page = "24";
var mfull = false;
var mshow = false;
function DownLoad() {
window.location.href='https://m.bdocx.com/down/29088412.html';
}
function relate() {
var reltop = $('#relate').offset().top-50;
$("html,body").animate({ scrollTop: reltop }, 500);
}
</script>
<script> var pre = "https://file1.bdocx.com/fileroot1/2023-7/17/fd644a11-9c30-46d7-81bd-99b532c11ba0/fd644a11-9c30-46d7-81bd-99b532c11ba0";
var freepage = parseInt('20');
var total_c = parseInt('24');
var start = defaultShowPage;
var adcount = 0;
var adindex = 0;
var adType_list = ";0;1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;";
var end = start;
function ShowSvg() {
end = start + defaultShowPage;
if (end > freepage) end = freepage;
for (var i = start; i < end; i++) {
var imgurl = pre + (i + 1) + '.gif';
var html = "<img src='" + imgurl + "' onerror=\"this.src='/images/s.gif'\" alt=\"jQuery Study.docx_第" + (i + 1) + "页\" width='100%'/>";
$("#page").append("<div class='page'>" + html + "</div>");
$("#page").append("<div class='pageSize'>第" + (i + 1) + "页 / 共" + total_c + "页</div>");
if(adcount > 0 && adType_list.indexOf(";"+(i+1)+";")>-1)
{
if(adindex > (adcount-1)) adindex = 0;
$("#page").append("<div class='pagead' id='addiv"+(i + 1)+"'></div>");
document.getElementById("addiv"+(i + 1)+"").innerHTML =document.getElementById("adpre" + adindex).outerHTML;
adindex += 1;
}
}
start = end;
if (start > (freepage - 1)) {
if (start < total_c)
{
$("#pageMore").removeClass("btnmore");
$("#pageMore").html("亲，该文档总共" + total_c + "页，到这儿已超出免费预览范围，如果喜欢就下载吧！");
}
else
{
$("#pageMore").removeClass("btnmore");
$("#pageMore").html("亲，该文档总共" + total_c + "页全部预览完了，如果喜欢就下载吧！");
}
}
}
//$(document).ready(function () {
// ShowSvg();
//});
</script>
<div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873114.html" title="电梯、自动扶梯安全乘用常识.docx">电梯、自动扶梯安全乘用常识.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873102.html" title="餐饮管理：凉菜间要求规范.docx">餐饮管理：凉菜间要求规范.docx</a>
</li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872867.html" title="输血前评估与输血后效果评价制度.doc">输血前评估与输血后效果评价制度.doc</a>
</li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872860.html" title="2024年十佳少年颁奖主持词范文(三篇).doc">2024年十佳少年颁奖主持词范文(三篇).doc</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872493.html" title="药学专业知识培训课件.pptx">药学专业知识培训课件.pptx</a>
</li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872416.html" title="XX县人民医院重点学科申报表.doc">XX县人民医院重点学科申报表.doc</a>
</li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872401.html" title="年产200吨原料药牛磺酸的合成工段的车间工艺设计.doc">年产200吨原料药牛磺酸的合成工段的车间工艺设计.doc</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872215.html" title="《电子商务法律法规》项目1-电子商务法律法规认知.pptx">《电子商务法律法规》项目1-电子商务法律法规认知.pptx</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872051.html" title="创意简约流体油漆风毕业论文答辩毕业论文开题报告学术报告ppt模板.pptx">创意简约流体油漆风毕业论文答辩毕业论文开题报告学术报告ppt模板.pptx</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30871931.html" title="建设绿色智慧的数字生态文明PPT以数字化促进经济社会发展全面绿色转型PPT课件（带内容）.pptx">建设绿色智慧的数字生态文明PPT以数字化促进经济社会发展全面绿色转型PPT课件（带内容）.pptx</a>
</li>
</ul>
</div>
</div>
<div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/8278404.html" target="_parent" title="浙江省xx项目建设实施方案.docx">浙江省xx项目建设实施方案.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/8278405.html" target="_parent" title="最新施工员试题精选刷题 答案aad.docx">最新施工员试题精选刷题 答案aad.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/8278406.html" target="_parent" title="南方cass三角网法和方格网法计算土方量教程.docx">南方cass三角网法和方格网法计算土方量教程.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/8278407.html" target="_parent" title="Ypzfma小学数学教材教法考试复习资料.docx">Ypzfma小学数学教材教法考试复习资料.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/8278408.html" target="_parent" title="结构工程总说明.docx">结构工程总说明.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/8278409.html" target="_parent" title="控制系统数字仿真实验内容共4次实验.docx">控制系统数字仿真实验内容共4次实验.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/8278410.html" target="_parent" title="经典个人简历.docx">经典个人简历.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/8278411.html" target="_parent" title="图解中国古建筑3墙面教学内容.docx">图解中国古建筑3墙面教学内容.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/8278412.html" target="_parent" title="明开挖铺设管道工程.docx">明开挖铺设管道工程.docx</a></li>
</ul>
</div>
</div>
<div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;">
相关搜索</div>
<div class="widget-box pt0" style="border: none; padding:0px 5px;">
<ul class="taglist--inline multi">
<li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=jQuery">jQuery</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=Study">Study</a></li> </ul>
</div>
<br />
<div >
当前位置：<a target="_parent" href="https://m.bdocx.com/">首页</a> >
<a href="https://m.bdocx.com/booklist-00008.html">PPT模板</a><span> > </span><a href="https://m.bdocx.com/booklist-0000800011.html">动态背景</a>
</div>
<br />
<div class="cssnone">
<iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=hxmhwQA6nOnK4ur6UQ%2frJg%3d%3d&parto=Zdqk0GpPhhjxh%2fHLlYqBXnV2TWwTJpYADbgapDiFp%2f4%2bWc0n%2bAAvf%2b7twXhEC%2fACJsKUOorbH1maCq57bok1lrKbyTR6aI6nxygfZAeIXTl4%2fafM9ptZxFuohbRlFiV71bi85AkOdgMIR0hAfFmbyNJl3iU2LRfoCqOhVyyxJRV71aYilps57cNeDQ1YfFDautFOCnl8nTLnMhvrR4GuFGo%2fVZuFEgr1" frameborder="0" style="width: 0px; height: 0px">
</iframe>
</div>
<span id="LabelScript"></span>
<script src="https://mstatic.bdocx.com/JS/bootstrap-collapse.js"></script>
</form>
<div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">
<div class="siteInner">
<p style="text-align: center;">copyright@ 2008-2022 冰豆网网站版权所有</p><p style="text-align: center;">经营许可证编号:<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备2022015515号-1</a></p><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?2e77bd3f6fe91b0e21d3f22267249ee3";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script><script>(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?81476e42bf626128cf29544ee216a8ed7deb9487dce7ed62313212129c4244a219d1c501ebd3301f5e2290626f5b53d078c8250527fa0dfd9783a026ff3cf719";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)</script>
</div>
</div>
<div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; ">
<div class="trlogoside" id="navlogo" style="display: none;">
<a href="https://m.bdocx.com/" title="冰豆网"><img src="https://www.bdocx.com/images/logo_bd.png" alt="冰豆网"></a>
<div class="trnavclose" id="navclose">
<span></span>
</div>
</div>
<div class="navcontainer">
<div class="row">
<ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;">
<li><a target="_parent"href="https://m.bdocx.com/login.aspx">登录</a></li>
<li><a target="_parent"href="https://m.bdocx.com/">首页 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/booklist-0.html">资源分类 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/UserManage/Recharge.aspx?f=0"><img src="https://m.bdocx.com/images/s.gif" alt="new" class="hottip1">升级会员 <img src="https://www.bdocx.com/FileUpload/Images/48520fea-bc98-41ae-b183-84689c7075c9.gif" alt="new" class="hottip"></a></li>
<li><a target="_parent"href="https://m.bdocx.com/newslist.html">通知公告 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/h-0.html">帮助中心 </a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function stopPropagation(e) {
var ev = e || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}
else if (window.event) {
window.event.cancelBubble = true;//兼容IE
}
}
$("#navmore").click(function (e) {
$("#navcontent").show();
$("#navlogo").show();
stopPropagation(e);
var navcontentwidth = $("#navcontent").width();
$('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' });
$("#navcontent").show().animate({ "right": 0 }, 300);
});
$(document).bind('click', function () {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
$("#navcontent").click(function (e) {
stopPropagation(e);
});
$("#navclose").click(function (e) {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
</script>
<script>
function BaseShare(title, desc, imgUrl) {
var link = "https://m.bdocx.com/doc/29088412.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1730892748', // 必填，生成签名的时间戳
nonceStr: 'F9028FAEC74BE6EC9B852B0A542E2F39', // 必填，生成签名的随机串
signature: 'f49ec4b657d49ed31553ee2a46789aa623043402',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
function BaseShare(title, desc, imgUrl, link) {
if (link=="")
link = "https://m.bdocx.com/doc/29088412.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1730892748', // 必填，生成签名的时间戳
nonceStr: 'F9028FAEC74BE6EC9B852B0A542E2F39', // 必填，生成签名的随机串
signature: 'f49ec4b657d49ed31553ee2a46789aa623043402',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
</script>
<script>
$(document).ready(function () {
var arr = $(".headercontent");
for (var i = 0; i < arr.length; i++) {
(function (index) {
var url = "https://m.bdocx.com/header.aspx";
$.get(url + "?t=" + (new Date()).valueOf(), function (d) {
try {
arr.eq(index).empty().html(d);
} catch (e) { }
try {
arr.html(d);
} catch (e) { }
});
})(i);
}
});
</script>
<script src="https://mstatic.bdocx.com/js/jquery.lazyload.js"></script>
<script charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
</body>
</html>