jQuery选择器之动态列表显示Demo

显示效果: 之后全部展开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=…

jQuery选择器之基本选择器Demo

测试代码: 01-基本选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-…

jQuery选择器之属性选择器Demo

测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-…

jQuery选择器之层次选择器Demo

测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-…

jQuery选择器之内容过滤选择器Demo

测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt…

jQuery选择器之基本过滤选择器Demo

测试代码: 03-基本过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt…

jQuery选择器之表单选择器Demo

测试代码: 09-表单选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-…

jQuery选择器之表单对象属性过滤选择器Demo

测试代码: 08-表单对象属性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta…

jQuery选择器之子元素过滤选择器Demo

测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht…

jQuery选择器之可见性过滤选择器Demo

测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt…

jQuery选择器之全面总结

选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器.如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. jQuery中的选择器完全继承了CSS的风格,利用jQuery选择器,可以非常便捷和快速的找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器是否支持这一选择器. 为了便于记忆和学习,我们把jQuery选择器分为以下几类: 基本选择器层次选择器过滤选择器基本过滤选择器内容过滤选择器可见性过滤选择器属性过滤选…

jQuery选择器之id选择器

页面的任何操作都需要节点的支撑,开发者如果快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专注业务逻辑的编写. jQuery几乎支持主流的css1~css3选择器的写法,我们从最简单的也是最常用的开始学起. id选择器:一个用来查找的ID,即元素的id属性. $('#id') id选择器也是基本的选择器,jQuery内部使用的JavaScript函数document.getElementB…

jQuery选择器之表单元素选择器

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css&…

jquery选择器之模糊匹配

模糊匹配主要分为前导模糊匹配,后导模糊匹配和全文模糊匹配. 前导模糊匹配[^=] 例子:选择name前缀为aa的所有div的jQuery对象. $("div[name^='aa']") 后导模糊匹配[$=] 例子:选择name后缀为aa的所有div的jQuery对象. $("div[name$='aa']") 全文模糊匹配[*=] 例子:选择name中包含aa的所有div的jQuery对象. $("div[id*='aa']") 全词匹配[=]…

jquery选择器之获取父级元素、同级元素、子元素

一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素二.获取同级元素: 1.next([expr]): 获取指定元素的下一个同级元素 2.nextAll([expr]): 获取指定元素后边的所有同级元素 <p>Hello</p> <p>Hello Again</p> <div><span>And Again</span></div> var p_nex = $("p&q…

繁星——JQuery选择器之层级

[ancestor descendant] 在给定元素下匹配所有后代元素.这个选择器的使用概率相当之高,使用示例如下: //HTML代码: <div id='div01'> <input type="text" class='inp01' value=""/> <span><input type="text" class='inp02' value=""/></span&g…

jquery选择器之属性选择器

[attribute] 匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 [attribute^=value] 以开头 [attribute$=value] 以结尾 [attribue*=value] 给定的属性包含某些值的元素 [selector1][selector2][selectorN] 复合选择器,需要同是满足所有条件 HTML示例代码 <!DOCTYPE h…

jquery选择器之子元素

HTML代码: :first-child 匹配第一个子元素,每个父元素的第一个子元素 :last-child 匹配最后一个子元素,每个父元素的最后一个子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--HTML区域-…

jquery选择器之内容选择器

HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body>  <h1>第一个标题</h1> <div class="nav-2014">…

jquery选择器之基本筛选器

HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body>  <h1>第一个标题</h1> <div class="nav-2014">…

jquery选择器之层级选择器

HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="nav-2014"> <div class="w"…

Jquery选择器之基本选择器

id选择器共同点: text:代表标签之间的文本值返回值:均为列表根据给定的ID值匹配一个标签元素,如果id值中有元字符(如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~)则它必须被两个反斜杠转义:\\ 运行结果分别为:mydiv,点号标签选择器:根据给定的元素标签名匹配所有元素,其实就是标签选择器运行结果:notme class类选择器:类选择器,一个元素可以有多个类,只要有一个符合就能被匹配到. 运行结果: notme 冒号中括号点号所有…

jquery 选择器之children与find

children()和find() 两个用于向下遍历 DOM 树的 jQuery 方法 children() 方法返回被选元素的所有直接子元素. find() 方法返回被选元素的后代元素,一路向下直到最后一个后代.…

jquery选择器之层级过滤选择器

$("ancestor descendant"):选取parent元素后所有的child元素 $("parent > child"):选取parent元素后所有的直属child元素,何谓"直属",也就是第一级的意思了 $("prev + next"):prev和next是两个同级别的元素. 选中在prev元素后面的next元素 $("prev ~ siblings"):选择prev后面的根据sibli…

Jquery选择器之父节点的子节点

今天review代码,发现有哥们这么写 var span = $($("span"),$("#main")); 我百思不得其解,$(a,b)又好像在哪里见过,后来,想了一下,是这个意思,就是寻找#main下的span,选出Jquery父节点的子节点 $(childs,parent)…

jQuery选择器之全选择器(*选择器)

在css中,经常会在第一行写下这样一段样式: * { margin:; padding:; } 通配符*意味着给所有的元素设置默认的边距.jQuery中我们也可以通过传递*选择器来选中文档页面中的元素. 描述: $('*') 抛开jQuery,如果要获取文档中所有的元素,通过document.getElementsByTagName()中传递‘*’同样可以获取到. 不难发现,id,class,tag都可以通过原生的方法获取到对应的节点,但是我们还是要考虑到一个兼容性的问题,我们这里顺便提一下,比…

jQuery选择器之元素选择器

元素选择器:根据给定(html)标记名称选择所有的元素. 描述: $('element') 搜索指定元素标签名的所有节点,这是一个合集的操作.同样的也有原生方法getElementsByTagName()函数支持. 第一组:通过getElementsByTagName方法得到页面所有的<div>元素 var divs=document.getElementsByTagName('div'); divs是DOM合集对象,可以通过循环给每一个合集中的<div>元素赋予新的样式等. 第二…

jQuery选择器之样式

.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标记图片的地址. 操作特性的DOM方法主要有3个,getAttribute方法.setAttribute方法和removeAttribute方法,就算如此在实际操作中还是会存在很多问题,这里先不说.而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题 jQuery中用attr()方法来获…

jQuery选择器之表单对象属性筛选选择器

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css&…

jQuery选择器之子元素选择器

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css&…

【jQuery选择器之动态列表显示Demo】的更多相关文章