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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
简单谈谈json跨域
Mar 13 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
js上传图片预览的实现方法
May 09 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
微信小程序实现点击页面出现文字
Sep 21 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的正则处理函数总结分析
2008/06/20 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
JS 实现完美include载入实现代码
2010/08/05 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
Python中元组,列表,字典的区别
2017/05/21 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
中学生获奖感言
2014/02/04 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
基于python实现银行管理系统
2021/04/20 Python
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers