**【jQuery表单选择器】** 1、:input表单选择器,返回全部的表单元素<input>、<textarea>、<select> 和 <button>选择的表单元素最广。如: $("#frmTest :input").addClass("bg_blue"); 2、:text表单文本选择器,获取表单中全部单行的文本输入框元素<input>如 $("#frmTest :text").addClass("bg_blue"); 3、:password表单密码选择器,获取表单中全部的密码输入文本框元素。如$("#frmTest :password").addClass("bg_red"); 4、:radio单选按钮选择器,获取表单中的全部单选按钮元素。$("#frmTest :radio").attr("disabled","true"); 5、:checkbox复选框选择器 6、:submit提交按钮选择器 7、:image图像域选择器,使用:image选择器只能获取<input>图像域,而不能获取<img>格式的图像元素。 8、:button表单按钮选择器 9、:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button> 10、:checked选中状态选择器 11、:selected选中状态选择器,获取<select>下拉列表框中全部处于选中状态的<option>选项元素 **【jQuery操作DOM元素】** 1、使用attr()方法控制元素的属性,设置或者返回元素的属性,通过attr()方法可以方便地获取元素中指定属性名称的内容,并将获取的内容通过html()方法显示在页面中。 2、操作元素的内容html() ,text()当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容,html()方法可以获取元素的HTML内容,原文中的格式代码也被一起获取,而text()方法只是获取元素中的文本内容,并不包含HTML格式代码, 3、操作元素的样式addClass()和css()前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。 $("#content").css("background","red");$("#content").addClass("blue white");$("#content").css({"background-color":"red","color":"#fff"});改变2个属性值时用{}括起来 4、移除属性和样式removeAttr(name)和removeClass(class)前者方法中参数表示移除属性名,后者方法中参数则表示移除的样式名$("#content").removeAttr("href");$("#content").removeClass("blue white"); 5、使用append()方法向元素内追加内容,被追加的content参数,可以是字符、HTML元素标记,还可以是一个返回字符串内容的函数。 function rethtml() { var $html = "<div id='test' title='hi'>我是调用函数创建的</div>" return $html; } $("body").append(rethtml()); 6、使用appendTo()方法向被选元素内插入内容,$(content).appendTo(selector)即把content内容插入selector元素内,默认是在尾部。 7、使用before()和after()在元素前后插入内容,$(selector).before(content)和$(selector).after(content),before()方法将HTML格式的内容插入到原有<span>元素内容之前,而并不仅是它的内部文本。 8、使用clone()方法复制元素,clone()方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性,title 9、替换内容replaceWith()和replaceAll(),$(selector).replaceWith(content)和$(content).replaceAll(selector) 10、wrap()和wrapInner()方法都可以进行元素的包裹,但前者用于包裹元素本身,后者则用于包裹元素中的内容<span class="red"></span> $(".red").warp("<div></div>");即<div><span class="red"></span></div> 11、使用each()方法遍历元素,$(selector).each(function(index))参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。 <span class="green">香蕉</span> <span class="green">桃子</span> <span class="green">葡萄</span> <span class="green">荔枝</span> <script type="text/javascript"> $("span").each(function (index) { if (index == 1) { $(this).attr("class", "red");//桃子的背景色是红色 } }); 12、使用remove()和empty()方法删除元素,remove()删除所选元素本身和子元素,empty()方法则只删除所选元素的子元素即清空内容,但背景等样式还在。$("span").empty();$("span").remove(".red");
jQuery表单选择器, jQuery操作DOM元素
2016-05-18 19:11:29 来源:慕课网