JavaScript查找HTML节点,以及常用的jQuery选择器

  Document接口提供了查找节点的方法,这些方法都是在整个HTML文档中查找节点。

(1)document.getElementById("id");

通过ID获取html元素对象,ID号在html文档当中应该是唯一的。返回的是唯一element对象。并且所有浏览器都兼容。

(2)document.getElementsByTagName("tagName");

通过标签查找html对象,返回的是一个数组。可以根据标签出现的位置定位元素的对象。所有浏览器都兼容。

(3)document.getElementsByName("name");

通过name属性来定位html对象,这个方法返回的是一个数组,同样我们也可以根据html当中name的位置,进行对name的定位。IE系列不兼容。

  jQuery的选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

  1、基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。

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

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

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

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

  (5)$(".intro.demo")  所有 class="intro" 且 class="demo" 的元素

    2、层次选择器通过DOM元素之间的层次关系来获取特定的元素。

  (1)$("div span")选取<div>里面的所有<span>元素。(后代元素,包括子元素的子元素...)

  (2)$("div > span")选取<div>元素下元素名是<span>的所有子元素。

   3、过滤选择器的过滤规则与CSS中的伪类选择器语法相同。

  (1)$("[href=‘#‘]")  所有 href 属性的值等于 "#" 的元素

  (2)$("[href$=‘.jpg‘]")   所有 href 属性的值包含以 ".jpg" 结尾的元素

    4、表单选择器

  (1)$(":input")选取所有<input>、<textarea>、<select>、<button>元素。

  (2)$(":checkbox")   所有 type="checkbox" 的 <input> 元素

  (3)$(":radio")  所有 type="radio" 的 <input> 元素

时间: 2024-11-03 22:12:29

JavaScript查找HTML节点,以及常用的jQuery选择器的相关文章

常用jQuery选择器总结

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回.本文主要对常用的jQuery 选择器进行一个介绍及归类. jQuery 选择器大体上可分为 4 类:基本选择器.层次选择器.过滤选择器.表单选择器.其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象属

JQuery选择器和DOM的操作-入门学习

嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascript库都有着各自的优缺点,同时也有各自的支持者和反对者,但是从JQuery诞生那天起,JQuery已经从其他javascript库中脱颖而出,称为web开发人员的最佳选择,所以这也是我学习JQuery的原因.好啦,总结一下今天学习的JQuery的选择器和对DOM的初步操作. 一.JavaScrip

JQuery选择器学习系列 【赞】

从零开始学习jQuery (二) 万能的选择器 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery (八

jQuery笔记(一)jQuery选择器

一.前言 编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含test的<a>元素", 完成这些工作只需要编写一个jQuery选择器字符串. 学习jQuery选择器是学习jQuery最重要的一步. 二.Dom对象与jQuery对象的转换 (1) Dom转jQuery包装集 ($(Dom)) 如果要使用jQuery提供的函数,  就要首先构造jQuery包

JQuery的父、子、兄弟节点查找,节点的子节点循环

JQuery的父.子.兄弟节点查找,节点的子节点循环: http://www.cnblogs.com/mingforyou/p/4410054.html

Java节点操作(JS原生+JQuery)

Java节点操作(JS原生+JQuery) 节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点(HTML文档对象) 10.DTD(文档类型定义) box.nodeType       //返回值1,获得nodeType属性 box.childNodes            //获得全部子元素 //兼容性问题 注意:在chrome,IE9 IE10高版本的浏览器里面的回车都认为是节点,IE6,7

50个常用的JQuery代码

1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“selected”(.selected)的子节点. .filter(":not(:has(.selected))") 2. 如何重用元素搜索 var allItems = $("div.item"); var keepList = $("div#container

jquery】常用的jquery获取表单对象的属性与值

1 [jquery]常用的jquery获取表单对象的属性与值 2 3 4 1.JQuery的概念 5 6 7 8 9 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的JS效果. 10 11 12 2.JQuery实现了 代码的分离 13 14 不用再网页中加入如:onclick之类的事件来调用函数了,直接引入JQuery类库和自己编写的JQuery代码就可以了: 15 如: 16 $(function(){ 17 $("Ele

JavaScript之jQuery-2 jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

一.jQuery 选择器 jQuery 选择器简介 - jQuery 选择器类似于 CSS 选择(定位元素,施加样式),能够实现定位元素,施加行为 - 使用 jQuery 选择器能够将内容与行为分离 - 学会使用选择器是学习 jQuery 的基础 jQuery 选择器的优势 - 简洁的写法: - $()工厂函数在很多JavaScript类库中都被作为一个选择器函数使用 - 支持 CSS1 到 CSS3 选择器 - jQuery 选择器支持 CSS1.CSS2 和 CSS3 选择器,同时拥有少量独