jquery基本知识-第一天

 jQuery的选择符大致分为三类:1、css选择符。(按我的理解就是三类基本的选择符:标签名选择符、class类选择符和Id选择符)eg:$('.odd') 、$('#id')
                                                    2、属性选择符。([ ]中括号形式表示的) eg: $('img[src='demo.jpg']')
                                                    3、自定义选择符,即以":"开头的选择符。(书上叫做自定义选择符,一开始我还是有点纳闷的,因为我的理解是我自己定义的选择符,其实不然,这些都是jQuery组织自定义的选择符,具体有那些,在网上或是jQueryAPI文档中都可以找到,这里我就不一一列出了) eg:$('tr:odd').addClass('odd');  表格条纹效果
      
       三类基本的选择符(css选择符),我觉得没有什么特别可总结的,但是对于属性选择符和自定义选择符,我想应该进一步的好好总结一下,首先我们来看属性选择符。
       我们都知道属性选择符的基本写法就是用一个方括号[],大致的用法有以下几种:
       1、[attribute] 选择出含有某个属性的DOM对象。eg: $('td[alt]').click(function () {---}); 给包含有alt属性的td对象添加单击事件。
       2、[attribute=value] 选择出属性值为value的DOM对象。eg: $('td[alt="点击查看所有比赛"]').click(function () {---});给含有alt属性且属性值为'点击查看所有比赛'的td对象添加单击事件。
       3、[attribute!=value] 属性值不等于value的DOM对象。
       4、[attribute*=value] 属性值中包含value的DOM对象。
       5、[attribute^=value] 属性值中以value开头的DOM对象。
       6、[attribute$=value] 属性值以value结尾的DOM对象。
       属性选择符我觉得大致分为以上6类,接下来我们看看自定义选择符,凡是用到冒号":"的选择符我都把它叫做自定义选择符,主要分为一下几大类:
       1、基本的。(:first  :last  :not  :even  :odd  :eq  :gt  :lt  :header  :animated)具体表示什么意思,网上或API文档上都可以查得到,且用多了自然就知道都表示什么意思了。
       2、内容方面的。(:contains  :empty  :has  :parent)
       3、可见性。(:hidden  :visible)
       4、子元素。(:first-child  :last-child  :nth-child  :only-child)这里我想解释一下各个选择符所表达的意思,:first-child 匹配第一个子元素,无参数。 :last-child 匹配最后一个子元素,无参数 。:nth-child 匹配其父元素下的第N个子或奇偶元素,有参数 index,index表示要匹配元素的序号,从1开始。具体示例请参考API文档。
       5、表单。(:input  :checkbox  :button  :file  :hidden  :image  :radio  :reset  :password  :submit  :text)
       6、表单对象属性。(:enabled  :disabled  :checked  :selected)

       以上关于选择符的知识基本上总结的差不多了,其实还有一种选择符,因为我觉得这类选择符不属于以上三大类选择符,应该归类为第四大类选择符,即表示层级的选择符,下面就来介绍一下表示层级的选择符:
       1、ancestor  descendant    表示在给定的祖先元素下匹配所有后代元素,ancestor表示任何有效的选择器(即前面总结的三大类选择器),descendant表示用以匹配元素的选择器,并且它是第一个选择器的后代元素
        2、parent > child   parent和child都表示一个有效的选择器,这个和(ancestor  descendant)唯一的区别就是child不仅仅是parent的后代元素,而且是parent的子元素。
        3、prev + next  prev和 next都表示一个有效的选择器,用 +号所表示的意思是匹配所有紧接在prev元素后的next元素,prev和next是同级关系,即兄弟关系。
        4、prev~siblings  同样的prev和siblings都表示一个有效的选择器,用~号所表示的意思是匹配prev 元素之后的所有siblings元素。

猜你喜欢

转载自blog.csdn.net/php_897721669/article/details/7370414