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 自适应高度的Tab选项卡
Apr 05 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
使用console进行性能测试
Apr 27 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
如何离线执行php任务
2017/02/21 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
javascript 获取网页标题代码实例
2014/01/22 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
Python如何实现邮件功能
2020/05/27 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
存储过程的优缺点是什么
2015/01/10 面试题
国外软件测试工程师面试题
2016/12/09 面试题
实习教师自我鉴定
2013/12/09 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
公务员保密承诺书
2014/03/27 职场文书
记账会计岗位职责
2014/06/16 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
培训师岗位职责
2015/02/14 职场文书
公司表扬信格式
2015/05/04 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
步步惊心观后感
2015/06/12 职场文书
合作合同协议书
2016/03/21 职场文书