JQuery的常用选择器、过滤器、方法全面介绍


Posted in Javascript onMay 25, 2016

1、jQuery对象转换成DOM对象

a.

var $cr = $("#cr"); //jQuery对象

var cr=$cr[0]; //DOM对象

alert(cr.checked); //检测checkbox是否被选中了

b.

var $cr=$("#cr"); //jQuery对象

var cr=$cr.get(0); //DOM对象

alert(cr.checked); //检测checkbox是否被选中了

2.DOM对象转换成jQuery对象

var cr=document.getElementById("cr"); //DOM对象

var $cr=$(cr); //jQuery对象

注:平时用到的jQuery对象都是通过$()函数造出来的,$()函数就是一个jQuery对象的制造工厂

3.jQuery的选择器

a.$("#test")选取id为test的元素

b.$(".test")选取所有class为test的元素

c.$("p")选取所有的<p>元素

d.$("*")选取所有的元素

e.$("div span")选取<div>里的所有span元素

f.$("div>span")选取<div>元素下元素名是<span>的子元素

g.$(".one+div")选取class为one的下一个<div>元素

h.$("#two~div")选取id为two的元素后面的所有<div>兄弟元素===$("#two").nextAll("div")===$("#two").siblings("div")选取id为two元素的所有同辈div,无论前后位置

4.jQuery的过滤器

a.$("div:first")选取所有<div>元素中的第一个<div>元素

b.$("div:last")选取所有<div>元素中的最后一个<div>元素

c.$("input:not(.myClass)")选取class不是myClass的<input>元素‘

e.$("input:even")选取索引是偶数的<input>元素

f.$("input:odd")选取索引是奇数的<input>元素

g.$("input:eq(1)")选取索引等于1的<input>元素

h.$("input:gt(1)")选取索引大于1的<input>元素(注:大于1,而不包括1)

i.$("input:lt(1)")选取索引小于1的<input>元素(注:小于1,而不包括1)

j.$(":header")选取网页中所有的<h1>、<h2>、<h3>.....

k.$("div:animated")选取正在执行动画的<div>元素

5.内容过滤选择器

a.$("div:contains('我')")选取含有文本'我'的<div>元素

b.$("div:empty")选取不包含子元素(包括文本元素)的<div>空元素

c.$("div:has(p)")选取含有<p>元素的<div>元素

d.$("div:parent")选取拥有子元素(包含文本元素)的<div>元素

6.可见性过滤器

a.$(":hidden")选取所有不可见的元素,包括<input type="hidden"/>、<div style="display:none"></div> 和<div style="visibility:hidden"></div>等元素 b.$("div:visible")选取所有可见的<div>元素

7.属性过滤选择器

a.$("div[id]")选取拥有属性id的元素

b.$("div[title=test]")选取属性title为"test"的<div>元素

c.$("div[title!=test]")选取属性title不等于"test"的<div>元素(注意:没有属性title的<div>元素也会被选取)

d.$("div[title^test]")选取属性title以"test"开始的<div>元素

e.$("div[title$=test]")选取属性title以"test"结束的<div>元素

f.$("div[title*=test]")选取属性title含有"test"的<div>元素

g.$("div[id][title$='test']")选取拥有属性id,并且属性title以"test"结束的<div>元素

8.子元素过滤选择器

a.:nth-child(index/even/odd)选取每个父元素下的第index个子元素或者奇偶元素 :eq(index)只匹配一个元素,并且是总0算起的,而:nth-child将为每一个父元素匹 配子元素,并且:nth-child(index)的index是从1开始的。

b.:first-child只返回单个元素,而:first-child选择符将为每个父元素匹配第一个元素 例如$("ul li:first-child");选取每个<ul>中的第一个<li>元素

c.:last-child选取每个父元素的最后一个子元素,同样:last只返回单个元素,而:last-child 选择符将为每个父元素匹配最后一个子元素 例如$("ul li:last-child")选择每个<ul>中的最后一个<li>元素

d.:only-child如果某个元素师它父元素中唯一的子元素,那么它将会被匹配,如果父元素中含有 其它元素,则不会被匹配

例如:$("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素 :nth-child()选择器是很常用的子元素过滤选择器,详细功能如下:

a.:nth-child(even)能选取每个父元素下的索引值是偶数的元素

b.:nth-child(odd)能选取每个父元素下的索引值是奇数的元素

c.:nth-child(2)能选取每个父元素下的索引值等于2的元素

d.:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素,(n从0开始)

e.:nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素。

(n从0开始) 例如:

a.$('div.one:nth-child(2)').css("background","red")表示改变每个class为one的<div>父元素下 的第二个子元素的背景色

b.$('div.one:first-child').css("background","red")表示改变每个class为one的<div>父元素下的第一个子元素的背景色

c.$('div.one:last-child').css("background","red")表示改变每个class为one的<div>父元素的最后一个子元素的背景色

d.$('div.one:only-child').css("background","red")表示如果class为one的<div>父元素下只有一个子元素,那么则改变这个子元素的背景色

9.表单对象属性过滤选择器

a.$("#form1 :enabled")选取id为"form1"的表单内所有可用元素

b.$("#form2 :disabled")选取id为"form2"的表单内所有不可用元素

c.$("input:checked")选取所有被选中的<input>元素

d.$("select:selected")选取所有被算中的选项元素

e.$(":input")选取所有<input><textarea><select><button>元素

f.$(":text")选取所有的单行文本框

g.$(":password")选取所有的密码框

h.$(":radio")选取所有的单选框

i.$(":checkbox")选取所有的复选框

j.$(":submit")选取所有的提交按钮

k.$(":image")选取所有的图像按钮

l.$(":reset")选取所有的重置按钮

m.$(":button")选取所有的按钮

n.$(":file")选取所有的上传域

o.$(":hidden")选取所有的不可见元素

10. $(document).ready(function{}) 表示dom加载完成后出发 window.onload= 只能注册一个方法,必须页面上所有的内容都加载完毕后触发(图片,css,js都加载完毕)

11.节点遍历 next() nextAll() prev() prevAll() siblings() end() andSelf() parent() children()

12.设置样式 css() 设置行内样式 设置标签的style属性 attr("class","c1") 对class属性赋值 设置标签的所有样式 addClass("myClass")(不影响其他样式) class="c1 c2" removeClass("myClass") 移除样式 toggleClass("myClass") 如果存在样式则去掉样式,如果没有样式则添加样式 hasClass("myClass") 判断样式是否存在

13.链式变成 $(this).css("background-color","red").siblings().css("background-color","white");

以上这篇JQuery的常用选择器、过滤器、方法全面介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从JavaScript的函数重名看其初始化方式
Mar 08 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
Vue.js报错Failed to resolve filter问题的解决方法
May 25 #Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 #Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 #Javascript
详解Node.js模块间共享数据库连接的方法
May 24 #Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 #Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 #Javascript
实例解析jQuery中proxy()函数的用法
May 24 #Javascript
You might like
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php开发文档 会员收费1期
2012/08/14 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
javascript时区函数介绍
2012/09/14 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
python3 模拟登录v2ex实例讲解
2017/07/13 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
党员批评与自我批评
2014/02/12 职场文书
婚前保证书
2014/04/29 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
数学教师求职信范文
2015/03/20 职场文书
申请吧主发表的感言
2015/08/03 职场文书
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android