jquery name选择器

1、jQuery选择器 1.1、id选择器：$('#btnCheck') 1.2、标签选择器：$('div') 1.3、类选择器：$('.className') 1.4、标签+类选择器：$('div.className') 1.5、多条件选择器(组合、复合)：$('#id,target,.className') 1.6、层选择器 2、事件添加方法 $('选择器').事件名(function(){ }); 比如：$('#btnCheck').click(function(){ alert('Hello World'); }); 3、属性 3.1、hasClass()检查被选元素释放包含制定的class(返回true/false) 　　　　公式：$('选择器').hasClass('','') 　　　　获取选择器的标签元素内容：$('选择器').hasClass(class); 3.2、attr()属性值的设置与获取 公式：$('选择器').attr('属性名'，'值'); 设置选择器的属性值，改变div的高度：$('选择器').attr('height'，'180'); 获取选择器的属性值,获取div的高度：$('选择器').attr('height'); 　 　3.3、removeAttr()移除元素属性 　　　　公式：$('选择器').removerAttr('属性名') 　　　

对象之间的转换 DOM对象：直接使用JavaScript获取的节点对象 DOM对象和jQuery对象分别拥有一套独立的方法，不能混用 DOM对象转换成jQuery对象 $(DOM对象) jQuery对象转换成DOM对象 jQuery对象[index] jQuery对象.get(index) 基本选择器 标签选择器 $(“a”) ID选择器 $(“#id”) $(“p#id”) 类选择器 $(“.class”) $(“h2.class”) 通配选择器 $("*") 其他选择器 并集选择器 $ (“elem1,elem2,elem3”) 后代选择器 $(ul li) 父子选择器 $(ul>li) 后面第一个兄弟元素 prev + next 后面所有的兄弟元素 prev ~ next 举例 //只是第一行变颜色 $ ( "ul li:first" ) . css ( "background-color" , "red" ) ; $ ( "ul li" ) . first ( ) . css ( "background-color" , "red" ) ; //最后一行变颜色 $ ( "ul li:last" ) . css ( "background-color" , "green" ) ; $ ( "ul li" ) . last ( ) . css ( "background

一、原生JS选择器 JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll() A： getElementById(ID): 返回对指定ID的第一个对象的引用，如果在文档中查找一个特定的元素，最有效的方法是getElementById() B: getElementsByName(name): 返回文档中name属性为name值的元素，因为name属性值不是唯一的，所以查询到的结果有可能返回的是一个数组，而不是一个元素。 C: getElementsByTagName(tagname): 返回文档中指定标签的元素 D: getElementsByClassName():返回文档中所有指定类名的元素 E: querySelector():返回文档中匹配指定css选择器的第一个元素 F: querySelectorAll():返回文档中匹配指定css选择器的第一个元素 二、jQuery选择器 内容 基本选择器有ID选择器、类选择器、标签选择器、通用选择器，事件的添加方法如下： $(...).事件名(function() { }); 属性样式有： $(...).css("border",

一、原生JS选择器 # JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll() A： getElementById(ID): 返回对指定ID的第一个对象的引用，如果在文档中查找一个特定的元素，最有效的方法是getElementById() B: getElementsByName(name): 返回文档中name属性为name值的元素，因为name属性值不是唯一的，所以查询到的结果有可能返回的是一个数组，而不是一个元素。 C: getElementsByTagName(tagname): 返回文档中指定标签的元素 D: getElementsByClassName():返回文档中所有指定类名的元素 E: querySelector():返回文档中匹配指定css选择器的第一个元素 F: querySelectorAll():返回文档中匹配指定css选择器的第一个元素 二、jQuery选择器 # 内容 基本选择器有ID选择器、类选择器、标签选择器、通用选择器，事件的添加方法如下： $(...).事件名(function() { }); 属性样式有： $(...).css("border"

jQuery中选择器很强大，可以根据元素名称、ID、class等多种方式进行选择， <ul id="id"> <li> <div> nihao <div class="className"> china!!! </div> </div> </li> </ul> $("div"), 选则所有div元素 <div>nihao<div class="className">china!!!</div></div>, <div class="className">china!!!</div> $("#id"), 选择id="id"的元素 <ul id="id"><li><div>nihao<div class="className">china!!!</div></div></li></ul> $(".className"), 选择class="className"的所有元素 <div class="className">china!!!</div> 也可以多个方式一起使用，提高效率， $("#id div .className") , 选择id="id"的元素下面class="className"的所有div <div class="className">china!!!</div> 亦可以同时选取多个元素进行操作， $("#id , .className"), 选择id="id"的元素

基本选择器： $(”#myELement”) —— 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $(”div”) —— 选择所有的div标签元素，返回div元素数组 $(”.myClass”) —— 选择使用myClass类的css的所有元素 $(”*”) —— 选择文档中的所有的元素，以运用多种的选择方式进行联合选择：例如$(”#myELement,div,.myclass”) jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 <p> 元素。 $("p.intro") 选取所有 class="intro" 的 <p> 元素。 $("p#demo") 选取 id="demo" 的第一个 <p> 元素。 层叠选择器： $(”form input”) —— 选择所有的form元素中的input元素 $(”#main > *”) —— 选择id值为main的所有的子元素 $(”label + input”) —— 选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $(”#prev ~ div”) —— 该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 组选择器: 下面还是现做一个约定:把”标签名或#id名或.class名

　　jQuery选择器通过标签名、属性名或内容对DOM元素进行选择，而不用担心浏览器的兼容性。 1. 基本选择器 　　基本选择器是jQuery中使用最频繁的选择器，由元素ID、class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找。 选择器 功能 返回值 示例 * 匹配所有元素 元素集合 $("*") #id 根据指定的ID匹配一个元素，示例选取id="loading"的元素 单个元素 $("#loading") .class 根据指定的类名称匹配元素，示例选取class="readonly"的元素 元素集合 $(".readonly") .class.class 根据指定的类名称匹配元素，示例选取class="item selected"的元素 元素集合 $(".item.selected") element 根据指定的元素名匹配所有元素 元素集合 $("div") selector1,selector2,...selectorN 将每一个选择匹配到的元素合并后一起返回 元素集合 $("div,span") 　　 示例： <ul class="container"> <li>选项1</li> <li class="item selected">选项2</li> <li>选项3</li> <li>选项4</li> <li>选项5</li> </ul>

1.基本选择器 $("#id") //ID选择器 $("div") //元素选择器 $(".classname") //类选择器 $(".classname,.classname1,#id1") //组合选择器 2.层次选择器 $("#id>.classname ") //子元素选择器 $("#id .classname ") //后代元素选择器 $("#id + .classname ") //紧邻下一个元素选择器 $("#id ~ .classname ") //兄弟元素选择器 3.过滤选择器(重点) $("li:first") //第一个li $("li:last") //最后一个li $("li:even") //挑选下标为偶数的li $("li:odd") //挑选下标为奇数的li $("li:eq(4)") //下标等于 4 的li(第五个 li 元素) $("li:gt(2)") //下标大于 2 的li $("li:lt(2)") //下标小于 2 的li $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li 3.2内容过滤选择器 $("div:contains('Runob')") // 包含 Runob文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(selector)") /

使用JQuery时，你可以使用多种选择器，选择同一个元素，各种方法之间的性能是不一样的，有时候差异会特别大。 通常比较常用的选择器有以下几个： ID选择器 $("#id") 标签选择器 $("td") 类选择器 $(".target") 属性选择器 $("td[target='target']") 伪类选择器 $("td:hidden") 根据经验，我们应该知道这5种选择器的性能是依次下降的 测试html片段： <table width="98%" cellspacing="1" cellpadding="0" border="0" style="table-layout:fixed" id="mytable"> <tr> <td bgcolor="#aaaaaa" align="center" class="target" target="target" style="display:none;" id="target-td">e</td> </tr> </table> 测试结果 测试方案：对每个脚本执行1w次，统计3次运行结果的平均值 方案 IE6 IE7 IE8 IE9 chrome firefox opera safari $("#mytable td.target") 5150 5630 780 293 69 148 31 102 $("#mytable .target"

在前面一章我们已经点到过，很多的情况我们都是通过JQuery来对标签进行操作的，在这一章我们就来好好讲一讲这个JQuery。 JQuery初识 先看看JQuery的使用 JQuery的特点： 可以用及其简练的语言来做JS做的事情(write less,do more) JQuery就是一个JS文件,相当于一个Python的第三方模块，直接拿过来用就可以了（但是需要按照要求的规则）。但是原生的JS DOM是基础，其实还是通过这些基础来实现所有的操作。 我们要学习的，JQuery最常用的方向，也就是改变标签的属性、样式和事件相关的一系列操作。 JQuery的基础语法 JQuery的语法还是比较简单的，只有一句必须要掌握的 $(selector).action() 前面的selector就相当于一个标签选择器，后面的action就是相对应的操作 标签选择器 id选择器 $("#id") 标签选择器 $("tagName") class选择器 $(".className") 所有元素选择器 $("*") 选择器的配合使用 $("tagName.className") //两个条件一定不能加空格，要紧挨着，加了空格就有层级的效果，下面会讲到 组合选择器 同时符合多个条件 $("condition1,condition2...") 练习题 结合上面的各种基本组合器看看下面的方法应该怎么实现