JQUERY进门篇

最新推荐文章于 2024-05-04 17:52:57 发布

jguangliang

最新推荐文章于 2024-05-04 17:52:57 发布

阅读量404

点赞数

分类专栏： JS学习篇文章标签： jquery button function div xhtml 测试

本文链接：https://blog.csdn.net/jguangliang/article/details/6059568

版权

JS学习篇专栏收录该内容

2 篇文章 0 订阅

订阅专栏

仰慕JQUERY已经2,3年了，期间也用过很多他们的效果，但是都只是知其然不知其所以然，所以现在在学习.NET之余，把它也好好地恶补一下，因为不知道其很多内在知识，所以想从基础开始学习下。以便日后发挥其更大的用处。好消息是VS2008只需要安装一个sp1（http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736）就可以支持智能提示开发JQUERY了。真是好啊！

一、也从“HELLO WORLD”说起吧（似乎接触语言以来，都是这样开始入门的）

$(document).ready(function(){ alert("Hello jQuery!"); });

二、常见的选择器函数：

      $(”DOM名称”)：选择标签名；
      $(”#ID名称”)：选择ID属性，一个文档中ID是唯一的；
      $(”.样式名称”)：选择样式名；
      $(”selector1,selector2,selectorN”)：多个元素组合选择。

三、层级选择器

      $(div span”):匹配div后所有span元素;
      $(”div > span”):匹配div后所有span元素;
      $(”div + p”):匹配div后第一个p元素;
      $(”div ~ p”):匹配div后所有p元素;

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery简单的选择器</title> <script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery简单的选择器</h1> <div>javascript森林群规有<span class="num">120</span>个会员,其中管理员<span class="num">120</span>个；</div> <div>javascript森林群博客目前有<span>30</span>作者,<span>10</span>篇文章；</div> <p>我是愚人码头</p> <span>你叫什么名字呢？</span> <span>我爱javascript森林；</span> <span>以为森林里有我好好多的朋友；</span> <span>欢迎你加入我们；</span> <div> <input type="submit" name="button" id="button1" value="测试$('div span.num')" /> <input type="submit" name="button" id="button2" value="测试$('div/>span')" /> <input type="submit" name="button" id="button3" value="$('p+span')" /> <input type="submit" name="button" id="button4" value="测试$('p~span')" /> </div> <script type="text/javascript"> $(document).ready(function(){ $("#button1").click(function(){ $("div span.num").css("color","#FF0033") }); $("#button2").click(function(){ $("div>span").css("color","#FF0033") }); $("#button3").click(function(){ $("p+span").css("color","#FF0033") }); $("#button4").click(function(){ $("p~span").css("color","#FF0033") }); }); </script> </body> </html>

四、过滤选择器

      :animated：匹配所有正在执行动画效果的元素集合；
      :eq(index)：匹配索引为 index 的一个元素，例如：$(”div:eq(0)”)//第一个div；
      :even：匹配索引为偶数的元素集合，例如：$(”div:even”)；
      :odd：匹配索引为奇数的元素集合，例如：$(”div:odd”)；
      :first：匹配第一个元素，等价于:eq(0)，例如：$(”div:first”)；
      :gt(index) ：匹配索引大于index的元素集合，例如：$(”div:gt(0)”)//除了第一个div外的所以div；
      :lt(index)：匹配索引小于于index的元素集合，例如：$(”div:lt(0)”)；
      :header：匹配h1-h6的所有元素集合；
      :last：匹配找到的最后一个元素，例如：$(”div:last”)//最后一个div；
      :not(selector)：去除所有与给定选择器匹配的元素，例如：$(”input:not(:checked)”)//除了被选中的所有input；

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery简单的选择器</title> <script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery简单的选择器</h1> <div>javascript森林群规有<span class="num">120</span>个会员,其中管理员<span class="num">120</span>个；</div> <div>javascript森林群博客目前有<span>30</span>作者,<span>10</span>篇文章；</div> <p>我是愚人码头</p> <div class="txt"> <span>你叫什么名字呢？</span> <span>我爱javascript森林；</span> <span>以为森林里有我好好多的朋友；</span> <span>欢迎你加入我们；</span> <div> <div> <input type="submit" name="button" id="button1" value="测试$('div:eq(1)')" /> <input type="submit" name="button" id="button2" value="测试$('.txt span:even')" /> <input type="submit" name="button" id="button3" value="测试$('.txt span:odd')" /> <input type="submit" name="button" id="button4" value="测试$('span:first')" /> <input type="submit" name="button" id="button5" value="测试$('span:gt(0)')" /> <input type="submit" name="button" id="button6" value="测试$('div:not(:last)')" /> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $("#button1").click(function(){ $("div:eq(1)").css("color","#FF0033") }); $("#button2").click(function(){ $(".txt span:even").css("color","#EE5533") }); $("#button3").click(function(){ $(".txt span:odd").css("color","#66ff33") }); $("#button4").click(function(){ $("span:first").css("color","#3300ff") }); $("#button5").click(function(){ $("span:gt(0)").css("color","#990099") }); $("#button6").click(function(){ $("div:not(:last)").css("color","#ff0099") }); }); </script> </body> </html>

五、子元素选择器

      :first-child ：匹配每个父元素的第一个子元素，相当于:nth-child(0)；
      :last-child ：匹配每个父元素的最后一个子元素；
      :nth-child(index/even/odd/equation)：匹配每一个父元素的第N个子或奇偶元素，；
      :nth-child(3n) // 匹配每一个父元素的索引值能被3整除的元素；
      :nth-child(3n+1) // 匹配每一个父元素的索引值被3整除后余1的元素
      :only-child ：如果某个元素是父元素中唯一的子元素；
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script> </head> <body> <h3>我正在学习并且应用的技术</h3> <ul> <li>javascript</li> <li>css2.1</li> <li>html4</li> <li>MXML</li> </ul> <h3>我想学习的技术</h3> <ul> <li>actionscript</li> <li>css 3</li> <li>html 5</li> <li>PHP</li> </ul> <h3>我精通的技术</h3> <ul> <li>群里吹水</li> <li>忽悠新人</li> </ul> <div> <input type="submit" name="button" id="button1" value="测试$('li:first')" /> <input type="submit" name="button" id="button2" value="测试$('li:first-child')" /> </div> <script type="text/javascript"> $(document).ready(function(){ $("#button1").click(function(){ $("li:first").css("color","#FF3300"); }); $("#button2").click(function(){ $("li:first-child").css("color","#0071db"); }); }); </script> </body> </html>

六、常用方法属性：

addClass("样式名")；向选择器中增加样式名；

      removeClass("样式名")；在选择器中删除样式名；
      css("样式属性","值")；向选择器重增加样式；
      attr("DOM属性","值")；如$(”#img”).attr(”src”,”test.jpg”); 向img标签中增加test.jpg图片；

jguangliang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQUERY进门篇

仰慕JQUERY已经2,3年了，期间也用过很多他们的效果，但是都只是知其然不知其所以然，所以现在在学习.NET之余，把它也好好地恶补一下，因为不知道其很多内在知识，所以想从基础开始学习下。以便日后发挥其更大的用处。好消息是VS2008只需要安装一个sp1（http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736）就可以支持智能提示开发JQUERY了。真是好啊！
复制链接

扫一扫