Jquery浅谈之讲解二

 

                                 

                             上次和大家讨论了Jquery的基础和简介,列出了一些基础的选择器,基本选择器和层次选择器,现在和大家接着讨论下Jquery中的其它常用的选择器,通过学习Jquery的多种选择器,大家可能会发现Jquery是一个非常强大的html的Dom查询库,在Jquery中提供了非常多对于DOM查询的方法,是我们对于Dom的操作变的异常的简单,不用再去烦恼如果找到指定目标,现在让我们走进Jquery选择器

                        过滤选择器:

                                 :first    $("div:first")选择所有DIV元素中的第一个元素

                                 :last    $("div:last")选择所有div元素的最后的一个元素

                                 :not(selector)    $("input:not(.myClass)") 获取class不叫myClass的Input的元素

                                 :even       $("input:even")   获取索引是偶数的Input的元素

                                  :odd       $("input:odd")    获取索引时奇数的Input的元素

                                  :eq        $("input:eq(2)")   获取所有input元素中下标索引为2的元素

                                  :gt         $(“input:gt(1)”)     获取input元素中下标索引大于1的元素

                                  :lt         $("input:lt(1)")     获取input元素中下标索引小于1的元素

                                  :header   $("header")      获取所有的<h1>到<h6>的元素

                       内容过滤选择器

                                 :contains(text)         $("div:contains(我)")  选取文本包含”我“我的div元素

                                 :empty                    $("div:empty")    选取没有子元素,但包括文本元素的div元素

                                 :has                       $("div:has(p)")    选取含有p元素的div元素

                                 :parent                  $("div:parent")      选取拥有子元素的div元素

                        属性过滤选择器

                                  [attribute]     $("div[id]")   返回div拥有id属性的元素

                                  [attribute=value]   $(div[title='sharme'])     获取属性为title值为sharme的元素

                                  [attribute!=value]  $(div[title!='sharme'])    获取属性title值不为sharme的元素

                                  [attribute^='value']    $("div[title^='sha']")    获取属性title值为sha开头的元素

                                  [attribute$='value']   $("div[title$='me']")    获取属性为title值为me结尾的div的元素

                                  [attribute*='value']    $("div[title*='sss']")    获取属性为title所有值为sss的div元素

                             综合实践:    $("div[title='sharme'][name^='sha'][class$='me']")   先后顺序获取title为sharme,name为sha开头,class值以me结尾的div的元素

 

                                 

         接下来和大家讨论下对于DOM的操作,jquery中的函数

                   append()    先每一个元素内部追加内容

                   appendTo()  将内容附加到元素上      $("<div>sharme</div>").appendTo("p")    
                   prepend()       $("p").preprend("dddddddd")   将ddddd附加到p元素之前

                  prependTo()    $("ddddddd").preprendTo("p")  

                  after()

                  insertAfter()      $("<div>sharme<div/>").insertAfter("p")     将元素插入到p元素之后  

                  before();$(“p”).before(“dddd”);将ddd添加到p元素之前
                  insertBefore();//$(“dddd”).insertBefore(“p”);

 

 对于Jquery的选择器就列到这里了,下次我将和家大讨论一下Jquery中的事件处理机制,分享一下我的经验,如果有兴趣希望大家多多关注一下我的博客,刚刚开始写博客,以后将会不停的更新我的博客,将技术在这里分享

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章