jQuery技术

基于JQuery 选择器使用说明介绍

字号+ 作者:H5之家 来源:H5之家 2017-05-16 16:01 我要评论( )

课工场KGC.CN在线教育是专注于企业人才培养的互联网教育平台,提供HTML5前端,互联网UIUE设计,Java大数据开发,云计算等互联网技术的IT培训教程,并通过遍及全国的IT

本篇文章小编为大家介绍,基于JQuery 选择器使用说明介绍。需要的朋友参考下

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。


jQuery 元素选择器:jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。


jQuery 属性选择器 :jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。


选择器实例

语法描述

$(this)当前 HTML 元素

$("p")所有 <p> 元素

$("p.intro")所有 class="intro" 的 <p> 元素

$(".intro")所有 class="intro" 的元素

$("#intro")id="intro" 的第一个元素

$("ul li:first")每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']")所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素


获取/设置内容 - text()、html() 以及 val()

我们将使用三个方法来设置内容:

上面的四个 jQuery 方法:text()、html()、val() 以及 attr(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

$("#btn1").click(function(){  $("#test1").text(function(i,origText){  return "Old text: " + origText + " New text: Hello world ! (index: " + i + ")"; //return newText;  }); });



 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 基于jquery的拖动布局插件

    基于jquery的拖动布局插件

    2017-04-09 12:06

  • JQuery index()方法使用代码

    JQuery index()方法使用代码

    2017-02-25 16:02

  • 【使用教程】jQuery的.live()和.die() 使用介绍

    【使用教程】jQuery的.live()和.die() 使用介绍

    2017-02-23 18:03

  • jQuery 核心

    jQuery 核心

    2016-08-29 15:01

网友点评