基于JQuery 选择器使用说明介绍_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()

我们将使用前一章中的三个相同的方法来设置内容:

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值
  • attr() - 设置事返回所选元素的属性值

上面的四个 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;
 });
});

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
选择器
jquery选择器使用变量、jquery 选择器、jquery name选择器、jquery属性选择器、jquery class选择器,以便于您获取更多的相关知识。

时间: 2024-07-31 05:17:19

基于JQuery 选择器使用说明介绍_jquery的相关文章

jquery选择器原理介绍

 这篇文章主要介绍了jquery选择器原理介绍($()使用方法),需要的朋友可以参考下 每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同.

jQuery基本过滤选择器使用介绍_jquery

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.简单过滤选择器:根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头:简单过滤选择器是过滤选择器中使用最广泛的一种 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.内容过滤选择器.可

jqPlot 基于jquery的画图插件_jquery

前边也讲过一个基于java的图形报表,功能及外观也不错,但存在通用性的问题.所以我们来学一个具有易用性+兼容性+可扩展性的js图表插件. jqPlot是一款基于jquery类库的图标绘制插件.通过jqPlot可以再网页中绘制线状.柱状.饼状等多种样式图表.而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的图表样式. 官方地址:http://www.jqplot.com/ 功能概述: 有多种图表样式可供选择 可以自定义日期轴线 可设置旋转轴文字 自动计算趋势线 工具条

基于jquery实现瀑布流布局_jquery

本文实例为大家介绍了基于jquery实现瀑布流布局的关键代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: 使用jquery-1.8.3.min.js,waterfall.js代码如下: $( window ).load( function(e){ waterfall(); var dataInt = { 'data': [{ 'src': '1.jpg' },{ 'src': '2.jpg' },{ 'src': '3.jpg' },{ 'src': '4.jpg' }]}; $(

初试jQuery EasyUI 使用介绍_jquery

jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签.    jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,window等等. OK,下面就开始我们的初探之旅.jQuery

jQuery的框架介绍_jquery

jQuery使用有一段时间了,但是有一些API的实现实在想不通.小编参考相关资料源码,现在把我的学习过程和收获分享给大家. 下面将使用简化的代码来介绍,主要关注jQuery的实现思想~>_<~ //匿名立即执行函数 //.防止污染全局空间 //.选择性保护内部变量 (function(window, undefined){ //第二参数undefined设置而不传的原因: // 外部发生这种情况:var undefined = 时,undefined会被篡改 // 设置第二参数而不传,则und

推荐9款炫酷的基于jquery的页面特效_jquery

1.基于jquery实现的带按钮的图片左右滚动切换 jquery带按钮的图片滚动切换代码是一款jquery制作带按钮的图片左右滚动切换特效代码 在线演示 源码下载 2.基于jQuery的图片上下左右无缝连续循环滚动 imgscroll插件是一款支持图片焦点滚动(支持渐变和滚动),图片连续无缝循环滚动的js库,依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动. 在线演示 源码下载 3.jquery实现的fixed固定层时间轴动态效果 jquery实现的fixed固定层时间轴动态效果源码,

基于jquery实现放大镜效果_jquery

各大商城详细页面产品图片特效展示,鼠标滑过小图显示中图,鼠标滑过中图显示大图展示,jquery放大镜效果图片类似图片放大镜展示,提高用户体验设计,jquery 图片放大镜效果是典型的一款图片特效展示. 效果图如下: 图片大框初始样式: <div class="goods-imginfo-bimg-box" style="background-image: url(http://www.od.my/images/201507/thumb_img/142_thumb_P_1

jQuery选择器全面总结_jquery

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法   jQuery选择器使得获得页面元素变得更加容易.更加灵活,从而大大减轻了开发人员的压力.如同盖楼一样,没有砖瓦,就盖不起楼房.得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性.当然想一下子掌握所有选择器也是很困难的,这个得靠实践和积累. 现在我们正式进入jQuery选择器的学习.我们将jQuery选择器进行分类学习,将jQuery选择器分为以下几种: 1.基本选择器 ◦id