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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jQuery操作元素追加内容示例
Jan 10 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
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
Python用SSH连接到网络设备
2021/02/18 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
投资意向书范本
2014/04/01 职场文书
员工合理化建议书
2014/05/19 职场文书
道德演讲稿
2014/05/21 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
世界环境日活动总结
2015/02/11 职场文书
门店店长岗位职责
2015/04/14 职场文书
起诉状范本
2015/05/20 职场文书
个人合作协议范本
2015/08/06 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android