jQuery选择器(一)

网友投稿 540 2022-05-30

jQuery选择器

在CSS中,选择器的作业是选择页面中的某些HTML元素或者某一个HTML元素。jQuery中的选择器使用“$",其方式更全面,而且不存在浏览器的兼容问题。

jQuery选择器允许通过标签名,属性名或内容对HTML元素进行选择或者修改HTML元素的样式属性。jQuery的选择器很多,可以分为基本选择器、层次选择器、过滤选择器和属性选择器。

基本选择器

基本选择器主要包括元素选择器、ID选择器、类选择器以及并列选择器等,选择方法与CSS选择器的方法相同。

1.元素选择器

元素选择器可以选中HTML文档中所有的某个元素。如$(“p”)可以表示选中本网页中所有的p元素,又如$("input")表示选中本网页中所有的input元素。

2.ID选择器

jQuery选择器(一)

ID选择器可以根据指定ID值返回一个唯一的元素。例1中定义一个ID为“myId”的

Hello

,单击该ID标记内的文字时,把其中的文字内容由“Hello”改为“World”,使用ID选择器选中该

元素的方法是$(“#my”)。

【例1】

jQuery

  • 足球
  • 羽毛球
  • 篮球

图3 祖先后代选择器

图4 改变列表显示样式

2.父子选择器

在HTML中,元素之间存在包含关系。在例3中

元素的子元素是
    元素,
      元素的子元素是
    • 元素,而
      元素的父元素是元素。父子选择器的父元素和子元素之间使用符号“>”隔开,前后元素的嵌套关系只能是一层。例如, $("div>ul") 指选择div元素内直接嵌套的ul元素。

      例4中利用父子选择器以及jQuery中的CSS()方法,完成与上例相同的程序代码的功能。

      【例4】

      jQuery父子选择器

      • 足球
      • 羽毛球
      • 篮球

      3.前后选择器

      前后选择器可以选择某元素的下一个同级兄弟元素,前后选择器对两个同级别的元素起作用,前后元素中间使用“+”分隔,选择在某元素后面的next元素,相当于next()方法。例如,$("#my+img")是选择id为my的元素后的第一个同级别img元素,相当于$("#my"). next("img")。

      例5是一个验证用户输入数据是否为空的页面,如果为空,则给出相应的错误提示,在浏览器中的运行结果如图所示。

      【例5】

      jQuery前后选择器