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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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
一个程序下载的管理程序(二)
2006/10/09 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python数据结构之链表的实例讲解
2017/07/25 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
Django框架验证码用法实例分析
2019/05/10 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Django在Model保存前记录日志实例
2020/05/14 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
python实现计算图形面积
2021/02/22 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
设计师个人求职信范文
2014/02/02 职场文书
安全生产计划书
2014/05/04 职场文书
绿色校园广播稿
2014/10/13 职场文书
护理专业自荐信范文
2015/03/06 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
院系推荐意见
2015/06/05 职场文书
创业计划书之宠物店
2019/09/19 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
python利用while求100内的整数和方式
2021/11/07 Python