JQuery,jQuery,jQuery课程的详细学习资料【jQuery基础教程第2版】资源-CSDN文库

共87个文件

xml：30个

jpg：12个

js：10个

jQuery

JQuery

基础教程

4星 · 超过85%的资源需积分: 10 77 浏览量 2012-11-12 17:53:11 上传评论收藏 1.09MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

jquery课程.rar （87个子文件）

jquery课程

jquery-1.8.2.min.js 91KB

第二章选择符

jQuery用法.ppt 175KB

JQuerytest

css.css 1KB

test.html 4KB

jquery-1.8.2.min.js 91KB

testJS.js 2KB

.idea

misc.xml 266B

encodings.xml 171B

workspace.xml 14KB

vcs.xml 173B

JQuerytest.iml 292B

scopes

scope_settings.xml 143B

.name 10B

modules.xml 283B

image

26.jpg 17KB

11.jpg 18KB

28.jpg 55KB

13.jpg 85KB

3.jpg 91KB

1.jpg 173KB

24.jpg 24KB

okk.png 586B

22.jpg 25KB

con_image1.gif 1KB

warning.png 927B

19.jpg 33KB

JQuery基础教程第二章选择符.docx 22KB

第一章 JQuery入门

jQuery第一章

jquery-1.8.2.min.js 91KB

.idea

untitled.iml 292B

misc.xml 266B

encodings.xml 171B

workspace.xml 13KB

vcs.xml 173B

scopes

scope_settings.xml 143B

.name 8B

modules.xml 279B

Chapter01.html 1KB

第三章事件

JQueryDemo

events2.html 2KB

.idea

misc.xml 266B

encodings.xml 171B

workspace.xml 14KB

vcs.xml 173B

scopes

scope_settings.xml 143B

JQueryDemo.iml 292B

.name 10B

modules.xml 283B

style.css 351B

jquery-1.8.2.min.js 91KB

events.html 3KB

JQuery的事件处理.docx 20KB

第五章 DOM操作

JQuery第五章

jquery-1.8.2.min.js 91KB

ChapterFive.html 3KB

Model

jquery-1.8.2.min.js 91KB

chapterFive.html 954B

.idea

misc.xml 266B

encodings.xml 171B

workspace.xml 12KB

vcs.xml 173B

scopes

scope_settings.xml 143B

Model.iml 292B

.name 5B

modules.xml 273B

.idea

untitled.iml 292B

misc.xml 266B

encodings.xml 171B

workspace.xml 12KB

vcs.xml 173B

scopes

scope_settings.xml 143B

.name 8B

modules.xml 279B

Chapter5.html 11KB

img

2.jpg 207KB

第四章效果

JQuery自学.docx 34KB

Prj_JQueryDemo

Prj_JQueryDemo.suo 14KB

Prj_JQueryDemo.sln 2KB

Web

StyleSheet2.css 79B

get.jpg 10KB

jquery.js 261KB

Default.aspx.cs 280B

HTMLPage.htm 1KB

Default.aspx 537B

HTMLPage2.htm 549B

StyleSheet.css 350B

1.jpg 11KB

web.config 277B

MyJavaScript2.js 445B

MyJavaScript.js 3KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="content-type"> <title>jQuery之DOM操作</title> <style type="text/css"> @charset "utf-8"; body { background-image: url("img/2.jpg"); border: 1px solid red; border-radius: 10px 10px 10px 10px; width: 1200px; height:680px; margin: 0px auto; margin-top: 20px; margin-bottom: 40px; overflow: hidden; color: white; } ul,ol,table,a,form,dl,li,span,font,strong,label,p { margin: 0px; padding: 0px; font-size: 20px; font-family: 楷体; font-weight: bold; color: white; text-decoration: none; list-style: none; } #middle { border: 1px solid white; border-radius: 10px 10px 10px 10px; width: 1100px; height: 600px; margin: 0px auto; margin-top: 40px; padding: 0px; background-color: rgba(7, 36, 87, 0.60); } .LinkA { display: block; border: 1px solid white; border-radius: 10px 10px 10px 10px; width: 900px; height: 600px; margin: 0px auto; margin-top: 40px; padding: 0px; vertical-align: middle; background-color: rgba(7, 36, 87, 0.60); } .LinkA p { margin: 0px auto; vertical-align: middle; padding-left: 100px; padding-right: 100px; } .displaynone { display: none; } .MiddleA { background-color: rgba(255, 255, 255, 0); font-family: 楷体; font-size: 30px; display: inline-block; margin: 10px; margin-top:30px; margin-bottom: 30px; } .h1 { font-size: 40px; } </style> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#middle >dl>dd>a').addClass('MiddleA'); $('#middle>dl>dt>h1').addClass('h1'); $('a').hover( function() { $(this).css({'background-color':'#e8c946','cursor':'pointer','border-radius':'10px 10px 10px 10px'}); }, function() { $(this).css({'background-color':'rgba(255, 255, 255, 0)'}); }); $('a').each( function(index) { $(this).attr ( { 'id':'link'+(index+1) } ) $(this).bind('click',function() { $('#DIV-LinkA'+(index+1)).removeClass("displaynone").addClass("LinkA"); $('#middle').hide(); }); $('#DIV-LinkA'+(index+1)).bind('click',function() { $(this).removeClass("LinkA") .addClass("displaynone"); $('#middle').show(); }); }); }); </script> </head> <body> <div id="middle"> <dl> <dt> <h1>第五章 jQuery之DOM操作</h1></dt> <dd><a>5.1 操作属性</a></dd> <dd><a>5.2 插入新元素</a></dd> <dd><a>5.3 移动元素</a></dd> <dd><a>5.4 复制元素</a></dd> <dd><a>5.5 DOM操作方法的简单归纳</a></dd> </dl> </div> <div id="DIV-LinkA1" class="displaynone"> <br> <br> <p>    这里所说的操作属性，包括css属性和其他属性,其中css属性可以有两种添加方法，一种是通过.css()方法添加，另一种是通过添加类的的方式.addclassName(); 这两种方法添加的属性，有本质的区别;</p> <br> <br> <p>    当然这里有添加属性的方式，当然也就有去除属性的方法，对于addclassname() 添加的属性，可以用removeclassname()方法去除，而对于用.css()方法添加的属性也只好再调用.css()去更改了！</p> </div> <div id="DIV-LinkA2" class="displaynone"> <br> <br> <p>    与js不同的是，用jQuery插入元素的方法有多种，这里主要探究向特定元素的前面，或者后面插入元素；</p> <br> <p>    向特定元素前面插入元素可以使用.preppendTo()和.prepend() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。</p> <br> <p>    向某个元素后面添加元素，可以使用.append()和.appendTo()方法执行的任务相同。不同之处在于：内容的位置和选择器。这两个函数完成追加的功能！</p> <p>    除了上面两种方法之外，jQuery还给我们提供了另外两种插入元素的方法一种是.before()和.after()方法，这两个方法顾名思义，是向已知元素的前面或者后面插入元素，不同的是这两个函数传入的参数是纯HTML语句片段；</p> <br> <p>    这里所说的.before,有必要提及一个例子： <br/>         eg:$('body').before(['&lta href="http://www.baidu.com",id="link1"'&gt<u>我们都是好孩子</u>&lt/a&gt]);</p> <p>    这里不得不提及的是如果要想给某一个元素添加父节点怎么办呢？jQuery给我们还提供了在一个已知元素的外部添加节点的方法（添加父节点“包装元素”）.wrap()；</p> <p>    当然还有我们以前有所耳闻的insertbefore（）函数和insertafter()函数!</p> </div> <div id="DIV-LinkA3" class="displaynone"> <br> <br> <p>    移动元素，不是说让元素的位置在页面上随便移动，只是要让已经存在的元素，在动态添加的标签中，追加（添加）到里面，实现元素的移动；说到这里我们怎么样才可以用jQuery 创建元素呢？</p> <p>    我们可以利用下面的语法，动态创建元素：</p> <br/> <br/> <p>        $('&lta href="<em>url</em> id=\"link\""&gt这里创建的是一个新的A标签&lt/a&gt');</p> <br/> <br/> <p>    我们利用上面的语法就创建了一个id值为”link“的a标签元素，接下来就是将页面上的元素动态添加（追加）到a标签中，然后将此A标签插入到页面中，就实现了元素在页面中的移动！</p> </div> <div id="DIV-LinkA4" class="displaynone"> <br> <br> <p>     接下来，我们来探究一下，一大块元素，在页面中出现好几回的问题:</p> <p>    这里我们就有必要了解一下元素的复制，可以利用代码帮我们快速实现：那就是元素的 .clone()方法，其中.clone()方法是有参数的，如果为true则表示，复制的元素拥有原件�

评论收藏

内容反馈