属性过滤常用javascript后去DOM对象

id是定位到的是单个element元素对象,其它的都是elements返回的是list对象

1.通过id获取

document.getElementById(“id”)

2.通过name获取

document.getElementsByName(“Name”)

返回的是list

3.通过标签名选取元素

document.getElementsByTagName(“tag”)

4.通过CLASS类选取元素

document.getElementsByClassName(“class”)

兼容性:IE8及其以下版本的浏览器未实现getElementsByClassName方法

5.通过CSS选择器选取元素

document.querySelectorAll(“css selector")

常用JQuery获取对象

jQuery的基本语法是:$(selector).action()selector即选择器.

jQuery选择器的分类

  jQuery的选择器基本可以分为四大类:

  基本选择器(basic)

  层次选择器(level)

  过滤选择器(filter)

  表单选择器(form)

  有些类别又可以分为具体的子类别.

*  匹配所有元素. 示例: $(“*")选取所有元素.

  #id 根据给定的id匹配元素(最多只返回一个元素). 示例: $("#lastname”)选取id="lastname"的元素.

  .class 根据给定的类名匹配元素. 示例:$(".intro”)选取所有class=“intro"的元素.

  element 根据给定的元素名匹配元素. 示例: $(“p")选取所有<p>元素.

  .class.class     示例: $(".intro.demo”)选取所有 class="intro"且class="demo”的元素.(交集).

  selector1, selector2, …, selectorN, 将每一个选择器匹配到的元素合并后一起返回.(并集).

除了#id选择器返回单个元素外,其他选择器返回的都是元素集合.

  这是因为HTML规范里面id应该是唯一的,所以重复id的元素没有被考虑.

  如果多个元素的id相同,取这个id也只能获取第一个元素.即获取的jQuery对象的length属性是1.

  如果要匹配的元素不存在,则都返回一个空的jQuery对象.

  基本选择器之间可以组合,用逗号分隔,结果取所有条件的结果的并集.

  当没有用逗号分隔时,应该是所有条件都满足的交集.

层次选择器

$(“ancestor descendant”) 选取ancestor元素里的所有descendant后代元素,包括直接子元素和更深嵌套的后代元素.

  例:$(“div span”)选取<div>里的所有的<span>元素.

  注意:选择器都是全页面扫描,返回一个集合,所有符合选择条件的元素都会被包括进去.所以多个<div>下面的<span>都会被选择.

  $(“parent>child”)选取parent元素下的child子元素,即只有直接子元素被选取.其他后代元素不包括.

  例:$(“div>span”)选取<div>元素下元素名是<span>的子元素.

  $(“prev+next”)选取紧接在prev元素后的next元素(同一层级).

  例:$(“.one+div”)选取class为one的下一个div元素.

  $(“prev~siblings”)选取prev元素之后的所有siblings元素(同一层级).

  例:$(“#two~div”)选取id为two的元素后面的所有<div>兄弟元素.

  等价方法:

  $(“prev+next”)等价于方法$(“prev”).next(“next”);选取prev元素之后紧接着的一个next元素.

  $(“prev~sublings”)等价于方法$(“prev”).nextAll(“sublings”),选取prev元素之后的所有同级的sublings元素.

  而$(“prev”).sublings(“next”)方法选取与prev同辈的所有next元素,与前后位置无关.

过滤选择器

  过滤选择器这个大类又分为六个子类:

  基本过滤;内容过滤;可见性过滤;属性过滤;子元素过滤;表单对象属性过滤.

gt和lt分别是greater than和less than.

内容过滤

可见性过滤

属性过滤

属性过滤是用方括号来标识的.

  注意多个属性过滤选择器连在一起的时候,取的是结果的交集.

子元素过滤

前面基本过滤选择器里面index是从0算起的,这里子元素过滤选择器的index是从1开始算起的.

表单对象属性过滤

表单选择器

js 或Jquery操作定位元素的更多相关文章

  1. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  2. 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  3. 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  4. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  5. 记住密码功能 JS结合JQuery 操作 Cookie 实现记住密码和用户名!

    // 记住密码功能 JS结合JQuery 操作 Cookie 实现记住密码和用户名! var username = document.getElementById("username&quo ...

  6. JS/JQuery操作DOM元素笔记

    原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...

  7. 用jQuery做定位元素,做自动化测试你尝试过吗

    一.前言 元素定位可以说是学自动化测试中必会技能之一,也可以说是通往自动化之路的开门钥匙. 就元素定位方法,除了我们常用并熟知的8种元素定位方法之外,还有一种定位方法可以说是一种特殊的存在,那就是JQ ...

  8. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  9. jQuery -- 光阴似箭(三):jQuery 操作 HTML 元素和属性

    jQuery -- 知识点回顾篇(三):jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容:  text().html() 以及 val() ...

随机推荐

  1. 资料共享-源代码-视频教程-PLC-OpenCV-C++-MFC

    资料共享-源代码-视频教程-PLC-OpenCV-C++-MFC 资料共享-源代码-视频教程 资料共享-源代码-视频教程-PLC-OpenCV-C++-MFC

  2. Linux性能优化思路

    性能测试的核心,就是找出性能瓶颈并进行性能优化,解决"慢"的问题,最终满足客户业务需求. [性能需求来源及性能问题现象] 性能需求的来源,主要分为以下几类: 项目组提出性能需求: ...

  3. Win10搭建VM12.0.1虚拟机,虚拟机网络同宿主机ping不通的解决办法

    准备系统学习Linux系统,在电脑搭建了一个CentOS虚拟机,希望能从宿主机连接至虚拟机. 尝试了很多办法,碰到各种坑,最后这个方法成功了! 分享给大家,希望有所帮助. 一.环境 1.宿主机:Win ...

  4. linux下的c语言编程学习笔记

    视频参看csdn学院王阳和下面的linux环境下c语言编程基础相当的经典,其中王阳的视频讲的很好,相当的经典 编译hellogcc.c需要依赖/home目录下的头文件 为了避免同一个文件被includ ...

  5. Windows安装 PyCharm

    PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动完成.单元测试.版本控制. ...

  6. day10,day11—基本数据类型语法

    一.整形 1. base #在16进制中的位置 num = "b" v = int(num, base=16) print(v) #11 2. bit_length() # 1 1 ...

  7. RocketMQ入门到入土(二)事务消息&顺序消息

    接上一篇:RocketMQ入门到入土(一)新手也能看懂的原理和实战! 一.事务消息的由来 1.案例 引用官方的购物案例: 小明购买一个100元的东西,账户扣款100元的同时需要保证在下游的积分系统给小 ...

  8. Python之浅谈绑定方法

    目录 绑定方法和非绑定方法 绑定方法 对象的绑定方法 类的绑定方法 非绑定方法 总结 绑定方法和非绑定方法 类中定义的方法大致可以分为两类:绑定方法和非绑定方法.其中绑定方法又可以分为绑定到对象的方法 ...

  9. 一周学会linux实战笔记

    山篇 思考------实践-------再思考-------再实践 1.高效愉快地学习 2.先建立一个整体框架,然后细节 3.用的什么再学习什么 4.先know how,再know why 5.计算机 ...

  10. css实现内容渐变隐藏效果,手机网页版知乎内容隐藏效果的实现

    看到一个需求,如下图,知乎手机网页版的一个视觉效果,对内容很长的部分有一个渐变的隐藏的效果,个人觉得这个设计还是很好的,符合手机大小的应用场景,没有一下子显示完全,可以很快的滑倒页面底部,一定程度上减 ...