jQuery 选择方法及$(this)用法实例分析


Posted in jQuery onMay 19, 2020

本文实例讲述了jQuery 选择方法及$(this)用法。分享给大家供大家参考,具体如下:

选择方法

用方法来选择元素,可以视作$()函数的链式调用,返回仍然是一个jQuery对象

$(function() {
//一、根据结果集中元素位置来选择:first(),last(),eq(),slice()
//1、选择第一个li
  $('li').first().css('color','red');
//2、选择最后一个li
  $('li').last().css('color','red');
//3、选择第三个li,索引从0开始
  $('li').eq(2).css('color','red');
//4、范围选择:slice(起始索引,结束索引),索引从0开始,结果中不包括结束索引的数据
  $('li').slice(1,4).css('color','red');
//5、slice()省略结束索引,默认选取到最后一个元素
  $('li').slice(1,).css('color','red');
//6、slice()支持负数,从倒数开始选择元素,如:slice(-3),选择最后三个
  $('li').slice(-3).css('color','red');
//二、根据结果集中元素的自身特性来选择元素:filter(),not()
//从结果中选择class为red的元素,等价于$('li.red')
$('li').filter('.red').css('color','red');
//filter()方法可以传入一个回调判断函数,参数就是索引
$('li').filter(function(index) {return index%2 == 0}).css('color','red');
等价于:
$('li:even').css('color','red');
 
//与filter()功能相反的是not()方法,选择所有奇数行
$('li').not(function(index) {return index%2 == 0}).css('color','red');
等价于:
$('li:odd').css('color','red');
//三、将选中元素集合当作上下文,其实就是一个定位标志
//find(),children(),contents(),next(),prev(),nextAll(),prevAll(),parent(),parents(),closest(),parentsUntil()
//1、查询所有li元素下面的strong元素,文本设置为red,可以深入到多级
$('li').find('strong').css('color','red');
//2、获取当前元素的下一个元素,当前id在第5个li上
$('li').next().css('color','red');
//3、获取从当前开始到结束的全部元素,会将子孙元素全选中
$('li').nextAll().css('color','red');
//4、获取当前元素的前一个元素,prev()
$('li').prev().css('color','red');
//5、获取当前元素的前面所有元素,prevAll()
$('li').prevAll().css('color','red');
//6、获取当前元素父元素,parent()
$('li').parent().css('color','red');
});

$(this)用法

返回当前jQuery对象,与上下文相关:

<head>
  <script>
    $(document).ready(function() {
      $('img').click(function(event) {
        alert($(this).attr('alt'));
      });
    });
  </script>
</head>
<body>
  <img src="images/1.png" alt="one">
  <img src="images/2.png" alt="two">
  <img src="images/3.png" alt="three">
  <img src="images/4.png" alt="four">
</body>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 #jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 #jQuery
jQuery AJAX应用实例总结
May 19 #jQuery
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
JQuery表单元素取值赋值方法总结
May 12 #jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 #jQuery
You might like
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
Python 字符串池化的前提
2020/07/03 Python
python 获取计算机的网卡信息
2021/02/18 Python
香港交友网站:be2香港
2018/07/22 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
企业环保标语
2014/06/10 职场文书
专项法律服务方案
2014/06/11 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
python开发的自动化运维工具ansible详解
2021/08/07 Python
vue项目支付功能代码详解
2022/02/18 Vue.js
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫