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中的对象和数组的应用技巧
Jan 07 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 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的开合式多级菜单程序
2006/10/09 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
js的对象与函数详解
2019/01/21 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
Python的多维空数组赋值方法
2018/04/13 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
Flask配置Cors跨域的实现
2019/07/12 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
中等生评语大全
2014/05/04 职场文书
装配出错检讨书
2014/09/23 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
模范教师事迹材料
2014/12/16 职场文书
圣诞节开幕词
2015/01/29 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python