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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 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来处理多个提交任务
2008/05/08 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php 获取全局变量的代码
2011/04/21 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
NodeJS实现同步的方法
2019/03/02 NodeJs
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
gearman的安装启动及python API使用实例
2014/07/08 Python
python中threading超线程用法实例分析
2015/05/16 Python
python类中super()和__init__()的区别
2016/10/18 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
护理助产毕业生的求职信
2014/03/02 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
卫生主题班会
2015/08/14 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
golang中的struct操作
2021/11/11 Golang
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle