jQuery表单选择器， jQuery操作DOM元素

**【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");