(jQuery学习笔记一Nora.docVIP

JQuery学习笔记 早半年前就看过jQuery的相关资料，也试着学过点，用过一点，但没有深入的系统的学习过这个js框架，现在准备学习一下JQuery，从今天算起吧。 Jquery学习1---关于Jquery: JQuery是一个js框架，集成了javascript、Dom、XmlHttpRequest等。是由John Resig在2006年创建的。看来编程界也是人才辈出啊。 在使用JQuery之前，需要下载JQuery技术框架文件。下载地址去官方网站：/ 最新版本好像是1.7了，下载压缩后的吧，小一些，也就不到100kb，是一个js文件。 然后还需要将下载的jquery文件引入到页面中才可以使用。引入代码（方法）如下： script type=text/javascript src=jquery文件的地址（相对） /script 看我的文件结构如下：我使用的是1.7版本的。 相对应的引入方式 script type=text/javascript src=js/jquery-1.7.min.js/script 下面就可以在该页面中使用该文件了，也就是可以使用Jquery了。哈哈 Jquery学习2----关于JQuery构造器 构造器是JQuery框架的核心，其有jQuery()函数来实现（也可简写为$(),所以一般情况下使用后者）,此函数是JQuery的核心，jquery的一切操作都会构建在这个函数之上。 注意：使用jQuery()这种格式的时候，jQuery这个单词要写对，就Q需要大写，其他要小写，错一个字母都不可以。 jQuery()函数可以接受四种类型的参数： 第一：jQuery(html):根据html标记字符串，动态的创建由jquery包含的Dom元素 假设现在我们的html文件的body标签里什么都没有，我们使用jquery向body标签中添加一个div，并且div中的内容是“这是添加的一个div，哈哈”。 代码： head meta http-equiv=Content-Type content=text/html; charset=gb2312 / script type=text/javascript language=javascript src=js/jquery-1.7.min.js/script title无标题文档/title /head body script type=text/javascript language=javascript $(div这是添加的一个div，哈哈。/div).appendTo(body); /script /body /html 打开浏览器，显示效果如下： 同样的上面的这一句：$(div这是添加的一个div，哈哈。/div).appendTo(body); 可以改为：jQuery(div这是添加的一个div，哈哈。/div).appendTo(body); 显示效果是一模一样的。 第二：jQuery(elements):这个参数的函数可以将dom对象转换成jQuery对象，然后调用Jquery对象的属性和方法来控制该dom元素的样式。 下面的示例代码就是将上面div中的内容的颜色改为红色，大小改为24px； var div = $(div); div.css(color,red); div.css(font-size,24px); 测试结果截图： 第三：jQuery(callback):它是$(document).ready()的缩写，表示绑定一个在dom文档加载完毕后要执行的函数。 下面的代码示例分别用上面的两种写法来执行两个函数，弹出两个提示框。 $(document).ready(function(){ alert(先执行吧！); }); $(function(){ alert(这是页面加载完毕后执行的函数！); }); 测试执行截图： 第四：jQuery(expression,[context]):根据css选择器字符串在页面中匹配元素，或者使用context参数指定匹配的范围。 下面的示例代码是将页面的p标签中的span标签中的内容的颜色设置成红色。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 /