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 10件让人费解的事情
Feb 15 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
js中日期的加减法
2015/05/06 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Django发送html邮件的方法
2015/05/26 Python
详解Python编程中time模块的使用
2015/11/20 Python
Python sep参数使用方法详解
2020/02/12 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
中医专业应届生求职信
2013/11/17 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
体育运动会广播稿
2014/10/05 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle