开发学院WEB开发ASP (二)菜鸟学jQuery(高手请绕路) 阅读

(二)菜鸟学jQuery(高手请绕路)

 2010-01-13 10:45:11 来源:WEB开发网   
核心提示:今天学习jQuery的核心函数.jQuery(exPRession,[context])这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素,(二)菜鸟学jQuery(高手请绕路),jQuery 的核心功能都是通过这个函数实现的, jQuery中的一切都基于这个函数,var showText=$
今天学习jQuery的核心函数.

jQuery(exPRession,[context])
这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。
jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。

默认情况下, 如果没有指定context参数,$()将在当前的 HTML 文档中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。(摘自jQuery API)



费话不多说直接看例子:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Hello World jQuery</title><style>.showtext{ background:#999999; color:#990000; font-weight:800; width:auto; height:40px;}.showtext3{ background:#666; color:#0000FF; font-weight:600; width:auto; height:30px;}</style><script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script></head><body><div id="divMsg" style="color:#FF0000; font-size:18px; font-family:'新宋体'">无心测试JQuery!</div><input id="btnShow" type="button" value="显示" />  <input id="btnHide" type="button" value="隐藏" /><br />  <input id="btnChange" type="button" value="修改内容为Hello World jQuery!" /> <input id="btnChange2" type="button" value="修改内容为 无心测试JQuery!!" /> <script type="text/Javascript">$("#btnShow").bind("click",function(event){$("#divMsg").show("fast")}); $("#btnHide").bind("click",function(event){$("#divMsg").hide("slow")}); $("#btnChange").bind("click", function(event) { $("#divMsg").html("Hello World jQuery!"); }); $("#btnChange2").bind("click",function(event){$("#divMsg").html("无心测试JQuery!!");});</script> <h4>顺便介绍下本人QQ高级群67221760(炒股群) !</h4> <div><p>今天上班迟到啦!</p></div><div></div><div><p>不过也要按时写博客</p></div><div><p>扣工资也无所谓啦</p></div><span>9999999999999999999</span><span class="showtext2">3333333333333333333</span><script language="javascript">$( function() { //匹配所有的span元素, var showText=$("span"); //对所有span元素添加class属性 showText.addClass("showtext"); //匹配所有div中含有p的元素 var selectDiv=$("div p"); //showtext的内容赋值 showText.text("93路公交车不来我有啥办法呢"); //对selectdiv元素添加class属性 selectDiv.addClass("showtext3"); //通过CSS类名选择元素 var selectByClass=$(".showtext2"); selectByClass.text("我先声明我起床很早的。");  })</script></body></html>


效果图:

没有加样式前的效果。

加上样式后的效果。

Tags:菜鸟 jQuery 高手

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接