首页 > 开发 > JQuery > 正文

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

2016-05-18 19:11:29  来源:慕课网
    **【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");
Copyright©2013-2016abenmao All Rights Reserved 京ICP备13035258号