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 验证日期的函数
Mar 18 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
js实现鼠标滑动到某个div禁止滚动
Sep 17 Javascript
如何使用CocosCreator对象池
Apr 14 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
德生PL550的电路分析
2021/03/02 无线电
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
js实现缓冲运动效果的方法
2015/04/10 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
JavaScript中的this机制
2016/01/30 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
Ajax基础知识详解
2017/02/17 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
centos6.4下python3.6.1安装教程
2017/07/21 Python
TensorFlow实现创建分类器
2018/02/06 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
wxPython实现文本框基础组件
2019/11/18 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
上海方立数码笔试题
2013/10/18 面试题
什么是命名空间(NameSpace)
2015/11/24 面试题
爱耳日活动总结
2014/04/30 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
使用feign服务调用添加Header参数
2021/06/23 Java/Android