jquery选择器之模糊匹配

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

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选择器之层级

[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 选择器，模糊匹配

按姓名匹配 1,name前缀为aa的所有div的jquery对象 $("div[name^='aa']"); 2,name后缀为aa的所有div的jquery对象 $("div[name$='aa']"); 3,name中包含aa的所有div的jquery对象 $("div[id*='aa']"); 以上返回的都是jquery的集合对象,因此都可以用 .each(function(i){ }); 进行遍历下面的格式可用于集合,也可以用于匹配单个…

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

测试代码: 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

测试代码: 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

测试代码: 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 实现前端模糊匹配与首字母搜索

实现效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>搜索框测试Demo</title> <style> .searchDiv {width: 400px;height: 400px;margin: 150px auto;} .on {font-size: 12px;font-weight: 700;color: red;…

jQuery选择器之样式

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