其他分享
首页 > 其他分享> > JQuery表单过滤选择器和JQuery_DOM内容操作

JQuery表单过滤选择器和JQuery_DOM内容操作

作者:互联网

JQuery表单过滤选择器

  1. 可用元素选择器
     语法: :enabled 获得可用元素
  2. 不可用元素选择器
     语法: :disabled 获得不可用元素
  3. 选中选择器
     语法: :checked 获得单选/复选框选中的元素
  4. 选中选择器
     语法: :selected 获得下拉框选中的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>表单属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
             div,span{
                width: 180px;
                height: 180px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div .mini{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div .mini01{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            #job{
                margin: 20px;
            }
            #edu{
                margin-top:-70px;
            }
            
     </style>
    <script type="text/javascript">
    
    $(function () {
        // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
        $("#b1").click(function () {
            $("input[type='text']:enabled").val("aaa");
        });
        // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
        $("#b2").click(function () {
            $("input[type='text']:disabled").val("aaa");
        });
        // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
        $("#b3").click(function () {
            alert($("input[type='checkbox']:checked").length);
        });
        // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
        $("#b4").click(function () {
            alert($("#job > option:selected").length);
        });
    });
    
    
    </script>
    </head>
     
    <body>
                
         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
         <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
         <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
         <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
 
         <br><br>
         
         <input type="text" value="不可用值1" disabled="disabled"> 
         <input type="text" value="可用值1" >
         <input type="text" value="不可用值2" disabled="disabled">
         <input type="text" value="可用值2" >
         
         <br><br>
         <input type="checkbox" name="items" value="美容" >美容
         <input type="checkbox" name="items" value="IT" >IT
         <input type="checkbox" name="items" value="金融" >金融
         <input type="checkbox" name="items" value="管理" >管理
         
         <br><br>
         
          <input type="radio" name="sex" value="男" >男
          <input type="radio" name="sex" value="女" >女
          
         <br><br>
         
          <select name="job" id="job" multiple="multiple" size=4>
              <option>程序员</option>
            <option>中级程序员</option>
            <option>高级程序员</option>
            <option>系统分析师</option>
          </select>
            
          <select name="edu" id="edu">
              <option>本科</option>
            <option>博士</option>
            <option>硕士</option>
            <option>大专</option>
          </select>
       
              
          <br/>
              
         <div id="two" class="mini" >
               id为two   class是 mini  div
               <div  class="mini" >class是 mini</div>
        </div>
        
         <div class="one" >
                 class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" >
               class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
        </div>
    </body>
</html>

 

JQuery_DOM内容操作

1. html(): 获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>
2. text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容
3. val(): 获取/设置元素的value属性值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script  src="../js/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                // 获取myinput 的value值
                // var value = $("#myinput").val();
                // alert(value)
                    //设置
                $("#myinput").val("李四");

                // 获取mydiv的标签体内容
                // var html = $("#mydiv").html();
                // alert(html);
                // $("#mydiv").html("aaaaaaa");

                // 获取mydiv文本内容
                /*var text = $("#mydiv").text();
                alert(text);*/
                $("#mydiv").text("bbb")

            });
        </script>
        
    </head>
    <body>
        <input id="myinput" type="text" name="username" value="张三" /><br />
        <div id="mydiv"><p><a href="#">标题标签</a></p></div>
    </body>
</html>

 

搜索

复制

标签:JQuery,DOM,text,mydiv,元素,选择器,font,class
来源: https://www.cnblogs.com/pengtianyang/p/16601449.html