jQuery选择器用法实例详解


Posted in Javascript onDecember 17, 2015

本文实例讲述了jQuery选择器用法。分享给大家供大家参考,具体如下:

jQuery 使用两种方式来选择 html 的 element,第一种使用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a"));第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。

使用 CSS 和 XPath 选择器选择的方法有许多种用法,关于详细的 CSS 选择器可参考本站相关文章。

首先来看通过元素的 ID 取得元素:$( "#id" ),在名字前面增加 # 表示这是一个 id,注意引号不要丢掉。

在页面中增加一个 id 为 msg 的 span 元素,将 helloworld 显示在 span 元素中,可以如下实现:

<html>
<head>
  <title>Hello</title>
  <script src="jquery-1.2.5.js" type="text/javascript"></script>
   <script type="text/javascript">
    $( function() {
     $("#msg").html("Hello, world."); } );
   </script>
  </head>
<body>
  <span id="msg"/>
</body>
</html>

注意:#id 需要用引号引起来,有参数的 html 函数用来为元素的 innerHTML 赋值。

下一个例子:

比如我们有一个 list ,它的 ID 是 orderedlist,那么取得这个 list 的引用的 jQuery 就是 $( "#orderedlist" ),为它增加一个值为 red 的 class 属性 $("#orderedlist").addClass("red"),addClass 函数用来为元素增加 CSS 设置。取得 list 中的最后一个 li 的引用,$( "#orderedlist li:last" )。

下面的例子将最后一个 li 的内容更改为 hello, world.

<html>
<head>
  <title>Hello</title>
  <script src="jquery-1.2.5.js" type="text/javascript"></script>
  <script type="text/javascript">
    $( function() {
     alert("wait");
     $( "#orderedlist li:last" ).html("hello, world.");
    } );
  </script>
</head>
<body>
  <ol id="orderedlist">
   <li>First element</li>
   <li>Second element</li>
   <li>Third element</li>
  </ol>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
js图片自动切换效果处理代码
May 07 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 #Javascript
js倒计时简单实现方法
Dec 17 #Javascript
高效的jquery数字滚动特效
Dec 17 #Javascript
JS函数的几种定义方式分析
Dec 17 #Javascript
js实现文字闪烁特效的方法
Dec 17 #Javascript
基于jquery实现省市联动特效
Dec 17 #Javascript
js实现网页收藏功能
Dec 17 #Javascript
You might like
多重?l件?合查?(一)
2006/10/09 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python3访问sina首页中文的处理方法
2014/02/24 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
使用python实现名片管理系统
2020/06/18 Python
如何使用PHP session
2015/04/21 面试题
史上最全面的Java面试题汇总!
2015/02/03 面试题
材料成型专业个人求职信范文
2013/09/25 职场文书
预备党员党校学习自我评价分享
2013/11/12 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
公司承诺书范文
2014/05/19 职场文书
求职信结尾怎么写
2014/05/26 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
Django drf请求模块源码解析
2021/06/08 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang